图鸟UI Vue3快速入门

一、整合图鸟UI

1.1 创建项目

npx degit dcloudio/uni-preset-vue#vite-ts hello_ts

1.2 添加依赖

pnpm add @tuniao/tnui-vue3-uniapp @tuniao/tn-icon @tuniao/tn-style

pnpm install sass sass-loader -D

1.3 配置图鸟UI

在App.vue文件的style标签中引入TuniaoUI V3样式

@import'@tuniao/tn-style/dist/uniapp/index.css';

TuniaoUI V3版本是使用了typescript进行开发，所以也提供了组件的提示，在tsconfig.json中配置types增加@tuniao/tnui-vue3-uniapp/global.d.ts配置项

{

"extends":"@vue/tsconfig/tsconfig.json",

"compilerOptions":{

"sourceMap":true,

"baseUrl":".",

"paths":{

"@/*":["./src/*"]

},

"lib":["esnext","dom"],

"types":[

"@dcloudio/types",

"@tuniao/tnui-vue3-uniapp/global.d.ts"

]

},

"include":["src/**/*.ts","src/**/*.d.ts","src/**/*.tsx","src/**/*.vue"]

}

在pages.json中配置easycom字段

{

"easycom":{

"custom":{

"^tn-(.*)-(item|group)$":"@tuniao/tnui-vue3-uniapp/components/$1/src/$1-$2.vue",

"^tn-(.*)":"@tuniao/tnui-vue3-uniapp/components/$1/src/$1.vue"

}

},

}

TuniaoUI V3在开发时已经将全部组件都引出了Instance，方便全局进行安装，但是全局安装的时候为小程序端会出现不能引入的情况，所以需要在页面中引入组件

importTnTitle from '@tuniao/tnui-vue3-uniapp/components/title/src/title.vue'

1.4 运行到H5

先安装依赖：

pnpm i

运行：

pnpm run dev:h5

pnpm run build:h5

1.5 运行到微信小程序

先安装依赖：

pnpm i

运行：

pnpm run dev:mp-weixin

pnpm run build:mp-weixin

运行方式：打开 微信开发者工具, 导入 dist\dev\mp-weixin 运行。

二、颜色

2.1 颜色

图鸟样式中的类型有以下 5 种值

primary success warning danger error info

内置的类型中提供了以下参数的颜色的变量值

light-3 light-5 light-7 light-8 light-9 dark-2

示例

background-color:var(--tn-color-primary);

background-color:var(--tn-color-primary-dark-2);

background-color:var(--tn-color-primary-light-3);

background-color:var(--tn-color-primary-light-5);

background-color:var(--tn-color-primary-light-7);

background-color:var(--tn-color-primary-light-8);

background-color:var(--tn-color-primary-light-9);

图鸟样式中修改了以下颜色的默认，可以供开发者直接使用

red purplered purple bluepurple aquablue blue indigo cyan teal

green yellowgreen lime yellow orangeyellow orange orangered brown grey gray

内置的颜色中提供了以下参数的颜色的变量值：disabled dark light

background-color:var(--tn-color-red);

background-color:var(--tn-color-red-disabled);

background-color:var(--tn-color-red-dark);

background-color:var(--tn-color-red-light);

可以通过覆盖以下变量来修改图鸟内置颜色：

/* 默认黑白色 */

--tn-color-white:#ffffff;

--tn-color-black:#000000;

/* 主题色rgb值 */

--tn-color-primary-rgb:1,190,255;

--tn-color-success-rgb:0,216,134;

--tn-color-warning-rgb:251,189,18;

--tn-color-danger-rgb:255,68,79;

--tn-color-error-rgb:255,68,79;

--tn-color-info-rgb:156,156,156;

/* 内置颜色rgb值 */

--tn-color-red-rgb:232,58,48;

--tn-color-purplered-rgb:231,47,140;

--tn-color-purple-rgb:137,47,232;

--tn-color-bluepurple-rgb:95,79,217;

--tn-color-aquablue-rgb:54,70,255;

--tn-color-blue-rgb:61,126,255;

--tn-color-indigo-rgb:49,201,232;

--tn-color-cyan-rgb:45,232,189;

--tn-color-teal-rgb:36,240,131;

--tn-color-green-rgb:49,231,73;

--tn-color-yellowgreen-rgb:164,232,47;

--tn-color-lime-rgb:213,235,0;

--tn-color-yellow-rgb:255,244,32;

--tn-color-orangeyellow-rgb:255,202,40;

--tn-color-orange-rgb:255,167,38;

--tn-color-orangered-rgb:255,112,67;

--tn-color-brown-rgb:145,79,44;

--tn-color-grey-rgb:120,144,156;

--tn-color-gray-rgb:170,170,170;

/* 主题色Hex值 */

--tn-color-primary:#01beff;

--tn-color-primary-light-3:#4dd2ff;

--tn-color-primary-light-5:#80dfff;

--tn-color-primary-light-7:#b3ecff;

--tn-color-primary-light-8:#ccf2ff;

--tn-color-primary-light-9:#e6f9ff;

--tn-color-primary-dark-2:#0198cc;

--tn-color-success:#00d886;

--tn-color-success-light-3:#4de4aa;

--tn-color-success-light-5:#80ecc3;

--tn-color-success-light-7:#b3f3db;

--tn-color-success-light-8:#ccf7e7;

--tn-color-success-light-9:#e6fbf3;

--tn-color-success-dark-2:#00ad6b;

--tn-color-warning:#fbbd12;

--tn-color-warning-light-3:#fcd159;

--tn-color-warning-light-5:#fdde89;

--tn-color-warning-light-7:#feebb8;

--tn-color-warning-light-8:#fef2d0;

--tn-color-warning-light-9:#fff8e7;

--tn-color-warning-dark-2:#c9970e;

--tn-color-danger:#ff444f;

--tn-color-danger-light-3:#ff7c84;

--tn-color-danger-light-5:#ffa2a7;

--tn-color-danger-light-7:#ffc7ca;

--tn-color-danger-light-8:#ffdadc;

--tn-color-danger-light-9:#ffeced;

--tn-color-danger-dark-2:#cc363f;

--tn-color-error:#ff444f;

--tn-color-error-light-3:#ff7c84;

--tn-color-error-light-5:#ffa2a7;

--tn-color-error-light-7:#ffc7ca;

--tn-color-error-light-8:#ffdadc;

--tn-color-error-light-9:#ffeced;

--tn-color-error-dark-2:#cc363f;

--tn-color-info:#9c9c9c;

--tn-color-info-light-3:#bababa;

--tn-color-info-light-5:#cecece;

--tn-color-info-light-7:#e1e1e1;

--tn-color-info-light-8:#ebebeb;

--tn-color-info-light-9: whitesmoke;

--tn-color-info-dark-2:#7d7d7d;

/* 内置颜色Hex值 */

--tn-color-red:#e83a30;

--tn-color-red-dark:#ba2e26;

--tn-color-red-light:#fad8d6;

--tn-color-red-disabled:#f39c97;

--tn-color-purplered:#e72f8c;

--tn-color-purplered-dark:#b9266f;

--tn-color-purplered-light:#fad5e8;

--tn-color-purplered-disabled:#f397c5;

--tn-color-purple:#892fe8;

--tn-color-purple-dark:#6e26ba;

--tn-color-purple-light:#e7d5fa;

--tn-color-purple-disabled:#c497f3;

--tn-color-bluepurple:#5f4fd9;

--tn-color-bluepurple-dark:#4c3fae;

--tn-color-bluepurple-light:#dfdcf7;

--tn-color-bluepurple-disabled:#afa7ec;

--tn-color-aquablue:#3646ff;

--tn-color-aquablue-dark:#2b38cc;

--tn-color-aquablue-light:#d7daff;

--tn-color-aquablue-disabled:#9aa2ff;

--tn-color-blue:#3d7eff;

--tn-color-blue-dark:#3165cc;

--tn-color-blue-light:#d8e5ff;

--tn-color-blue-disabled:#9ebeff;

--tn-color-indigo:#31c9e8;

--tn-color-indigo-dark:#27a1ba;

--tn-color-indigo-light:#d6f4fa;

--tn-color-indigo-disabled:#98e4f3;

--tn-color-cyan:#2de8bd;

--tn-color-cyan-dark:#24ba97;

--tn-color-cyan-light:#d5faf2;

--tn-color-cyan-disabled:#96f3de;

--tn-color-teal:#24f083;

--tn-color-teal-dark:#1dc069;

--tn-color-teal-light:#d3fce6;

--tn-color-teal-disabled:#91f7c1;

--tn-color-green:#31e749;

--tn-color-green-dark:#27b93a;

--tn-color-green-light:#d6fadb;

--tn-color-green-disabled:#98f3a4;

--tn-color-yellowgreen:#a4e82f;

--tn-color-yellowgreen-dark:#82ba26;

--tn-color-yellowgreen-light:#edfad5;

--tn-color-yellowgreen-disabled:#d1f397;

--tn-color-lime:#d5eb00;

--tn-color-lime-dark:#aabc00;

--tn-color-lime-light:#f7fbcc;

--tn-color-lime-disabled:#e9f57f;

--tn-color-yellow:#fff420;

--tn-color-yellow-dark:#ccc21a;

--tn-color-yellow-light:#fffdd2;

--tn-color-yellow-disabled:#fff88f;

--tn-color-orangeyellow:#ffca28;

--tn-color-orangeyellow-dark:#cca220;

--tn-color-orangeyellow-light:#fff4d4;

--tn-color-orangeyellow-disabled:#ffe493;

--tn-color-orange:#ffa726;

--tn-color-orange-dark:#cc851e;

--tn-color-orange-light:#ffedd4;

--tn-color-orange-disabled:#ffd392;

--tn-color-orangered:#ff7043;

--tn-color-orangered-dark:#cc5a36;

--tn-color-orangered-light:#ffe2d9;

--tn-color-orangered-disabled:#ffb7a1;

--tn-color-brown:#914f2c;

--tn-color-brown-dark:#743f23;

--tn-color-brown-light:#e9dcd5;

--tn-color-brown-disabled:#c8a795;

--tn-color-grey:#78909c;

--tn-color-grey-dark:#5f7e8b;

--tn-color-grey-light:#e4e9ec;

--tn-color-grey-disabled:#c6d1d8;

--tn-color-gray:#aaaaaa;

--tn-color-gray-dark:#838383;

--tn-color-gray-light:#f8f7f8;

--tn-color-gray-disabled:#e6e6e6;

/* 默认背景颜色 */

--tn-bg-color:#ffffff;

/* 默认页面背景颜色 */

--tn-bg-color-page:#f4f4f4;

/* 默认覆盖层颜色 */

--tn-bg-color-overlay:#ffffff;

/* 默认mask颜色 */

--tn-bg-color-mask: rgba(0,0,0,0.5);

/* 默认字体颜色 */

--tn-text-color-primary:#080808;

--tn-text-color-secondary:#9c9c9c;

--tn-text-color-placeholder:#838383;

--tn-text-color-disabled:#e6e6e6;

样式类型使用：在类型前加上 tn-type- 前缀，如 tn-type-primary，后面紧接[样式作用的属性]，如tn-type-primarybg

内置颜色使用：在颜色值前加上tn-前缀，如tn-red，后面紧接[样式作用的属性]，如tn-redbg

三、背景

3.1 背景

图鸟内置的主题背景色类型包含：primary、success、warning、danger、error、info

在类型前加上tn-type-后面跟着_bg即可使用，如：

图鸟内置的背景颜色包含：red、purplered、purple、bluepurple、aquablue、blue、indigo、cyan、teal、green、yellowgreen、lime、yellow、orangeyellow、orange、orangered、brown、grey、gray

使用背景色做为渐变色，可以通过tn-gradient-bg__(内置颜色值)[-light|-single]，如：

图鸟中内置了一些酷炫的背景颜色，可以通过tn-gradient-bg__cool-(1-16)，如：

3.2 练习：类型背景

.flex {

display: flex;

gap:5px;

flex-wrap: wrap;

justify-content: space-around;

.item {

  width:100px;

  height:30px;

  padding:5px;

  border-radius:5px;

}

}

3.3 练习：内置颜色背景

// 颜色列表

const colors =[

"red",

"purplered",

"purple",

"bluepurple",

"aquablue",

"blue",

"indigo",

"cyan",

"teal",

"green",

"yellowgreen",

"lime",

"yellow",

"orangeyellow",

"orange",

"orangered",

"brown",

"grey",

"gray",

]

// 类型列表

const types =[

"dark",

"disabled",

"light",

]

      {{`tn-${color}_bg`}}

<divclass="item tn-red-dark_bg"

v-for="(t,kk) in types"

      :key="kk"

      :class="`tn-${color}-${t}_bg`"

>

      {{`tn-${color}-${t}_bg`}}

.flex {

display: flex;

gap:5px;

flex-wrap: wrap;

justify-content: space-around;

.card {

  width:100vw;

  padding:10px;

.item {

    height:30px;

    padding:5px;

    border-radius:5px;

}

}

}

3.4 练习：渐变背景

// 颜色列表

const colors =[

"red",

"purplered",

"purple",

"bluepurple",

"aquablue",

"blue",

"indigo",

"cyan",

"teal",

"green",

"yellowgreen",

"lime",

"yellow",

"orangeyellow",

"orange",

"orangered",

"brown",

"grey",

"gray",

]

      {{`tn-gradient-bg__${color}`}}

      {{`tn-gradient-bg__${color}-light`}}

      {{`tn-gradient-bg__${color}-single`}}

.flex {

display: flex;

gap:5px;

flex-wrap: wrap;

justify-content: space-around;

.card {

  width:100vw;

  padding:10px;

.item {

    height:30px;

    padding:5px;

    border-radius:5px;

}

}

}

3.5 练习：炫酷背景

      {{`tn-gradient-bg__cool-${n}`}}

.flex {

display: flex;

gap:5px;

flex-wrap: wrap;

justify-content: space-around;

.card {

  width:100vw;

  padding:10px;

.item {

    height:30px;

    padding:5px;

    border-radius:5px;

}

}

}

四、文本

4.1 基础使用

如要使用图鸟内置的文本样式，使用tn-text类即可

4.2 设置字体大小

图鸟默认的字体大小是14px，可以通过var(--tn-font-size)来获取字体大小

图鸟样式中内置了xs、sm、lg、xl、2xl、3xl、4xl的字体尺寸

4.3 设置对齐方式

图鸟内置了left、center、right三种对其方式

4.4 设置段落超过行数隐藏

如果需要让段落超过行数隐藏，对应的容器必须设置宽度，否则无法生效

图鸟内置了 1-5 行的超过行数隐藏，通过tn-text-ellipsis-1、tn-text-ellipsis-2、tn-text-ellipsis-3、tn-text-ellipsis-4、tn-text-ellipsis-5来设置

4.5 字体其他样式

tn-text-bold 加粗字体

tn-text-uppercase 将英文字母转换为大写

tn-text-lowercase 将英文字母转换为小写

tn-text-capitalize 将英文单词首字母转换为大写

tn-text-transparent 设置文字的颜色根据背景来自动调整

4.6 设置文本颜色

可以使用图鸟内置的颜色值来修改边框颜色。具体颜色可选值可以参考颜色。 在类型颜色值和内置颜色值后加上 _text 即可。

4.7 练习：内置文本颜色

// 颜色列表

const colors =[

"red",

"purplered",

"purple",

"bluepurple",

"aquablue",

"blue",

"indigo",

"cyan",

"teal",

"green",

"yellowgreen",

"lime",

"yellow",

"orangeyellow",

"orange",

"orangered",

"brown",

"grey",

"gray",

]

// 类型列表

const types =[

"dark",

"disabled",

"light",

]

      {{`tn-${color}_text`}}

<divclass="item tn-red-dark_text"

v-for="(t,kk) in types"

      :key="kk"

      :class="`tn-${color}-${t}_text`"

>

      {{`tn-${color}-${t}_text`}}

.flex {

display: flex;

gap:5px;

flex-wrap: wrap;

justify-content: space-around;

.card {

  width:100vw;

  padding:10px;

.item {

    height:30px;

    padding:5px;

    border-radius:5px;

}

}

}

五、边距

5.1 内边距

如要使用图鸟内置的内边距，使用tn-p类即可

5.2 为所有边添加内边距

在tn-p类后面添加-[size]即可

5.3 单边设置内边距

图鸟内置了四个方向的边距，分别是t、r、b、l，使用时 在tn-p类后面添加[方向]-[size]即可

5.4 取消内边距

在对应的类名后面添加-0即可

5.5 外边距

如要使用图鸟内置的外边距，使用tn-m类即可

5.6 练习：使用内外边距

内边距和外边距

六、尺寸

6.1 宽度

如要使用图鸟内置的宽度，使用tn-w类即可

6.2 基于百分比的宽度

使用tn-w-{fraction}或tn-w-full将元素设置为基于百分比的宽度。

1/2

6.3 固定数值的宽度

tn-w-0设置容器的宽度为 0px

tn-w-px 设置容器的宽度为 1px

tn-w-auto 设置容器的宽度为自动

tn-w-screen 设置容器的宽度为 100vw

tn-w-min 设置容器的宽度为 min-content, 该值为浏览器自动计算的最小宽度

tn-w-max 设置容器的宽度为 max-content, 该值为浏览器自动计算的最大宽度

6.2 高度

如要使用图鸟内置的高度，使用tn-h类即可

6.3 基于百分比的高度

使用 tn-h-{fraction} 或 tn-h-full 将元素设置为基于百分比的高度。

1/2

6.4 固定数值的高度

tn-h-0 设置容器的高度为 0px

tn-h-px 设置容器的高度为 1px

tn-h-auto 设置容器的高度为自动

tn-h-screen 设置容器的高度为 100vh

七、Flex布局

7.1 基本使用

在类上加上 tn-flex 类即可开启 flex 布局，子元素默认为水平排列，不换行

7.2 排列方向

水平排列(默认) tn-flex-row

水平反向排列 tn-flex-row-reverse

垂直排列 tn-flex-column

垂直反向排列 tn-flex-column-reverse

7.3 换行

超过后不换行(默认) tn-flex-nowrap

超过后换行 tn-flex-wrap

超过后反向换行 tn-flex-wrap-reverse

7.4 对齐方式

通过justify-来设置主轴方向上的对齐方式

justify-start：弹性项目在容器的起始位置对齐

justify-end：弹性项目在容器的结束位置对齐

justify-center：弹性项目在容器的中心位置对齐

justify-between：弹性项目平均分布在容器中，两端不留空白

justify-around：弹性项目平均分布在容器中，两端留有相等的空白

justify-evenly：弹性项目平均分布在容器中，每个项目周围留有相等的空白

通过items-来设置交叉轴方向上的对齐方式

items-start：弹性项目在容器的起始位置对齐

items-end：弹性项目在容器的结束位置对齐

items-center：弹性项目在容器的中心位置对齐

items-baseline：弹性项目在容器的基线位置对齐

items-stretch：弹性项目在容器的高度上拉伸

在tn-flex-后加上【align-items】-【justify-content】即可同时设置主轴和交叉轴方向上的对齐方式

start-start：弹性项目在容器交叉轴的起始位置和主轴的起始位置对齐

start-end：弹性项目在容器交叉轴的起始位置和主轴的结束位置对齐

start-center：弹性项目在容器交叉轴的起始位置和主轴的中心位置对齐

start-between：弹性项目在容器交叉轴的起始位置和主轴的两端对齐

start-around：弹性项目在容器交叉轴的起始位置和主轴的两端对齐，两端留有相等的空白

end-start：弹性项目在容器交叉轴的结束位置和主轴的起始位置对齐

end-end：弹性项目在容器交叉轴的结束位置和主轴的结束位置对齐

end-center：弹性项目在容器交叉轴的结束位置和主轴的中心位置对齐

end-between：弹性项目在容器交叉轴的结束位置和主轴的两端对齐

end-around：弹性项目在容器交叉轴的结束位置和主轴的两端对齐，两端留有相等的空白

center-start：弹性项目在容器交叉轴的中心位置和主轴的起始位置对齐

center-end：弹性项目在容器交叉轴的中心位置和主轴的结束位置对齐

center-center：弹性项目在容器交叉轴的中心位置和主轴的中心位置对齐

center-between：弹性项目在容器交叉轴的中心位置和主轴的两端对齐

center-around：弹性项目在容器交叉轴的中心位置和主轴的两端对齐，两端留有相等的空白

baseline-start：弹性项目在容器交叉轴的基线位置和主轴的起始位置对齐

baseline-end：弹性项目在容器交叉轴的基线位置和主轴的结束位置对齐

baseline-center：弹性项目在容器交叉轴的基线位置和主轴的中心位置对齐

baseline-between：弹性项目在容器交叉轴的基线位置和主轴的两端对齐

baseline-around：弹性项目在容器交叉轴的基线位置和主轴的两端对齐，两端留有相等的空白

stretch-start：弹性项目在容器交叉轴的高度上拉伸和主轴的起始位置对齐

stretch-end：弹性项目在容器交叉轴的高度上拉伸和主轴的结束位置对齐

stretch-center：弹性项目在容器交叉轴的高度上拉伸和主轴的中心位置对齐

stretch-between：弹性项目在容器交叉轴的高度上拉伸和主轴的两端对齐

stretch-around：弹性项目在容器交叉轴的高度上拉伸和主轴的两端对齐，两端留有相等的空白

center：弹性项目在容器交叉轴的中心位置和主轴的中心位置对齐

7.5 其他属性

tn-flex-1

flex-grow：定义项目的放大比例，默认值为 0，表示不放大。

flex-shrink：定义项目的缩小比例，默认值为 1，表示可以缩小。

flex-basis：定义项目在主轴方向上的基准尺寸，默认值为 auto，表示根据项目的实际尺寸来计算。如果将其设置为 0% 或 0px，则表示将项目的基准尺寸设置为 0。

tn-flex-auto

flex-grow：定义项目的放大比例，默认值为 0，表示不放大。

flex-shrink：定义项目的缩小比例，默认值为 1，表示可以缩小。

flex-basis：定义项目在主轴方向上的基准尺寸，默认值为 auto，表示根据项目的实际尺寸来计算。

tn-flex-inital

flex-grow：定义项目的放大比例，默认值为 0，表示不放大。

flex-shrink：定义项目的缩小比例，默认值为 1，表示可以缩小。

flex-basis：定义项目在主轴方向上的基准尺寸，默认值为 auto，表示根据项目的实际尺寸来计算。

tn-flex-none 禁用弹性项目的放大和缩小功能，即弹性项目的尺寸将根据其基准尺寸来计算，不会随容器的大小而变化。

tn-flex-grow 弹性项目将根据容器的大小自动增长，以填充剩余的空间。

如果多个弹性项目都设置了它们将以相等的比例增长，直到填满容器中的所有可用空间

tn-flex-grow-0 弹性项目将不会随着容器的大小而增长，即使容器中有多余的空间也不会填充。如果弹性项目的实际尺寸大于容器的大小，则会发生溢出，从而导致布局异常

tn-flex-shrink 弹性项目可以在容器空间不足时等比例缩小，以适应容器的大小。如果容器空间足够，弹性项目将不会缩小。

如果多个弹性项目都设置了它们将以相等的比例缩小，直到填满容器中的所有可用空间。

tn-flex-shrink-0 弹性项目将不会随着容器的大小而缩小，即使容器中的空间不足也不会缩小。如果弹性项目的实际尺寸小于容器的大小，则会发生溢出，从而导致布局异常。

7.6 练习：使用Flex布局

<div

class="tn-w-1-3"

v-for="v in 8"

     :key="v"

     :class="`tn-gradient-bg__cool-${v}`"

style="height:50px;"

>

  {{v}}

八、边框

8.1 边框的使用

图鸟内置了一些边框样式，可以直接使用。显示边框可以使用 tn-border 来设置。

图鸟内置了两个圆角样式，分别是 tn-radius 和 tn-round，分别对应圆角和圆形。

可以使用 tn-border-bold 来加粗边框。

可以使用 tn-border-dashed 来设置虚线边框。

图鸟内置了 tn-border-top、tn-border-right、tn-border-bottom、tn-border-left 四个类，分别对应上、右、下、左四个方向的边框。

图鸟内置了 tn-border-none-top、tn-border-none-right、tn-border-none-bottom、tn-border-none-left 四个类，分别对应上、右、下、左四个方向的边框。

8.2 边框颜色

可以使用图鸟内置的颜色值来修改边框颜色。具体颜色可选值可以参考 颜色。 在类型颜色值和内置颜色值后加上 _border 即可。

九、阴影

9.1 基本使用

如要使用图鸟内置的阴影样式，使用tn-shadow类即可

图鸟内置了 4 中尺寸的阴影，分别是tn-shadow、tn-shadow-sm、tn-shadow-md、tn-shadow-lg，使用时只需在需要添加阴影的元素上添加对应的类即可

9.2 设置阴影颜色

可以使用图鸟内置的颜色值来修改边框颜色。具体颜色可选值可以参考 颜色。 在类型颜色值和内置颜色值后加上 _shadow 即可。