Backtop
Bosilganda tepaga qaytib aylantiriladigan tugma. Ma'lum chegaradan o'tgandan keyin paydo bo'ladi. Progress halqasi, o'lchamlar, shakllar va boshqalarni qo'llab-quvvatlaydi.
Basic
Backtop tugmasini ko'rish uchun quti ichida pastga aylantiring.
Pastga aylantiring
1-qator — Lorem ipsum dolor sit amet consectetur.
2-qator — Lorem ipsum dolor sit amet consectetur.
3-qator — Lorem ipsum dolor sit amet consectetur.
4-qator — Lorem ipsum dolor sit amet consectetur.
5-qator — Lorem ipsum dolor sit amet consectetur.
6-qator — Lorem ipsum dolor sit amet consectetur.
7-qator — Lorem ipsum dolor sit amet consectetur.
8-qator — Lorem ipsum dolor sit amet consectetur.
9-qator — Lorem ipsum dolor sit amet consectetur.
10-qator — Lorem ipsum dolor sit amet consectetur.
11-qator — Lorem ipsum dolor sit amet consectetur.
12-qator — Lorem ipsum dolor sit amet consectetur.
13-qator — Lorem ipsum dolor sit amet consectetur.
14-qator — Lorem ipsum dolor sit amet consectetur.
15-qator — Lorem ipsum dolor sit amet consectetur.
16-qator — Lorem ipsum dolor sit amet consectetur.
17-qator — Lorem ipsum dolor sit amet consectetur.
18-qator — Lorem ipsum dolor sit amet consectetur.
19-qator — Lorem ipsum dolor sit amet consectetur.
20-qator — Lorem ipsum dolor sit amet consectetur.
vue
<VxBacktop />Progress Ring
show-progress bilan tugma atrofida doiraviy progress indikatorini ko'rsating.
Progress halqasining to'lishini ko'rish uchun aylantiring
1-qator — Aylantirgan sari halqaning to'lishini kuzating.
2-qator — Aylantirgan sari halqaning to'lishini kuzating.
3-qator — Aylantirgan sari halqaning to'lishini kuzating.
4-qator — Aylantirgan sari halqaning to'lishini kuzating.
5-qator — Aylantirgan sari halqaning to'lishini kuzating.
6-qator — Aylantirgan sari halqaning to'lishini kuzating.
7-qator — Aylantirgan sari halqaning to'lishini kuzating.
8-qator — Aylantirgan sari halqaning to'lishini kuzating.
9-qator — Aylantirgan sari halqaning to'lishini kuzating.
10-qator — Aylantirgan sari halqaning to'lishini kuzating.
11-qator — Aylantirgan sari halqaning to'lishini kuzating.
12-qator — Aylantirgan sari halqaning to'lishini kuzating.
13-qator — Aylantirgan sari halqaning to'lishini kuzating.
14-qator — Aylantirgan sari halqaning to'lishini kuzating.
15-qator — Aylantirgan sari halqaning to'lishini kuzating.
16-qator — Aylantirgan sari halqaning to'lishini kuzating.
17-qator — Aylantirgan sari halqaning to'lishini kuzating.
18-qator — Aylantirgan sari halqaning to'lishini kuzating.
19-qator — Aylantirgan sari halqaning to'lishini kuzating.
20-qator — Aylantirgan sari halqaning to'lishini kuzating.
vue
<VxBacktop show-progress />Scroll Percentage
Tugma ichida aylantirish foizini show-percent bilan ko'rsating. show-progress bilan yaxshi birlashadi.
Foiz + progress halqasi
1-qator — Foizni ko'rish uchun aylantiring.
2-qator — Foizni ko'rish uchun aylantiring.
3-qator — Foizni ko'rish uchun aylantiring.
4-qator — Foizni ko'rish uchun aylantiring.
5-qator — Foizni ko'rish uchun aylantiring.
6-qator — Foizni ko'rish uchun aylantiring.
7-qator — Foizni ko'rish uchun aylantiring.
8-qator — Foizni ko'rish uchun aylantiring.
9-qator — Foizni ko'rish uchun aylantiring.
10-qator — Foizni ko'rish uchun aylantiring.
11-qator — Foizni ko'rish uchun aylantiring.
12-qator — Foizni ko'rish uchun aylantiring.
13-qator — Foizni ko'rish uchun aylantiring.
14-qator — Foizni ko'rish uchun aylantiring.
15-qator — Foizni ko'rish uchun aylantiring.
16-qator — Foizni ko'rish uchun aylantiring.
17-qator — Foizni ko'rish uchun aylantiring.
18-qator — Foizni ko'rish uchun aylantiring.
19-qator — Foizni ko'rish uchun aylantiring.
20-qator — Foizni ko'rish uchun aylantiring.
vue
<VxBacktop show-progress show-percent />Sizes
Uchta o'lcham: small (32px), default (40px), large (48px).
small
1-qator
2-qator
3-qator
4-qator
5-qator
6-qator
7-qator
8-qator
9-qator
10-qator
11-qator
12-qator
13-qator
14-qator
15-qator
default
1-qator
2-qator
3-qator
4-qator
5-qator
6-qator
7-qator
8-qator
9-qator
10-qator
11-qator
12-qator
13-qator
14-qator
15-qator
large
1-qator
2-qator
3-qator
4-qator
5-qator
6-qator
7-qator
8-qator
9-qator
10-qator
11-qator
12-qator
13-qator
14-qator
15-qator
vue
<VxBacktop size="small" />
<VxBacktop size="default" />
<VxBacktop size="large" />Shape
circle (standart) va square (yumaloqlangan kvadrat) orasida tanlang.
circle
1-qator
2-qator
3-qator
4-qator
5-qator
6-qator
7-qator
8-qator
9-qator
10-qator
11-qator
12-qator
13-qator
14-qator
15-qator
square
1-qator
2-qator
3-qator
4-qator
5-qator
6-qator
7-qator
8-qator
9-qator
10-qator
11-qator
12-qator
13-qator
14-qator
15-qator
vue
<VxBacktop shape="circle" />
<VxBacktop shape="square" />Tooltip
tooltip prop i bilan tabiiy tooltip qo'shing.
Tooltip ni ko'rish uchun tugma ustiga hover qiling
1-qator — Shu yerda kontent.
2-qator — Shu yerda kontent.
3-qator — Shu yerda kontent.
4-qator — Shu yerda kontent.
5-qator — Shu yerda kontent.
6-qator — Shu yerda kontent.
7-qator — Shu yerda kontent.
8-qator — Shu yerda kontent.
9-qator — Shu yerda kontent.
10-qator — Shu yerda kontent.
11-qator — Shu yerda kontent.
12-qator — Shu yerda kontent.
13-qator — Shu yerda kontent.
14-qator — Shu yerda kontent.
15-qator — Shu yerda kontent.
16-qator — Shu yerda kontent.
17-qator — Shu yerda kontent.
18-qator — Shu yerda kontent.
19-qator — Shu yerda kontent.
20-qator — Shu yerda kontent.
vue
<VxBacktop tooltip="Tepaga qaytish" />Scroll To Element
scroll-to yordamida tepa o'rniga ma'lum elementga aylantiring.
Maqsadli bo'lim
1-qator — Pastga aylantiring, tugma shu yerga qaytib aylantiradi.
2-qator — Pastga aylantiring, tugma shu yerga qaytib aylantiradi.
3-qator — Pastga aylantiring, tugma shu yerga qaytib aylantiradi.
4-qator — Pastga aylantiring, tugma shu yerga qaytib aylantiradi.
5-qator — Pastga aylantiring, tugma shu yerga qaytib aylantiradi.
6-qator — Pastga aylantiring, tugma shu yerga qaytib aylantiradi.
7-qator — Pastga aylantiring, tugma shu yerga qaytib aylantiradi.
8-qator — Pastga aylantiring, tugma shu yerga qaytib aylantiradi.
9-qator — Pastga aylantiring, tugma shu yerga qaytib aylantiradi.
10-qator — Pastga aylantiring, tugma shu yerga qaytib aylantiradi.
11-qator — Pastga aylantiring, tugma shu yerga qaytib aylantiradi.
12-qator — Pastga aylantiring, tugma shu yerga qaytib aylantiradi.
13-qator — Pastga aylantiring, tugma shu yerga qaytib aylantiradi.
14-qator — Pastga aylantiring, tugma shu yerga qaytib aylantiradi.
15-qator — Pastga aylantiring, tugma shu yerga qaytib aylantiradi.
16-qator — Pastga aylantiring, tugma shu yerga qaytib aylantiradi.
17-qator — Pastga aylantiring, tugma shu yerga qaytib aylantiradi.
18-qator — Pastga aylantiring, tugma shu yerga qaytib aylantiradi.
19-qator — Pastga aylantiring, tugma shu yerga qaytib aylantiradi.
20-qator — Pastga aylantiring, tugma shu yerga qaytib aylantiradi.
vue
<VxBacktop scroll-to="#my-section" />Custom Content
Maxsus kontent uchun standart slot dan foydalaning. Slot percent ni oshkor qiladi.
Foiz bilan maxsus slot
1-qator — Kontent.
2-qator — Kontent.
3-qator — Kontent.
4-qator — Kontent.
5-qator — Kontent.
6-qator — Kontent.
7-qator — Kontent.
8-qator — Kontent.
9-qator — Kontent.
10-qator — Kontent.
11-qator — Kontent.
12-qator — Kontent.
13-qator — Kontent.
14-qator — Kontent.
15-qator — Kontent.
16-qator — Kontent.
17-qator — Kontent.
18-qator — Kontent.
19-qator — Kontent.
20-qator — Kontent.
vue
<VxBacktop show-progress size="large">
<template #default="{ percent }">
<span>{{ percent }}%</span>
</template>
</VxBacktop>Full Custom Button
Butun tugmani almashtirish uchun #button slot idan foydalaning. U { percent, visible, scroll, style } ni oladi — aylantirishni ishga tushirish uchun scroll($event) ni chaqiring, pozitsiyalash uchun style ni qo'llang.
#button slot orqali to'liq maxsus tugma
1-qator
2-qator
3-qator
4-qator
5-qator
6-qator
7-qator
8-qator
9-qator
10-qator
11-qator
12-qator
13-qator
14-qator
15-qator
16-qator
17-qator
18-qator
19-qator
20-qator
vue
<VxBacktop>
<template #button="{ percent, scroll, style }">
<div :style="style" @click="scroll">
Tepaga qaytish · {{ percent }}%
</div>
</template>
</VxBacktop>Disabled
Tugma ko'rinadi, ammo o'chirib qo'yilgan
1-qator
2-qator
3-qator
4-qator
5-qator
6-qator
7-qator
8-qator
9-qator
10-qator
11-qator
12-qator
13-qator
14-qator
15-qator
16-qator
17-qator
18-qator
19-qator
20-qator
vue
<VxBacktop disabled />Auto Hide
Bo'sh turish vaqti (ms) dan keyin yashirish. Tugma qayta aylantirganingizda paydo bo'ladi.
vue
<!-- 3 soniya aylantirmaslikdan keyin yashirish -->
<VxBacktop :auto-hide="3000" />API
VxBacktop Props
| Prop | Type | Default | Description |
|---|---|---|---|
target | string | HTMLElement | window | Aylantirish konteyneri |
visibility-height | number | 200 | Ko'rsatish uchun aylantirish chegarasi (px) |
right | number | 40 | O'ng offset (px) |
bottom | number | 40 | Pastki offset (px) |
smooth | boolean | true | Silliq aylantirish animatsiyasi |
size | 'small' | 'default' | 'large' | 'default' | Tugma o'lchami |
shape | 'circle' | 'square' | 'circle' | Tugma shakli |
show-progress | boolean | false | Doiraviy aylantirish progress halqasini ko'rsatish |
show-percent | boolean | false | Aylantirish foiz matnini ko'rsatish |
scroll-to | string | — | Tepa o'rniga aylantiriladigan CSS selector |
tooltip | string | — | Tabiiy tooltip matni |
disabled | boolean | false | Tugmani o'chirib qo'yish |
auto-hide | number | 0 | Bo'sh turgandan keyin avto-yashirish (ms), 0 = o'chirilgan |
root-class | string | string[] | object | — | Ildiz elementidagi class |
Events
| Event | Payload | Description |
|---|---|---|
click | MouseEvent | Tugma bosildi |
Slots
| Slot | Props | Description |
|---|---|---|
default | { percent: number } | Maxsus ichki kontent (ikonkani almashtiradi) |
button | { percent: number, visible: boolean, scroll: Function, style: object } | Butun tugmani almashtiradi. Pozitsiyalash uchun style dan foydalaning, aylantirishni ishga tushirish uchun scroll($event) ni chaqiring. |
Exposed
| Name | Type | Description |
|---|---|---|
visible | Ref<boolean> | Tugma ko'rinadimi |
scrollPercent | Ref<number> | Joriy aylantirish foizi (0–100) |