预设样式

VEUI 组件通过 ui 属性为组件提供预设样式。不同主题包可以为每个组件提供不同的 ui 值进行扩展，用户也可以自定义 ui 值及其样式来给 VEUI 组件扩展预设样式。

`ui` 属性

ui 属性是一个空格分隔的字符串，类似 HTML 原生的 class 属性。其中每一项都代表组件的一种预设样式，像下面的例子中，primary 和 large 都定义了 <veui-button> 组件的某个预设样式：

<veui-button ui="primary large">OK</veui-button>

我们知道，许多组件库通常通过一些组件的枚举属性（prop）来提供预定义的样式，常见的比如 shape / size / type 等。

但根据我们设计的初衷，VEUI 应该尽量不绑定到特定的设计语言上（虽然组件生成的结构要完全和设计语言解耦是不太可能的）。如果采用预定义枚举属性的方式时需要新增一套主题，但在这套主题中某些有额外可供选用的样式没有在 VEUI 的组件上预留出枚举属性，就只能使用 class 来实现无感知地添加样式钩子了。

这时又会遇到 class 命名、前缀等一系列问题，所以我们干脆提供一个自定义属性 ui 并且输出到组件的 DOM 元素上，来实现语义更清晰、与组件逻辑解耦的预设样式。

使用 DLS 主题

使用 veui-loader 的相应配置，即可在 VEUI 中加载 veui-theme-dls 主题包。主题包为很多组件提供了不同维度的可选预设样式，可以参考每个组件对 ui 属性的说明来查阅组件支持的预设样式。

内置子主题

veui-theme-dls 主题包内置了一些子主题，可以通过 theme 属性来切换。比如：

<veui-search-box theme="d22"/>

在 GitHub 上编辑此示例编辑

<template>
<article>
  <veui-stack
    direction="column"
    gap="xs"
  >
    <veui-search-box
      placeholder="theme=&quot;d20&quot;"
      ui="strong"
      theme="d20"
    />
    <veui-search-box
      placeholder="theme=&quot;d22&quot;"
      ui="strong"
      theme="d22"
    />
    <veui-search-box
      placeholder="theme=&quot;ai&quot;"
      ui="strong"
      theme="ai"
    />
  </veui-stack>
</article>
</template>

<script>
import { Stack, SearchBox } from 'veui'

export default {
  components: {
    'veui-stack': Stack,
    'veui-search-box': SearchBox
  }
}
</script>

可用的子主题

名称	描述
`d20`	D20 主题，为默认主题。
`d22`	D22 主题，与 D20 共享样式 token，但输入类的组件采用了无边框设计。
`ai`	AI 主题，在 D22 的基础上升级了样式 token，当需要与 D22 共存时，需要同时载入两套样式。配置方式见起步 › Vue CLI 配置。当组件切换到 `ai` 主题后，输出的 class 前缀将会变为 `veui-ai` 以便与 D22 主题共存时避免冲突。

除了直接通过 theme="d22" 进行指定，也可以为 ConfigProvider 组件设置 { theme: 'd22' } 来指定子主题。指定子主题的组件内部其他组件会自动继承该子主题。

自定预设样式

新增自定义的 ui 项无需通过组件接口进行注册，只需要在样式文件中针对 [ui~="..."] 选择器添加相应样式即可。

比如：要为 Button 组件新增一个 secondary 的样式，只需为 .veui-button[ui~="secondary"] 编写样式就可以实现。

在 GitHub 上编辑此示例编辑

<template>
<article>
  <veui-button
    class="button"
    ui="primary"
  >
    Primary
  </veui-button>
  <veui-button
    class="button"
    ui="secondary"
  >
    Custom
  </veui-button>
</article>
</template>

<script>
import { Button } from 'veui'

export default {
  components: {
    'veui-button': Button
  }
}
</script>

<style lang="less" scoped>
.button {
  width: 120px;
  margin-right: 1em;
}

.button[ui~="secondary"] {
  background-color: #e5e5ff;

  &:hover {
    background-color: #ddf;
  }

  &:active {
    background-color: #ccf;
  }
}
</style>

自定义主题包

关于自定义主题包的开发，可以参考高级 › 主题来了解更多 VEUI 对主题包的约定接口以及更多自定义 ui 属性的高级方法。

在 GitHub 上编辑此页面编辑