mirror of
https://gitee.com/wot-design-uni/wot-design-uni.git
synced 2025-12-06 09:08:51 +08:00
不如摸鱼去
GitHub
parent
8fa99167af
commit
e185a8b291
@ -270,6 +270,7 @@ function handlePopupShow() {
|
||||
| animated | 是否开启切换标签内容时的转场动画 | boolean | - | false | - |
|
||||
| duration | 切换动画过渡时间，单位毫秒 | number | - | 300 | - |
|
||||
| slidable | 是否开启滚动导航 | TabsSlidable | `always` | `auto` | 1.4.0 |
|
||||
| showScrollbar | 标签可滑动时是否显示滚动条 | boolean | - | false | $LOWEST_VERSION$ |
|
||||
| badge-props | 自定义徽标的属性，传入的对象会被透传给 [Badge 组件的 props](/component/badge#attributes) | BadgeProps | - | - | 1.4.0 |
|
||||
|
||||
## Tab Attributes
|
||||
|
||||
@ -199,4 +199,59 @@ When `slidable` is set to `always`, all tabs will be aligned to the left and can
|
||||
</wd-tab>
|
||||
</block>
|
||||
</wd-tabs>
|
||||
```
|
||||
```
|
||||
|
||||
## Tabs Attributes
|
||||
|
||||
| Parameter | Description | Type | Options | Default | Version |
|
||||
| -------------- | ---------------------------------------------------------------------------------- | --------------- | ------------ | ------- | ------- |
|
||||
| v-model | Binding value | string / number | - | - | - |
|
||||
| slidable-num | Threshold count of tabs to enable scrolling when `slidable` is `auto` | number | - | `6` | - |
|
||||
| map-num | Threshold count of tabs to show navigation map | number | - | `10` | - |
|
||||
| map-title | Title of the navigation map | string | - | - | 1.4.0 |
|
||||
| sticky | Enable sticky layout | boolean | - | `false` | - |
|
||||
| offset-top | Distance from the top when sticky | number | - | `0` | - |
|
||||
| swipeable | Enable gesture swipe | boolean | - | `false` | - |
|
||||
| autoLineWidth | Bottom line width follows text; invalid when `lineWidth` is specified | boolean | - | `false` | 1.4.0 |
|
||||
| lineWidth | Bottom line width, unit px | number | - | `19` | - |
|
||||
| lineHeight | Bottom line height, unit px | number | - | `3` | - |
|
||||
| color | Text color | string | - | - | - |
|
||||
| inactiveColor | Text color of inactive tabs | string | - | - | - |
|
||||
| animated | Enable transition animation when switching tab content | boolean | - | `false` | - |
|
||||
| duration | Transition duration in ms | number | - | `300` | - |
|
||||
| slidable | Enable scrollable navigation | TabsSlidable | `always` | `auto` | 1.4.0 |
|
||||
| showScrollbar | Whether to show scrollbar when tabs are slidable (nav) | boolean | - | `false` | $LOWEST_VERSION$ |
|
||||
| badge-props | Props passed to [Badge component props](/component/badge#attributes) | BadgeProps | - | - | 1.4.0 |
|
||||
|
||||
## Tab Attributes
|
||||
|
||||
| Parameter | Description | Type | Options | Default | Version |
|
||||
| --------- | --------------------------------------------------------------- | ------- | ------- | ------- | ------- |
|
||||
| name | Tab name | string | - | - | - |
|
||||
| title | Title | string | - | - | - |
|
||||
| disabled | Disable | boolean | - | `false` | - |
|
||||
| lazy | Lazy render; when `animated` is enabled this is always `false` | boolean | - | `true` | 1.4.0 |
|
||||
|
||||
## Tabs Events
|
||||
|
||||
| Event Name | Description | Parameters | Version |
|
||||
| ---------- | ----------------------- | --------------------------------------------------------------- | ------- |
|
||||
| change | Triggered when value changes | `event = { index, name }` | - |
|
||||
| click | Triggered when title is clicked | `event = { index, name }` | - |
|
||||
| disabled | Triggered when clicking a disabled title | `event = { index, name }` | - |
|
||||
|
||||
## Methods
|
||||
|
||||
Exposed methods
|
||||
|
||||
| Method | Description | Signature | Version |
|
||||
| ---------------- | --------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------- | ------- |
|
||||
| setActive | Set active tab; params: `value` active value, `init` initialized, `setScroll` set scroll-view | `(value: number \| string, init: boolean, setScroll: boolean) => void` | - |
|
||||
| scrollIntoView | Scroll the selected tab into view | `() => void` | - |
|
||||
| updateLineStyle | Update active underline style; `animation` determines whether to animate, default enabled | `(animation?: boolean) => void` | - |
|
||||
|
||||
## External Classes
|
||||
|
||||
| Class Name | Description | Version |
|
||||
| ------------ | ---------------- | ------- |
|
||||
| custom-class | Root node style | - |
|
||||
@ -66,6 +66,14 @@
|
||||
background: #fff;
|
||||
width: 100%;
|
||||
|
||||
@include when(hide-scrollbar) {
|
||||
::-webkit-scrollbar {
|
||||
width: 0;
|
||||
height: 0;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
}
|
||||
|
||||
@include e(nav) {
|
||||
left: 0;
|
||||
right: 0;
|
||||
@ -115,7 +123,7 @@
|
||||
@include lineEllipsis();
|
||||
}
|
||||
|
||||
@include edeep(nav-item-badge){
|
||||
@include edeep(nav-item-badge) {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
@ -80,7 +80,11 @@ export const tabsProps = {
|
||||
* 可选值：'auto' | 'always'
|
||||
* @default auto
|
||||
*/
|
||||
slidable: makeStringProp<TabsSlidable>('auto')
|
||||
slidable: makeStringProp<TabsSlidable>('auto'),
|
||||
/**
|
||||
* 标签可滑动时是否显示滚动条
|
||||
*/
|
||||
showScrollbar: makeBooleanProp(false)
|
||||
}
|
||||
|
||||
export type TabsExpose = {
|
||||
|
||||
@ -2,7 +2,9 @@
|
||||
<template v-if="sticky">
|
||||
<wd-sticky-box>
|
||||
<view
|
||||
:class="`wd-tabs ${customClass} ${innerSlidable ? 'is-slide' : ''} ${mapNum < children.length && mapNum !== 0 ? 'is-map' : ''}`"
|
||||
:class="`wd-tabs ${customClass} ${innerSlidable ? 'is-slide' : ''} ${mapNum < children.length && mapNum !== 0 ? 'is-map' : ''} ${
|
||||
!showScrollbar ? 'is-hide-scrollbar' : ''
|
||||
}`"
|
||||
:style="customStyle"
|
||||
>
|
||||
<wd-sticky :offset-top="offsetTop">
|
||||
@ -75,7 +77,11 @@
|
||||
</template>
|
||||
|
||||
<template v-else>
|
||||
<view :class="`wd-tabs ${customClass} ${innerSlidable ? 'is-slide' : ''} ${mapNum < children.length && mapNum !== 0 ? 'is-map' : ''}`">
|
||||
<view
|
||||
:class="`wd-tabs ${customClass} ${innerSlidable ? 'is-slide' : ''} ${mapNum < children.length && mapNum !== 0 ? 'is-map' : ''} ${
|
||||
!showScrollbar ? 'is-hide-scrollbar' : ''
|
||||
}`"
|
||||
>
|
||||
<view class="wd-tabs__nav">
|
||||
<view class="wd-tabs__nav--wrap">
|
||||
<scroll-view :scroll-x="innerSlidable" scroll-with-animation :scroll-left="state.scrollLeft">
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user