From 474a32498823fc2c4e9ddb7f3bac15853b4b8c40 Mon Sep 17 00:00:00 2001 From: pangxie1991 Date: Tue, 28 Feb 2017 21:08:50 +0800 Subject: [PATCH] tag component --- components.json | 3 +- docs/examples-docs/tag.md | 28 ++++++++++++++ docs/examples/tag.vue | 52 +++++++++++++++++++++++++ docs/nav.config.json | 4 ++ packages/tag/CHANGELOG.md | 8 ++++ packages/tag/README.md | 26 +++++++++++++ packages/tag/index.js | 3 ++ packages/tag/package.json | 10 +++++ packages/tag/src/main.vue | 16 ++++++++ packages/zanui-css/src/index.css | 1 + packages/zanui-css/src/tag.css | 66 ++++++++++++++++++++++++++++++++ src/index.js | 5 ++- 12 files changed, 220 insertions(+), 2 deletions(-) create mode 100644 docs/examples-docs/tag.md create mode 100644 docs/examples/tag.vue create mode 100644 packages/tag/CHANGELOG.md create mode 100644 packages/tag/README.md create mode 100644 packages/tag/index.js create mode 100644 packages/tag/package.json create mode 100644 packages/tag/src/main.vue create mode 100644 packages/zanui-css/src/tag.css diff --git a/components.json b/components.json index 902276d41..3c3cd88de 100644 --- a/components.json +++ b/components.json @@ -14,5 +14,6 @@ "loading": "./packages/loading/index.js", "panel": "./packages/panel/index.js", "card": "./packages/card/index.js", - "steps": "./packages/steps/index.js" + "steps": "./packages/steps/index.js", + "tag": "./packages/tag/index.js" } diff --git a/docs/examples-docs/tag.md b/docs/examples-docs/tag.md new file mode 100644 index 000000000..870837ad0 --- /dev/null +++ b/docs/examples-docs/tag.md @@ -0,0 +1,28 @@ +## Tag 组件 + +### 基础用法 +```html +返现 +返现 +``` + +### 高级用法 +```html +返现 +返现 +返现 +``` + +### API + +| 参数 | 说明 | 类型 | 默认值 | 可选值 | +|-----------|-----------|-----------|-------------|-------------| +| plain | 是否是空心tag | boolean | false | '' | +| mark | 是否是标记 | boolean | false | '' | +| type | tag类型 | string | '' | 'primary', 'success', 'danger' | + +### Slot + +| name | 描述 | +|-----------|-----------| +| - | 自定义tag显示内容 | diff --git a/docs/examples/tag.vue b/docs/examples/tag.vue new file mode 100644 index 000000000..0095f4757 --- /dev/null +++ b/docs/examples/tag.vue @@ -0,0 +1,52 @@ + + + + + diff --git a/docs/nav.config.json b/docs/nav.config.json index 79637c177..cd172b10c 100644 --- a/docs/nav.config.json +++ b/docs/nav.config.json @@ -34,6 +34,10 @@ "path": "/steps", "title": "Steps" }, + { + "path": "/tag", + "title": "Tag" + }, { "path": "/badge", "title": "Badge" diff --git a/packages/tag/CHANGELOG.md b/packages/tag/CHANGELOG.md new file mode 100644 index 000000000..e88c472b3 --- /dev/null +++ b/packages/tag/CHANGELOG.md @@ -0,0 +1,8 @@ +## 0.0.2 (2017-01-20) + +* 改了bug A +* 加了功能B + +## 0.0.1 (2017-01-10) + +* 第一版 diff --git a/packages/tag/README.md b/packages/tag/README.md new file mode 100644 index 000000000..4c6172563 --- /dev/null +++ b/packages/tag/README.md @@ -0,0 +1,26 @@ +# @youzan/<%= name %> + +!!! 请在此处填写你的文档最简单描述 !!! + +[![version][version-image]][download-url] +[![download][download-image]][download-url] + +[version-image]: http://npm.qima-inc.com/badge/v/@youzan/<%= name %>.svg?style=flat-square +[download-image]: http://npm.qima-inc.com/badge/d/@youzan/<%= name %>.svg?style=flat-square +[download-url]: http://npm.qima-inc.com/package/@youzan/<%= name %> + +## Demo + +## Usage + +## API + +| 参数 | 说明 | 类型 | 默认值 | 可选值 | +|-----------|-----------|-----------|-------------|-------------| +| className | 自定义额外类名 | string | '' | '' | + + + + +## License +[MIT](https://opensource.org/licenses/MIT) diff --git a/packages/tag/index.js b/packages/tag/index.js new file mode 100644 index 000000000..a9efba2a4 --- /dev/null +++ b/packages/tag/index.js @@ -0,0 +1,3 @@ +import Tag from './src/main'; + +export default Tag; diff --git a/packages/tag/package.json b/packages/tag/package.json new file mode 100644 index 000000000..7dbfa2900 --- /dev/null +++ b/packages/tag/package.json @@ -0,0 +1,10 @@ +{ + "name": "<%= name %>", + "version": "<%= version %>", + "description": "<%= description %>", + "main": "./lib/index.js", + "author": "<%= author %>", + "license": "<%= license %>", + "devDependencies": {}, + "dependencies": {} +} diff --git a/packages/tag/src/main.vue b/packages/tag/src/main.vue new file mode 100644 index 000000000..99a21131e --- /dev/null +++ b/packages/tag/src/main.vue @@ -0,0 +1,16 @@ + + + diff --git a/packages/zanui-css/src/index.css b/packages/zanui-css/src/index.css index 00f54ad47..387aaba63 100644 --- a/packages/zanui-css/src/index.css +++ b/packages/zanui-css/src/index.css @@ -15,3 +15,4 @@ @import './switch.css'; @import './panel.css'; @import './steps.css'; +@import './tag.css'; diff --git a/packages/zanui-css/src/tag.css b/packages/zanui-css/src/tag.css new file mode 100644 index 000000000..070c6e67e --- /dev/null +++ b/packages/zanui-css/src/tag.css @@ -0,0 +1,66 @@ +@import "./common/var.css"; +@import "./mixins/border_retina.css"; + +@component-namespace z { + @b tag { + position: relative; + display: inline-block; + line-height: 14px; + padding: 1px 5px; + border-radius: 2px; + font-size: 10px; + background: $c-gray; + color: $c-white; + + &::after { + @mixin border-retina (top, right, bottom, left), $c-gray; + border-radius: 4px; + } + + @m success { + background: $c-green; + + &::after { + border-color: $c-green; + } + @when plain { + color: $c-green; + } + } + + @m danger { + background: $button-danger-background-color; + + &::after { + border-color: $button-danger-background-color; + } + @when plain { + color: $button-danger-background-color; + } + } + + @m primary { + background: $c-blue; + + &::after { + border-color: $c-blue; + } + @when plain { + color: $c-blue; + } + } + + @when plain { + background: $c-white; + color: $c-gray; + } + + @when mark { + border-radius: 0 8px 8px 0; + + &::after { + border-radius: 0 16px 16px 0; + } + } + } +} diff --git a/src/index.js b/src/index.js index fe7959105..c014872a8 100644 --- a/src/index.js +++ b/src/index.js @@ -14,6 +14,7 @@ import Loading from '../packages/loading/index.js'; import Panel from '../packages/panel/index.js'; import Card from '../packages/card/index.js'; import Steps from '../packages/steps/index.js'; +import Tag from '../packages/tag/index.js'; const install = function(Vue) { if (install.installed) return; @@ -32,6 +33,7 @@ const install = function(Vue) { Vue.component(Panel.name, Panel); Vue.component(Card.name, Card); Vue.component(Steps.name, Steps); + Vue.component(Tag.name, Tag); }; // auto install @@ -57,5 +59,6 @@ export default { Loading, Panel, Card, - Steps + Steps, + Tag };