mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-05 19:41:42 +08:00
docs(NavBar): add disable button demo (#12270)
* docs(NavBar): add disable button demo * chore: fix bem
This commit is contained in:
neverland
GitHub
parent
ba98c6d689
commit
b2bb05b2f5
@ -51,8 +51,16 @@ export default defineComponent({
|
||||
const navBarRef = ref<HTMLElement>();
|
||||
const renderPlaceholder = usePlaceholder(navBarRef, bem);
|
||||
|
||||
const onClickLeft = (event: MouseEvent) => emit('clickLeft', event);
|
||||
const onClickRight = (event: MouseEvent) => emit('clickRight', event);
|
||||
const onClickLeft = (event: MouseEvent) => {
|
||||
if (!props.leftDisabled) {
|
||||
emit('clickLeft', event);
|
||||
}
|
||||
};
|
||||
const onClickRight = (event: MouseEvent) => {
|
||||
if (!props.rightDisabled) {
|
||||
emit('clickRight', event);
|
||||
}
|
||||
};
|
||||
|
||||
const renderLeft = () => {
|
||||
if (slots.left) {
|
||||
@ -96,13 +104,12 @@ export default defineComponent({
|
||||
{hasLeft && (
|
||||
<div
|
||||
class={[
|
||||
bem('left'),
|
||||
bem('left', { disabled: props.leftDisabled }),
|
||||
props.clickable && !props.leftDisabled
|
||||
? HAPTICS_FEEDBACK
|
||||
: '',
|
||||
props.leftDisabled ? bem('disabled') : '',
|
||||
]}
|
||||
onClick={!props.rightDisabled ? onClickLeft : () => {}}
|
||||
onClick={onClickLeft}
|
||||
>
|
||||
{renderLeft()}
|
||||
</div>
|
||||
@ -113,13 +120,12 @@ export default defineComponent({
|
||||
{hasRight && (
|
||||
<div
|
||||
class={[
|
||||
bem('right'),
|
||||
bem('right', { disabled: props.rightDisabled }),
|
||||
props.clickable && !props.rightDisabled
|
||||
? HAPTICS_FEEDBACK
|
||||
: '',
|
||||
props.rightDisabled ? bem('disabled') : '',
|
||||
]}
|
||||
onClick={!props.rightDisabled ? onClickRight : () => {}}
|
||||
onClick={onClickRight}
|
||||
>
|
||||
{renderRight()}
|
||||
</div>
|
||||
|
||||
@ -84,6 +84,21 @@ export default {
|
||||
</van-nav-bar>
|
||||
```
|
||||
|
||||
### Disable Button
|
||||
|
||||
Use the `left-disabled` or `right-disabled` props to disable the buttons on either side. The prop reduces the opacity of the button and makes it unclickable.
|
||||
|
||||
```html
|
||||
<van-nav-bar
|
||||
title="Title"
|
||||
left-text="Back"
|
||||
right-text="Button"
|
||||
left-arrow
|
||||
left-disabled
|
||||
right-disabled
|
||||
/>
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
### Props
|
||||
@ -93,8 +108,8 @@ export default {
|
||||
| title | Title | _string_ | `''` |
|
||||
| left-text | Left Text | _string_ | `''` |
|
||||
| right-text | Right Text | _string_ | `''` |
|
||||
| left-disabled | Left Disabled | _boolean_ | `false` |
|
||||
| right-disabled | Right Disabled | _boolean_ | `false` |
|
||||
| left-disabled `v4.6.8` | Whether to disable the left button, decrease opacity and make it unclickable | _boolean_ | `false` |
|
||||
| right-disabled `v4.6.8` | Whether to disable the right button, decrease opacity and make it unclickable | _boolean_ | `false` |
|
||||
| left-arrow | Whether to show left arrow | _boolean_ | `false` |
|
||||
| border | Whether to show bottom border | _boolean_ | `true` |
|
||||
| fixed | Whether to fixed top | _boolean_ | `false` |
|
||||
|
||||
@ -92,6 +92,21 @@ export default {
|
||||
</van-nav-bar>
|
||||
```
|
||||
|
||||
### 禁用按钮
|
||||
|
||||
通过 `left-disabled` 或 `right-disabled` 属性来禁用两侧的按钮。按钮被禁用时透明度降低，且无法点击。
|
||||
|
||||
```html
|
||||
<van-nav-bar
|
||||
title="标题"
|
||||
left-text="返回"
|
||||
right-text="按钮"
|
||||
left-arrow
|
||||
left-disabled
|
||||
right-disabled
|
||||
/>
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
### Props
|
||||
@ -101,8 +116,8 @@ export default {
|
||||
| title | 标题 | _string_ | `''` |
|
||||
| left-text | 左侧文案 | _string_ | `''` |
|
||||
| right-text | 右侧文案 | _string_ | `''` |
|
||||
| left-disabled | 左侧禁用 | _boolean_ | `false` |
|
||||
| right-disabled | 右侧禁用 | _boolean_ | `false` |
|
||||
| left-disabled `v4.6.8` | 是否禁用左侧按钮，禁用时透明度降低，且无法点击 | _boolean_ | `false` |
|
||||
| right-disabled `v4.6.8` | 是否禁用右侧按钮，禁用时透明度降低，且无法点击 | _boolean_ | `false` |
|
||||
| left-arrow | 是否显示左侧箭头 | _boolean_ | `false` |
|
||||
| border | 是否显示下边框 | _boolean_ | `true` |
|
||||
| fixed | 是否固定在顶部 | _boolean_ | `false` |
|
||||
|
||||
@ -9,11 +9,13 @@ const t = useTranslate({
|
||||
useSlot: '使用插槽',
|
||||
showBack: '返回上级',
|
||||
rightButton: '右侧按钮',
|
||||
disableButton: '禁用按钮',
|
||||
},
|
||||
'en-US': {
|
||||
useSlot: 'Use Slot',
|
||||
showBack: 'Back',
|
||||
rightButton: 'Right Button',
|
||||
disableButton: 'Disable Button',
|
||||
},
|
||||
});
|
||||
|
||||
@ -53,4 +55,17 @@ const onClickRight = () => showToast(t('button'));
|
||||
</template>
|
||||
</van-nav-bar>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="t('disableButton')">
|
||||
<van-nav-bar
|
||||
:title="t('title')"
|
||||
:left-text="t('back')"
|
||||
:right-text="t('button')"
|
||||
left-arrow
|
||||
left-disabled
|
||||
right-disabled
|
||||
@click-left="onClickLeft"
|
||||
@click-right="onClickRight"
|
||||
/>
|
||||
</demo-block>
|
||||
</template>
|
||||
|
||||
@ -63,6 +63,11 @@
|
||||
align-items: center;
|
||||
padding: 0 var(--van-padding-md);
|
||||
font-size: var(--van-font-size-md);
|
||||
|
||||
&--disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: var(--van-nav-bar-disabled-opacity);
|
||||
}
|
||||
}
|
||||
|
||||
&__left {
|
||||
@ -76,9 +81,4 @@
|
||||
&__text {
|
||||
color: var(--van-nav-bar-text-color);
|
||||
}
|
||||
|
||||
&__disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: var(--van-nav-bar-disabled-opacity);
|
||||
}
|
||||
}
|
||||
|
||||
@ -104,4 +104,34 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<!--[-->
|
||||
<div
|
||||
style
|
||||
class="van-nav-bar van-hairline--bottom"
|
||||
>
|
||||
<div class="van-nav-bar__content">
|
||||
<div class="van-nav-bar__left van-nav-bar__left--disabled">
|
||||
<!--[-->
|
||||
<i
|
||||
class="van-badge__wrapper van-icon van-icon-arrow-left van-nav-bar__arrow"
|
||||
style
|
||||
>
|
||||
<!--[-->
|
||||
</i>
|
||||
<span class="van-nav-bar__text">
|
||||
Back
|
||||
</span>
|
||||
</div>
|
||||
<div class="van-nav-bar__title van-ellipsis">
|
||||
Title
|
||||
</div>
|
||||
<div class="van-nav-bar__right van-nav-bar__right--disabled">
|
||||
<span class="van-nav-bar__text">
|
||||
Button
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@ -70,4 +70,25 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-nav-bar van-hairline--bottom">
|
||||
<div class="van-nav-bar__content">
|
||||
<div class="van-nav-bar__left van-nav-bar__left--disabled">
|
||||
<i class="van-badge__wrapper van-icon van-icon-arrow-left van-nav-bar__arrow">
|
||||
</i>
|
||||
<span class="van-nav-bar__text">
|
||||
Back
|
||||
</span>
|
||||
</div>
|
||||
<div class="van-nav-bar__title van-ellipsis">
|
||||
Title
|
||||
</div>
|
||||
<div class="van-nav-bar__right van-nav-bar__right--disabled">
|
||||
<span class="van-nav-bar__text">
|
||||
Button
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user