mirror of
https://github.com/youzan/vant.git
synced 2025-10-19 01:54:48 +00:00
@@ -4,10 +4,16 @@
|
||||
<van-cell title="单元格2" value="单元格2内容"></van-cell>
|
||||
</van-cell-group>
|
||||
|
||||
</example-block><example-block title="只设置value">
|
||||
<van-cell-group>
|
||||
<van-cell value="单元格1内容"></van-cell>
|
||||
<van-cell value="单元格2内容"></van-cell>
|
||||
</van-cell-group>
|
||||
|
||||
</example-block><example-block title="标题带描述信息">
|
||||
<van-cell-group>
|
||||
<van-cell title="单元格1" label="描述信息" is-link="" url="javascript:void(0)" @click="handleClick"></van-cell>
|
||||
<van-cell title="单元格2" label="描述信息"></van-cell>
|
||||
<van-cell title="单元格1" label="描述信息" value="查看专栏" is-link="" url="javascript:void(0)" @click="handleClick"></van-cell>
|
||||
<van-cell title="单元格2" label="描述信息" value="查看专栏" is-link=""></van-cell>
|
||||
</van-cell-group>
|
||||
|
||||
</example-block><example-block title="带图标">
|
||||
@@ -31,6 +37,11 @@
|
||||
</template>
|
||||
</van-cell>
|
||||
<van-cell title="线下门店" icon="location" url="http://youzan.com" is-link=""></van-cell>
|
||||
<van-cell title="其他">
|
||||
<template slot="right-icon">
|
||||
<van-icon name="passed" class="van-cell__right-icon" style="font-size: 16px;"></van-icon>
|
||||
</template>
|
||||
</van-cell>
|
||||
</van-cell-group>
|
||||
|
||||
</example-block></section></template>
|
||||
|
@@ -1,138 +1,128 @@
|
||||
<template><section class="demo-icon"><h1 class="demo-title">Icon 图标</h1><example-block title="所有Icon">
|
||||
<van-row>
|
||||
<van-col span="8">
|
||||
<van-icon name="qr-invalid"></van-icon>
|
||||
<span>qr-invalid</span>
|
||||
<van-icon name="qr-invalid"></van-icon>
|
||||
<span>qr-invalid</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="qr"></van-icon>
|
||||
<span>qr</span>
|
||||
<van-icon name="qr"></van-icon>
|
||||
<span>qr</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="exchange"></van-icon>
|
||||
<span>exchange</span>
|
||||
</van-col>
|
||||
</van-row>
|
||||
<van-row>
|
||||
<van-col span="8">
|
||||
<van-icon name="close"></van-icon>
|
||||
<span>close</span>
|
||||
<van-icon name="exchange"></van-icon>
|
||||
<span>exchange</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="location"></van-icon>
|
||||
<span>location</span>
|
||||
<van-icon name="close"></van-icon>
|
||||
<span>close</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="upgrade"></van-icon>
|
||||
<span>upgrade</span>
|
||||
</van-col>
|
||||
</van-row>
|
||||
<van-row>
|
||||
<van-col span="8">
|
||||
<van-icon name="check"></van-icon>
|
||||
<span>check</span>
|
||||
<van-icon name="location"></van-icon>
|
||||
<span>location</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="checked"></van-icon>
|
||||
<span>checked</span>
|
||||
<van-icon name="upgrade"></van-icon>
|
||||
<span>upgrade</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="like-o"></van-icon>
|
||||
<span>like-o</span>
|
||||
</van-col>
|
||||
</van-row>
|
||||
<van-row>
|
||||
<van-col span="8">
|
||||
<van-icon name="like" style="color: red;"></van-icon>
|
||||
<span>like</span>
|
||||
<van-icon name="check"></van-icon>
|
||||
<span>check</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="chat"></van-icon>
|
||||
<span>chat</span>
|
||||
<van-icon name="checked"></van-icon>
|
||||
<span>checked</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="shop"></van-icon>
|
||||
<span>shop</span>
|
||||
</van-col>
|
||||
</van-row>
|
||||
<van-row>
|
||||
<van-col span="8">
|
||||
<van-icon name="photograph"></van-icon>
|
||||
<span>photograph</span>
|
||||
<van-icon name="like-o"></van-icon>
|
||||
<span>like-o</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="add"></van-icon>
|
||||
<span>add</span>
|
||||
<van-icon name="like" style="color: red;"></van-icon>
|
||||
<span>like</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="add2"></van-icon>
|
||||
<span>add2</span>
|
||||
</van-col>
|
||||
</van-row>
|
||||
<van-row>
|
||||
<van-col span="8">
|
||||
<van-icon name="photo"></van-icon>
|
||||
<span>photo</span>
|
||||
<van-icon name="chat"></van-icon>
|
||||
<span>chat</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="logistics"></van-icon>
|
||||
<span>logistics</span>
|
||||
<van-icon name="shop"></van-icon>
|
||||
<span>shop</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="edit"></van-icon>
|
||||
<span>edit</span>
|
||||
</van-col>
|
||||
</van-row>
|
||||
<van-row>
|
||||
<van-col span="8">
|
||||
<van-icon name="passed"></van-icon>
|
||||
<span>passed</span>
|
||||
<van-icon name="photograph"></van-icon>
|
||||
<span>photograph</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="cart"></van-icon>
|
||||
<span>cart</span>
|
||||
<van-icon name="add"></van-icon>
|
||||
<span>add</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="arrow"></van-icon>
|
||||
<span>arrow</span>
|
||||
</van-col>
|
||||
</van-row>
|
||||
<van-row>
|
||||
<van-col span="8">
|
||||
<van-icon name="gift"></van-icon>
|
||||
<span>gift</span>
|
||||
<van-icon name="add2"></van-icon>
|
||||
<span>add2</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="search"></van-icon>
|
||||
<span>search</span>
|
||||
<van-icon name="photo"></van-icon>
|
||||
<span>photo</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="clear"></van-icon>
|
||||
<span>clear</span>
|
||||
</van-col>
|
||||
</van-row>
|
||||
<van-row>
|
||||
<van-col span="8">
|
||||
<van-icon name="success"></van-icon>
|
||||
<span>success</span>
|
||||
<van-icon name="logistics"></van-icon>
|
||||
<span>logistics</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="fail"></van-icon>
|
||||
<span>fail</span>
|
||||
<van-icon name="edit"></van-icon>
|
||||
<span>edit</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="contact"></van-icon>
|
||||
<span>contact</span>
|
||||
</van-col>
|
||||
</van-row>
|
||||
<van-row>
|
||||
<van-col span="8">
|
||||
<van-icon name="wechat"></van-icon>
|
||||
<span>wechat</span>
|
||||
<van-icon name="passed"></van-icon>
|
||||
<span>passed</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="alipay"></van-icon>
|
||||
<span>alipay</span>
|
||||
<van-icon name="cart"></van-icon>
|
||||
<span>cart</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="arrow"></van-icon>
|
||||
<span>arrow</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="gift"></van-icon>
|
||||
<span>gift</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="search"></van-icon>
|
||||
<span>search</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="clear"></van-icon>
|
||||
<span>clear</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="success"></van-icon>
|
||||
<span>success</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="fail"></van-icon>
|
||||
<span>fail</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="contact"></van-icon>
|
||||
<span>contact</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="wechat"></van-icon>
|
||||
<span>wechat</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="alipay"></van-icon>
|
||||
<span>alipay</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="password-view"></van-icon>
|
||||
<span>password-view</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="password-not-view"></van-icon>
|
||||
<span>password-not-view</span>
|
||||
</van-col>
|
||||
</van-row>
|
||||
|
||||
|
@@ -25,7 +25,7 @@
|
||||
</van-row>
|
||||
|
||||
</example-block><example-block title="在列元素之间增加间距">
|
||||
<van-row gutter="10">
|
||||
<van-row gutter="20">
|
||||
<van-col span="8">
|
||||
<div class="gray">span: 8</div>
|
||||
</van-col>
|
||||
|
@@ -18,6 +18,16 @@
|
||||
<van-step>交易完成</van-step>
|
||||
</van-steps>
|
||||
|
||||
</example-block><example-block title="高级用法">
|
||||
<van-steps :active="active" title="等待商家发货">
|
||||
<van-icon slot="icon" name="like"></van-icon>
|
||||
<p slot="message-extra">流程</p>
|
||||
<van-step>买家下单</van-step>
|
||||
<van-step>商家接单</van-step>
|
||||
<van-step>买家提货</van-step>
|
||||
<van-step>交易完成</van-step>
|
||||
</van-steps>
|
||||
|
||||
</example-block></section></template>
|
||||
<style>
|
||||
@component-namespace demo {
|
||||
|
@@ -16,9 +16,16 @@
|
||||
<van-tab title="选项五">内容五</van-tab>
|
||||
</van-tabs>
|
||||
|
||||
</example-block><example-block title="设置切换tab的动画时间">
|
||||
<van-tabs :duration="0.6">
|
||||
<van-tab title="选项一">内容一</van-tab>
|
||||
<van-tab title="选项二">内容二</van-tab>
|
||||
<van-tab title="选项三">内容三</van-tab>
|
||||
</van-tabs>
|
||||
|
||||
</example-block><example-block title="禁用tab">
|
||||
<van-tabs>
|
||||
<van-tab title="选项一">内容一</van-tab>
|
||||
<van-tab title="选项三">内容一</van-tab>
|
||||
<van-tab title="选项二" disabled @disabled="popalert">内容二</van-tab>
|
||||
<van-tab title="选项三">内容三</van-tab>
|
||||
<van-tab title="选项四">内容四</van-tab>
|
||||
|
@@ -1,17 +1,20 @@
|
||||
<template><section class="demo-tag"><h1 class="demo-title">Tag 标记</h1><example-block title="基础用法">
|
||||
<div class="tags-container">
|
||||
<van-tag>返现</van-tag>
|
||||
</div>
|
||||
<div class="tags-container">
|
||||
<van-tag type="danger">返现</van-tag>
|
||||
<van-tag type="success">四字标签</van-tag>
|
||||
<van-tag type="primary">一</van-tag>
|
||||
</div>
|
||||
|
||||
</example-block><example-block title="高级用法">
|
||||
<div class="tags-container">
|
||||
<van-tag>返现</van-tag>
|
||||
<van-tag plain="">返现</van-tag>
|
||||
</div>
|
||||
<div class="tags-container">
|
||||
<van-tag type="danger">返现</van-tag>
|
||||
<van-tag type="danger">四字标签</van-tag>
|
||||
<van-tag type="danger">一</van-tag>
|
||||
</div>
|
||||
|
||||
</example-block><example-block title="高级用法">
|
||||
<div class="tags-container">
|
||||
<van-tag type="danger">返现</van-tag>
|
||||
<van-tag plain="" type="danger">返现</van-tag>
|
||||
</div>
|
||||
<div class="tags-container">
|
||||
@@ -22,9 +25,6 @@
|
||||
<van-tag type="success">返现</van-tag>
|
||||
<van-tag plain="" type="success">返现</van-tag>
|
||||
</div>
|
||||
<div class="tags-container">
|
||||
<van-tag type="danger" mark="">返现</van-tag>
|
||||
</div>
|
||||
|
||||
</example-block></section></template>
|
||||
<style>
|
||||
|
@@ -57,138 +57,128 @@ export default {
|
||||
```html
|
||||
<van-row>
|
||||
<van-col span="8">
|
||||
<van-icon name="qr-invalid"></van-icon>
|
||||
<span>qr-invalid</span>
|
||||
<van-icon name="qr-invalid"></van-icon>
|
||||
<span>qr-invalid</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="qr"></van-icon>
|
||||
<span>qr</span>
|
||||
<van-icon name="qr"></van-icon>
|
||||
<span>qr</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="exchange"></van-icon>
|
||||
<span>exchange</span>
|
||||
</van-col>
|
||||
</van-row>
|
||||
<van-row>
|
||||
<van-col span="8">
|
||||
<van-icon name="close"></van-icon>
|
||||
<span>close</span>
|
||||
<van-icon name="exchange"></van-icon>
|
||||
<span>exchange</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="location"></van-icon>
|
||||
<span>location</span>
|
||||
<van-icon name="close"></van-icon>
|
||||
<span>close</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="upgrade"></van-icon>
|
||||
<span>upgrade</span>
|
||||
</van-col>
|
||||
</van-row>
|
||||
<van-row>
|
||||
<van-col span="8">
|
||||
<van-icon name="check"></van-icon>
|
||||
<span>check</span>
|
||||
<van-icon name="location"></van-icon>
|
||||
<span>location</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="checked"></van-icon>
|
||||
<span>checked</span>
|
||||
<van-icon name="upgrade"></van-icon>
|
||||
<span>upgrade</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="like-o"></van-icon>
|
||||
<span>like-o</span>
|
||||
</van-col>
|
||||
</van-row>
|
||||
<van-row>
|
||||
<van-col span="8">
|
||||
<van-icon name="like" style="color: red;"></van-icon>
|
||||
<span>like</span>
|
||||
<van-icon name="check"></van-icon>
|
||||
<span>check</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="chat"></van-icon>
|
||||
<span>chat</span>
|
||||
<van-icon name="checked"></van-icon>
|
||||
<span>checked</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="shop"></van-icon>
|
||||
<span>shop</span>
|
||||
</van-col>
|
||||
</van-row>
|
||||
<van-row>
|
||||
<van-col span="8">
|
||||
<van-icon name="photograph"></van-icon>
|
||||
<span>photograph</span>
|
||||
<van-icon name="like-o"></van-icon>
|
||||
<span>like-o</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="add"></van-icon>
|
||||
<span>add</span>
|
||||
<van-icon name="like" style="color: red;"></van-icon>
|
||||
<span>like</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="add2"></van-icon>
|
||||
<span>add2</span>
|
||||
</van-col>
|
||||
</van-row>
|
||||
<van-row>
|
||||
<van-col span="8">
|
||||
<van-icon name="photo"></van-icon>
|
||||
<span>photo</span>
|
||||
<van-icon name="chat"></van-icon>
|
||||
<span>chat</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="logistics"></van-icon>
|
||||
<span>logistics</span>
|
||||
<van-icon name="shop"></van-icon>
|
||||
<span>shop</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="edit"></van-icon>
|
||||
<span>edit</span>
|
||||
</van-col>
|
||||
</van-row>
|
||||
<van-row>
|
||||
<van-col span="8">
|
||||
<van-icon name="passed"></van-icon>
|
||||
<span>passed</span>
|
||||
<van-icon name="photograph"></van-icon>
|
||||
<span>photograph</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="cart"></van-icon>
|
||||
<span>cart</span>
|
||||
<van-icon name="add"></van-icon>
|
||||
<span>add</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="arrow"></van-icon>
|
||||
<span>arrow</span>
|
||||
</van-col>
|
||||
</van-row>
|
||||
<van-row>
|
||||
<van-col span="8">
|
||||
<van-icon name="gift"></van-icon>
|
||||
<span>gift</span>
|
||||
<van-icon name="add2"></van-icon>
|
||||
<span>add2</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="search"></van-icon>
|
||||
<span>search</span>
|
||||
<van-icon name="photo"></van-icon>
|
||||
<span>photo</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="clear"></van-icon>
|
||||
<span>clear</span>
|
||||
</van-col>
|
||||
</van-row>
|
||||
<van-row>
|
||||
<van-col span="8">
|
||||
<van-icon name="success"></van-icon>
|
||||
<span>success</span>
|
||||
<van-icon name="logistics"></van-icon>
|
||||
<span>logistics</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="fail"></van-icon>
|
||||
<span>fail</span>
|
||||
<van-icon name="edit"></van-icon>
|
||||
<span>edit</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="contact"></van-icon>
|
||||
<span>contact</span>
|
||||
</van-col>
|
||||
</van-row>
|
||||
<van-row>
|
||||
<van-col span="8">
|
||||
<van-icon name="wechat"></van-icon>
|
||||
<span>wechat</span>
|
||||
<van-icon name="passed"></van-icon>
|
||||
<span>passed</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="alipay"></van-icon>
|
||||
<span>alipay</span>
|
||||
<van-icon name="cart"></van-icon>
|
||||
<span>cart</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="arrow"></van-icon>
|
||||
<span>arrow</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="gift"></van-icon>
|
||||
<span>gift</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="search"></van-icon>
|
||||
<span>search</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="clear"></van-icon>
|
||||
<span>clear</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="success"></van-icon>
|
||||
<span>success</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="fail"></van-icon>
|
||||
<span>fail</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="contact"></van-icon>
|
||||
<span>contact</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="wechat"></van-icon>
|
||||
<span>wechat</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="alipay"></van-icon>
|
||||
<span>alipay</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="password-view"></van-icon>
|
||||
<span>password-view</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="password-not-view"></van-icon>
|
||||
<span>password-not-view</span>
|
||||
</van-col>
|
||||
</van-row>
|
||||
```
|
||||
|
Reference in New Issue
Block a user