diff --git a/doc.config.js b/doc.config.js index 73a3fcfa..96d47d96 100644 --- a/doc.config.js +++ b/doc.config.js @@ -36,7 +36,7 @@ module.exports = { include: { icon: require('./packages/icon/README.md'), button: require('./packages/button/README.md'), - helper: require('./packages/helper/README.md'), + common: require('./packages/common/README.md'), loading: require('./packages/loading/README.md') } }, diff --git a/example/pages/common/index.json b/example/pages/common/index.json index ac570c7b..514ca969 100644 --- a/example/pages/common/index.json +++ b/example/pages/common/index.json @@ -1,8 +1,6 @@ { - "navigationBarTitleText": "Common 基础样式", + "navigationBarTitleText": "Common 内置样式", "usingComponents": { - "van-cell": "../../dist/cell/index", - "van-panel": "../../dist/panel/index", - "van-cell-group": "../../dist/cell-group/index" + "demo-block": "../../components/demo-block/index" } } diff --git a/example/pages/common/index.wxml b/example/pages/common/index.wxml index add77c36..41349a6c 100644 --- a/example/pages/common/index.wxml +++ b/example/pages/common/index.wxml @@ -1,57 +1,7 @@ - - - van-pull-right: 往右靠 - - - - van-text-deleted:被删除的效果 - - - - - van-font-12:字号12 - van-font-bold:再来个加粗 - - - - - - van-font-16:字号16 - van-font-bold:再来个加粗 - - - - - - 字体颜色 - van-c-red: 红色 - van-c-gray: 灰色 - van-c-gray-dark: 再灰一点点 - van-c-gray-darker: 更深的灰色 - van-c-black: 黑色 - van-c-blue: 蓝色 - van-c-green: 绿色 - - - - - van-arrow:箭头 - - - - - - van-ellipsis:单行点点点 - ->我是占位的字符我是占位的字符我是占位的字符我是占位的字符我是占位的字符我是占位的字符 - - - - - - van-ellipsis--l2:单行点点点 - ->我是占位的字符我是占位的字符我是占位的字符我是占位的字符我是占位的字符我是占位的字符 - - - - + + 这是一段宽度限制 250px 的文字,后面的内容会省略 + + + + diff --git a/example/pages/common/index.wxss b/example/pages/common/index.wxss new file mode 100644 index 00000000..17d5b93c --- /dev/null +++ b/example/pages/common/index.wxss @@ -0,0 +1,14 @@ +.ellipsis { + font-size: 13px; + margin-left: 15px; + max-width: 250px; +} + +.hairline { + height: 30px; + background-color: #fff; +} + +.hairline::after { + top: 15px; +} diff --git a/example/pages/dashboard/config.js b/example/pages/dashboard/config.js index 2cd0bb27..f72378d3 100644 --- a/example/pages/dashboard/config.js +++ b/example/pages/dashboard/config.js @@ -3,7 +3,7 @@ export default { title: '基础组件', content: [ { - name: 'Common 基础样式', + name: 'Common 内置样式', path: '/pages/common/index' }, { diff --git a/packages/common/README.md b/packages/common/README.md index c9ab3799..b71ce964 100644 --- a/packages/common/README.md +++ b/packages/common/README.md @@ -1,71 +1,32 @@ -## Helper 基础样式 +## Common 内置样式 +Vant 中默认包含了一些常用样式,可以直接通过 className 的方式使用。 -### 使用指南 -在 app.wxss 中引入组件库所有样式 -```css -@import "path/to/vant-weapp/dist/index.wxss"; -``` +### 文字省略 +当文本内容长度超过容器最大宽度时,自动省略多余的文本。 -### 代码演示 -直接在元素上增加指定 class 即可 ```html -van-pull-right: 往右靠 +这是一段宽度限制 250px 的文字,后面的内容会省略 ``` -具体可用类名如下: +### 1px 边框 +为元素添加 Retina 屏幕下的 1px 边框(即 hairline),基于伪类 transform 实现。 -**字体大小** +```html + + -`van-font-8` 文字以8像素大小展示 + + -`van-font-10` 文字以10像素大小展示 + + -`van-font-12` 文字以12像素大小展示 + + -`van-font-14` 文字以14像素大小展示 + + -`van-font-16` 文字以16像素大小展示 - -`van-font-18` 文字以18像素大小展示 - -`van-font-20` 文字以20像素大小展示 - -`van-font-22` 文字以22像素大小展示 - -`van-font-24` 文字以24像素大小展示 - -`van-font-30` 文字以30像素大小展示 - -**字体颜色** - -`van-c-red` 文字以红色展示 - -`van-c-gray` 文字以浅灰色展示 - -`van-c-gray-dark` 文字以灰色展示 - -`van-c-gray-darker` 文字以深灰色展示 - -`van-c-black` 文字以黑色展示 - -`van-c-blue` 文字以蓝色展示 - -`van-c-green` 文字以绿色展示 - -**字体样式** - -`van-pull-right` 文字往右靠 - -`van-text-deleted` 文字显示删除效果 - -`van-font-bold` 文字加粗显示 - -**其他** - -`van-arrow` 展示向右侧箭头,以 absolute 布局,需要在外层加上 relative 来定位 - -`van-ellipsis` 文字过长点点点显示 - -`van-ellipsis--l2` 文字过长点点点显示,最多显示两行 - -`van-ellipsis--l3` 文字过长点点点显示,最多显示三行 + + +```