小雨点

咱们在规划比方CRM(客户关系办理)、OA(办公主动化)等面向B端用户的后台界面时,往往会被各式各样错综冗杂的组件弄得晕头转向,不知该怎么挑选。有时十分困难选完之后,又会发现有更适宜的组件,导致重复修正规划稿,降低了工作效率。

 

那么在对比了几个常用的组件库(Ant Design / Element / iView)并结合本身的工作经历之后,我挑选了一些常用的组件,来和咱们简略总结下它们的运用场景以及或许出现的误区。

在Ant Design的组件库中,分为了通用、布局、导航、数据录入、数据展现、反应、其他这七大类组件。今天先来看看数据录入中的相关组件,我将其又分为了手动输入以及点击挑选两大类。(评分、上传等特征显着的组件就不在此赘述了。)

 

手动输入

输入框Input

输入框是数据录入中最常见也是最根底的组件,在需求用户输入内容的时分即可选用。


除了惯例的输入框,带前/后缀、带图标、带按钮的输入框也是较常用到的。

在输入内容中头/尾是相对固定的时分,咱们就能够选用带前/后缀的输入框来削减用户手动输入,比方网址输入框就能够加上后缀。


有时分为了协助用户了解输入内容的类型,能够在输入框中加上图标,比方输入用户名或暗码的时分。


带按钮的输入框最常运用的场景便是查找框了。

 

主动完结AutoComplete

主动完结其实是输入框Input的一项功用,可是Ant Design和iView中将其独自拎出来了,为了防止咱们搞混,咱们这儿也独自讲。(Element中在输入框-带输入主张)

望文生义,主动完结便是辅佐用户输入。在输入一部分内容后,供给相关的备选项,不只能够削减手动输入,还能更精准的输入。常见的运用场景便是查找框了。

数字输入框InputNumber

数字输入框特用于需求输入规模数值的场景(电话QQ等号码不宜运用)。右侧的步进器则能够协助用户精准操控数值的增减。


当然作为输入框的一种,也能够加上前/后缀来削减固定内容的输入,比方%或许钱银单位(¥、$、元、円)。

点击挑选

单选框Radio

单选框望文生义便是在一组选项中仅可挑选一个时运用。


因为单选框的选项都是平铺展现的,所以选项不宜过多,当选项较多时主张选用挑选器Select(后文会说到)。

按钮方法的单选框也能够被当作标签页Tabs来运用(标签页Tabs的实质其实便是单选框)。

 

多选框Checkbox

多选框则是在一组选项中需求挑选多个时运用。


相同,因为是平铺展现,选项不宜过多。

多选框不同于单选框Radio的是,它能够独自运用,来表明两种状况之间的切换,类似于开关Switch。差异在于开关Switch会直接触发改动状况,多选框则一般用于状况符号,需求合作提交操作运用。

 

挑选器Select

挑选器也是数据录入中很常见的组件,它以下拉菜单的方法来出现选项(选项较少时主张选用单选框Radio多选框Checkbox平铺展现)。


除了单选,还有多选的方法。


上文输入组件中说到的主动完结AutoComplete,其实也是挑选器的一种衍生方法——带输入的挑选器。

 

级联挑选Cascader

级联挑选是指,在挑选器Select选项数量较大时,选用多级分类的方法将选项进行分隔,便于用户挑选。比方地址挑选,就能够按省市区一层层分类。

 

络绎框Transfer

多选框Checkbox选项过多时,除了挑选器Select的多选方法,还能够用络绎框的方法来出现。比较于挑选器Select,络绎框占有更大的空间,当然也能够展现选项的更多信息。

 

日期挑选器DatePicker

当需求录入日期的时分,能够选用日期挑选器。用户从弹出的日历面板中直接选取即可。


当然,需求录入一段时刻的时分,也能够一起挑选开端日期和完毕日期。

 

时刻挑选器TimePicker

时刻挑选器与日期挑选器DatePicker简直相同,从弹出面板中挑选时刻即可。


时刻挑选器和日期挑选器DatePicker还能够组合运用。

 

滑块Slider

滑块的运用场景类似于数字输入框InputNumber,需求在某个规模内录入数值。不同的是,它能够直接选取而不必手动输入。


当然,也能够和数字输入框InputNumber合作运用。


还能够挑选某个区间,比方价格区间。


当数据选项较少或许离散(不接连)时,还能够选用分段的方法。

 

小结

今天首要讲了数据录入的相关组件,共11个:

输入框Input:最根底组件,除惯例外,还有带前/后缀、带图标、带按钮的方法。

主动完结AutoComplete:输入框Input的一项功用,供给备选项辅佐输入。

数字输入框InputNumber:录入规模数值,带步进器精准操控,还可带前/后缀。

单选框Radio:只能挑选一个,选项不宜过多,按钮方法可做标签页Tabs

多选框Checkbox:可多选,选项不宜过多,单个运用可做开关Switch

挑选器Select:以下拉菜单的方法出现更多选项,可单选/多选,可带输入。

级联挑选Cascader:选项数量较大,选用分类的方法将选项分隔。

络绎框Transfer:可多选,展现选项更多的信息。

日期挑选器DatePicker:挑选日期,能够挑选一段日期。

时刻挑选器TimePicker:挑选时刻,能够与日期挑选器DatePicker组合运用。

滑块Slider:录入规模数值,可与数字输入框InputNumber组合运用,可挑选区间,可用分段的方法。

 

想进一步了解的小伙伴能够移步各大组件库的官网,里边有各个组件更翔实的出现方法及运用办法。

Ant Design:http://t.cn/RClMDfd

Element:http://t.cn/Et5YQE0

iView:http://t.cn/R3aImLu

 

注:

1、文中标粗部分均特指某一种组件。

2、各组件库组件中文名各有不同,以英文名为准。

 

原文地址:海盐社(大众号)
作者: 海舟

 

转载请注明:明升m88.com网 » 规划B端后台,有必要搞清楚这些组件(一)

登录保藏
 
你或许喜爱的:
B端产品 — 秒级监控B端产品 — 秒级监控
体系后台怎么“查询”数据更快捷?体系后台怎么“查询”数据更快捷?
B端后台组件详解(二)——导航B端后台组件详解(二)——导航
最新Dashboard规划实例、技巧和资源集锦,视觉和功用两不误,妥妥的!最新Dashboard规划实例、技巧和资源集锦,视觉和功用两不误,妥妥的!
大屏数据可视化规划攻略大屏数据可视化规划攻略
大屏监控体系数据可视化界面规划大屏监控体系数据可视化界面规划
真屏实据 | 数据大屏规划实战真屏实据 | 数据大屏规划实战
「后台体系原型资源共享」第三弹「后台体系原型资源共享」第三弹
合理复用组件,解锁数据图表规划新姿态合理复用组件,解锁数据图表规划新姿态
后台规划无从下手?微信后台用这7点教会你!后台规划无从下手?微信后台用这7点教会你!