feat(SidebarItem): add disabled prop (#4325)

This commit is contained in:
neverland
2019-09-02 19:44:14 +08:00
committed by GitHub
parent 52f3de8cf8
commit 329e751351
8 changed files with 144 additions and 73 deletions

View File

@@ -1,29 +1,33 @@
<template>
<demo-section>
<demo-block :title="$t('basicUsage')">
<van-sidebar v-model="activeKey1">
<van-sidebar-item :title="$t('title')" />
<van-sidebar-item :title="$t('title')" />
<van-sidebar-item :title="$t('title')" />
</van-sidebar>
</demo-block>
<van-grid :column-num="2" :border="false">
<van-grid-item>
<h3 class="demo-sidebar-title">{{ $t('basicUsage') }}</h3>
<van-sidebar v-model="activeKey1">
<van-sidebar-item :title="$t('title')" />
<van-sidebar-item :title="$t('title')" />
<van-sidebar-item :title="$t('title')" />
</van-sidebar>
</van-grid-item>
<demo-block :title="$t('showBadge')">
<van-sidebar v-model="activeKey2">
<van-sidebar-item
:title="$t('title')"
info="8"
/>
<van-sidebar-item
:title="$t('title')"
info="99"
/>
<van-sidebar-item
:title="$t('title')"
info="99+"
/>
</van-sidebar>
</demo-block>
<van-grid-item>
<h3 class="demo-sidebar-title">{{ $t('showBadge') }}</h3>
<van-sidebar v-model="activeKey2">
<van-sidebar-item :title="$t('title')" info="8" />
<van-sidebar-item :title="$t('title')" info="99" />
<van-sidebar-item :title="$t('title')" info="99+" />
</van-sidebar>
</van-grid-item>
<van-grid-item>
<h3 class="demo-sidebar-title">{{ $t('disabled') }}</h3>
<van-sidebar v-model="activeKey3">
<van-sidebar-item :title="$t('title')" />
<van-sidebar-item :title="$t('title')" disabled />
<van-sidebar-item :title="$t('title')" />
</van-sidebar>
</van-grid-item>
</van-grid>
</demo-section>
</template>
@@ -31,18 +35,21 @@
export default {
i18n: {
'zh-CN': {
title: '标签名',
showBadge: '显示徽标'
title: '标签名',
showBadge: '显示徽标',
disabled: '禁用选项'
},
'en-US': {
showBadge: 'Show Badge'
showBadge: 'Show Badge',
disabled: 'Disabled'
}
},
data() {
return {
activeKey1: 0,
activeKey2: 0
activeKey2: 0,
activeKey3: 0
};
}
};
@@ -57,5 +64,12 @@ export default {
.van-sidebar {
margin-left: @padding-md;
}
&-title {
margin-bottom: 16px;
color: @gray-dark;
font-weight: normal;
font-size: 14px;
}
}
</style>