diff --git a/packages/cell/demo/index.vue b/packages/cell/demo/index.vue index 4f61aa18f..415cdfe3b 100644 --- a/packages/cell/demo/index.vue +++ b/packages/cell/demo/index.vue @@ -7,39 +7,41 @@ - - - - + + + - - - - + + - - - - - - + + + + + + + + + + + + + - - - - - - - - - + + + + + + + @@ -49,15 +51,19 @@ export default { i18n: { 'zh-CN': { cell: '单元格', - title2: '只设置 value', - title3: '展示图标', - title4: '展示箭头' + valueOnly: '只设置 value', + showIcon: '展示图标', + showArrow: '展示箭头', + largeSize: '单元格大小', + router: '页面跳转' }, 'en-US': { cell: 'Cell title', - title2: 'Value only', - title3: 'Left Icon', - title4: 'Link' + valueOnly: 'Value only', + showIcon: 'Left Icon', + showArrow: 'Link', + largeSize: 'Size', + router: 'Router' } } }; @@ -65,9 +71,13 @@ export default { diff --git a/packages/cell/en-US.md b/packages/cell/en-US.md index 481fbb9ff..86045999d 100644 --- a/packages/cell/en-US.md +++ b/packages/cell/en-US.md @@ -18,11 +18,12 @@ Vue.use(Cell).use(CellGroup); ``` -#### Value only +#### Size ```html - + + ``` @@ -34,6 +35,14 @@ Vue.use(Cell).use(CellGroup); ``` +#### Value only + +```html + + + +``` + #### Link ```html @@ -44,19 +53,28 @@ Vue.use(Cell).use(CellGroup); ``` +#### Router + +```html + + + + +``` + #### Advanced Usage ```html - + ``` @@ -75,6 +93,7 @@ Vue.use(Cell).use(CellGroup); | title | Title | `String | Number` | - | | value | Right text | `String | Number` | - | | label | Description below the title | `String` | - | +| size | Size，can be set to `large` | `String` | - | | border | Whether to show inner border | `Boolean` | `true` | | center | Whether to center content vertically | `Boolean` | `true` | | url | Link URL | `String` | - | diff --git a/packages/cell/index.less b/packages/cell/index.less index e95fc5ff0..a9bd823a5 100644 --- a/packages/cell/index.less +++ b/packages/cell/index.less @@ -23,7 +23,7 @@ &__label { font-size: 12px; - line-height: 1.2; + line-height: 18px; color: @gray-darker; } @@ -90,4 +90,13 @@ &--center { align-items: center; } + + &--large { + padding-top: 12px; + padding-bottom: 12px; + + .van-cell__title { + font-size: 16px; + } + } } diff --git a/packages/cell/index.vue b/packages/cell/index.vue index 9967802ca..4892575a5 100644 --- a/packages/cell/index.vue +++ b/packages/cell/index.vue @@ -4,6 +4,7 @@ b({ center, required, + [size]: size, borderless: !border, clickable: isLink || clickable }) @@ -50,6 +51,7 @@ export default create({ props: { icon: String, + size: String, label: String, center: Boolean, isLink: Boolean, diff --git a/packages/cell/test/__snapshots__/demo.spec.js.snap b/packages/cell/test/__snapshots__/demo.spec.js.snap index f62c79e34..577d3c17a 100644 --- a/packages/cell/test/__snapshots__/demo.spec.js.snap +++ b/packages/cell/test/__snapshots__/demo.spec.js.snap @@ -23,97 +23,129 @@ exports[`renders demo correctly 1`] = `
-
-
- - -
内容
+
+ +
单元格
+
内容
+ +
+
+ +
单元格 +
描述信息
+
+
内容
+
-
-
- - - -
单元格 - -
+
+ + +
单元格
+
内容
+
-
-
- -
单元格 - -
- - - - -
-
- -
单元格 - -
-
内容
- - - -
-
- -
单元格 - -
-
内容
- - - -
+
+ + +
内容
+
-
-
- - - -
单元格 标签
-
内容
- - - -
-
- - - -
单元格 - -
+
+ +
单元格 - - -
-
+ + -
单元格 - -
+ +
+
+ +
单元格 - - -
+
内容
+ + + +
+
+ +
单元格 + +
+
内容
+ + + +
+
+
+
+ +
单元格 + +
+ + + + +
+
+ +
单元格 + +
+ + + + +
+
+
+
+ + + +
单元格 标签
+
内容
+ + + +
+
+ + + +
单元格 + +
+ + + + +
+
+ +
单元格 + +
+ + + +
diff --git a/packages/cell/zh-CN.md b/packages/cell/zh-CN.md index a6253b5c8..79ed7496f 100644 --- a/packages/cell/zh-CN.md +++ b/packages/cell/zh-CN.md @@ -11,7 +11,7 @@ Vue.use(Cell).use(CellGroup); #### 基础用法 -将`van-cell-group`组件看成一个容器即可 +`Cell`可以单独使用，也可以与`CellGroup`搭配使用。`CellGroup`可以为`Cell`提供上下外边框。 ```html @@ -20,52 +20,65 @@ Vue.use(Cell).use(CellGroup); ``` -#### 只设置value -只设置`value`时会向左对齐 +#### 单元格大小 + +通过`size`属性可以控制单元格的大小 ```html - - - + + ``` #### 展示图标 + 通过`icon`属性在标题左侧展示图标 ```html - - - + ``` +#### 只设置 value + +只设置`value`时会向左对齐 + +```html + +``` #### 展示箭头 + 传入`is-link`属性则会在右侧显示箭头，并且可以通过传入`arrow-direction`属性控制箭头方向 ```html - - - - - + + + +``` + +#### 页面跳转 + +可以通过`url`属性进行页面跳转，或通过`to`属性进行 vue-router 跳转 + +```html + + ``` #### 高级用法 + 如以上用法不能满足你的需求，可以使用对应的`slot`来自定义显示的内容 ```html - - - - - - - - - + + + + + + + ``` ### CellGroup API @@ -82,10 +95,11 @@ Vue.use(Cell).use(CellGroup); | title | 左侧标题 | `String | Number` | - | - | | value | 右侧内容 | `String | Number` | - | - | | label | 标题下方的描述信息 | `String` | - | - | +| size | 单元格大小，可选值为 `large` | `String` | - | 1.4.4 | | url | 跳转链接 | `String` | - | - | | to | 路由跳转对象，同 `vue-router` 的 to | `String | Object` | - | - | | border | 是否显示内边框 | `Boolean` | `true` | - | -| replace | 跳转时是否替换当前 history | `String` | `false` | - | +| replace | 跳转时是否替换当前页面历史 | `String` | `false` | - | | clickable | 是否开启点击反馈 | `Boolean` | `false` | - | | is-link | 是否展示右侧箭头并开启点击反馈 | `Boolean` | `false` | - | | required | 是否显示表单必填星号 | `Boolean` | `false` | - | @@ -96,14 +110,13 @@ Vue.use(Cell).use(CellGroup); | 事件名 | 说明 | 参数 | |------|------|------| -| click | 点击 cell 时触发 | - | +| click | 点击单元格时触发 | - | ### Cell Slot | 名称 | 说明 | |------|------| -| - | 自定义显示内容 | +| - | 自定义`value`显示内容 | +| title | 自定义`title`显示内容 | | icon | 自定义`icon` | -| title | 自定义`title` | | right-icon | 自定义右侧按钮，默认是`arrow` | - diff --git a/packages/goods-action/zh-CN.md b/packages/goods-action/zh-CN.md index d52bae2b8..2062c1196 100644 --- a/packages/goods-action/zh-CN.md +++ b/packages/goods-action/zh-CN.md @@ -64,7 +64,7 @@ export default { | info | 图标右上角提示信息 | `String | Number` | - | - | | url | 跳转链接 | `String` | - | - | | to | 路由跳转对象，同 `vue-router` 的 to | `String | Object` | - | - | -| replace | 跳转时是否替换当前 history | `String` | `false` | - | +| replace | 跳转时是否替换当前页面历史 | `String` | `false` | - | #### GoodsActionBigBtn @@ -76,4 +76,4 @@ export default { | loading | 是否显示为加载状态 | `Boolean` | `false` | - | 1.3.10 | | url | 跳转链接 | `String` | - | - | | to | 路由跳转对象，同 `vue-router` 的 to | `String | Object` | - | - | -| replace | 跳转时是否替换当前 history | `String` | `false` | - | +| replace | 跳转时是否替换当前页面历史 | `String` | `false` | - | diff --git a/packages/tabbar/zh-CN.md b/packages/tabbar/zh-CN.md index 6af738c9b..1d3f483b9 100644 --- a/packages/tabbar/zh-CN.md +++ b/packages/tabbar/zh-CN.md @@ -88,7 +88,7 @@ export default { | info | 图标右上角提示信息 | `String | Number` | - | - | | url | 跳转链接 | `String` | - | - | | to | 路由跳转对象，同 `vue-router` 的 to | `String | Object` | - | - | -| replace | 跳转时是否替换当前 history | `String` | `false` | - | +| replace | 跳转时是否替换当前页面历史 | `String` | `false` | - | ### TabbarItem Slot