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>
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.