Style variants
VEUI components provide preset styles through the ui prop. Different theme packages can provide different ui values for each component to extend, and users can also customize ui values and their styles to extend the preset styles of VEUI components.
ui prop
The ui prop is a space-separated string, similar to the native class attribute in HTML. Each item represents a preset style of the component. In the example below, primary and large both define a preset style of the <veui-button> component:
<veui-button ui="primary large">OK</veui-button>
We know that many component libraries usually provide predefined styles through some enumerated props of components, such as shape / size / type, etc.
However, according to our design intention, VEUI should try to avoid binding to specific design languages (although it is unlikely that the generated structure of the component can be completely decoupled from the design language). If a new theme needs to be added when using the method of predefined enumerated props, but some additional styles that can be selected are not reserved as enumerated props on VEUI components in this theme, only class can be used to add style hooks imperceptibly.
Then there will be a series of problems such as naming and prefixing of class, so we simply provide a custom prop ui and output it to the DOM element of the component to achieve preset styles with clearer semantics and decoupling from component logic.
Using the DLS theme
By using the corresponding configuration of veui-loader, you can load the veui-theme-dls theme package in VEUI. The theme package provides optional preset styles in different dimensions for many components. You can refer to the documentation of each component for the explanation of supported preset styles of the ui prop.
Custom preset styles
Adding a custom ui item does not require registration through the component API, just add the corresponding styles for the [ui~="..."] selector in the style file.
For example, to add a secondary style for Button component, just write the styles for .veui-button[ui~="secondary"].
<template>
<article>
<veui-button ui="primary">
Primary
</veui-button>
<veui-button ui="secondary">
Custom
</veui-button>
</article>
</template>
<script>
import { Button } from 'veui'
export default {
components: {
'veui-button': Button
}
}
</script>
<style lang="less" scoped>
.veui-button {
width: 120px;
margin-right: 1em;
}
.veui-button[ui~="secondary"] {
background-color: #e5e5ff;
&:hover {
background-color: #ddf;
}
&:active {
background-color: #ccf;
}
}
</style>
Custom theme packages
For information on developing custom theme packages, please refer to Advanced › Theming to learn more about the conventions and more advanced methods for customizing the ui prop in VEUI.