mirror of
https://gitee.com/baidu/amis.git
synced 2024-12-05 05:18:34 +08:00
0ae04ce946
* docs：将文档移动 zh-CN 目录下；为以后支持英文版做准备 * 整理 autoFill * 补充下载最新版本的说明 (#1298) * fix: 修复在新版 Firefox 下 js sdk 报错 (#1300) * 删掉可能报错的代码 (#1311) * fix: 修复 css 变量不支持数字问题 (#1302) * feat：增加 animation-duration，可以控制所有动画时长，也能用于一次性关闭所有动画效果 (#1303) * feat：增加 animation-duration，可以控制所有动画时长，也能用于一次性关闭所有动画效果 * 补充文档 * Pageleave (#1310) * form 添加页面离开提示功能 * 补充文档 Co-authored-by: 2betop <2betop.cn@gmail.com> Co-authored-by: liaoxuezhi <liaoxuezhi@baidu.com>
77 lines
4.3 KiB
Markdown
77 lines
4.3 KiB
Markdown
---
|
|
title: CSS 变量
|
|
---
|
|
|
|
要想使用 CSS 变量就必须知道某个组件都用到了哪些变量，目前最完善的方式是用 Chrome 开发者工具。
|
|
|
|
不过如果你不知道如何使用，本文将会介绍一些常用的 CSS 变量，掌握他们也能完成大部分定制工作。
|
|
|
|
## 基础颜色
|
|
|
|
| 变量 | 类型 | 说明 |
|
|
| -------------------- | ---- | ------------------------------ |
|
|
| --black | 颜色 | 黑色颜色 |
|
|
| --white | 颜色 | 白色颜色 |
|
|
| --light | 颜色 | 最浅的颜色 |
|
|
| --dark | 颜色 | 最深的颜色 |
|
|
| --body-bg | 颜色 | 全局背景色 |
|
|
| --background | 颜色 | table 等背景色 |
|
|
| --primary | 颜色 | 主颜色，会影响主按钮颜色 |
|
|
| --primary-onHover | 颜色 | 主颜色在鼠标移上去后的颜色 |
|
|
| --primary-onActive | 颜色 | 主颜色在激活时的颜色，比如选中 |
|
|
| --secondary | 颜色 | 次颜色，比如第二个按钮的颜色 |
|
|
| --secondary-onHover | 颜色 | 次颜色在鼠标移上去后的颜色 |
|
|
| --secondary-onActive | 颜色 | 次颜色在激活时的颜色 |
|
|
| --success | 颜色 | 成功时的颜色 |
|
|
| --success-onHover | 颜色 | 在鼠标移上去后的颜色 |
|
|
| --success-onActive | 颜色 | 在激活时的颜色 |
|
|
| --info | 颜色 | 显示信息的颜色，一般是蓝色 |
|
|
| --info-onHover | 颜色 | 在鼠标移上去后的颜色 |
|
|
| --info-onActive | 颜色 | 在激活时的颜色 |
|
|
| --warning | 颜色 | 警告的颜色 |
|
|
| --warning-onHover | 颜色 | 在鼠标移上去后的颜色 |
|
|
| --warning-onActive | 颜色 | 在激活时的颜色 |
|
|
| --danger | 颜色 | 错误的颜色 |
|
|
| --danger-onHover | 颜色 | 在鼠标移上去后的颜色 |
|
|
| --danger-onActive | 颜色 | 在激活时的颜色 |
|
|
|
|
## 字体相关
|
|
|
|
| 变量 | 类型 | 说明 |
|
|
| --------------------- | -------- | ----------------------- |
|
|
| --text-color | 颜色 | 文字颜色 |
|
|
| --text--muted-color | 颜色 | 文字置灰时的颜色 |
|
|
| --text--loud-color | 颜色 | 一般用于标题文字颜色 |
|
|
| --button-color | 颜色 | 按钮文字颜色 |
|
|
| --fontFamilyBase | 字体家族 | 基础字体家族 |
|
|
| --fontFamilyMonospace | 字体家族 | 等宽字体家族 |
|
|
| --fontSizeBase | 大小 | 基础字体大小，默认 14px |
|
|
| --fontSizeMd | 大小 | 中等字体大小 |
|
|
| --fontSizeLg | 大小 | 大字体大小 |
|
|
| --fontSizeXl | 大小 | 最大字体大小 |
|
|
| --fontSizeSm | 大小 | 小字体大小 |
|
|
| --fontSizeXs | 大小 | 最小的字体大小 |
|
|
| --lineHeightBase | 大小 | 基础行高 |
|
|
|
|
## 边框相关
|
|
|
|
| 变量 | 类型 | 说明 |
|
|
| -------------- | ---- | ------------ |
|
|
| --borderColor | 颜色 | 边框颜色 |
|
|
| --borderRadius | 大小 | 默认边框圆角 |
|
|
|
|
## 链接相关
|
|
|
|
| 变量 | 类型 | 说明 |
|
|
| ------------------------- | --------------- | ---------------------------------- |
|
|
| --link-color | 颜色 | 链接颜色，默认用 --primary |
|
|
| --link-decoration | text-decoration | 可以控制是否显示下划线 |
|
|
| --link-onHover-color | 颜色 | 链接在鼠标移上去之后的颜色 |
|
|
| --link-onHover-decoration | text-decoration | 可以控制鼠标移上去后是否显示下划线 |
|
|
|
|
## 动画
|
|
|
|
| 变量 | 类型 | 说明 |
|
|
| -------------------- | ---- | ------------------------------------------------ |
|
|
| --animation-duration | 时长 | 动画效果时长，默认 0.1s，可以设置为 0 来关闭动画 |
|