布局组件是在 Ant Design 中的一个分类,在 Element Plus 中并没有这个分类,为了更方便的比较,我们以 Ant Design 中的通用组件做为比较基准,从 Element Plus 中的基础组件中找到与之对应的组件来进行比较。
Ant Design
布局组件中包含六个组件,它们分别是 Divider 分隔线、Flex 弹性布局、Grid 栅格、 Layout 布局、Space 间距与 Splitter 分隔面板。
Element Plus
Element Plus 中并没有布局组件的分类,不过它的其他组件分类中包含 Divider 分隔线,它的基础组件分类中包含 Container 布局容器、Layout 布局、Space 间距、 Splitter 分隔面板和 Scrollbar 滚动条。其中 Container 布局容器 与 Ant Design 中的 Layout 布局功能相似,Layout 布局与 Ant Design 中的 Grid 栅格功能相似,Flex 弹性布局与 Scrolllbar 滚动条都是这两个框架独有的。
小结
布局组件的概念在我们自己的系统里也可以做个性化封装,根据自己的系统来量身打造更高阶的组件并进行持续的迭代与文档更新这样才能使系统更方便维护与扩展。
在接下来的章节中,我们将对布局组件的七个组件进行比较,它们分别是:
- Divider 分隔线
- Flex 弹性布局(Ant Design)
- Grid 栅格 vs Layout 布局
- Layout 布局 vs Container 布局容器
- Space 间距
- Splitter 分隔面板
- Scrollbar(Element Plus)
参考链接:
发表回复