样式 API

tui-entine 支持丰富的样式属性，用于控制元素的外观和布局。

尺寸样式

控制元素的宽度、高度等尺寸属性。

interface ITuiStyle {
  // 尺寸
  width?: number; // 宽度
  height?: number; // 高度
  minWidth?: number; // 最小宽度
  minHeight?: number; // 最小高度
  maxWidth?: number; // 最大宽度
  maxHeight?: number; // 最大高度
}

示例：

element.style.width = 100; // 设置宽度为 100px
element.style.height = 50; // 设置高度为 50px
element.style.minWidth = 80; // 设置最小宽度为 80px
element.style.maxWidth = 200; // 设置最大宽度为 200px

定位样式

控制元素的位置和定位方式。

interface ITuiStyle {
  // 定位
  left?: number; // 左偏移
  right?: number; // 右偏移
  top?: number; // 上偏移
  bottom?: number; // 下偏移
  position?: string; // 定位方式：'absolute' | 'relative'
  direction?: string; // 方向：'ltr' | 'rtl'
}

示例：

// 绝对定位
element.style.position = "absolute";
element.style.left = 10; // 距离左侧 10px
element.style.top = 20; // 距离顶部 20px

// 相对定位
element.style.position = "relative";
element.style.left = 5; // 相对于原来位置左移 5px

Flex 布局

控制元素的 Flex 布局属性。

interface ITuiStyle {
  // Flex 布局
  flex?: number; // 伸缩比例
  flexDirection?: string; // 主轴方向：'row' | 'column' | 'row-reverse' | 'column-reverse'
  flexWrap?: string; // 换行方式：'nowrap' | 'wrap' | 'wrap-reverse'
  justifyContent?: string; // 主轴对齐方式：'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around'
  alignItems?: string; // 交叉轴对齐方式：'flex-start' | 'flex-end' | 'center' | 'stretch'
  alignSelf?: string; // 自身对齐方式：'auto' | 'flex-start' | 'flex-end' | 'center' | 'stretch'
  alignContent?: string; // 多轴线对齐方式：'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'stretch'
  flexGrow?: number; // 放大比例
  flexShrink?: number; // 缩小比例
}

示例：

// Flex 容器
container.style.display = "flex";
container.style.flexDirection = "row"; // 水平排列
container.style.justifyContent = "center"; // 水平居中
container.style.alignItems = "center"; // 垂直居中

// Flex 子元素
child.style.flex = 1; // 等分剩余空间
child.style.alignSelf = "flex-start"; // 自身顶部对齐

文本样式

控制文本的外观和排版。

interface ITuiStyle {
  // 文本样式
  fontSize?: number; // 字体大小
  lineHeight?: number; // 行高
  lines?: number; // 显示行数
  textAlign?: string; // 文本对齐：'left' | 'center' | 'right' | 'justify'
  verticalAlign?: string; // 垂直对齐：'top' | 'middle' | 'bottom'
  color?: string; // 文本颜色
  fontWeight?: string; // 字体粗细：'normal' | 'bold' | '100' | '200' | ... | '900'
  fontFamily?: string; // 字体
  letterSpacing?: number; // 字间距
  textOverflow?: string; // 文本溢出：'ellipsis' | 'clip'
  whiteSpace?: string; // 空白处理：'normal' | 'nowrap' | 'pre' | 'pre-wrap' | 'pre-line'
  wordBreak?: string; // 断词方式：'normal' | 'break-all' | 'keep-all'
  textShadowColor?: string; // 文本阴影颜色
  textShadowBlur?: number; // 文本阴影模糊半径
  textShadowOffsetX?: number; // 文本阴影 X 偏移
  textShadowOffsetY?: number; // 文本阴影 Y 偏移
  textStrokeWidth?: number; // 文本描边宽度
  textStrokeColor?: string; // 文本描边颜色
}

示例：

text.style.fontSize = 16; // 字体大小 16px
text.style.lineHeight = 1.5; // 行高 1.5 倍
text.style.color = "#333333"; // 文本颜色
text.style.textAlign = "center"; // 文本居中
text.style.textOverflow = "ellipsis"; // 文本溢出显示省略号
text.style.lines = 2; // 最多显示 2 行

边框样式

控制元素的边框和圆角。

interface ITuiStyle {
  // 边框
  borderWidth?: number; // 边框宽度
  borderLeftWidth?: number; // 左边框宽度
  borderRightWidth?: number; // 右边框宽度
  borderTopWidth?: number; // 上边框宽度
  borderBottomWidth?: number; // 下边框宽度
  borderStartWidth?: number; // 起始边框宽度
  borderEndWidth?: number; // 结束边框宽度
  borderColor?: string; // 边框颜色
  borderTopColor?: string; // 上边框颜色
  borderBottomColor?: string; // 下边框颜色
  borderLeftColor?: string; // 左边框颜色
  borderRightColor?: string; // 右边框颜色
  borderRadius?: number; // 边框圆角
  borderTopLeftRadius?: number; // 左上角圆角
  borderTopRightRadius?: number; // 右上角圆角
  borderBottomLeftRadius?: number; // 左下角圆角
  borderBottomRightRadius?: number; // 右下角圆角
}

示例：

element.style.borderWidth = 1; // 边框宽度 1px
element.style.borderColor = "#e0e0e0"; // 边框颜色

// 不同方向边框
element.style.borderTopWidth = 2; // 上边框 2px
element.style.borderBottomColor = "#ff0000"; // 下边框红色

// 圆角
element.style.borderRadius = 8; // 所有角圆角 8px
element.style.borderTopLeftRadius = 12; // 左上角圆角 12px

边距和内边距

控制元素的外边距和内边距。

interface ITuiStyle {
  // 外边距
  margin?: number; // 外边距
  marginLeft?: number; // 左边距
  marginRight?: number; // 右边距
  marginTop?: number; // 上边距
  marginBottom?: number; // 下边距
  marginStart?: number; // 起始边距
  marginEnd?: number; // 结束边距

  // 内边距
  padding?: number; // 内边距
  paddingLeft?: number; // 左边距
  paddingRight?: number; // 右边距
  paddingTop?: number; // 上边距
  paddingBottom?: number; // 下边距
  paddingStart?: number; // 起始边距
  paddingEnd?: number; // 结束边距
}

示例：

// 外边距
element.style.margin = 10; // 所有边距 10px
element.style.marginTop = 20; // 上边距 20px

// 内边距
element.style.padding = 15; // 所有内边距 15px
element.style.paddingLeft = 20; // 左边距 20px

背景样式

控制元素的背景。

interface ITuiStyle {
  // 背景
  backgroundColor?: string; // 背景颜色
  backgroundImage?: string; // 背景图片
  backgroundImageType?: string; // 背景图片类型
  backgroundImageInset?: string; // 背景图片内边距
}

示例：

element.style.backgroundColor = "#f5f5f5"; // 背景颜色
element.style.backgroundImage = "/static/bg.png"; // 背景图片

变换样式

控制元素的变换效果。

interface ITuiTransform {
  translateX?: number; // X轴平移
  translateY?: number; // Y轴平移
  scaleX?: number; // X轴缩放
  scaleY?: number; // Y轴缩放
  rotate?: number; // 旋转（弧度）
  skewX?: number; // X轴倾斜
  skewY?: number; // Y轴倾斜
}

interface ITuiStyle {
  transform?: ITuiTransform; // 变换
  opacity?: number; // 透明度 (0-1)
  rotateX?: number; // X轴旋转
  rotateY?: number; // Y轴旋转
}

示例：

// 平移和缩放
element.style.transform = {
  translateX: 50, // 向右平移 50px
  translateY: 100, // 向下平移 100px
  scaleX: 1.5, // X轴放大 1.5 倍
  rotate: Math.PI / 4, // 旋转 45 度
};

// 透明度
element.style.opacity = 0.8; // 80% 透明度

其他样式

interface ITuiStyle {
  // 其他
  display?: string; // 显示方式：'flex' | 'none'
  visibility?: string; // 可见性：'visible' | 'hidden'
  overflow?: string; // 溢出处理：'visible' | 'hidden' | 'scroll'
  opacity?: number; // 透明度

  // 滚动
  scrollX?: boolean; // 是否允许 X 轴滚动
  scrollY?: boolean; // 是否允许 Y 轴滚动
  scrollTop?: number; // 滚动条顶部位置
  scrollLeft?: number; // 滚动条左侧位置
  scrollHeight?: number; // 滚动内容高度
  scrollWidth?: number; // 滚动内容宽度
}

示例：

// 显示/隐藏
element.style.display = "none"; // 隐藏元素
element.style.visibility = "hidden"; // 元素不可见但保留空间

// 溢出处理
element.style.overflow = "scroll"; // 显示滚动条

// 滚动
element.style.scrollX = true; // 允许水平滚动
element.style.scrollTop = 100; // 滚动到顶部 100px 位置

图片样式

控制图片元素的特殊样式。

interface ITuiStyle {
  // 图片
  imageType?: string; // 图片类型
  imageInset?: string; // 图片内边距
}

示例：

image.style.imageType = "scaleToFill"; // 图片缩放方式
image.style.imageInset = "0 0 0 0"; // 图片内边距

样式优先级

样式优先级遵循以下规则：

1. 内联样式（直接设置的 style 属性）优先级最高
2. 类选择器样式次之
3. 标签选择器样式优先级最低

样式继承

部分样式属性会从父元素继承到子元素：

• 文本相关样式：fontSize, color, fontFamily, fontWeight 等
• 某些布局样式：direction 等

性能优化

1. 避免频繁样式更新：批量更新样式，减少重绘
2. 使用局部更新：只更新需要变化的元素
3. 合理使用缓存：对于不变的样式，避免重复计算
4. 减少嵌套层级：减少复杂的样式继承链