amis2/search-box.md at b2309bb73031dff2d1756c5fc21e3df305299b6a

test/amis2

mirror of https://gitee.com/baidu/amis.git synced 2024-11-30 02:58:05 +08:00

* Select Options等组件样式对齐4.0

* 更新测试快照

* 修改部分测试用例

* feat:4.0样式修改

* 修改checkboxes hover问题

* Feat image 4.0 (#4242)

* faet: Step组件支持点状步骤条、指定标签放置位置、新增超出内容显示浮层

* feat: Step组件支持点状步骤条、指定标签放置位置、新增超出内容显示浮层

* faet: Step组件支持点状步骤条、指定标签放置位置、新增超出内容显示浮层

* faet: Step组件支持点状步骤条、指定标签放置位置、新增超出内容显示浮层

* fix: 点状步骤条样式修改

* fix: inputTree组件对齐4.0标准

* fix: textarea组件对齐4.0标准

* fix: textarea组件对齐4.0标准

* fix: inputImage组件对齐4.0标准

* fix: inputImage组件对齐4.0标准

* fix: inputImage组件对齐4.0标准

* fix: inputImage组件对齐4.0标准

* fix: image组件样式优化

* fix: image组件样式优化

* fix: image组件样式优化

* fix: image组件样式优化

Co-authored-by: qiaoganggang <qiaoganggang@baidu.com>

* fix: textarea组件对齐4.0标准 (#4149)

* faet: Step组件支持点状步骤条、指定标签放置位置、新增超出内容显示浮层

* feat: Step组件支持点状步骤条、指定标签放置位置、新增超出内容显示浮层

* faet: Step组件支持点状步骤条、指定标签放置位置、新增超出内容显示浮层

* faet: Step组件支持点状步骤条、指定标签放置位置、新增超出内容显示浮层

* fix: 点状步骤条样式修改

* fix: inputTree组件对齐4.0标准

* fix: inputTree组件对齐4.0标准

* fix: textarea组件对齐4.0标准

* fix: textarea组件对齐4.0标准

Co-authored-by: qiaoganggang <qiaoganggang@baidu.com>

* fix： inputTree 组价对齐4.0标准 (#4148)

* faet: Step组件支持点状步骤条、指定标签放置位置、新增超出内容显示浮层

* feat: Step组件支持点状步骤条、指定标签放置位置、新增超出内容显示浮层

* faet: Step组件支持点状步骤条、指定标签放置位置、新增超出内容显示浮层

* faet: Step组件支持点状步骤条、指定标签放置位置、新增超出内容显示浮层

* fix: 点状步骤条样式修改

* fix: inputTree组件对齐4.0标准

* fix: inputTree组件对齐4.0标准

* fix: inputtree组件图标颜色修改

Co-authored-by: qiaoganggang <qiaoganggang@baidu.com>

* feat： 部分组件样式问题修复 (#4154)

* feat: input-text 样式

* feat: input-range 样式

* feat: table  样式 1

* feat: search-box

* feat: curd icon

* feat: table 空状态

* feat: input-text 多选，最大宽度设置

* feat: search-box 搜索图标颜色

* feat: crud 编辑、过滤、搜索、排序 图标样式修改

* feat: 更新快照

* feat: 更新快照 2

* feat: curd fix

* feat: curd edit icon fix

* feat: input-password 不可见 icon 修改

* feat: input-password snapshot update

* docs:完善对话框size参数说明

* feat: Log 组件支持虚拟渲染及限制最大行数

* 修复不支持 loading 问题

* 换一下名字

Co-authored-by: liuzedong02 <liuzedong02@baidu.com>
Co-authored-by: liweijian <liweijian@hkmtl.com>
Co-authored-by: wuduoyi <wuduoyi@baidu.com>
Co-authored-by: RUNZE LU <36724300+lurunze1226@users.noreply.github.com>

* fix：修复删除图标颜色问题 (#4245)

* faet: Step组件支持点状步骤条、指定标签放置位置、新增超出内容显示浮层

* feat: Step组件支持点状步骤条、指定标签放置位置、新增超出内容显示浮层

* faet: Step组件支持点状步骤条、指定标签放置位置、新增超出内容显示浮层

* faet: Step组件支持点状步骤条、指定标签放置位置、新增超出内容显示浮层

* fix: 点状步骤条样式修改

* fix: inputTree组件对齐4.0标准

* fix: textarea组件对齐4.0标准

* fix: textarea组件对齐4.0标准

* fix: inputImage组件对齐4.0标准

* fix: inputImage组件对齐4.0标准

* fix: inputImage组件对齐4.0标准

* fix: inputImage组件对齐4.0标准

* fix: image组件样式优化

* fix: image组件样式优化

* fix: image组件样式优化

* fix: image组件样式优化

* fix: 修复conditionbuilder组价图标颜色问题

Co-authored-by: qiaoganggang <qiaoganggang@baidu.com>

* form表单对齐云社4.0 (#4248)

* feat: form增加表单项 label文本对齐方式选项

* fix: remark 支持在表单内配置

* style: form 间距对齐云社4.0

Co-authored-by: sarding <hongfuquan@baidu.com>

* Fix chart radios name (#4251)

* fix:  Chart 单选框 修改为  ChartRadios 图表单选框

* fix: input-password 修改 可见 图标

Co-authored-by: liuzedong02 <liuzedong02@baidu.com>

* feat: checkboxes内边距&nestedSelect箭头修改 (#4254)

Co-authored-by: xujiahao01 <xujiahao01@baidu.com>

* Feature style 4.0 cxd (#4261)

* feat: 日期&折叠面板&提示样式对齐

* fix:测试用例修复

* feat: timeRange开始和结束分开&日期样式优化

* styles: 日历样式修复

Co-authored-by: hongyang03 <hongyang03@baidu.com>

* 整体字体大小调整 (#4264)

* feat: form增加表单项 label文本对齐方式选项

* fix: remark 支持在表单内配置

* style: form 间距对齐云社4.0

* 修改表单的字体

Co-authored-by: sarding <hongfuquan@baidu.com>

* inputfile  和 drawer对齐云社4.0 (#4249)

* fix: drawer 和 inputfile 关闭图标对齐云社4.0

* fix：修改 drawer的图标大小 和边框圆角

* drawer  样式调整

Co-authored-by: sarding <hongfuquan@baidu.com>

* Fix style (#4265)

* fix: input-password icon 高度

* fix: input-password icon 换行问题

Co-authored-by: liuzedong02 <liuzedong02@baidu.com>

* fix: curd 图标垂直居中 (#4271)

Co-authored-by: liuzedong02 <liuzedong02@baidu.com>

* fix:修复nestedSelect无法动态调整位置及溢出问题 (#4292)

Co-authored-by: xujiahao01 <xujiahao01@baidu.com>

* style: 优化switch组件动效 (#4302)

* style：优化date组件最小宽度 (#4303)

* style：cxd主题移动端基础字号调整为16px (#4305)

* style：switch调整动效速度

* chore：更新快照

* chore：更新快照

Co-authored-by: xujiahao01 <xujiahao01@baidu.com>
Co-authored-by: qiaogg <43558337+qiaogg@users.noreply.github.com>
Co-authored-by: qiaoganggang <qiaoganggang@baidu.com>
Co-authored-by: sansiro <sansiro@sansiro.me>
Co-authored-by: liuzedong02 <liuzedong02@baidu.com>
Co-authored-by: liweijian <liweijian@hkmtl.com>
Co-authored-by: wuduoyi <wuduoyi@baidu.com>
Co-authored-by: RUNZE LU <36724300+lurunze1226@users.noreply.github.com>
Co-authored-by: sarding <37691952+sarding@users.noreply.github.com>
Co-authored-by: sarding <hongfuquan@baidu.com>
Co-authored-by: 徐佳豪 <53201551+blue-squirrel@users.noreply.github.com>
Co-authored-by: HongYang <33488114+hy993658052@users.noreply.github.com>
Co-authored-by: hongyang03 <hongyang03@baidu.com>

2022-05-18 10:03:56 +08:00

3.3 KiB

Raw Blame History

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>"
      }
    ]
}

加强样式

{
    "type": "page",
    "initApi": "/api/mock2/page/initData?keywords=${keywords}",
    "body": [
      {
        "type": "search-box",
        "name": "keywords",
        "enhance": true
      },

      {
        "type": "tpl",
        "tpl": "<p>关键字：${keywords}</p><p>返回结果：${&|json}</p>"
      }
    ]
}

可清除

{
    "type": "page",
    "initApi": "/api/mock2/page/initData?keywords=${keywords}",
    "body": [
      {
        "type": "search-box",
        "name": "keywords",
        "clearable": true
      },

      {
        "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/mock2/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`	是否立即搜索

3.3 KiB Raw Blame History