blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-09-20 02:29:59 +08:00
Code Issues Projects Releases Wiki Activity

docs: update some examples of button and cell

Browse Source
This commit is contained in:
linrz 2019-12-29 17:02:31 +08:00 committed by neverland
parent abdc38eeee
commit 1b18c15d28
7 changed files with 16 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/button/README.zh-CN.md
View File

@ -109,12 +109,12 @@ Vue.use(Button);
<van-button color="linear-gradient(to right, #4bb0ff, #6149f6)">渐变色按钮</van-button> <van-button color="linear-gradient(to right, #4bb0ff, #6149f6)">渐变色按钮</van-button>
``` ```
### 块级元素按钮 ### 块级元素
通过`block`属性可以设置按钮的元素类型 通过`block`属性可以将按钮的元素类型设置为块级元素
```html ```html
<van-button type="primary" block>块级元素按钮</van-button> <van-button type="primary" block>块级元素</van-button>
``` ```

4
src/button/demo/index.vue
View File

@ -104,7 +104,7 @@ export default {
customColor: '自定义颜色', customColor: '自定义颜色',
pure: '单色按钮', pure: '单色按钮',
gradient: '渐变色按钮', gradient: '渐变色按钮',
blockElement: '块级元素按钮' blockElement: '块级元素'
}, },
'en-US': { 'en-US': {
type: 'Type', type: 'Type',
@ -133,7 +133,7 @@ export default {
customColor: 'Custom Color', customColor: 'Custom Color',
pure: 'Pure', pure: 'Pure',
gradient: 'Gradient', gradient: 'Gradient',
blockElement: 'Display as a block element' blockElement: 'Block Element'
} }
} }
}; };

2
src/button/test/__snapshots__/demo.spec.js.snap
View File

@ -24,7 +24,7 @@ exports[`renders demo correctly 1`] = `
<div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">URL 跳转</span></button> <button class="van-button van-button--primary van-button--normal"><span class="van-button__text">路由跳转</span></button></div> <div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">URL 跳转</span></button> <button class="van-button van-button--primary van-button--normal"><span class="van-button__text">路由跳转</span></button></div>
<div><button class="van-button van-button--default van-button--normal" style="color: rgb(255, 255, 255); background: rgb(114, 50, 221); border-color: #7232dd;"><span class="van-button__text">单色按钮</span></button> <button class="van-button van-button--default van-button--normal van-button--plain" style="color: rgb(114, 50, 221); border-color: #7232dd;"><span class="van-button__text">单色按钮</span></button> <button class="van-button van-button--default van-button--normal" style="color: rgb(255, 255, 255); border: 0px;"><span class="van-button__text">渐变色按钮</span></button></div> <div><button class="van-button van-button--default van-button--normal" style="color: rgb(255, 255, 255); background: rgb(114, 50, 221); border-color: #7232dd;"><span class="van-button__text">单色按钮</span></button> <button class="van-button van-button--default van-button--normal van-button--plain" style="color: rgb(114, 50, 221); border-color: #7232dd;"><span class="van-button__text">单色按钮</span></button> <button class="van-button van-button--default van-button--normal" style="color: rgb(255, 255, 255); border: 0px;"><span class="van-button__text">渐变色按钮</span></button></div>
<div> <div>
<div class="demo-button-row"><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">普通按钮</span></button></div> <button class="van-button van-button--primary van-button--normal van-button--block"><span class="van-button__text">块级元素按钮</span></button> <div class="demo-button-row"><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">普通按钮</span></button></div> <button class="van-button van-button--primary van-button--normal van-button--block"><span class="van-button__text">块级元素</span></button>
</div> </div>
</div> </div>
`; `;

2
src/cell/README.md
View File

@ -97,7 +97,7 @@ Vue.use(Cell).use(CellGroup);
### Vertical Center ### Vertical Center
```html ```html
<van-cell center title="Cell title" value="Multiple lines content, multiple lines content" /> <van-cell center title="Cell title" value="Content" label="Description" />
``` ```
## API ## API

4
src/cell/README.zh-CN.md
View File

@ -104,10 +104,10 @@ Vue.use(Cell).use(CellGroup);
### 垂直居中 ### 垂直居中
通过`center`属性在多行文本时控制左侧标题垂直居中 通过`center`属性可以让`Cell`的左右内容都垂直居中
```html ```html
<van-cell center title="单元格" value="多行内容多行内容多行内容多行内容" /> <van-cell center title="单元格" value="内容" label="描述信息" />
``` ```

8
src/cell/demo/index.vue
View File

@ -56,7 +56,7 @@
</demo-block> </demo-block>
<demo-block :title="$t('verticalCenter')"> <demo-block :title="$t('verticalCenter')">
<van-cell center :title="$t('cell')" :value="$t('multipleLinesContent')" /> <van-cell center :title="$t('cell')" :value="$t('content')" :label="$t('desc')" />
</demo-block> </demo-block>
</demo-section> </demo-section>
</template> </template>
@ -76,8 +76,7 @@ export default {
urlRoute: 'URL 跳转', urlRoute: 'URL 跳转',
vueRoute: '路由跳转', vueRoute: '路由跳转',
useSlots: '使用插槽', useSlots: '使用插槽',
verticalCenter: '垂直居中', verticalCenter: '垂直居中'
multipleLinesContent: '多行内容多行内容多行内容多行内容',
}, },
'en-US': { 'en-US': {
cell: 'Cell title', cell: 'Cell title',
@ -91,8 +90,7 @@ export default {
urlRoute: 'URL', urlRoute: 'URL',
vueRoute: 'Vue Router', vueRoute: 'Vue Router',
useSlots: 'Use Slots', useSlots: 'Use Slots',
verticalCenter: 'Vertical center', verticalCenter: 'Vertical center'
multipleLinesContent: 'Multiple lines content, multiple lines content'
} }
} }
}; };

6
src/cell/test/__snapshots__/demo.spec.js.snap
View File

@ -100,8 +100,10 @@ exports[`renders demo correctly 1`] = `
</div> </div>
<div> <div>
<div class="van-cell van-cell--center"> <div class="van-cell van-cell--center">
<div class="van-cell__title"><span>单元格</span></div> <div class="van-cell__title"><span>单元格</span>
<div class="van-cell__value"><span>多行内容多行内容多行内容多行内容</span></div> <div class="van-cell__label">描述信息</div>
</div>
<div class="van-cell__value"><span>内容</span></div>
</div> </div>
</div> </div>
</div> </div>