TuniaoUI

Appearance

尺寸 ​

TuniaoUI 提供了一套内置尺寸系统和 6 级圆角体系，帮助开发者快速设置组件的宽度、高度与圆角。

尺寸预览 ​

尺寸预览

内置尺寸 ​

TuniaoUI 内置了常用的宽度与高度常量及函数，通过导入即可直接使用。

固定宽度 ​

名称类型值说明
tn_w_full常量"100%"100% 宽度，填满父容器
tn_w_auto常量"auto"自动宽度，根据内容自适应
tn_w_screen函数屏幕宽度获取当前屏幕宽度（带单位）

固定高度 ​

名称类型值说明
tn_h_full常量"100%"100% 高度，填满父容器
tn_h_auto常量"auto"自动高度，根据内容自适应
tn_h_screen函数屏幕高度获取当前屏幕高度（带单位）

比例尺寸函数 ​

tn_w(分子, 分母) 和 tn_h(分子, 分母) 可按比例生成百分比尺寸字符串，适用于栅格布局、等分排列等场景。

调用示例输出说明
tn_w(1, 2)"50.00%"1/2 宽度
tn_w(1, 3)"33.33%"1/3 宽度
tn_w(2, 3)"66.67%"2/3 宽度
tn_w(1, 4)"25.00%"1/4 宽度
tn_w(3, 4)"75.00%"3/4 宽度
tn_w(1, 5)"20.00%"1/5 宽度
tn_w(2, 5)"40.00%"2/5 宽度
tn_w(3, 5)"60.00%"3/5 宽度
tn_w(4, 5)"80.00%"4/5 宽度
tn_w(5, 6)"83.33%"5/6 宽度

tn_h 用法与 tn_w 完全一致，只是语义上用于高度。

使用方式 ​

typescript
import { tn_w, tn_w_full, tn_w_auto, tn_w_screen, tn_h, tn_h_full, tn_h_auto, tn_h_screen } from "@tuniao/tn-ui";

// 固定宽度
Column()
  .width(tn_w_full)           // 100% 宽度

Column()
  .width(tn_w_auto)           // 自动宽度

Column()
  .width(tn_w_screen())       // 屏幕宽度（注意是函数调用）

// 比例宽度
Column()
  .width(tn_w(1, 2))          // 50% 宽度

Column()
  .width(tn_w(1, 3))          // 33.33% 宽度

// 固定高度
Column()
  .height(tn_h_full)          // 100% 高度

Column()
  .height(tn_h_screen())      // 屏幕高度

// 比例高度
Column()
  .height(tn_h(1, 4))         // 25% 高度

圆角体系 ​

通过 baseStyle 直接访问 6 级圆角值。

属性名值（vp）用途
borderRadiusSm2微小圆角
borderRadius4默认圆角（输入框、图片等）
borderRadiusLg8中圆角（卡片、选中态）
borderRadiusXl10大圆角
borderRadiusXxl12弹窗顶部圆角
borderRadiusMax9999胶囊形/圆形

使用方式 ​

typescript
// 默认圆角
.borderRadius(this.baseStyle.borderRadius)       // 4vp

// 卡片圆角
.borderRadius(this.baseStyle.borderRadiusLg)     // 8vp

// 胶囊形
.borderRadius(this.baseStyle.borderRadiusMax)    // 9999vp

尺寸工具函数 ​

getSizeByUnit ​

将用户传入的尺寸参数转换为带单位的值：

typescript
import { getSizeByUnit } from "@tuniao/tn-ui/utils/Utils";

// 用户传入的参数尺寸
.width(getSizeByUnit(this.btnWidth))

convertDimensionsWidthUnit ​

将框架内部固定尺寸转换为带单位的值：

typescript
import { convertDimensionsWidthUnit } from "@tuniao/tn-ui/utils/Utils";

// 框架固定尺寸
.height(convertDimensionsWidthUnit(48))