mirror of
https://gitee.com/vant-contrib/vant-weapp.git
synced 2025-04-06 03:58:05 +08:00
[breaking change] Tag: rewrite
This commit is contained in:
陈嘉涵
parent
e75645fabd
commit
0a9de1e94e
@ -1,11 +1 @@
|
||||
Page({
|
||||
data: {
|
||||
},
|
||||
|
||||
onLoad: function () {
|
||||
|
||||
},
|
||||
|
||||
onShow: function() {
|
||||
},
|
||||
})
|
||||
Page({});
|
||||
|
||||
@ -1,8 +1,7 @@
|
||||
{
|
||||
"navigationBarTitleText": "Tag 标记",
|
||||
"usingComponents": {
|
||||
"van-cell": "../../dist/cell/index",
|
||||
"van-panel": "../../dist/panel/index",
|
||||
"demo-block": "../../components/demo-block/index",
|
||||
"van-tag": "../../dist/tag/index"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,26 +1,20 @@
|
||||
<van-panel title="基础用法" class="tag-demo">
|
||||
<van-cell>
|
||||
<van-tag>灰色</van-tag>
|
||||
<van-tag type="danger">红色</van-tag>
|
||||
<van-tag disabled>不可用</van-tag>
|
||||
</van-cell>
|
||||
</van-panel>
|
||||
<demo-block title="基础用法" padding>
|
||||
<van-tag custom-class="demo-margin-right">标签</van-tag>
|
||||
<van-tag custom-class="demo-margin-right" type="danger">标签</van-tag>
|
||||
<van-tag custom-class="demo-margin-right" type="success">标签</van-tag>
|
||||
<van-tag type="primary">标签</van-tag>
|
||||
</demo-block>
|
||||
|
||||
<van-panel title="各种不同类型" class="tag-demo">
|
||||
<van-cell>
|
||||
<van-tag type="danger">会员折扣</van-tag>
|
||||
<van-tag type="warn">返现</van-tag>
|
||||
<van-tag type="primary">返现</van-tag>
|
||||
<van-tag type="primary" disabled>不可用</van-tag>
|
||||
</van-cell>
|
||||
</van-panel>
|
||||
<demo-block title="空心样式" padding>
|
||||
<van-tag custom-class="demo-margin-right" plain>标签</van-tag>
|
||||
<van-tag custom-class="demo-margin-right" plain type="danger">标签</van-tag>
|
||||
<van-tag custom-class="demo-margin-right" plain type="primary">标签</van-tag>
|
||||
<van-tag plain type="success">标签</van-tag>
|
||||
</demo-block>
|
||||
|
||||
<van-panel title="镂空 Tag" class="tag-demo">
|
||||
<van-cell>
|
||||
<van-tag plain>灰色</van-tag>
|
||||
<van-tag type="danger" plain>会员折扣</van-tag>
|
||||
<van-tag type="warn" plain>返现</van-tag>
|
||||
<van-tag type="primary" plain>返现</van-tag>
|
||||
<van-tag type="primary" plain disabled>返现不可用</van-tag>
|
||||
</van-cell>
|
||||
</van-panel>
|
||||
<demo-block title="圆角样式" padding>
|
||||
<van-tag custom-class="demo-margin-right" mark>标签</van-tag>
|
||||
<van-tag custom-class="demo-margin-right" mark type="danger">标签</van-tag>
|
||||
<van-tag custom-class="demo-margin-right" mark type="primary">标签</van-tag>
|
||||
<van-tag mark type="success">标签</van-tag>
|
||||
</demo-block>
|
||||
|
||||
@ -1,8 +0,0 @@
|
||||
.tag-demo {
|
||||
display: block;
|
||||
margin: 15px 0;
|
||||
}
|
||||
|
||||
van-tag + van-tag {
|
||||
margin-left: 10px;
|
||||
}
|
||||
@ -1,7 +1,8 @@
|
||||
## Tag 标签
|
||||
|
||||
### 使用指南
|
||||
在 json 文件中配置tag组件
|
||||
|
||||
在 index.json 中引入组件
|
||||
```json
|
||||
"usingComponents": {
|
||||
"van-tag": "path/to/vant-weapp/dist/tag/index"
|
||||
@ -11,41 +12,51 @@
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
通过 type 属性控制 Tag 颜色，默认为灰色
|
||||
|
||||
```html
|
||||
<van-tag>取消订单</van-tag>
|
||||
<van-tag>标签</van-tag>
|
||||
<van-tag type="danger">标签</van-tag>
|
||||
<van-tag type="success">标签</van-tag>
|
||||
<van-tag type="primary">标签</van-tag>
|
||||
```
|
||||
|
||||
#### 类型
|
||||
tag支持额外的三种类型 primary, danger, warn
|
||||
#### 空心样式
|
||||
设置`plain`属性设置为空心样式
|
||||
|
||||
```html
|
||||
<van-tag type="primary">会员折扣</van-tag>
|
||||
<van-tag type="danger">返现</van-tag>
|
||||
<van-tag type="warn">返现</van-tag>
|
||||
<van-tag plain>标签</van-tag>
|
||||
<van-tag plain type="danger">标签</van-tag>
|
||||
<van-tag plain type="primary">标签</van-tag>
|
||||
<van-tag plain type="success">标签</van-tag>
|
||||
```
|
||||
|
||||
#### 圆角样式
|
||||
通过`mark`设置为圆角样式
|
||||
|
||||
#### 其他
|
||||
tag镂空状态
|
||||
```html
|
||||
<van-tag plain>返现</van-tag>
|
||||
<van-tag mark>标签</van-tag>
|
||||
<van-tag mark type="danger">标签</van-tag>
|
||||
<van-tag mark type="primary">标签</van-tag>
|
||||
<van-tag mark type="success">标签</van-tag>
|
||||
```
|
||||
|
||||
tag禁用状态
|
||||
```html
|
||||
<van-tag disabled>不可用</van-tag>
|
||||
```
|
||||
|
||||
|
||||
### API
|
||||
|
||||
| 名称 | 类型 | 是否必须 | 默认 | 描述 |
|
||||
|---------|---------|----------|------|-------|
|
||||
| type | String | 否 | 空 | tag类型，值有primary、warn、danger |
|
||||
| plain | Boolean | 否 | false | tag是否镂空，默认为false |
|
||||
| disabled | Boolean | 否 | false | tag是否禁用，默认为false |
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|-----------|-----------|-----------|-------------|
|
||||
| type | 类型，可选值为`primary` `success` `danger` | `String` | `''`|
|
||||
| plain | 是否为空心样式 | `Boolean` | `false` |
|
||||
| mark | 是否为圆角样式 | `Boolean` | `false` |
|
||||
|
||||
### Slot
|
||||
|
||||
| 名称 | 说明 |
|
||||
|-----------|-----------|
|
||||
| default | 自定义 Tag 显示内容 |
|
||||
|
||||
### 外部样式类
|
||||
| 类名 | 说明 |
|
||||
|
||||
| 类名 | 说明 |
|
||||
|-----------|-----------|
|
||||
| custom-class | 根节点自定义样式类，通过这个可以改变根节点上的样式 |
|
||||
| theme-class | 根节点自定义样式类，用于更改根节点上的主题样式 |
|
||||
| custom-class | 根节点样式类 |
|
||||
|
||||
@ -1,17 +1,9 @@
|
||||
Component({
|
||||
externalClasses: ['custom-class', 'theme-class'],
|
||||
externalClasses: ['custom-class'],
|
||||
|
||||
properties: {
|
||||
type: {
|
||||
type: String,
|
||||
},
|
||||
plain: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
}
|
||||
type: String,
|
||||
mark: Boolean,
|
||||
plain: Boolean
|
||||
}
|
||||
});
|
||||
|
||||
@ -1,83 +1,54 @@
|
||||
@import '../common/_var';
|
||||
@import "../common/_mixins";
|
||||
@import '../helper/index.pcss';
|
||||
|
||||
.van-tag {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
line-height: 16px;
|
||||
padding: 0 5px;
|
||||
border-radius: 2px;
|
||||
font-size: 11px;
|
||||
padding: 2px 5px;
|
||||
line-height: normal;
|
||||
border-radius: 3px;
|
||||
font-size: 10px;
|
||||
background: $gray;
|
||||
text-align: center;
|
||||
color: $white;
|
||||
|
||||
&::after {
|
||||
@mixin hairline;
|
||||
border-width: 1px;
|
||||
border-color: currentColor;
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.van-tag--plain {
|
||||
color: $gray;
|
||||
background: $white;
|
||||
}
|
||||
&--mark {
|
||||
padding-right: 7px;
|
||||
border-radius: 0 8px 8px 0;
|
||||
|
||||
/* 各种主题代码 */
|
||||
.van-tag--primary {
|
||||
color: $button-primary-color;
|
||||
background-color: $button-primary-background-color;
|
||||
|
||||
&::after {
|
||||
border-color: $button-primary-background-color;
|
||||
&::after {
|
||||
border-radius: 0 16px 16px 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* 空心形式 */
|
||||
&.van-tag--plain {
|
||||
color: $button-primary-background-color;
|
||||
&--success {
|
||||
background: $green;
|
||||
|
||||
&.van-tag--plain {
|
||||
color: $green;
|
||||
}
|
||||
}
|
||||
|
||||
&--danger {
|
||||
background: $button-danger-background-color;
|
||||
|
||||
&.van-tag--plain {
|
||||
color: $button-danger-background-color;
|
||||
}
|
||||
}
|
||||
|
||||
&--primary {
|
||||
background: $blue;
|
||||
|
||||
&.van-tag--plain {
|
||||
color: $blue;
|
||||
}
|
||||
}
|
||||
|
||||
&--plain {
|
||||
background: $white;
|
||||
}
|
||||
}
|
||||
|
||||
.van-tag--danger {
|
||||
color: $button-danger-color;
|
||||
background: $button-danger-background-color;
|
||||
|
||||
&::after {
|
||||
border-color: $button-danger-background-color;
|
||||
}
|
||||
|
||||
/* 空心形式 */
|
||||
&.van-tag--plain {
|
||||
color: $button-danger-background-color;
|
||||
background: $button-danger-color;
|
||||
}
|
||||
}
|
||||
|
||||
.van-tag--warn {
|
||||
color: $white;
|
||||
background: #f85;
|
||||
|
||||
&::after {
|
||||
border-color: #f85;
|
||||
}
|
||||
|
||||
/* 空心形式 */
|
||||
&.van-tag--plain {
|
||||
color: #f85;
|
||||
background: $white;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* disabled tag */
|
||||
.van-tag--disabled {
|
||||
color: $button-disabled-color !important;
|
||||
background: $button-disabled-background-color;
|
||||
|
||||
&::after {
|
||||
border-color: $button-disabled-border-color;
|
||||
color: $gray;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
|
||||
<view
|
||||
class="custom-class theme-class van-tag {{type ? 'van-tag--'+type : ''}} {{disabled ? 'van-tag--disabled' : ''}} {{plain ? 'van-tag--plain' : ''}}"
|
||||
<view
|
||||
class="van-hairline--surround van-tag custom-class {{ mark ? 'van-tag--mark' : '' }} {{ plain ? 'van-tag--plain' : '' }} {{ type ? 'van-tag--' + type : '' }}"
|
||||
>
|
||||
<slot></slot>
|
||||
</view>
|
||||
<slot />
|
||||
</view>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user