Eastblue组件
2019-01-31 本文已影响0人
Flare石头
Eastblue组件
一、右键菜单 - ContextMenu
菜单框,能够在任意位置弹出菜单,可以用于替换浏览器默认的右键菜单:

二、按钮 - EbButton
分为五种样式:

三、带图标的输入框 - EbSearchInput
如图:

四、国家级联选择器 - CountryCascader
单选,可以选择常用国家及其它国家,

五、自定义指标 - CustomColumns
自定义表格显示哪几列,选中的列会显示在表格中

六、标签页 - EbTabs
用于分隔同一功能下的几个子功能并来回切换。有两种样式:

一般第一级标签使用第一行的样式,第二季标签使用第二行的样式。
每个标签内部可以自定义显示内容,例如下:

七、选择器复合输入框 - InputWithSelect
选择器、输入框、按钮的复合组件,右侧的按钮可以隐藏:

八、多选器 - MultiSelect
多选框,用 Tag 展示已选项:

下拉框中,单击左侧选项可以选中或取消,右侧为已选择选项,按照选择的顺序排列,单击可以取消选择;
左侧可以拖动选择,也可以单击一项,再shift+左键单击另一项以批量选中/取消两项之间的选项。弹框的长度默认与上侧选框一样,也可以单独设置。

已选中的tag可以合并为一项仅显示数量;
可以设置显示筛选框,筛选后左侧仅会显示符合条件的项,此时选择下方的“全部/无”仅对这些选项有效,筛选框右侧的箭头用于调整左右侧的宽度比。
九、LightBarWrapper
用于给标签加上标题与下侧边框,当选中标签时标题与下边框会变为图中蓝色:

十、对话框 - EbDialog
弹出一个对话框,预设有两种footer,也可以不显示footer:

