商城选择

商城数据的选择和展示。

CoDesign 设计稿

---

设计目标

• 实现对商城的快速识别，即可读性
• 实现对商城的快速选择，即可操作性

设计策略

• 视觉清晰易读
• 交互便携友好

交互状态

5 种交互状态：Enabled、Hover、Focus、Selected、Read Only。

警告

请勿将鼠标交互区域仅应用在Checkbox组件区域，这会导致增加用户的操作选择成本。

设计布局

4 列布局

默认为 4 列布局，根据容器宽度自适应。相邻间距固定为：16px。

点击右上角的文字按钮 全选 取消全选，将一键全选/取消全选所有数据。

全选后，计算选择的总数显示在文字按钮后面，文案格式：取消全选 (5)。

1 列布局

一般用于抽屉或者弹窗容器中。