通用样式

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

一、布局

1.1 外边距 & 内边距

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

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

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

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

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

1.2 宽度 & 高度

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

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

下方是弹性布局中设置这三种宽度类型的具体表现：

1.3 布局模式

布局模式有五种：

• 内联布局
  内联布局的组件，宽度和高度取决于内容，无法手动设置。如下图两个文本组件并列，即使设置了宽度，也不会生效：

  

• 块级布局
  占满一整行，可设置宽高，即使宽度不足，也只能一行一个组件：

  

• 内联块布局
  可设置宽高且不会强占整行，适合灵活布局：

  

• 弹性布局
  开启后会出现主轴、对齐等设置项，详见：弹性布局

  

• 隐藏
  启用后元素不会显示，但依然存在于 DOM 中。

二、文字

2.1 字号 & 字重

字号改变文字大小，字重改变粗细，效果如下：

2.2 文字颜色 & 字体

文字颜色可以多种方式绑定，详见：数据绑定

字体目前支持五种风格：

三种字体展示效果如下：

2.3 文字对齐

支持以下四种方式：

• 左对齐：基于父容器左侧
• 右对齐：基于父容器右侧
• 居中对齐：基于父容器居中
• 两端对齐：自动分配间距，两侧对齐

示例效果如下：

说明：对齐需容器为块级或内联块布局才能生效

2.4 行高

行高决定文本垂直对齐方式。行高等于容器高度时，文字可居中：

三、背景

3.1 背景色

支持多种绑定方式，详见：数据绑定

3.2 背景图片

支持绑定背景图，并可设置图片大小、重复、定位：

• 图片大小：

  • 自适应：保持比例，不缩放不裁剪
    

  • 等比覆盖：覆盖容器，可能裁剪
    

  • 等比填充：完整显示图像，可能留白
    

  • 自定义：自定义图像大小
    

• 重复显示： 支持横向、纵向、全部、不重复

  

• 定位： 设置图片在容器中的位置

  

  

• 不透明度： 透明度越高，内容越明显：

  

四、位置

设置组件在页面中的位置，包括定位方式、溢出、层级、浮动等：

4.1 定位方式

• 相对定位：相对原位置偏移
• 绝对定位：相对最近已定位父元素或视口
• 固定定位：相对视口，滚动不变
• 粘性定位：特定位置前相对，之后固定

4.2 溢出处理

可设置溢出方向（全向、纵向、横向）及策略（可见、隐藏、滚动、自动）：

滚动 滚动条始终存在；自动 仅在溢出时出现

4.3 层级（Z-index）

层级决定元素的显示优先级，数值越大越靠上：

4.4 浮动

支持左浮动、右浮动、清除浮动等设置：

五、边框

可配置边框样式、圆角和阴影效果：

5.1 边框样式

可选择显示边框的方向、样式（实线、虚线、点状）、宽度和颜色：

5.2 圆角

圆角可使边缘圆滑，支持具体 px 值或百分比设置：

5.3 阴影

阴影提升视觉层级，可选择内阴影或外阴影：

• 模式：

  • 外阴影：阴影向外扩散
  • 内阴影：阴影向内扩散

  

• 自定义参数：

  • X 轴偏移：正值右移，负值左移
  • Y 轴偏移：正值下移，负值上移
  • 模糊半径：值越大越模糊
  • 扩散半径：正数扩大，负数缩小
  • 阴影颜色