跳到主要内容

样式覆盖

组件库提供两种方式修改 Shadow DOM 内部样式：

  1. CSS 变量: 在组件父级的样式中使用 css变量 覆盖子节点设置的 css 样式；
  2. 外部样式类: 通过扩展类名组合 ::part的方式 修改样式，权重高于 内联样式 ，低于 !important ；

方式一：通过外部样式类​

自定义的高度 

<!DOCTYPE html>
<html lang="en">
<head>
  <script src="https://unpkg.com/@titian-design/h5"></script>
  <style>
    ::part(my-button) {
      height: 300px;
    }
  </style>
</head>
<body>
    <ti-button type="primary" ext-class="my-button">按钮</ti-button>
</body>
</html>

方式二：通过 css 变量​

Titian UI 为部分样式开放了基于 CSS 属性的定制方案。 相较于 使用外部样式类 的方式来说，当前方案支持在页面或应用级别对多个组件的样式做批量修改，以达搭配对主题样式的定制。
当然，也可以用它来修改单个组件的部分样式，具体的使用方法请查阅各个组件相对应的 css 变量部分。

  1. 通过父节点设置 css 变量修改
<!DOCTYPE html>
<html lang="en">
<head>
  <script src="https://unpkg.com/@titian-design/h5"></script>
  <style>
    .main {
      --button-height: 260px;
    }
  </style>
</head>
<body>
  <div class="main">
    <ti-button type="primary">按钮</ti-button>
  </div>
</body>
</html>
  1. 通过组件自身 ext-style 属性修改
<!DOCTYPE html>
<html lang="en">
<head>
  <script src="https://unpkg.com/@titian-design/h5"></script>
</head>
<body>
  <div class="main">
    <ti-button type="primary" ext-style="--button-height: 260px;">按钮</ti-button>
  </div>
</body>
</html>

基础样式变量​

// 品牌色 品牌色阶 #fa2c19
@theme-r: var(--theme-r, 250);
@theme-g: var(--theme-g, 44);
@theme-b: var(--theme-b, 25);
@brand-color: rgb(@theme-r, @theme-g, @theme-b);
@brand-color-fade-10: rgba(@theme-r, @theme-g, @theme-b, 0.1);
@brand-color-fade-20: rgba(@theme-r, @theme-g, @theme-b, 0.2);
@brand-color-fade-30: rgba(@theme-r, @theme-g, @theme-b, 0.3);
@brand-color-fade-40: rgba(@theme-r, @theme-g, @theme-b, 0.4);
@brand-color-fade-50: rgba(@theme-r, @theme-g, @theme-b, 0.5);
@brand-color-fade-60: rgba(@theme-r, @theme-g, @theme-b, 0.6);
@brand-color-fade-70: rgba(@theme-r, @theme-g, @theme-b, 0.7);
@brand-color-fade-80: rgba(@theme-r, @theme-g, @theme-b, 0.8);
@brand-color-fade-90: rgba(@theme-r, @theme-g, @theme-b, 0.9);
@brand-color-fade-100: rgba(@theme-r, @theme-g, @theme-b, 1);

// 色彩 / 中性色阶
@neutral-color-1: var(--neutral-color-1, #212121); // 用于一级重要信息，标题文字、关键功能操作入口
@neutral-color-2: var(--neutral-color-2, #757575); // 用于次级重要信息，正文文字等
@neutral-color-3: var(--neutral-color-3, #9e9e9e); // 用于次要信息、辅助功能，如提示说明文字
@neutral-color-4: var(--neutral-color-4, #c4c4c4); // 用于次要信息、辅助功能，如提示说明文字
@neutral-color-5: var(--neutral-color-5, #e0e0e0); // 用于非重要信息，为最弱一级文字
@neutral-color-6: var(--neutral-color-6, #f2f2f2); // 分割线，用于如标题栏、tab栏及列表之间
@neutral-color-7: var(--neutral-color-7, #f5f5f5); // 用于页面背景色
@neutral-color-8: var(--neutral-color-8, #fafafa); // 用于浅灰背景色
@neutral-color-9: var(--neutral-color-9, #ffffff); // 用于页面白色背景色、反色文字颜色

// 色彩 / 功能色阶
// 用于警告、出错用色 #ff2e2e
@error-r: 255;
@error-g: 46;
@error-b: 46;
@error-color: rgb(var(--error-r, @error-r), var(--error-g, @error-g), var(--error-b, @error-b));
@error-color-fade-10: rgba(var(--error-r, @error-r), var(--error-g, @error-g), var(--error-b, @error-b), 0.1);
@error-color-fade-20: rgba(var(--error-r, @error-r), var(--error-g, @error-g), var(--error-b, @error-b), 0.2);
@error-color-fade-30: rgba(var(--error-r, @error-r), var(--error-g, @error-g), var(--error-b, @error-b), 0.3);
@error-color-fade-40: rgba(var(--error-r, @error-r), var(--error-g, @error-g), var(--error-b, @error-b), 0.4);
@error-color-fade-50: rgba(var(--error-r, @error-r), var(--error-g, @error-g), var(--error-b, @error-b), 0.5);
@error-color-fade-60: rgba(var(--error-r, @error-r), var(--error-g, @error-g), var(--error-b, @error-b), 0.6);
@error-color-fade-70: rgba(var(--error-r, @error-r), var(--error-g, @error-g), var(--error-b, @error-b), 0.7);
@error-color-fade-80: rgba(var(--error-r, @error-r), var(--error-g, @error-g), var(--error-b, @error-b), 0.8);
@error-color-fade-90: rgba(var(--error-r, @error-r), var(--error-g, @error-g), var(--error-b, @error-b), 0.9);
@error-color-fade-100: rgba(var(--error-r, @error-r), var(--error-g, @error-g), var(--error-b, @error-b), 1);

// 用于成功或和微信相关的功能 #07c160
@success-r: 7;
@success-g: 193;
@success-b: 96;
@success-color: rgb(var(--success-r, @success-r), var(--success-g, @success-g), var(--success-b, @success-b));
@success-color-fade-10: rgba(var(--success-r, @success-r), var(--success-g, @success-g), var(--success-b, @success-b), 0.1);
@success-color-fade-20: rgba(var(--success-r, @success-r), var(--success-g, @success-g), var(--success-b, @success-b), 0.2);
@success-color-fade-30: rgba(var(--success-r, @success-r), var(--success-g, @success-g), var(--success-b, @success-b), 0.3);
@success-color-fade-40: rgba(var(--success-r, @success-r), var(--success-g, @success-g), var(--success-b, @success-b), 0.4);
@success-color-fade-50: rgba(var(--success-r, @success-r), var(--success-g, @success-g), var(--success-b, @success-b), 0.5);
@success-color-fade-60: rgba(var(--success-r, @success-r), var(--success-g, @success-g), var(--success-b, @success-b), 0.6);
@success-color-fade-70: rgba(var(--success-r, @success-r), var(--success-g, @success-g), var(--success-b, @success-b), 0.7);
@success-color-fade-80: rgba(var(--success-r, @success-r), var(--success-g, @success-g), var(--success-b, @success-b), 0.8);
@success-color-fade-90: rgba(var(--success-r, @success-r), var(--success-g, @success-g), var(--success-b, @success-b), 0.9);
@success-color-fade-100: rgba(var(--success-r, @success-r), var(--success-g, @success-g), var(--success-b, @success-b), 1);

// 用于文字链跳转 #2a6ae9
@link-r: 42;
@link-g: 106;
@link-b: 233;
@link-color: rgb(var(--link-r, @link-r), var(--link-g, @link-g), var(--link-b, @link-b));
@link-color-fade-10: rgba(var(--link-r, @link-r), var(--link-g, @link-g), var(--link-b, @link-b), 0.1);
@link-color-fade-20: rgba(var(--link-r, @link-r), var(--link-g, @link-g), var(--link-b, @link-b), 0.2);
@link-color-fade-30: rgba(var(--link-r, @link-r), var(--link-g, @link-g), var(--link-b, @link-b), 0.3);
@link-color-fade-40: rgba(var(--link-r, @link-r), var(--link-g, @link-g), var(--link-b, @link-b), 0.4);
@link-color-fade-50: rgba(var(--link-r, @link-r), var(--link-g, @link-g), var(--link-b, @link-b), 0.5);
@link-color-fade-60: rgba(var(--link-r, @link-r), var(--link-g, @link-g), var(--link-b, @link-b), 0.6);
@link-color-fade-70: rgba(var(--link-r, @link-r), var(--link-g, @link-g), var(--link-b, @link-b), 0.7);
@link-color-fade-80: rgba(var(--link-r, @link-r), var(--link-g, @link-g), var(--link-b, @link-b), 0.8);
@link-color-fade-90: rgba(var(--link-r, @link-r), var(--link-g, @link-g), var(--link-b, @link-b), 0.9);
@link-color-fade-100: rgba(var(--link-r, @link-r), var(--link-g, @link-g), var(--link-b, @link-b), 1);

// 用于醒目的警示 #ffa300
@warning-r: 255;
@warning-g: 163;
@warning-b: 0;
@warning-color: rgb(var(--warning-r, @warning-r), var(--warning-g, @warning-g), var(--warning-b, @warning-b));
@warning-color-fade-10: rgba(var(--warning-r, @warning-r), var(--warning-g, @warning-g), var(--warning-b, @warning-b), 0.1);
@warning-color-fade-20: rgba(var(--warning-r, @warning-r), var(--warning-g, @warning-g), var(--warning-b, @warning-b), 0.2);
@warning-color-fade-30: rgba(var(--warning-r, @warning-r), var(--warning-g, @warning-g), var(--warning-b, @warning-b), 0.3);
@warning-color-fade-40: rgba(var(--warning-r, @warning-r), var(--warning-g, @warning-g), var(--warning-b, @warning-b), 0.4);
@warning-color-fade-50: rgba(var(--warning-r, @warning-r), var(--warning-g, @warning-g), var(--warning-b, @warning-b), 0.5);
@warning-color-fade-60: rgba(var(--warning-r, @warning-r), var(--warning-g, @warning-g), var(--warning-b, @warning-b), 0.6);
@warning-color-fade-70: rgba(var(--warning-r, @warning-r), var(--warning-g, @warning-g), var(--warning-b, @warning-b), 0.7);
@warning-color-fade-80: rgba(var(--warning-r, @warning-r), var(--warning-g, @warning-g), var(--warning-b, @warning-b), 0.8);
@warning-color-fade-90: rgba(var(--warning-r, @warning-r), var(--warning-g, @warning-g), var(--warning-b, @warning-b), 0.9);
@warning-color-fade-100: rgba(var(--warning-r, @warning-r), var(--warning-g, @warning-g), var(--warning-b, @warning-b), 1);

// 行高 1.2
@line-height: 1.2;

// 字号
@T16: 16px;
@T18: 18px;
@T20: 20px;
@T22: 22px;
@T24: 24px;
@T26: 26px;
@T28: 28px;
@T30: 30px;
@T32: 32px;
@T34: 34px;
@T36: 36px;
@T38: 38px;
@T40: 40px;
@T42: 42px;
@T44: 44px;
@T46: 46px;
@T48: 48px;
@T60: 60px;

// 字重 全局字重只有两种，1、bold iso为500，安卓为700；2、normal 统一为400
@font-weight-300: 300;
@font-weight-400: 400;
@font-weight-500: 500;
@font-weight-600: 600;
@font-weight-bold: var(--font-weight-bold, 600);

// 间距
@gap-4: 4px;
@gap-8: 8px;
@gap-12: 12px;
@gap-16: 16px;
@gap-20: 20px;
@gap-24: 24px;
@gap-28: 28px;
@gap-32: 32px;
@gap-36: 36px;
@gap-40: 40px;
@gap-44: 44px;
@gap-48: 48px;

// 投影
@shadow-sm: 0 1px 5px 0 rgba(0, 0, 0, 0.2);
@shadow-md: 0 2px 8px 0 rgba(0, 0, 0, 0.2);
@shadow-lg: 0 6px 20px 0 rgba(0, 0, 0, 0.2);
@shadow-xl: 0 6px 20px 0 rgba(0, 0, 0, 0.06);

// 柔和
@transition-timing-function-soft: 0.5, 1, 0.89, 1;
// 自然
@transition-timing-function-natural: 0.48, 0.33, 0.24, 0.95;
// 弹力
@transition-timing-function-stretch: 0.48, 0.33, 0.24, 1.18;
// 匀速
@transition-timing-function-linear: linear;

// 圆角规则
// 通用型（圆角）：与设计稿上圆角一致；
// 潮流型（直角）：所有涉及到圆角的内容版本圆角改为 0px;
// 可爱型（大圆角）：在设计稿上圆角基础上增加8px;(按钮button、搜索search 直接改为胶囊型)

@radius-4: calc(var(--base-radius-size, 0px) + 4px);
@radius-8: calc(var(--base-radius-size, 0px) + 8px);
@radius-12: calc(var(--base-radius-size, 0px) + 12px);
@radius-16: calc(var(--base-radius-size, 0px) + 16px);