guide.md 1.9 KB
说明
组件库开发中满足自定义与上手简单始终是不可兼得的。
Cell 作为移动端使用频率较高的组件，承载的使用场景也比较多，因此可以很明显地看出来 Props 比较多，支持的自定义选项也比较多。
插槽
Cell 组件支持 left 和 right 两种插槽，当 left 参数为‘slot’时 Cell 最左侧内容会被 left 插槽渲染，可参考示例自定义左侧图片；当 right 参数为‘slot’时 Cell 最右侧内容会被 right 插槽渲染，可参考示例自定义右侧图片。
left & right
left 参数支持使用 Icon Props 格式的 Object，此时将使用 STDF 的 Icon 组件渲染。
考虑到 Cell 右侧区域使用箭头的场景非常多，组件默认 right 参数为‘arrow’，显示箭头。
right 也支持传入 Icon Props，考虑右侧使用开关的场景较多，为了区分是 Switch Props 还是其他 Icon Props，right 增加了一个 type 属性（可选‘icon’和‘switch’）用于区分 Icon 和 Switch 组件。
优化：当右侧为 switch 时，点击整个 Cell 区域都会切换 Switch 的开关状态。
具体 Icon Props 与 Switch Props 请查看对应组件 API。
switcheck
switcheck 值仅在 right 的 type 为 switch 时生效，表示开关状态值。注意，此时 Cell 内部 Switch 的 check 由 switcheck 决定，请不要在 switch 内部再传入 check。
底部分割线
主要用于组合时，当 Cell 与 Cell 之间有间隔时，可以使用 line 参数控制是否显示底部分割线。
组合使用
Cell 组件支持组合使用，可以向 Cell Group 传入 Cell 来实现。为了不影响布局，注意配置单条 Cell 的 my、mx、radius、shadow、line 参数，请参考示例。
自定义
使用上下左右间距和顶部底部圆角参数，可以配置出多种 Cell 风格，如果还不能满足，可以使用注入 CSS（injClass）来实现更多自定义的样式，请参考示例。