如何在界面可视化中配置样式

概述

本文讲述的是在开发者中心进行界面可视化配置时，当拖入一个组件后，如何将其配置成想要的用户视觉样式。组件拖入后，一般展示为默认的形态，而在日常使用中，往往需要修改组件大小、颜色、位置，使其展现为预期中的样式，符合日常使用习惯。

配置

1. 先在自定义功能中创建功能，进入界面可视化页面
2. 按业务功能拖入对应组件，这里以容器➕文本组件举例
3. 鼠标单击选中文本组件，然后在右侧点击样式面板进行选中。此时就可以在下方进行配置了，包含布局、文字、位置、背景四个模块

模块介绍

布局

布局外层是一个容器，可以控制内层元素的位置和排列方式，一般来说包含四种：弹性布局、内联布局、块级布局、内联块布局。

• 弹性布局（推荐）

弹性布局也称为Flex布局，可以轻松地控制容器内子元素的排列、对齐和空间分配，即使这些子元素的大小未知或动态变化。弹性布局非常的灵活，日常业务中大部分的页面布局都可以用它来实现，也是比较推荐的布局方式。它有以下几个配置参数：

1. 主轴方向。即排列方向，默认值为水平方向从左到右排列。也可以选择垂直方向（从上到下）排列，反向排列基本很难用到。
2. 主轴对齐。即对齐方式，默认值为左对齐。可选右对齐、居中、两端对齐（均匀拉伸分布填充满容器）、横向平均分布（均匀拉伸分布填充满容器，但两侧也会和子块有相同间距）
3. 副轴对齐。副轴指的是与主轴垂直的方向的对齐方式，默认值为顶部起点对齐（从上到下）。可选起点对齐、终点对齐、居中、基线对齐、占满容器高度（均匀拉伸分布填充满容器）
4. 换行方式。子元素太多时的换行方式，默认值为不换行。可选不换行、正换行
5. 边距设置（通用）。分为外边距、内边距，即定义内部子元素的起始位置，默认无边距，一般可以看作是0。支持直接填入上下左右四个方向的边距值，所见即所得
6. 尺寸（通用）。即大小设置，没有默认值，一般为自适应大小，弹性布局和块级布局会撑满主轴方向。可以自由输入长宽的值（会自动带单位px），除了固定值，还可以输入百分比、auto、1vw、0.5vh等特殊值

• 内联布局

• 块级布局

该元素生成一个块级盒子，在正常的流中，该元素之前和之后产生换行。容器默认值就是块级布局，宽度会自动撑满水平方向，高度自适应内容高度，可以自由设置宽高大小和内外边距

• 内联块布局

该元素生成块级元素盒，如果它是一个单独的行级盒，它将和周围的内容一起流动。顾名思义，内联块是内联布局和块级布局的融合体，宽高都会自适应内容大小，并且可以自由设置宽高大小和内外边距，符合大众一般认知

文字

此模块用于设置元素的文字样式，一旦设置，所有后代元素都会应用。包含以下几个配置：颜色、字体大小、字重、字号、行高、字间距、对齐方式

背景

• 圆角半径

此模块用于设置元素的位置，可以设置到画布任意位置，包含以下配置：

• 定位方式

包含静态定位、相对定位、绝对定位、固定定位、粘性定位

• z-index层级

示例