Anchor

Aylantirish pozitsiyasini kuzatib, joriy bo'limni ajratib ko'rsatuvchi navigatsiya komponenti. Silliq aylantirish, ichki elementlar, gorizontal rejim va animatsiyalangan indikatorlarni qo'llab-quvvatlaydi.

Basic

Anchor qaysi bo'lim ko'rinayotganini kuzatadi va mos havolani ajratib ko'rsatadi. Havolani bosing va bo'limga silliq aylantirib o'ting.

Getting StartedInstallationConfigurationAdvanced Usage

Getting Started

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.

Installation

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.

Configuration

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.

Advanced Usage

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.

<script setup>
import { ref } from 'vue'
import { VxAnchor } from 'veloxui'

const items = [
  { href: '#getting-started', title: 'Getting Started' },
  { href: '#installation', title: 'Installation' },
  { href: '#configuration', title: 'Configuration' },
  { href: '#advanced', title: 'Advanced Usage' },
]
</script>

<template>
  <VxAnchor :items="items" />
</template>

Nested Items

Quyi bo'limlar uchun children dan foydalaning. Ichki havolalar avtomatik ravishda otstupga ega bo'ladi.

Getting StartedInstallation

npmyarn

ConfigurationAdvanced Usage

npm

npm install veloxui

yarn

yarn add veloxui

<VxAnchor :items="[
  { href: '#intro', title: 'Introduction' },
  { href: '#install', title: 'Installation', children: [
    { href: '#npm', title: 'npm' },
    { href: '#yarn', title: 'yarn' },
  ]},
  { href: '#config', title: 'Configuration' },
]" />

Marker Styles

line (standart), dot yoki none orasida tanlang.

Line

Getting StartedInstallationConfigurationAdvanced Usage

Dot

Getting StartedInstallationConfigurationAdvanced Usage

None

Getting StartedInstallationConfigurationAdvanced Usage

<VxAnchor :items="items" marker="line" />
<VxAnchor :items="items" marker="dot" />
<VxAnchor :items="items" marker="none" />

Horizontal

Gorizontal anchor paneli uchun direction="horizontal" ni o'rnating.

OverviewFeaturesPricingFAQ

Overview

Section content goes here.

Features

Section content goes here.

Pricing

Section content goes here.

FAQ

Section content goes here.

<VxAnchor :items="items" direction="horizontal" />

Horizontal Dot

OverviewFeaturesPricingFAQ

<VxAnchor :items="items" direction="horizontal" marker="dot" />

Disabled Items

Alohida elementlar o'chirib qo'yilishi mumkin.

AvailableAvailableLockedLocked

<VxAnchor :items="[
  { href: '#a', title: 'Available' },
  { href: '#b', title: 'Locked', disabled: true },
]" />

Hash Change

Standart bo'yicha havolani bosish URL hash ni yangilaydi. :hash-change="false" bilan o'chirib qo'ying.

<!-- URL hash o'zgarmaydi -->
<VxAnchor :items="items" :hash-change="false" />

Custom Target

CSS selector yoki HTMLElement ni uzatish orqali aylantirishni kuzatishni ma'lum konteyner bilan chegaralang.

<div id="scroll-area" style="height: 400px; overflow: auto;">
  <VxAnchor :items="items" target="#scroll-area" />
  <div id="section-1">...</div>
  <div id="section-2">...</div>
</div>

Custom Classes

root-class, item-class, active-class va indicator-class bilan stilni qayta aniqlang.

<VxAnchor
  :items="items"
  root-class="my-anchor"
  item-class="my-link"
  active-class="my-active"
  indicator-class="my-indicator"
/>

Custom Item Slot

Maxsus renderlash uchun #item slot idan foydalaning. item va active ni oladi.

<VxAnchor :items="items">
  <template #item="{ item, active }">
    <span :style="{ fontWeight: active ? 700 : 400 }">
      {{ active ? '> ' : '' }}{{ item.title }}
    </span>
  </template>
</VxAnchor>

With Affix

Aylantirish paytida anchor ni yopishqoq qilish uchun VxAffix bilan o'rang.

<VxAffix :offset="80" shadow>
  <VxAnchor :items="items" :offset="80" />
</VxAffix>

API

VxAnchor Props

Prop	Type	Default	Description
items	AnchorItem[]	[]	Anchor havola ta'riflari
v-model	string	—	Faol href
offset	number	0	Tepadan aylantirish offset i (px)
direction	'vertical' | 'horizontal'	'vertical'	Layout yo'nalishi
marker	'line' | 'dot' | 'none'	'line'	Faol indikator uslubi
target	string | HTMLElement	window	Aylantirish konteyneri
smooth	boolean	true	Silliq aylantirish animatsiyasi
hash-change	boolean	true	Bosilganda URL hash ni yangilash
indent	number	16	Ichki element otstupi (px)
root-class	string | string[] | object	—	Ildiz elementidagi class
item-class	string | string[] | object	—	Har bir havoladagi class
active-class	string | string[] | object	—	Faol havoladagi class
indicator-class	string | string[] | object	—	Indikatordagi class

AnchorItem

Property	Type	Required	Description
href	string	Yes	Maqsadli bo'lim id si (masalan, #section)
title	string	Yes	Ko'rsatiladigan matn
children	AnchorItem[]	No	Ichki pastki havolalar
disabled	boolean	No	Ushbu havolani o'chirib qo'yish

Events

Event	Payload	Description
update:modelValue	string	Faol href o'zgardi
change	string	Faol bo'lim o'zgardi
click	(item, event)	Havola bosildi

Slots

Slot	Props	Description
item	{ item: AnchorItem, active: boolean }	Maxsus havola kontenti

Exposed

Name	Type	Description
scrollTo(href)	function	Bo'limga dasturiy ravishda aylantirish
activeHref	Ref<string>	Joriy faol href