通用样式

在通用样式中可以配置非常多的样式，例如外边距、内边距、布局模式、定位方式、边框样式、内容溢出后的处理方式、层级、阴影样式等 。

一、布局

1.1 外边距&内边距

如下图，外层的四个区域可以输入外边距，内层的四个按钮可以设置内边距。下方的输入框也能设置外内边距。

例如，在一个列容器内放置一个卡片组件，并将卡片组件的上、右、下和左方向的外边距分别设置为 40、50、60和 70px。

设置后的卡片四边与列容器的四边距离如下。

内边距的设置方式与外边距相同。同样地，可在如下区域或者输入框设置组件四个方位的内边距，单位均为 px。

例如，在一个列容器内放置一个卡片组件，并将列容器的上、右、下和左方向的内边距分别设置为 30、40、50 和 60px。

1.2 宽度&高度

目前组件宽度和高度提供三种设置类型，分别为 px（像素单位）、% 和 auto。

• px：即以px为单位设置组件的固定宽度。
• %：即设置该组件宽度为父容器宽度的百分比值。
• auto：即设置组件宽度为默认值，或组件根据实际情况自动伸缩宽度。

下方是在一个弹性布局的内部设置这三种类型的宽度的具体表现：

1.4 布局模式

布局模式有五种：

• 内联布局：内联布局的组件，组件的宽度和高度决定于组件的内容，所以手动设置宽高是无效的。如下图，两个文本组件并列，其中一个设置宽度为 200px，另一个没有设置，可以看到两个组件的宽度一样，原因就是文本组件默认是内联布局。

  

• 块级布局：块级布局的组件会占满一整行，同时，也可以设置这个组件的宽度高度了。但即使宽度不足以占满一整行，同一行也只会有一个块级元素。如下图，两个文本组件，其中一个设置成块级布局，就把另外一个文本组件挤了下去，即使设置了 200px 的宽度，同一行还有位置。

  

• 内联块布局：已知内联布局无法设置高宽度，块级布局一行只能有一个元素。有没有什么布局方式即可以设置高宽，又不会占满一整行呢？这时候就可以使用内联块布局。如下图，设置了内联块布局的文本组件，200px生效了，而且也没有把另外一个文本组件挤到第二行。

  

• 弹性布局：开启弹性布局之后，会在组件外层包裹一个占满一整行的弹性布局。同时也会出现主轴方向，主轴对齐，辅轴对齐等配置项。详细作用请参考组件文档弹性布局。

  

• 隐藏：该布局方式很简单，开启之后，该元素不会显示在页面上，但依然存在。

二、文字

2.1 字号&字重

字号改变文字的大小，字重改变文字的粗细。下方是效果：

2.2 文字颜色&字体

文字颜色如字面意思，改变文字的颜色，可以选择多种方式来改变颜色，详见数据绑定。

字体则是设置文字的风格，目前提供了五种风格的字体。

下方是其中三种的展示效果：

2.3 文字对齐

文字对齐方式有以下四种：

• 左对齐：基于父容器的最左侧对齐
• 右对齐：基于父容器的最右侧对齐
• 居中对齐：基于父容器的中间对齐
• 两侧对齐：通过调整文本的间距，来达到左右两侧均对齐的效果

以下是效果展示：

需要注意的是：文本对齐效果只有在文本的容器是块级布局或者内联块布局的时候生效。

2.4 行高

文本的行高是多少，文本就会基于这个行高居中对齐。下图可以看出差别，行高和容器的高度一样的时候，文本才能垂直居中。

三、背景

3.1 背景色

可以设置组件的背景颜色，提供多种数据绑定方式，详见数据绑定。

3.2 背景图片

背景图片也提供多种绑定方式。且选择了背景图片之后，会出现图片大小、重复显示、定位三个配置项。

**图片大小：**图片大小默认是自适应，且提供以下四种配置项：

• 自适应：背景图片保持原本比例，同时不拉伸也不缩放。

  

• 等比覆盖：保持图像的比例，让图片完全覆盖容器，可能裁剪部分图像。

  

• 等比填充：保持图像的比例，让图片完全显示在容器内部，可能会留白。

  

• 自定义：自己定义图像的大小。

  

**重复显示：**设置在图片大小没有容器大时，图片是否重复显示，以及重复显示的策略。可以配置为垂直方向重复、水平方向重复和垂直、水平方向都重复或者不重复。例如，下方将宽度和高度都是设置成 50%，再设置成水平和垂直方向都重复，所以会出现四张图片。

**定位：**设置图片的在容器中的位置，可以自己定义距离左侧和顶部的距离，也可点击左侧的按钮快捷定位。

示例：下图点击了左侧的底部中间的快捷定位的按钮，背景图片也处在了相应位置。

**不透明度：**不透明度越高，内容就越明显，下图是不同透明度的背景的区别。

四、位置

设置组件在页面中的位置，可以配置定位方式、溢出的设置等。

4.1 定位

默认是无定位，可以配置下方四种定位方式：

• 相对定位：相对于原本位置进行偏移，原始位置会保留。
• 绝对定位：原始位置不保留、相对于最近的已定位父元素或者视口定位。
• 固定定位：相对于视口进行定位，页面滚动时位置不变。
• 粘性定位：元素滚动到特定的位置之前表现为相对定位，之后表现为固定定位。

4.2 溢出

可以设置对溢出内容的处理策略，也可以设置成特定的溢出方向。

溢出方向可以设置为：全向、纵向、横向。策略可以设置为：可见、隐藏、滚动、自动。

下方示例中：可以看到我在弹性布局里面放入了四个按钮，四个按钮的宽度已经超出了弹性布局的宽度，也就是在x轴上溢出了。下方示例是 x 轴上不同溢出策略的区别。

上方示例中，滚动和自动的视觉效果是一样的，但是其实是有细微差别的。设置成滚动，滚动条就会一直存在。设置成自动的话，只有在内容溢出容器限制之后，滚动条才会出现。

4.3 层级

层级可以理解为页面元素显示的优先级。层级越高，优先级越高，当元素重叠时，层级最高的元素会显示在最上面。如下图，我用绝对定位将红色小按钮重叠在绿色大按钮之上，因为红色小按钮层级设置为10，绿色大按钮层级设置为5，所以红色小按钮显示在上方。

4.4 浮动

左浮动的元素显示在父元元素的左侧，右浮动的元素显示在右侧。同时，设置了浮动之后可以设置浮动清除，清除左浮动可以让该元素显示在所有左浮动的元素的下方，同理右清除则是显示在右浮动的元素的下方。下图是示例：

五、边框

可以设置元素的边框样式，以及圆角和阴影。

5.1 边框

配置元素的边框是否显示、以及样式、宽度和颜色。点击左侧的上下左右四个按钮分别对应上下左右四个边框。

下图示例中，我点击右侧的按钮，只设置了右边框的样式：

同时也能配置元素的边框样式：实线、虚线、点状边框以及颜色。

5.2 圆角

设置圆角可以让元素的边缘圆滑一些。可以设置成具体的像素值也可以以百分比作为单位。

同时设置圆角可以分别定义四个角，下发是效果展示：

5.3 阴影

阴影效果可以为元素添加视觉深度，层次效果和立体感。

可以通过三种快捷方式配置阴影效果，也可自定义。下方是三种快捷方式配置的阴影效果。

模式：阴影的模式分为外阴影和内阴影。模式是外阴影，外阴影的视觉效果是阴影向外扩散，内阴影则是向内扩散，下方是内阴影示例。

自定义：

• x 轴偏移：阴影水平方位移。正数向右，负数向左
• y 轴偏移：阴影垂直方向位移。正数向上，负数向下
• 模糊半径：阴影边缘模糊程度，值越大越模糊。
• 扩散半径：阴影扩大/缩小。正数扩大，负数缩小
• 颜色：阴影的颜色

示例：