mirror of
				https://gitee.com/vant-contrib/vant.git
				synced 2025-11-04 12:52:08 +08:00 
			
		
		
		
	docs: update some examples of button and cell
This commit is contained in:
		
							parent
							
								
									abdc38eeee
								
							
						
					
					
						commit
						1b18c15d28
					
				@ -109,12 +109,12 @@ Vue.use(Button);
 | 
			
		||||
<van-button color="linear-gradient(to right, #4bb0ff, #6149f6)">渐变色按钮</van-button>
 | 
			
		||||
```
 | 
			
		||||
 | 
			
		||||
### 块级元素按钮
 | 
			
		||||
### 块级元素
 | 
			
		||||
 | 
			
		||||
通过`block`属性可以设置按钮的元素类型
 | 
			
		||||
通过`block`属性可以将按钮的元素类型设置为块级元素
 | 
			
		||||
 | 
			
		||||
```html
 | 
			
		||||
<van-button type="primary" block>块级元素按钮</van-button>
 | 
			
		||||
<van-button type="primary" block>块级元素</van-button>
 | 
			
		||||
```
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
@ -104,7 +104,7 @@ export default {
 | 
			
		||||
      customColor: '自定义颜色',
 | 
			
		||||
      pure: '单色按钮',
 | 
			
		||||
      gradient: '渐变色按钮',
 | 
			
		||||
      blockElement: '块级元素按钮'
 | 
			
		||||
      blockElement: '块级元素'
 | 
			
		||||
    },
 | 
			
		||||
    'en-US': {
 | 
			
		||||
      type: 'Type',
 | 
			
		||||
@ -133,7 +133,7 @@ export default {
 | 
			
		||||
      customColor: 'Custom Color',
 | 
			
		||||
      pure: 'Pure',
 | 
			
		||||
      gradient: 'Gradient',
 | 
			
		||||
      blockElement: 'Display as a block element'
 | 
			
		||||
      blockElement: 'Block Element'
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
};
 | 
			
		||||
 | 
			
		||||
@ -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--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 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>
 | 
			
		||||
`;
 | 
			
		||||
 | 
			
		||||
@ -97,7 +97,7 @@ Vue.use(Cell).use(CellGroup);
 | 
			
		||||
### Vertical Center
 | 
			
		||||
 | 
			
		||||
```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
 | 
			
		||||
 | 
			
		||||
@ -104,10 +104,10 @@ Vue.use(Cell).use(CellGroup);
 | 
			
		||||
 | 
			
		||||
### 垂直居中
 | 
			
		||||
 | 
			
		||||
通过`center`属性在多行文本时控制左侧标题垂直居中
 | 
			
		||||
通过`center`属性可以让`Cell`的左右内容都垂直居中
 | 
			
		||||
 | 
			
		||||
```html
 | 
			
		||||
<van-cell center title="单元格" value="多行内容多行内容多行内容多行内容" />
 | 
			
		||||
<van-cell center title="单元格" value="内容" label="描述信息" />
 | 
			
		||||
```
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
@ -56,7 +56,7 @@
 | 
			
		||||
    </demo-block>
 | 
			
		||||
 | 
			
		||||
    <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-section>
 | 
			
		||||
</template>
 | 
			
		||||
@ -76,8 +76,7 @@ export default {
 | 
			
		||||
      urlRoute: 'URL 跳转',
 | 
			
		||||
      vueRoute: '路由跳转',
 | 
			
		||||
      useSlots: '使用插槽',
 | 
			
		||||
      verticalCenter: '垂直居中',
 | 
			
		||||
      multipleLinesContent: '多行内容多行内容多行内容多行内容',
 | 
			
		||||
      verticalCenter: '垂直居中'
 | 
			
		||||
    },
 | 
			
		||||
    'en-US': {
 | 
			
		||||
      cell: 'Cell title',
 | 
			
		||||
@ -91,8 +90,7 @@ export default {
 | 
			
		||||
      urlRoute: 'URL',
 | 
			
		||||
      vueRoute: 'Vue Router',
 | 
			
		||||
      useSlots: 'Use Slots',
 | 
			
		||||
      verticalCenter: 'Vertical center',
 | 
			
		||||
      multipleLinesContent: 'Multiple lines content, multiple lines content'
 | 
			
		||||
      verticalCenter: 'Vertical center'
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
};
 | 
			
		||||
 | 
			
		||||
@ -100,8 +100,10 @@ exports[`renders demo correctly 1`] = `
 | 
			
		||||
  </div>
 | 
			
		||||
  <div>
 | 
			
		||||
    <div class="van-cell van-cell--center">
 | 
			
		||||
      <div class="van-cell__title"><span>单元格</span></div>
 | 
			
		||||
      <div class="van-cell__value"><span>多行内容多行内容多行内容多行内容</span></div>
 | 
			
		||||
      <div class="van-cell__title"><span>单元格</span>
 | 
			
		||||
        <div class="van-cell__label">描述信息</div>
 | 
			
		||||
      </div>
 | 
			
		||||
      <div class="van-cell__value"><span>内容</span></div>
 | 
			
		||||
    </div>
 | 
			
		||||
  </div>
 | 
			
		||||
</div>
 | 
			
		||||
 | 
			
		||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user