mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2025-01-12 12:25:16 +08:00
29 lines
890 B
Markdown
29 lines
890 B
Markdown
# Use Style Scheme
|
|
Naive UI has a built-in style scheme. It's powerful for you to create naive-ui styled component. Config Consumer & Element have access to style scheme.
|
|
```html
|
|
<n-config-consumer>
|
|
<template v-slot="{ styleScheme }">
|
|
<button
|
|
:style="{
|
|
fontSize: '14px',
|
|
padding: '8px',
|
|
borderColor: styleScheme.primaryColor,
|
|
backgroundColor: 'transparent',
|
|
color: styleScheme.warningColor,
|
|
transition: `all .3s ${styleScheme.easeInOutCubicBezier}`
|
|
}"
|
|
>Cool!</button>
|
|
</template>
|
|
</n-config-consumer>
|
|
<br>
|
|
<n-element as="div"style="overflow: auto;">
|
|
<template v-slot="{ styleScheme }">
|
|
<pre
|
|
:style="{
|
|
color: styleScheme.secondaryTextColor,
|
|
transition: `color .3s ${styleScheme.easeInOutCubicBezier}`
|
|
}"
|
|
>{{ JSON.stringify(styleScheme, 0, 2) }}</pre>
|
|
</template>
|
|
</n-element>
|
|
``` |