blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-23 09:52:57 +08:00
Code Issues Projects Releases Wiki Activity

[Improvement] Cell: add arrow-direction prop (#1323)

Browse Source 
* [Improvement] Cell: add arrow-direction prop

* update
This commit is contained in:
Fyerl 2018-06-28 08:27:24 +08:00 committed by neverland
parent 83ab9b1917
commit f5fc86f182
5 changed files with 23 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
packages/cell/demo/index.vue
View File

@ -23,6 +23,7 @@
<van-cell-group> <van-cell-group>
<van-cell :title="$t('cell')" is-link /> <van-cell :title="$t('cell')" is-link />
<van-cell :title="$t('cell')" is-link :value="$t('content')" /> <van-cell :title="$t('cell')" is-link :value="$t('content')" />
<van-cell :title="$t('cell')" is-link arrow-direction="down" :value="$t('content')" />
</van-cell-group> </van-cell-group>
</demo-block> </demo-block>

2
packages/cell/en-US.md
View File

@ -40,6 +40,7 @@ Vue.use(Cell).use(CellGroup);
<van-cell-group> <van-cell-group>
<van-cell title="Cell title" is-link /> <van-cell title="Cell title" is-link />
<van-cell title="Cell title" is-link value="Content" /> <van-cell title="Cell title" is-link value="Content" />
<van-cell title="Cell title" is-link arrow-direction="down" value="Content" />
</van-cell-group> </van-cell-group>
``` ```
@ -82,6 +83,7 @@ Vue.use(Cell).use(CellGroup);
| clickable | Whether to show click feedback when clicked | `Boolean` | `false` | | clickable | Whether to show click feedback when clicked | `Boolean` | `false` |
| is-link | Whether to show link icon | `Boolean` | `false` | | is-link | Whether to show link icon | `Boolean` | `false` |
| required | Whether to show required mark | `Boolean` | `false` | | required | Whether to show required mark | `Boolean` | `false` |
| arrow-direction | Can be set to `left` `up` `down` | `String` | - |
### Cell Event ### Cell Event

5
packages/cell/index.vue
View File

@ -28,7 +28,7 @@
</slot> </slot>
</div> </div>
<slot name="right-icon"> <slot name="right-icon">
<icon v-if="isLink" :class="b('right-icon')" name="arrow" /> <icon v-if="isLink" :class="`${b('right-icon')} ${arrowDirection ? b(`arrow--${arrowDirection}`) : ''}`" name="arrow" />
</slot> </slot>
<slot name="extra" /> <slot name="extra" />
</div> </div>
@ -60,7 +60,8 @@ export default create({
border: { border: {
type: Boolean, type: Boolean,
default: true default: true
} },
arrowDirection: String
}, },
methods: { methods: {

4
packages/cell/zh-CN.md
View File

@ -40,12 +40,13 @@ Vue.use(Cell).use(CellGroup);
#### 展示箭头 #### 展示箭头
传入`is-link`属性则会在右侧显示箭头 传入`is-link`属性则会在右侧显示箭头，并且可以通过传入`arrow-direction`属性控制箭头方向
```html ```html
<van-cell-group> <van-cell-group>
<van-cell title="单元格" is-link /> <van-cell title="单元格" is-link />
<van-cell title="单元格" is-link value="内容" /> <van-cell title="单元格" is-link value="内容" />
<van-cell title="单元格" is-link arrow-direction="down" value="内容" />
</van-cell-group> </van-cell-group>
``` ```
@ -89,6 +90,7 @@ Vue.use(Cell).use(CellGroup);
| clickable | 是否开启点击反馈 | `Boolean` | `false` | | clickable | 是否开启点击反馈 | `Boolean` | `false` |
| is-link | 是否展示右侧箭头并开启点击反馈 | `Boolean` | `false` | | is-link | 是否展示右侧箭头并开启点击反馈 | `Boolean` | `false` |
| required | 是否显示表单必填星号 | `Boolean` | `false` | | required | 是否显示表单必填星号 | `Boolean` | `false` |
| arrow-direction | 箭头方向，可选值为 `left` `up` `down` | `String` | - |
### Cell Event ### Cell Event

14
packages/vant-css/src/cell.css
View File

@ -58,6 +58,20 @@
margin-left: 5px; margin-left: 5px;
} }
&__arrow {
&--left::before {
transform: rotate(180deg);
}
&--up::before {
transform: rotate(-90deg);
}
&--down::before {
transform: rotate(90deg);
}
}
&--clickable { &--clickable {
&:active { &:active {
background-color: $active-color; background-color: $active-color;