mirror of
https://gitee.com/baidu/amis.git
synced 2024-12-05 21:49:09 +08:00
2.6 KiB
2.6 KiB
title | description | type | group | menuName | icon |
---|---|---|---|---|---|
Search Box 搜索框 | 0 | ⚙ 组件 | Search Box |
基本用法
用于展示一个简单搜索框,通常需要搭配其他组件使用。比如 page 配置 initApi
后,可以用来实现简单数据过滤查找,name
keywords 会作为参数传递给 page 的 initApi
。
{
"type": "page",
"initApi": "/api/mock2/page/initData?keywords=${keywords}",
"body": [
{
"type": "search-box",
"name": "keywords"
},
{
"type": "tpl",
"tpl": "<p>关键字:${keywords}</p><p>返回结果:${&|json}</p>"
}
]
}
mini 版本
{
"type": "page",
"initApi": "/api/mock2/page/initData?keywords=${keywords}",
"body": [
{
"type": "search-box",
"name": "keywords",
"mini": true
},
{
"type": "tpl",
"tpl": "<p>关键字:${keywords}</p><p>返回结果:${&|json}</p>"
}
]
}
与 CRUD 搭配
{
"type": "crud",
"api": "/api/sample",
"syncLocation": false,
"headerToolbar": [
{
"type": "search-box",
"name": "keywords",
"align": "right",
"placeholder": "关键字检索"
}
],
"columns": [
{
"name": "id",
"label": "ID"
},
{
"name": "engine",
"label": "Rendering engine"
},
{
"name": "browser",
"label": "Browser"
},
{
"name": "platform",
"label": "Platform(s)"
},
{
"name": "version",
"label": "Engine version"
},
{
"name": "grade",
"label": "CSS grade"
}
]
}
与 Service 搭配
{
"type": "page",
"body": [
{
"type": "service",
"api": "/api/mock2/page/initData?keywords=${keywords}",
"body": [
{
"type": "search-box",
"name": "keywords"
},
{
"type": "tpl",
"tpl": "<p>关键字:${keywords}</p><p>返回结果:${&|json}</p>"
}
]
}
]
}
属性表
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
type | string |
search-box |
|
className | string |
外层 CSS 类名 | |
mini | boolean |
是否为 mini 模式 | |
searchImediately | boolean |
是否立即搜索 |