docs(Search): add Search demo (#2698)

* feat(Search):  add Search demo

* feat(Search):  search demo desc adjustment

* docs(Search): adjust demo order
This commit is contained in:
Lindy 2020-01-21 10:17:42 +08:00 committed by rex
parent f342e068df
commit 5b368fc9f2
2 changed files with 48 additions and 0 deletions

View File

@ -19,6 +19,30 @@
/>
</demo-block>
<demo-block title="禁用搜索框">
<van-search
value="{{ value }}"
placeholder="请输入搜索关键词"
disabled
/>
</demo-block>
<demo-block title="自定义背景色">
<van-search
value="{{ value }}"
placeholder="请输入搜索关键词"
background="#c8c9cc"
/>
</demo-block>
<demo-block title="搜索框内容对齐">
<van-search
value="{{ value }}"
placeholder="请输入搜索关键词"
input-align="center"
/>
</demo-block>
<demo-block title="高级用法">
<van-search
value="{{ value }}"

View File

@ -34,6 +34,30 @@
/>
```
### 自定义背景色
通过 `background` 属性可以自定义组件背景色
```html
<van-search placeholder="Placeholder" value="{{ value }}" background="#c8c9cc"/>
```
### 禁用搜索框
通过 `disabled` 属性可以将组件设置为禁用状态
```html
<van-search placeholder="请输入搜索关键词" value="{{ value }}" disabled/>
```
### 搜索框内容对齐
通过 `input-align` 属性可以设置搜索框内容的对齐方式
```html
<van-search placeholder="Placeholder" value="{{ value }}" input-align="center"/>
```
### 自定义行动按钮
`van-search` 支持自定义右侧取消按钮,使用名字为 action 的 slot并设置 use-action-slot 为 true 即可。