diff --git a/example/pages/badge/index.json b/example/pages/badge/index.json index 9aa95ebd..701c0b96 100644 --- a/example/pages/badge/index.json +++ b/example/pages/badge/index.json @@ -1,3 +1,6 @@ { - "navigationBarTitleText": "Badge 徽章" + "navigationBarTitleText": "Badge 徽章", + "usingComponents": { + "zan-badge": "../../dist/badge/index" + } } diff --git a/example/pages/badge/index.wxml b/example/pages/badge/index.wxml index cae30010..2257aa74 100644 --- a/example/pages/badge/index.wxml +++ b/example/pages/badge/index.wxml @@ -4,22 +4,22 @@ - + + 9 - - 9 + + 19 - - 19 - - - - - 99+ + + 99+ diff --git a/example/pages/badge/index.wxss b/example/pages/badge/index.wxss index afbb2e63..9e5458b5 100644 --- a/example/pages/badge/index.wxss +++ b/example/pages/badge/index.wxss @@ -1,6 +1,7 @@ .demo { - padding: 40px 0; + padding: 40px 10px; display: flex; + flex-wrap: wrap; } .demo__item { flex: 1; diff --git a/packages/badge/README.md b/packages/badge/README.md index c67972f6..90cf2a4d 100644 --- a/packages/badge/README.md +++ b/packages/badge/README.md @@ -1,15 +1,33 @@ ## Badge 徽章 ### 使用指南 -在 app.wxss 中引入组件库所有样式 -```css -@import "path/to/zanui-weapp/dist/index.wxss"; +在 index.json 中引入组件 +```json +{ + "usingComponents": { + "zan-badge": "path/to/zanui-weapp/dist/badge/index" + } +} ``` ### 代码演示 + +#### 基础用法 ```html - - 10 + + 10 + +``` + +#### 自定义参数 +```html + + 10 ``` @@ -19,3 +37,11 @@ height: 100px; } ``` + +### API +| 参数 | 说明 | 类型 | 默认值 | +|-----|-----|-----|-----| +| color | 字体颜色 | String | `#fff` +| background-color | 背景颜色 | String | `#f44` +| font-size | 字体大小 | Number | 10 +| box-shadow | 为了更好的控制宽度，使用了box-shadow来实现badge的边框，可以根据box-shadow的语法自行修改颜色和宽度 | String | `0 0 0 2px #fff` diff --git a/packages/badge/index.js b/packages/badge/index.js new file mode 100644 index 00000000..c4c7f361 --- /dev/null +++ b/packages/badge/index.js @@ -0,0 +1,25 @@ +const DEFAULT_COLOR = '#fff'; +const DEFAULT_BACKGROUND_COLOR = '#f44'; +const DEFAULT_FONT_SIZE = 10; +const DEFAULT_BOX_SHADOW = '0 0 0 2px #fff'; + +Component({ + properties: { + color: { + type: String, + value: DEFAULT_COLOR + }, + backgroundColor: { + type: String, + value: DEFAULT_BACKGROUND_COLOR + }, + fontSize: { + type: Number, + value: DEFAULT_FONT_SIZE + }, + boxShadow: { + type: String, + value: DEFAULT_BOX_SHADOW + } + } +}); diff --git a/packages/badge/index.json b/packages/badge/index.json new file mode 100644 index 00000000..467ce294 --- /dev/null +++ b/packages/badge/index.json @@ -0,0 +1,3 @@ +{ + "component": true +} diff --git a/packages/badge/index.pcss b/packages/badge/index.pcss index 7bce89e1..8ede3dc7 100644 --- a/packages/badge/index.pcss +++ b/packages/badge/index.pcss @@ -1,9 +1,9 @@ .zan-badge { position: relative; } -.zan-badge__count { +.zan-badge__text { position: absolute; - top: -16px; + top: -0.8em; right: 0px; height: 1.6em; min-width: 1.6em; @@ -11,7 +11,7 @@ padding: 0 .4em; font-size: 20px; border-radius: .8em; - background: #FF4444; + background: #f44; color: #fff; text-align: center; white-space: nowrap; diff --git a/packages/badge/index.wxml b/packages/badge/index.wxml new file mode 100644 index 00000000..193791e7 --- /dev/null +++ b/packages/badge/index.wxml @@ -0,0 +1,8 @@ + + + + + diff --git a/yarn.lock b/yarn.lock index 80bb3c5f..a9cb27ec 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1180,6 +1180,10 @@ binary-extensions@^1.0.0: version "1.11.0" resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-1.11.0.tgz#46aa1751fb6a2f93ee5e689bb1087d4b14c6c205" +binaryextensions@~1.0.0: + version "1.0.1" + resolved "https://registry.npmjs.org/binaryextensions/-/binaryextensions-1.0.1.tgz#1e637488b35b58bda5f4774bf96a5212a8c90755" + block-stream@*: version "0.0.9" resolved "https://registry.yarnpkg.com/block-stream/-/block-stream-0.0.9.tgz#13ebfe778a03205cfe03751481ebb4b3300c126a" @@ -1982,6 +1986,13 @@ create-hmac@^1.1.0, create-hmac@^1.1.2, create-hmac@^1.1.4: safe-buffer "^5.0.1" sha.js "^2.4.8" +cross-env@^5.1.4: + version "5.1.4" + resolved "https://registry.npmjs.org/cross-env/-/cross-env-5.1.4.tgz#f61c14291f7cc653bb86457002ea80a04699d022" + dependencies: + cross-spawn "^5.1.0" + is-windows "^1.0.0" + cross-spawn@^5.0.1, cross-spawn@^5.1.0: version "5.1.0" resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-5.1.0.tgz#e8bd0efee58fcff6f8f94510a0a554bbfa235449" @@ -2655,7 +2666,7 @@ escape-html@~1.0.3: version "1.0.3" resolved "https://registry.yarnpkg.com/escape-html/-/escape-html-1.0.3.tgz#0258eae4d3d0c0974de1c169188ef0051d1d1988" -escape-string-regexp@1.0.5, escape-string-regexp@^1.0.2, escape-string-regexp@^1.0.5: +escape-string-regexp@1.0.5, escape-string-regexp@^1.0.2, escape-string-regexp@^1.0.3, escape-string-regexp@^1.0.5: version "1.0.5" resolved "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4" @@ -3656,10 +3667,24 @@ gulp-postcss@^7.0.0: postcss-load-config "^1.2.0" vinyl-sourcemaps-apply "^0.2.1" +gulp-remove-logging@^1.2.0: + version "1.2.0" + resolved "https://registry.npmjs.org/gulp-remove-logging/-/gulp-remove-logging-1.2.0.tgz#fd16c19d368e243430126c619a393363e2cfe5a6" + dependencies: + gulp-replace "0.5.4" + gulp-rename@^1.2.2: version "1.2.2" resolved "https://registry.npmjs.org/gulp-rename/-/gulp-rename-1.2.2.tgz#3ad4428763f05e2764dec1c67d868db275687817" +gulp-replace@0.5.4: + version "0.5.4" + resolved "https://registry.npmjs.org/gulp-replace/-/gulp-replace-0.5.4.tgz#69a67914bbd13c562bff14f504a403796aa0daa9" + dependencies: + istextorbinary "1.0.2" + readable-stream "^2.0.1" + replacestream "^4.0.0" + gulp-util@3.0.8, gulp-util@^3.0.0, gulp-util@^3.0.8: version "3.0.8" resolved "https://registry.npmjs.org/gulp-util/-/gulp-util-3.0.8.tgz#0054e1e744502e27c04c187c3ecc505dd54bbb4f" @@ -4446,14 +4471,14 @@ is-whitespace@^0.3.0: version "0.3.0" resolved "https://registry.yarnpkg.com/is-whitespace/-/is-whitespace-0.3.0.tgz#1639ecb1be036aec69a54cbb401cfbed7114ab7f" +is-windows@^1.0.0, is-windows@^1.0.2: + version "1.0.2" + resolved "https://registry.yarnpkg.com/is-windows/-/is-windows-1.0.2.tgz#d1850eb9791ecd18e6182ce12a30f396634bb19d" + is-windows@^1.0.1: version "1.0.1" resolved "https://registry.npmjs.org/is-windows/-/is-windows-1.0.1.tgz#310db70f742d259a16a369202b51af84233310d9" -is-windows@^1.0.2: - version "1.0.2" - resolved "https://registry.yarnpkg.com/is-windows/-/is-windows-1.0.2.tgz#d1850eb9791ecd18e6182ce12a30f396634bb19d" - is-wsl@^1.1.0: version "1.1.0" resolved "https://registry.yarnpkg.com/is-wsl/-/is-wsl-1.1.0.tgz#1f16e4aa22b04d1336b66188a66af3c600c3a66d" @@ -4547,6 +4572,13 @@ istanbul-reports@^1.1.4: dependencies: handlebars "^4.0.3" +istextorbinary@1.0.2: + version "1.0.2" + resolved "https://registry.npmjs.org/istextorbinary/-/istextorbinary-1.0.2.tgz#ace19354d1a9a0173efeb1084ce0f87b0ad7decf" + dependencies: + binaryextensions "~1.0.0" + textextensions "~1.0.0" + jest-changed-files@^22.2.0: version "22.2.0" resolved "https://registry.yarnpkg.com/jest-changed-files/-/jest-changed-files-22.2.0.tgz#517610c4a8ca0925bdc88b0ca53bd678aa8d019e" @@ -7362,6 +7394,14 @@ replace-ext@0.0.1: version "0.0.1" resolved "https://registry.npmjs.org/replace-ext/-/replace-ext-0.0.1.tgz#29bbd92078a739f0bcce2b4ee41e837953522924" +replacestream@^4.0.0: + version "4.0.3" + resolved "https://registry.npmjs.org/replacestream/-/replacestream-4.0.3.tgz#3ee5798092be364b1cdb1484308492cb3dff2f36" + dependencies: + escape-string-regexp "^1.0.3" + object-assign "^4.0.1" + readable-stream "^2.0.2" + request-promise-core@1.1.1: version "1.1.1" resolved "https://registry.yarnpkg.com/request-promise-core/-/request-promise-core-1.1.1.tgz#3eee00b2c5aa83239cfb04c5700da36f81cd08b6" @@ -8219,6 +8259,10 @@ text-table@^0.2.0, text-table@~0.2.0: version "0.2.0" resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4" +textextensions@~1.0.0: + version "1.0.2" + resolved "https://registry.npmjs.org/textextensions/-/textextensions-1.0.2.tgz#65486393ee1f2bb039a60cbba05b0b68bd9501d2" + throat@^4.0.0: version "4.1.0" resolved "https://registry.yarnpkg.com/throat/-/throat-4.1.0.tgz#89037cbc92c56ab18926e6ba4cbb200e15672a6a"