Cook-uni

外观

Border 边框 ​

css 边框工具，可以在标签中方便快速的设置边框样式。

基本使用 ​

c-bdr-{主题色|边框色|宽度|样式}开头的边框类，或c-bdr-{主题色|边框色|宽度|样式}-{方向}

js
<view class="c-bdr-primary c-bdr-dashed c-bdr-2" style="height: 200px;width: 200px;">
</view>

<view class="c-bdr-danger-t c-bdr-success-r" style="height: 200px;width: 200px;">  
</view>

其他的边框类：透明边框c-bdr-transparent，隐藏边框c-bdr-{方向}-none。

颜色 ​

默认边框色base,darker,dark,light,lighter。

默认主题black,white,primary,success,warning,danger,info，主题扩展色主题-light-{1~9}和主题-dark-{1~5}。

vue
<view class="c-bdr-primary"></view>
<view class="c-bdr-primary-light-5"></view>

颜色配置 ​

scss
// uni.scss

// 默认边框色
$bdr-color: #dcdfe6;

$bdr-colors: (
    // 默认边框色
    'darker': #000,

    // 扩展边框色
    'customBdr': #DCDCDC,
);

宽度 ​

边框宽度值范围1~5。

vue
<view class="c-bdr-2"></view>

样式 ​

边框样式值范围dashed,dotted

vue
<view class="c-bdr-dashed"></view>

方向 ​

边框方向值有t,r,b,l。

vue
<!-- 颜色方向 -->
<view class="c-bdr-primary-t"></view>

<!-- 样式方向 -->
<view class="c-bdr-dotted-r"></view>

<!-- 大小方向 -->
<view class="c-bdr-l-2"></view>

<!-- 隐藏方向 -->
<view class="c-bdr-b-none"></view>