mirror of
https://gitee.com/vant-contrib/vant-weapp.git
synced 2025-04-06 03:58:05 +08:00
[breaking change] Layout: rewrite
This commit is contained in:
陈嘉涵
parent
ed5e1f3106
commit
b1e37e33da
@ -2,46 +2,73 @@ Page({
|
||||
data: {
|
||||
icons: [
|
||||
'close',
|
||||
'location',
|
||||
'upgrade',
|
||||
'add-o',
|
||||
'passed',
|
||||
'chat',
|
||||
'question',
|
||||
'clock',
|
||||
'gold-coin',
|
||||
'chat',
|
||||
'exchange',
|
||||
'upgrade',
|
||||
'play',
|
||||
'pause',
|
||||
'stop',
|
||||
'more-o',
|
||||
'info-o',
|
||||
'share',
|
||||
'like-o',
|
||||
'logistics',
|
||||
'edit',
|
||||
'exchange',
|
||||
'location',
|
||||
'cart',
|
||||
'shop',
|
||||
'gift',
|
||||
'contact',
|
||||
'passed',
|
||||
'wap-home',
|
||||
'points',
|
||||
'discount',
|
||||
'point-gift',
|
||||
'after-sale',
|
||||
'edit-data',
|
||||
'delete',
|
||||
'records',
|
||||
'logistics',
|
||||
'check',
|
||||
'checked',
|
||||
'gift',
|
||||
'like-o',
|
||||
'like',
|
||||
'qr',
|
||||
'qr-invalid',
|
||||
'shop',
|
||||
'photograph',
|
||||
'add',
|
||||
'minus',
|
||||
'add2',
|
||||
'add-o',
|
||||
'minus-o',
|
||||
'completed',
|
||||
'certificate',
|
||||
'tosend',
|
||||
'sign',
|
||||
'photo',
|
||||
'cart',
|
||||
'idcard',
|
||||
'home',
|
||||
'free-postage',
|
||||
'cash-back-record',
|
||||
'points-mall',
|
||||
'exchange-record',
|
||||
'pending-payment',
|
||||
'pending-orders',
|
||||
'pending-deliver',
|
||||
'pending-evaluate',
|
||||
'password-view',
|
||||
'password-not-view',
|
||||
'check',
|
||||
'arrow',
|
||||
'arrow-left',
|
||||
'search',
|
||||
'clear',
|
||||
'success',
|
||||
'fail',
|
||||
'add',
|
||||
'checked',
|
||||
'warn',
|
||||
'clear',
|
||||
'underway',
|
||||
'more',
|
||||
'like',
|
||||
'photograph',
|
||||
'qr-invalid',
|
||||
'qr',
|
||||
'add2',
|
||||
'wechat',
|
||||
'alipay',
|
||||
'password-view',
|
||||
'wap-nav',
|
||||
'password-not-view',
|
||||
'wap-home',
|
||||
'ecard-pay',
|
||||
'balance-pay',
|
||||
'peer-pay',
|
||||
@ -56,38 +83,13 @@ Page({
|
||||
'send-gift',
|
||||
'setting',
|
||||
'coupon',
|
||||
'free-postage',
|
||||
'discount',
|
||||
'birthday-privilege',
|
||||
'member-day-privilege',
|
||||
'balance-details',
|
||||
'cash-back-record',
|
||||
'points-mall',
|
||||
'exchange-record',
|
||||
'pending-payment',
|
||||
'pending-orders',
|
||||
'pending-deliver',
|
||||
'pending-evaluate',
|
||||
'cash-on-deliver',
|
||||
'gift-card-pay',
|
||||
'underway',
|
||||
'point-gift',
|
||||
'after-sale',
|
||||
'edit-data',
|
||||
'question',
|
||||
'cash-on-deliver',
|
||||
'phone',
|
||||
'description',
|
||||
'card',
|
||||
'gift-card',
|
||||
'completed',
|
||||
'value-card',
|
||||
'certificate',
|
||||
'tosend',
|
||||
'sign',
|
||||
'home',
|
||||
'phone',
|
||||
'play',
|
||||
'pause',
|
||||
'stop',
|
||||
'gift-card',
|
||||
'hot',
|
||||
'new',
|
||||
'new-arrival',
|
||||
|
||||
@ -1,6 +1,8 @@
|
||||
{
|
||||
"navigationBarTitleText": "Icon 图标",
|
||||
"usingComponents": {
|
||||
"demo-block": "../../components/demo-block/index",
|
||||
"van-col": "../../dist/icon/index",
|
||||
"van-icon": "../../dist/icon/index"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<view wx:for="{{ icons }}" wx:for-item="icon" wx:key="icon" class="icon-wrap">
|
||||
<view class="example-icon">
|
||||
<van-icon type="{{ icon }}"></van-icon>
|
||||
</view>
|
||||
<view class="icon-classname">van-icon-{{ icon }}</view>
|
||||
</view>
|
||||
<demo-block title="图标列表">
|
||||
<van-col span="8" wx:for="{{ icons }}" wx:key="index">
|
||||
<van-icon name="{{ item }}" />
|
||||
<view>{{ item }}</view>
|
||||
</van-col>
|
||||
</demo-block>
|
||||
|
||||
@ -1,11 +1 @@
|
||||
Page({
|
||||
data: {
|
||||
},
|
||||
|
||||
onLoad: function () {
|
||||
|
||||
},
|
||||
|
||||
onShow: function() {
|
||||
},
|
||||
})
|
||||
Page({});
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
{
|
||||
"usingComponents": {
|
||||
"demo-block": "../../components/demo-block/index",
|
||||
"van-row": "../../dist/row/index",
|
||||
"van-col": "../../dist/col/index",
|
||||
"van-panel": "../../dist/panel/index"
|
||||
"van-col": "../../dist/col/index"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,17 +1,24 @@
|
||||
<van-panel title="基础用法">
|
||||
<demo-block title="基础用法">
|
||||
<van-row>
|
||||
<van-col col="8" col-class="custom-van-col">span: 8</van-col>
|
||||
<van-col col="8" col-class="custom-van-col">span: 8</van-col>
|
||||
<van-col col="8" col-class="custom-van-col">span: 8</van-col>
|
||||
<van-col span="8" custom-class="dark">span: 8</van-col>
|
||||
<van-col span="8" custom-class="light">span: 8</van-col>
|
||||
<van-col span="8" custom-class="dark">span: 8</van-col>
|
||||
</van-row>
|
||||
</van-panel>
|
||||
|
||||
<van-panel title="利用 offset 布局">
|
||||
<van-row>
|
||||
<van-col col="4" col-class="custom-van-col">span: 4</van-col>
|
||||
<van-col col="10" offset="4" col-class="custom-van-col">offset: 4, span: 10</van-col>
|
||||
<van-col span="4" custom-class="dark">span: 4</van-col>
|
||||
<van-col span="10" offset="4" custom-class="light">offset: 4, span: 10</van-col>
|
||||
</van-row>
|
||||
|
||||
<van-row>
|
||||
<van-col col="12" offset="12" col-class="custom-van-col">offset: 12, span: 12</van-col>
|
||||
<van-col offset="12" span="12" custom-class="dark">offset: 12, span: 12</van-col>
|
||||
</van-row>
|
||||
</van-panel>
|
||||
</demo-block>
|
||||
|
||||
<demo-block title="在列元素之间增加间距">
|
||||
<van-row gutter="20">
|
||||
<van-col span="8" custom-class="dark">span: 8</van-col>
|
||||
<van-col span="8" custom-class="light">span: 8</van-col>
|
||||
<van-col span="8" custom-class="dark">span: 8</van-col>
|
||||
</van-row>
|
||||
</demo-block>
|
||||
|
||||
@ -1,11 +1,17 @@
|
||||
.custom-van-col {
|
||||
.dark,
|
||||
.light {
|
||||
color: #fff;
|
||||
font-size: 13px;
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
background-color: #39a9ed;
|
||||
font-size: 12px;
|
||||
color: #fff;
|
||||
margin-bottom: 10px;
|
||||
background-clip: content-box;
|
||||
}
|
||||
|
||||
.custom-van-col:nth-child(even) {
|
||||
.dark {
|
||||
background-color: #39a9ed;
|
||||
}
|
||||
|
||||
.light {
|
||||
background-color: #66c6f2;
|
||||
}
|
||||
|
||||
@ -72,13 +72,6 @@
|
||||
| send-message-img | sendMessageImg | `String` | 截图 |
|
||||
| show-message-card | 显示会话内消息卡片 | `String` | `false` |
|
||||
|
||||
### 外部样式类
|
||||
|
||||
| 类名 | 说明 |
|
||||
|-----------|-----------|
|
||||
| custom-class | 根节点样式类 |
|
||||
| loading-class | 加载图标样式类 |
|
||||
|
||||
### 事件
|
||||
|
||||
| 事件名 | 说明 | 参数 |
|
||||
@ -88,3 +81,10 @@
|
||||
| contact | 客服消息回调 | - |
|
||||
| getphonenumber | 获取用户手机号回调 | - |
|
||||
| error | 当使用开放能力时，发生错误的回调 | - |
|
||||
|
||||
### 外部样式类
|
||||
|
||||
| 类名 | 说明 |
|
||||
|-----------|-----------|
|
||||
| custom-class | 根节点样式类 |
|
||||
| loading-class | 加载图标样式类 |
|
||||
|
||||
@ -46,10 +46,6 @@ Component({
|
||||
}
|
||||
},
|
||||
|
||||
data: {
|
||||
classes: ''
|
||||
},
|
||||
|
||||
attached() {
|
||||
this.setClasses();
|
||||
},
|
||||
|
||||
@ -1,20 +1,24 @@
|
||||
const ROW_PATH = '../row/index';
|
||||
|
||||
Component({
|
||||
externalClasses: ['col-class'],
|
||||
externalClasses: ['custom-class'],
|
||||
|
||||
relations: {
|
||||
'../row/index': {
|
||||
type: 'parent'
|
||||
[ROW_PATH]: {
|
||||
type: 'ancestor'
|
||||
}
|
||||
},
|
||||
|
||||
properties: {
|
||||
col: {
|
||||
value: 0,
|
||||
type: Number
|
||||
},
|
||||
offset: {
|
||||
value: 0,
|
||||
type: Number
|
||||
span: Number,
|
||||
offset: Number
|
||||
},
|
||||
|
||||
methods: {
|
||||
setGutter(gutter) {
|
||||
const padding = `${gutter / 2}px`;
|
||||
const style = gutter ? `padding-left: ${padding}; padding-right: ${padding};` : '';
|
||||
this.setData({ style });
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
@ -1,10 +1,9 @@
|
||||
.van-col {
|
||||
float: left;
|
||||
box-sizing: border-box;
|
||||
width: 0;
|
||||
}
|
||||
|
||||
@for $i from 1 to 24 {
|
||||
.van-col-$i { width: calc($i * 100% / 24); }
|
||||
.van-col-offset-$i { margin-left: calc($i * 100% / 24); }
|
||||
.van-col--$i { width: calc($i * 100% / 24); }
|
||||
.van-col--offset-$i { margin-left: calc($i * 100% / 24); }
|
||||
}
|
||||
|
||||
@ -1 +1,6 @@
|
||||
<view class="col-class van-col {{ col ? 'van-col-' + col : '' }} {{ offset ? 'van-col-offset-' + offset : '' }}"><slot></slot></view>
|
||||
<view
|
||||
class="custom-class van-col {{ span ? 'van-col--' + span : '' }} {{ offset ? 'van-col--offset-' + offset : '' }}"
|
||||
style="{{ style }}"
|
||||
>
|
||||
<slot />
|
||||
</view>
|
||||
|
||||
@ -1,24 +1,40 @@
|
||||
## Icon 图标
|
||||
|
||||
### 使用指南
|
||||
|
||||
在 index.json 中引入组件
|
||||
```json
|
||||
{
|
||||
"usingComponents": {
|
||||
"van-icon": "path/to/vant-weapp/dist/icon/index"
|
||||
}
|
||||
"usingComponents": {
|
||||
"van-icon": "path/to/vant-weapp/dist/icon/index"
|
||||
}
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
可以在任意位置上使用 van-icon 标签。通过 type 可以控制 icon 显示的图标
|
||||
|
||||
#### 基础用法
|
||||
|
||||
设置`name`属性为对应的图标名称即可，所有可用的图标名称见右侧列表
|
||||
|
||||
```html
|
||||
<van-icon type="success"></van-icon>
|
||||
<van-icon name="success" />
|
||||
```
|
||||
|
||||
支持的 icon 和 名称 见下图
|
||||
### API
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|-----------|-----------|-----------|-------------|
|
||||
| name | 图标名称 | `String` | - |
|
||||
| info | 图标右上角文字提示 | `String | Number` | - |
|
||||
| color | 图标颜色 | `String` | - |
|
||||
|
||||
### Event
|
||||
|
||||
| 事件名 | 说明 | 参数 |
|
||||
|-----------|-----------|-----------|
|
||||
| click | 点击图标时触发 | - |
|
||||
|
||||
### 外部样式类
|
||||
|
||||
| 类名 | 说明 |
|
||||
|-----------|-----------|
|
||||
| custom-class | 根节点样式类 |
|
||||
|
||||
@ -1,8 +1,9 @@
|
||||
Component({
|
||||
externalClasses: ['custom-class'],
|
||||
|
||||
properties: {
|
||||
type: {
|
||||
type: String,
|
||||
value: ''
|
||||
}
|
||||
info: null,
|
||||
name: String,
|
||||
color: String
|
||||
}
|
||||
});
|
||||
|
||||
@ -1,139 +1,410 @@
|
||||
/* DO NOT EDIT! Generated by fount */
|
||||
@import '../common/var.pcss';
|
||||
|
||||
@font-face {
|
||||
font-family: 'zanui-weapp-icon';
|
||||
src: url('https://b.yzcdn.cn/vant-weapp/zanui-weapp-icon-eeb0d3c52a.eot');
|
||||
src: url('https://b.yzcdn.cn/vant-weapp/zanui-weapp-icon-eeb0d3c52a.eot?#iefix') format('embedded-opentype'),
|
||||
url('https://b.yzcdn.cn/vant-weapp/zanui-weapp-icon-eeb0d3c52a.woff2') format('woff2'),
|
||||
url('https://b.yzcdn.cn/vant-weapp/zanui-weapp-icon-eeb0d3c52a.woff') format('woff'),
|
||||
url('https://b.yzcdn.cn/vant-weapp/zanui-weapp-icon-eeb0d3c52a.ttf') format('truetype')
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-family: 'vant-icon';
|
||||
src: url('https://img.yzcdn.cn/vant/vant-icon-eb8c95.ttf') format('truetype');
|
||||
}
|
||||
|
||||
.van-icon {
|
||||
display: inline-block;
|
||||
}
|
||||
.van-icon::before {
|
||||
font-family: "zanui-weapp-icon" !important;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
speak: none;
|
||||
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
text-decoration: inherit;
|
||||
width: 1em;
|
||||
text-align: center;
|
||||
font: normal normal normal 14px/1 "vant-icon";
|
||||
font-size: inherit;
|
||||
text-rendering: auto;
|
||||
|
||||
/* For safety - reset parent styles, that can break glyph codes*/
|
||||
font-variant: normal;
|
||||
text-transform: none;
|
||||
&__info {
|
||||
color: #fff;
|
||||
left: 100%;
|
||||
top: -.5em;
|
||||
font-size: .5em;
|
||||
padding: 0 .3em;
|
||||
text-align: center;
|
||||
min-width: 1.2em;
|
||||
line-height: 1.2;
|
||||
position: absolute;
|
||||
border-radius: .6em;
|
||||
box-sizing: border-box;
|
||||
background-color: $red;
|
||||
transform: translateX(-50%);
|
||||
font-family: PingFang SC, Helvetica Neue, Arial, sans-serif;
|
||||
}
|
||||
|
||||
/* fix buttons height, for twitter bootstrap */
|
||||
line-height: 1em;
|
||||
|
||||
/* Animation center compensation - margins should be symmetric */
|
||||
/* remove if not needed */
|
||||
/* margin-left: .2em; */
|
||||
|
||||
/* you can be more comfortable with increased icons size */
|
||||
/* font-size: 120%; */
|
||||
|
||||
/* Font smoothing. That was taken from TWBS */
|
||||
-webkit-font-smoothing: antialiased;
|
||||
|
||||
/* Uncomment for 3D effect */
|
||||
/* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
|
||||
&::before {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
/* DO NOT EDIT! Generated by iconfount */
|
||||
|
||||
.van-icon-add-o::before {
|
||||
content: "\F000";
|
||||
}
|
||||
|
||||
.van-icon-add::before {
|
||||
content: "\F001";
|
||||
}
|
||||
|
||||
.van-icon-add2::before {
|
||||
content: "\F002";
|
||||
}
|
||||
|
||||
.van-icon-after-sale::before {
|
||||
content: "\F003";
|
||||
}
|
||||
|
||||
.van-icon-alipay::before {
|
||||
content: "\F004";
|
||||
}
|
||||
|
||||
.van-icon-arrow-left::before {
|
||||
content: "\F005";
|
||||
}
|
||||
|
||||
.van-icon-arrow::before {
|
||||
content: "\F006";
|
||||
}
|
||||
|
||||
.van-icon-balance-pay::before {
|
||||
content: "\F007";
|
||||
}
|
||||
|
||||
.van-icon-browsing-history::before {
|
||||
content: "\F008";
|
||||
}
|
||||
|
||||
.van-icon-card::before {
|
||||
content: "\F009";
|
||||
}
|
||||
|
||||
.van-icon-cart::before {
|
||||
content: "\F00A";
|
||||
}
|
||||
|
||||
.van-icon-cash-back-record::before {
|
||||
content: "\F00B";
|
||||
}
|
||||
|
||||
.van-icon-cash-on-deliver::before {
|
||||
content: "\F00C";
|
||||
}
|
||||
|
||||
.van-icon-certificate::before {
|
||||
content: "\F00D";
|
||||
}
|
||||
|
||||
.van-icon-chat::before {
|
||||
content: "\F00E";
|
||||
}
|
||||
|
||||
.van-icon-check::before {
|
||||
content: "\F00F";
|
||||
}
|
||||
|
||||
.van-icon-checked::before {
|
||||
content: "\F010";
|
||||
}
|
||||
|
||||
.van-icon-clear::before {
|
||||
content: "\F011";
|
||||
}
|
||||
|
||||
.van-icon-clock::before {
|
||||
content: "\F012";
|
||||
}
|
||||
|
||||
.van-icon-close::before {
|
||||
content: "\F013";
|
||||
}
|
||||
|
||||
.van-icon-completed::before {
|
||||
content: "\F014";
|
||||
}
|
||||
|
||||
.van-icon-contact::before {
|
||||
content: "\F015";
|
||||
}
|
||||
|
||||
.van-icon-coupon::before {
|
||||
content: "\F016";
|
||||
}
|
||||
|
||||
.van-icon-credit-pay::before {
|
||||
content: "\F017";
|
||||
}
|
||||
|
||||
.van-icon-debit-pay::before {
|
||||
content: "\F018";
|
||||
}
|
||||
|
||||
.van-icon-delete::before {
|
||||
content: "\F019";
|
||||
}
|
||||
|
||||
.van-icon-description::before {
|
||||
content: "\F01A";
|
||||
}
|
||||
|
||||
.van-icon-discount::before {
|
||||
content: "\F01B";
|
||||
}
|
||||
|
||||
.van-icon-ecard-pay::before {
|
||||
content: "\F01C";
|
||||
}
|
||||
|
||||
.van-icon-edit-data::before {
|
||||
content: "\F01D";
|
||||
}
|
||||
|
||||
.van-icon-edit::before {
|
||||
content: "\F01E";
|
||||
}
|
||||
|
||||
.van-icon-exchange-record::before {
|
||||
content: "\F01F";
|
||||
}
|
||||
|
||||
.van-icon-exchange::before {
|
||||
content: "\F020";
|
||||
}
|
||||
|
||||
.van-icon-fail::before {
|
||||
content: "\F021";
|
||||
}
|
||||
|
||||
.van-icon-free-postage::before {
|
||||
content: "\F022";
|
||||
}
|
||||
|
||||
.van-icon-gift-card-pay::before {
|
||||
content: "\F023";
|
||||
}
|
||||
|
||||
.van-icon-gift-card::before {
|
||||
content: "\F024";
|
||||
}
|
||||
|
||||
.van-icon-gift::before {
|
||||
content: "\F025";
|
||||
}
|
||||
|
||||
.van-icon-gold-coin::before {
|
||||
content: "\F026";
|
||||
}
|
||||
|
||||
.van-icon-goods-collect::before {
|
||||
content: "\F027";
|
||||
}
|
||||
|
||||
.van-icon-home::before {
|
||||
content: "\F028";
|
||||
}
|
||||
|
||||
.van-icon-hot-sale::before {
|
||||
content: "\F029";
|
||||
}
|
||||
|
||||
.van-icon-hot::before {
|
||||
content: "\F02A";
|
||||
}
|
||||
|
||||
.van-icon-idcard::before {
|
||||
content: "\F02B";
|
||||
}
|
||||
|
||||
.van-icon-info-o::before {
|
||||
content: "\F02C";
|
||||
}
|
||||
|
||||
.van-icon-like-o::before {
|
||||
content: "\F02D";
|
||||
}
|
||||
|
||||
.van-icon-like::before {
|
||||
content: "\F02E";
|
||||
}
|
||||
|
||||
.van-icon-location::before {
|
||||
content: "\F02F";
|
||||
}
|
||||
|
||||
.van-icon-logistics::before {
|
||||
content: "\F030";
|
||||
}
|
||||
|
||||
.van-icon-more-o::before {
|
||||
content: "\F031";
|
||||
}
|
||||
|
||||
.van-icon-more::before {
|
||||
content: "\F032";
|
||||
}
|
||||
|
||||
.van-icon-new-arrival::before {
|
||||
content: "\F033";
|
||||
}
|
||||
|
||||
.van-icon-new::before {
|
||||
content: "\F034";
|
||||
}
|
||||
|
||||
.van-icon-other-pay::before {
|
||||
content: "\F035";
|
||||
}
|
||||
|
||||
.van-icon-passed::before {
|
||||
content: "\F036";
|
||||
}
|
||||
|
||||
.van-icon-password-not-view::before {
|
||||
content: "\F037";
|
||||
}
|
||||
|
||||
.van-icon-password-view::before {
|
||||
content: "\F038";
|
||||
}
|
||||
|
||||
.van-icon-pause::before {
|
||||
content: "\F039";
|
||||
}
|
||||
|
||||
.van-icon-peer-pay::before {
|
||||
content: "\F03A";
|
||||
}
|
||||
|
||||
.van-icon-pending-deliver::before {
|
||||
content: "\F03B";
|
||||
}
|
||||
|
||||
.van-icon-pending-evaluate::before {
|
||||
content: "\F03C";
|
||||
}
|
||||
|
||||
.van-icon-pending-orders::before {
|
||||
content: "\F03D";
|
||||
}
|
||||
|
||||
.van-icon-pending-payment::before {
|
||||
content: "\F03E";
|
||||
}
|
||||
|
||||
.van-icon-phone::before {
|
||||
content: "\F03F";
|
||||
}
|
||||
|
||||
.van-icon-photo::before {
|
||||
content: "\F040";
|
||||
}
|
||||
|
||||
.van-icon-photograph::before {
|
||||
content: "\F041";
|
||||
}
|
||||
|
||||
.van-icon-play::before {
|
||||
content: "\F042";
|
||||
}
|
||||
|
||||
.van-icon-point-gift::before {
|
||||
content: "\F043";
|
||||
}
|
||||
|
||||
.van-icon-points-mall::before {
|
||||
content: "\F044";
|
||||
}
|
||||
|
||||
.van-icon-points::before {
|
||||
content: "\F045";
|
||||
}
|
||||
|
||||
.van-icon-qr-invalid::before {
|
||||
content: "\F046";
|
||||
}
|
||||
|
||||
.van-icon-qr::before {
|
||||
content: "\F047";
|
||||
}
|
||||
|
||||
.van-icon-question::before {
|
||||
content: "\F048";
|
||||
}
|
||||
|
||||
.van-icon-receive-gift::before {
|
||||
content: "\F049";
|
||||
}
|
||||
|
||||
.van-icon-records::before {
|
||||
content: "\F04A";
|
||||
}
|
||||
|
||||
.van-icon-search::before {
|
||||
content: "\F04B";
|
||||
}
|
||||
|
||||
.van-icon-send-gift::before {
|
||||
content: "\F04C";
|
||||
}
|
||||
|
||||
.van-icon-setting::before {
|
||||
content: "\F04D";
|
||||
}
|
||||
|
||||
.van-icon-share::before {
|
||||
content: "\F04E";
|
||||
}
|
||||
|
||||
.van-icon-shop-collect::before {
|
||||
content: "\F04F";
|
||||
}
|
||||
|
||||
.van-icon-shop::before {
|
||||
content: "\F050";
|
||||
}
|
||||
|
||||
.van-icon-shopping-cart::before {
|
||||
content: "\F051";
|
||||
}
|
||||
|
||||
.van-icon-sign::before {
|
||||
content: "\F052";
|
||||
}
|
||||
|
||||
.van-icon-stop::before {
|
||||
content: "\F053";
|
||||
}
|
||||
|
||||
.van-icon-success::before {
|
||||
content: "\F054";
|
||||
}
|
||||
|
||||
.van-icon-tosend::before {
|
||||
content: "\F055";
|
||||
}
|
||||
|
||||
.van-icon-underway::before {
|
||||
content: "\F056";
|
||||
}
|
||||
|
||||
.van-icon-upgrade::before {
|
||||
content: "\F057";
|
||||
}
|
||||
|
||||
.van-icon-value-card::before {
|
||||
content: "\F058";
|
||||
}
|
||||
|
||||
.van-icon-wap-home::before {
|
||||
content: "\F059";
|
||||
}
|
||||
|
||||
.van-icon-wap-nav::before {
|
||||
content: "\F05A";
|
||||
}
|
||||
|
||||
.van-icon-warn::before {
|
||||
content: "\F05B";
|
||||
}
|
||||
|
||||
.van-icon-wechat::before {
|
||||
content: "\F05C";
|
||||
}
|
||||
|
||||
.van-icon-qr-invalid:before { content: '\e800'; } /* '' */
|
||||
.van-icon-qr:before { content: '\e801'; } /* '' */
|
||||
.van-icon-exchange:before { content: '\e802'; } /* '' */
|
||||
.van-icon-close:before { content: '\e803'; } /* '' */
|
||||
.van-icon-location:before { content: '\e804'; } /* '' */
|
||||
.van-icon-upgrade:before { content: '\e805'; } /* '' */
|
||||
.van-icon-check:before { content: '\e806'; } /* '' */
|
||||
.van-icon-checked:before { content: '\e807'; } /* '' */
|
||||
.van-icon-like-o:before { content: '\e808'; } /* '' */
|
||||
.van-icon-like:before { content: '\e809'; } /* '' */
|
||||
.van-icon-chat:before { content: '\e80a'; } /* '' */
|
||||
.van-icon-shop:before { content: '\e80b'; } /* '' */
|
||||
.van-icon-photograph:before { content: '\e80c'; } /* '' */
|
||||
.van-icon-add:before { content: '\e80d'; } /* '' */
|
||||
.van-icon-minus:before { content: '\e80e'; } /* '' */
|
||||
.van-icon-add2:before { content: '\e80f'; } /* '' */
|
||||
.van-icon-photo:before { content: '\e810'; } /* '' */
|
||||
.van-icon-logistics:before { content: '\e811'; } /* '' */
|
||||
.van-icon-edit:before { content: '\e812'; } /* '' */
|
||||
.van-icon-passed:before { content: '\e813'; } /* '' */
|
||||
.van-icon-cart:before { content: '\e814'; } /* '' */
|
||||
.van-icon-shopping-cart:before { content: '\e815'; } /* '' */
|
||||
.van-icon-arrow:before { content: '\e816'; } /* '' */
|
||||
.van-icon-gift:before { content: '\e817'; } /* '' */
|
||||
.van-icon-search:before { content: '\e818'; } /* '' */
|
||||
.van-icon-clear:before { content: '\e819'; } /* '' */
|
||||
.van-icon-success:before { content: '\e81a'; } /* '' */
|
||||
.van-icon-fail:before { content: '\e81b'; } /* '' */
|
||||
.van-icon-contact:before { content: '\e81c'; } /* '' */
|
||||
.van-icon-wechat:before { content: '\e81d'; } /* '' */
|
||||
.van-icon-alipay:before { content: '\e81e'; } /* '' */
|
||||
.van-icon-password-view:before { content: '\e81f'; } /* '' */
|
||||
.van-icon-password-not-view:before { content: '\e820'; } /* '' */
|
||||
.van-icon-wap-nav:before { content: '\e821'; } /* '' */
|
||||
.van-icon-wap-home:before { content: '\e822'; } /* '' */
|
||||
.van-icon-ecard-pay:before { content: '\e823'; } /* '' */
|
||||
.van-icon-balance-pay:before { content: '\e824'; } /* '' */
|
||||
.van-icon-peer-pay:before { content: '\e825'; } /* '' */
|
||||
.van-icon-credit-pay:before { content: '\e826'; } /* '' */
|
||||
.van-icon-debit-pay:before { content: '\e827'; } /* '' */
|
||||
.van-icon-other-pay:before { content: '\e828'; } /* '' */
|
||||
.van-icon-browsing-history:before { content: '\e829'; } /* '' */
|
||||
.van-icon-goods-collect:before { content: '\e82a'; } /* '' */
|
||||
.van-icon-shop-collect:before { content: '\e82b'; } /* '' */
|
||||
.van-icon-receive-gift:before { content: '\e82c'; } /* '' */
|
||||
.van-icon-send-gift:before { content: '\e82d'; } /* '' */
|
||||
.van-icon-setting:before { content: '\e82e'; } /* '' */
|
||||
.van-icon-points:before { content: '\e82f'; } /* '' */
|
||||
.van-icon-coupon:before { content: '\e830'; } /* '' */
|
||||
.van-icon-free-postage:before { content: '\e831'; } /* '' */
|
||||
.van-icon-discount:before { content: '\e832'; } /* '' */
|
||||
.van-icon-birthday-privilege:before { content: '\e833'; } /* '' */
|
||||
.van-icon-member-day-privilege:before { content: '\e834'; } /* '' */
|
||||
.van-icon-balance-details:before { content: '\e835'; } /* '' */
|
||||
.van-icon-cash-back-record:before { content: '\e836'; } /* '' */
|
||||
.van-icon-points-mall:before { content: '\e837'; } /* '' */
|
||||
.van-icon-exchange-record:before { content: '\e838'; } /* '' */
|
||||
.van-icon-pending-payment:before { content: '\e839'; } /* '' */
|
||||
.van-icon-pending-orders:before { content: '\e83a'; } /* '' */
|
||||
.van-icon-pending-deliver:before { content: '\e83b'; } /* '' */
|
||||
.van-icon-pending-evaluate:before { content: '\e83c'; } /* '' */
|
||||
.van-icon-gift-card-pay:before { content: '\e83d'; } /* '' */
|
||||
.van-icon-cash-on-deliver:before { content: '\e83e'; } /* '' */
|
||||
.van-icon-underway:before { content: '\e83f'; } /* '' */
|
||||
.van-icon-point-gift:before { content: '\e840'; } /* '' */
|
||||
.van-icon-after-sale:before { content: '\e841'; } /* '' */
|
||||
.van-icon-edit-data:before { content: '\e842'; } /* '' */
|
||||
.van-icon-question:before { content: '\e843'; } /* '' */
|
||||
.van-icon-delete:before { content: '\e844'; } /* '' */
|
||||
.van-icon-records:before { content: '\e845'; } /* '' */
|
||||
.van-icon-description:before { content: '\e846'; } /* '' */
|
||||
.van-icon-card:before { content: '\e847'; } /* '' */
|
||||
.van-icon-gift-card:before { content: '\e848'; } /* '' */
|
||||
.van-icon-clock:before { content: '\e849'; } /* '' */
|
||||
.van-icon-gold-coin:before { content: '\e84a'; } /* '' */
|
||||
.van-icon-completed:before { content: '\e84b'; } /* '' */
|
||||
.van-icon-value-card:before { content: '\e84c'; } /* '' */
|
||||
.van-icon-certificate:before { content: '\e84d'; } /* '' */
|
||||
.van-icon-tosend:before { content: '\e84e'; } /* '' */
|
||||
.van-icon-sign:before { content: '\e84f'; } /* '' */
|
||||
.van-icon-home:before { content: '\e850'; } /* '' */
|
||||
.van-icon-phone:before { content: '\e851'; } /* '' */
|
||||
.van-icon-add-o:before { content: '\e852'; } /* '' */
|
||||
.van-icon-minus-o:before { content: '\e853'; } /* '' */
|
||||
.van-icon-play:before { content: '\e854'; } /* '' */
|
||||
.van-icon-pause:before { content: '\e855'; } /* '' */
|
||||
.van-icon-stop:before { content: '\e856'; } /* '' */
|
||||
.van-icon-hot:before { content: '\e857'; } /* '' */
|
||||
.van-icon-new:before { content: '\e858'; } /* '' */
|
||||
.van-icon-new-arrival:before { content: '\e859'; } /* '' */
|
||||
.van-icon-hot-sale:before { content: '\e85a'; } /* '' */
|
||||
@ -1 +1,3 @@
|
||||
<view class="van-icon van-icon-{{ type }}"></view>
|
||||
<view class="custom-class van-icon van-icon-{{ name }}" style="color: {{ color }}">
|
||||
<view wx:if="{{ info !== null }}" class="van-icon__info">{{ info }}</view>
|
||||
</view>
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
## Layout 布局
|
||||
|
||||
### 使用指南
|
||||
|
||||
在 index.json 中引入组件
|
||||
```json
|
||||
{
|
||||
@ -12,37 +13,58 @@
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
Layout 组件提供了24列栅格，设置 col 属性可以设置元素所占宽度
|
||||
|
||||
#### 基本用法
|
||||
|
||||
Layout 组件提供了`24列栅格`，通过在`Col`上添加`span`属性设置列所占的宽度百分比
|
||||
此外，添加`offset`属性可以设置列的偏移宽度，计算方式与 span 相同
|
||||
|
||||
```html
|
||||
<van-row>
|
||||
<van-col col="8" col-class="custom-van-col">span: 8</van-col>
|
||||
<van-col col="8" col-class="custom-van-col">span: 8</van-col>
|
||||
<van-col col="8" col-class="custom-van-col">span: 8</van-col>
|
||||
<van-col span="8">span: 8</van-col>
|
||||
<van-col span="8">span: 8</van-col>
|
||||
<van-col span="8">span: 8</van-col>
|
||||
</van-row>
|
||||
|
||||
<van-row>
|
||||
<van-col span="4">span: 4</van-col>
|
||||
<van-col span="10" offset="4">offset: 4, span: 10</van-col>
|
||||
</van-row>
|
||||
|
||||
<van-row>
|
||||
<van-col offset="12" span="12">offset: 12, span: 12</van-col>
|
||||
</van-row>
|
||||
```
|
||||
|
||||
Layout 提供了 offset 功能。设置 offset 属性可以设置列的偏移宽度，计算方式与 span 相同
|
||||
#### 设置列元素间距
|
||||
|
||||
通过`gutter`属性可以设置列元素之间的间距，默认间距为 0
|
||||
|
||||
```html
|
||||
<van-row row-class="custom-van-row">
|
||||
<van-col col="4" col-class="custom-van-col">span: 4</van-col>
|
||||
<van-col col="10" offset="4" col-class="custom-van-col">offset: 4, span: 10</van-col>
|
||||
</van-row>
|
||||
<van-row>
|
||||
<van-col col="12" offset="12" col-class="custom-van-col">offset: 12, span: 12</van-col>
|
||||
<van-row gutter="20">
|
||||
<van-col span="8">span: 8</van-col>
|
||||
<van-col span="8">span: 8</van-col>
|
||||
<van-col span="8">span: 8</van-col>
|
||||
</van-row>
|
||||
```
|
||||
|
||||
### API
|
||||
|
||||
#### Row
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|-----|-----|-----|-----|
|
||||
| row-class | 自定义row class | String | -
|
||||
|-----------|-----------|-----------|-------------|
|
||||
| gutter | 列元素之间的间距（单位为px） | `String | Number` | - |
|
||||
|
||||
#### Col
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|-----|-----|-----|-----|
|
||||
| col-class | 自定义col class | String | -
|
||||
| col | 元素所占宽度 | Number | `0`
|
||||
| offset | 元素偏移宽度 | Number | `0`
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|-----------|-----------|-----------|-------------|
|
||||
| span | 列元素宽度 | `String | Number` | - |
|
||||
| offset | 列元素偏移距离 | `String | Number` | - |
|
||||
|
||||
### 外部样式类
|
||||
|
||||
| 类名 | 说明 |
|
||||
|-----------|-----------|
|
||||
| custom-class | 根节点样式类 |
|
||||
|
||||
@ -1,9 +1,37 @@
|
||||
const COL_PATH = '../col/index';
|
||||
|
||||
Component({
|
||||
externalClasses: ['row-class'],
|
||||
externalClasses: ['custom-class'],
|
||||
|
||||
relations: {
|
||||
'../col/index': {
|
||||
type: 'child'
|
||||
[COL_PATH]: {
|
||||
type: 'descendant'
|
||||
}
|
||||
},
|
||||
|
||||
properties: {
|
||||
gutter: {
|
||||
type: Number,
|
||||
observer() {
|
||||
this.setGutter();
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
ready() {
|
||||
this.setGutter();
|
||||
},
|
||||
|
||||
methods: {
|
||||
setGutter() {
|
||||
const { gutter } = this.data;
|
||||
const margin = `-${Number(gutter) / 2}px`;
|
||||
const style = gutter ? `margin-right: ${margin}; margin-left: ${margin};` : '';
|
||||
|
||||
this.setData({ style });
|
||||
this.getRelationNodes(COL_PATH).forEach(col => {
|
||||
col.setGutter(this.data.gutter)
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
.van-row {
|
||||
&:after {
|
||||
&::after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
|
||||
@ -1 +1,3 @@
|
||||
<view class="row-class van-row"><slot></slot></view>
|
||||
<view class="custom-class van-row" style="{{ style }}">
|
||||
<slot />
|
||||
</view>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user