使用 Element UI 规划页面布局时的思路
布局
- 24 分栏布局方案:
特点:页面按行来分割,每行内各个组件高度相等。 - 容器布局方案:
特点:页面边栏的布局方式高度灵活。
从视觉上来看,边栏高度往往超越了主内容区间,甚至整个贯通页面高度。
网站主题风格
能够体现网站风格的元素,颜色可以在 Element 官网上定制,其它内容一般不要改动(请稍微尊重一下 Element 官方的设计师)
- 颜色
- 字体
- 图标
- 按钮
占位组件
占位组件的作用是结合数据、填充布局,所以它是网站内容填充的主体。
- 表单类组件
这里的难点大概是根据场景,选择合适的表单吧。看到 Element UI 后才发现,连 “开关” 这些都能算作表单。 - 数据驱动类组件
注意:数据驱动类组件在页面上的占用空间往往是数据量决定的,所以其占用的页面空间有很大的不确定性。因此,数据驱动类组件不宜和其它组件共同占用一行或一个面板组件空间。 - 导航类组件
- 面板(卡片)类组件
- 折叠面板
由于高度方向的可变性,导致使用场景相对来说较为特殊,在公网 WEB 应用上较为少见。 - 卡片
- 多个卡片组合起来,可以用来灵活地分割页面;
- 也可以把单个卡片的尺寸设置的很大,用来独占某一行或某个组件空间。
- 跑马灯
不要想太多,它仅适合用来做展示。
将其大小设置为宽高 100%、方向改为纵向,以此来切换页面,需要很多额外的代码,而且效果也并不是十分理想。
非占位组件
非占位组件不会影响网页布局,所以在思考网页布局时,可以不考虑这些内容,但是要清晰地认识到使用这些组件所产生的效果。
- 提示信息
- 弹出框
弹出框的内容相较于提示信息而言更为丰富,但表现力并没有那么好。
例如可以在弹出框中容纳表格、图像,但要考虑表格过大,弹出框容纳不下所出现的滚动条。 - 对话框
全屏覆盖类组件,被激活后,当前页面只能使用对话框,而无法使用其它组件。
与弹出框相同,对话框也可以容纳多种类型的组件,例如表格等。