Tui Plus Vapor

Appearance

VaporCSS border样式写法参考 ​

边框样式 ​

设置元素的边框样式：

类名生成的 CSS备注
bborder: 1px solid red;默认边框样式
b-1px,s,redborder: 1px solid red;自定义边框宽度、样式和颜色
b-1px,d,redborder: 1px dashed red;虚线边框
b-1px,n,redborder: 1px none red;无边框
bs-sborder-style: solid;实线边框样式
bs-dborder-style: dashed;虚线边框样式
bs-nborder-style: none;无边框样式
bc-blueborder-color: blue;边框颜色
bw-10border-width: 10rpx;边框宽度（rpx 单位）
bw-2pxborder-width: 2px;边框宽度（px 单位）

顶部边框 ​

设置元素的顶部边框：

类名生成的 CSS备注
bt-1px,s,redborder-top: 1px solid red;顶部边框
bt-1px,d,redborder-top: 1px dashed red;顶部虚线边框
bt-1px,n,redborder-top: 1px none red;顶部无边框
btc-redborder-top-color: red;顶部边框颜色
bts-sborder-top-style: solid;顶部实线边框样式
bts-dborder-top-style: dashed;顶部虚线边框样式
bts-nborder-top-style: none;顶部无边框样式
btw-10border-top-width: 10rpx;顶部边框宽度（rpx 单位）
btw-2pxborder-top-width: 2px;顶部边框宽度（px 单位）

底部边框 ​

设置元素的底部边框：

类名生成的 CSS备注
bb-1px,s,redborder-bottom: 1px solid red;底部边框
bb-1px,d,redborder-bottom: 1px dashed red;底部虚线边框
bb-1px,n,redborder-bottom: 1px none red;底部无边框
bbc-redborder-bottom-color: red;底部边框颜色
bbs-sborder-bottom-style: solid;底部实线边框样式
bbs-dborder-bottom-style: dashed;底部虚线边框样式
bbs-nborder-bottom-style: none;底部无边框样式
bbw-10border-bottom-width: 10rpx;底部边框宽度（rpx 单位）
bbw-2pxborder-bottom-width: 2px;底部边框宽度（px 单位）

左侧边框 ​

设置元素的左侧边框：

类名生成的 CSS备注
bl-1px,s,redborder-left: 1px solid red;左侧边框
bl-1px,d,redborder-left: 1px dashed red;左侧虚线边框
bl-1px,n,redborder-left: 1px none red;左侧无边框
blc-redborder-left-color: red;左侧边框颜色
bls-sborder-left-style: solid;左侧实线边框样式
bls-dborder-left-style: dashed;左侧虚线边框样式
bls-nborder-left-style: none;左侧无边框样式
blw-10border-left-width: 10rpx;左侧边框宽度（rpx 单位）
blw-2pxborder-left-width: 2px;左侧边框宽度（px 单位）

右侧边框 ​

设置元素的右侧边框：

类名生成的 CSS备注
br-1px,s,redborder-right: 1px solid red;右侧边框
br-1px,d,redborder-right: 1px dashed red;右侧虚线边框
br-1px,n,redborder-right: 1px none red;右侧无边框
brc-blueborder-right-color: blue;右侧边框颜色
brs-sborder-right-style: solid;右侧实线边框样式
brs-dborder-right-style: dashed;右侧虚线边框样式
brs-nborder-right-style: none;右侧无边框样式
brw-10border-right-width: 10rpx;右侧边框宽度（rpx 单位）
brw-2pxborder-right-width: 2px;右侧边框宽度（px 单位）

边框圆角 ​

设置元素的边框圆角：

类名生成的 CSS备注
r-10border-radius: 10rpx;圆角（rpx 单位）
r-10pxborder-radius: 10px;圆角（px 单位）
r-100%border-radius: 100%;圆形
r1-10border-top-left-radius: 10rpx;左上角圆角
r2-10border-top-right-radius: 10rpx;右上角圆角
r3-10border-bottom-left-radius: 10rpx;左下角圆角
r4-10border-bottom-right-radius: 10rpx;右下角圆角

圆角方向组合 ​

支持任意方向的圆角组合：

类名生成的 CSS备注
r1r2-10border-top-left-radius: 10rpx; border-top-right-radius: 10rpx;顶部两个角圆角
r3r4-10border-bottom-left-radius: 10rpx; border-bottom-right-radius: 10rpx;底部两个角圆角
r1r3-10border-top-left-radius: 10rpx; border-bottom-left-radius: 10rpx;左侧两个角圆角
r2r4-10border-top-right-radius: 10rpx; border-bottom-right-radius: 10rpx;右侧两个角圆角

使用示例 ​

基本边框 ​

vue
<template>
  <view class="b p-4">
    默认边框
  </view>
</template>

自定义边框 ​

vue
<template>
  <view class="b-2px,d,blue p-4">
    2px 蓝色虚线边框
  </view>
</template>

边框圆角 ​

vue
<template>
  <view class="b r-10 p-4">
    带圆角的边框
  </view>
</template>

特定边框 ​

vue
<template>
  <view class="bt-1px,s,red bb-1px,s,blue p-4">
    只有上下边框
  </view>
</template>

圆形元素 ​

vue
<template>
  <view class="w-20 h-20 bg-primary r-100% flex items-center justify-center text-white">
    圆形
  </view>
</template>

最佳实践 ​

  1. 主题集成：使用主题中定义的颜色变量作为边框颜色，确保品牌一致性
  2. 响应式设计：在不同屏幕尺寸上测试边框效果，确保在所有设备上都能正常显示
  3. 性能优化：避免过度使用复杂的边框样式，特别是虚线和点线边框
  4. 可访问性：确保边框颜色与背景颜色有足够的对比度，以保证可读性
  5. 一致性：在整个应用中保持边框样式的一致性，创建统一的视觉语言

自定义边框 ​

你可以通过 theme.json 配置文件添加自定义边框样式：

json
{
  "borders": {
    "primary": "border: 2px solid var(--primary);",
    "card": "border: 1px solid var(--light); border-radius: 8rpx;",
    "error": "border: 1px solid var(--danger);"
  }
}

然后在你的组件中使用这些自定义边框类：

vue
<template>
  <view class="border-primary p-4">
    自定义主色边框
  </view>
</template>