mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2024-11-27 04:09:51 +08:00
docs(customize-theme)
This commit is contained in:
07akioni
parent
b2fd821d4e
commit
61e434ed0d
@ -118,7 +118,7 @@ export default {
|
||||
contentStyle: computed(() => {
|
||||
return showAnchorRef.value
|
||||
? 'width: calc(100% - 180px); margin-right: 36px;'
|
||||
: 'width: 100%';
|
||||
: 'width: 100%; padding-right: 12px;';
|
||||
}),
|
||||
url: ${JSON.stringify(url)}
|
||||
}
|
||||
|
||||
105
demo/pages/docs/customize-theme/enUS/index.md
Normal file
105
demo/pages/docs/customize-theme/enUS/index.md
Normal file
@ -0,0 +1,105 @@
|
||||
<!--anchor:on-->
|
||||
|
||||
# Customize Theme
|
||||
|
||||
Naive-ui provide `n-config-provider` to customize the theme.
|
||||
|
||||
By default all the component is light themed, without any configuration.
|
||||
|
||||
## Use Dark Theme
|
||||
|
||||
Set `n-config-provider`'s `theme` prop to `darkTheme` imported from naive-ui to set dark theme inside `n-config-provider`.
|
||||
|
||||
If `theme` is `undefined` it won't affect the theme of components inside.
|
||||
|
||||
```html
|
||||
<template>
|
||||
<n-config-provider :theme="darkTheme">
|
||||
<app />
|
||||
</n-config-provider>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { darkTheme } from 'naive-ui'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
return {
|
||||
darkTheme
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
## Customize Theme Vars (Design Tokens)
|
||||
|
||||
No CSS (Scss, Less) needed.
|
||||
|
||||
Set `n-config-provider`'s `theme-overrides` to customize theme vars. Naive-ui exports type `GlobalThemeOverrides` to help you define `theme-overrides`.
|
||||
|
||||
For available vars please follow the type hint of `GlobalThemeOverrides`.
|
||||
|
||||
```html
|
||||
<script>
|
||||
import { NConfigProvider } from 'naive-ui'
|
||||
|
||||
/**
|
||||
* @type import('naive-ui').GlobalThemeOverrides
|
||||
*/
|
||||
const themeOverrides = {
|
||||
common: {
|
||||
primaryColor: '#FF0000'
|
||||
},
|
||||
Button: {
|
||||
textColor: '#FF0000'
|
||||
},
|
||||
Select: {
|
||||
peers: {
|
||||
InternalSelection: {
|
||||
textColor: '#FF0000'
|
||||
}
|
||||
}
|
||||
}
|
||||
// ...
|
||||
}
|
||||
|
||||
// ...
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<n-config-provider :theme-overrides="themeOverrides">
|
||||
<my-app />
|
||||
</n-config-provider>
|
||||
</template>
|
||||
```
|
||||
|
||||
## Sync Style of the Body Element
|
||||
|
||||
For the following reasons, you may need to set some styles on `document.body`
|
||||
|
||||
1. Naive-ui will mount some global style that is unresponsive (to theme, not media query). For example `font-family`. The style works fine by default, however they won't change when theme is changed.
|
||||
2. `n-config-provider` can't sync global style (for example, body's background color) outside it.
|
||||
|
||||
You can use `n-global-style` to sync common global style to the body element. In the following example, `n-global-style` will sync the theme provided by `n-config-provider` to `document.body`.
|
||||
|
||||
```html
|
||||
<template>
|
||||
<n-config-provider ...>
|
||||
<app />
|
||||
<n-global-style />
|
||||
</n-config-provider>
|
||||
</template>
|
||||
```
|
||||
|
||||
## Theme Editor
|
||||
|
||||
Naive-ui provides theme editor to help you edit theme and export the corresponding configuration. It can be placed inside `n-config-provider`.
|
||||
|
||||
```html
|
||||
<template>
|
||||
<n-theme-editor>
|
||||
<app />
|
||||
</n-theme-editor>
|
||||
</template>
|
||||
```
|
||||
106
demo/pages/docs/customize-theme/zhCN/index.md
Normal file
106
demo/pages/docs/customize-theme/zhCN/index.md
Normal file
@ -0,0 +1,106 @@
|
||||
<!--anchor:on-->
|
||||
|
||||
# 调整主题
|
||||
|
||||
naive-ui 通过使用 `n-config-provider` 调整主题。
|
||||
|
||||
默认情况下所有组件均为亮色主题，无需任何配置。
|
||||
|
||||
## 使用暗色主题
|
||||
|
||||
将 `n-config-provider` 的 `theme` 设为从 naive-ui 导入的 `darkTheme` 来设定暗色主题。
|
||||
|
||||
若 `theme` 为 `undefined` 则不会影响内部组件的主题。
|
||||
|
||||
```html
|
||||
<template>
|
||||
<n-config-provider :theme="darkTheme">
|
||||
<app />
|
||||
</n-config-provider>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { darkTheme } from 'naive-ui'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
return {
|
||||
darkTheme
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
## 调整主题变量
|
||||
|
||||
你不需要写任何 CSS（Scss、Less...）。
|
||||
|
||||
通过设定 `n-config-provider` 的 `theme-overrides` 来调整主题变量。naive-ui 导出了 `GlobalThemeOverrides` 类型帮助你定义主题。
|
||||
|
||||
具体可使用变量请参考 `GlobalThemeOverrides` 类型提示。
|
||||
|
||||
```html
|
||||
<script>
|
||||
import { NConfigProvider } from 'naive-ui'
|
||||
|
||||
/**
|
||||
* @type import('naive-ui').GlobalThemeOverrides
|
||||
*/
|
||||
const themeOverrides = {
|
||||
common: {
|
||||
primaryColor: '#FF0000'
|
||||
},
|
||||
Button: {
|
||||
textColor: '#FF0000'
|
||||
},
|
||||
Select: {
|
||||
peers: {
|
||||
InternalSelection: {
|
||||
textColor: '#FF0000'
|
||||
}
|
||||
}
|
||||
}
|
||||
// ...
|
||||
}
|
||||
|
||||
// ...
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<n-config-provider :theme-overrides="themeOverrides">
|
||||
<my-app />
|
||||
</n-config-provider>
|
||||
</template>
|
||||
```
|
||||
|
||||
## 同步 body 元素的样式
|
||||
|
||||
出于以下原因，你可能需要将某些样式设定在 `document.body` 上。
|
||||
|
||||
1. naive-ui 会设定一些非响应式的全局样式（例如字体），它们在默认状况下工作良好，但是不能响应主题的变化。
|
||||
2. `n-config-provider` 无法将全局样式同步到它以外的地方（例如 body 背景色）。
|
||||
|
||||
通过使用 `n-global-style` 可以将常见的全局样式同步到 body 上。在下面的例子中，`n-global-style` 会将 `n-config-provider` 提供的主题同步到 `document.body` 上。
|
||||
|
||||
```html
|
||||
<template>
|
||||
<n-config-provider>
|
||||
<app />
|
||||
<n-global-style />
|
||||
</n-config-provider>
|
||||
<template></template
|
||||
></template>
|
||||
```
|
||||
|
||||
## 主题编辑器
|
||||
|
||||
naive-ui 提供主题编辑器帮助你方便的编辑主题并导出对应配置。它可以被嵌套于 `n-config-provider` 中。
|
||||
|
||||
```html
|
||||
<template>
|
||||
<n-theme-editor>
|
||||
<app />
|
||||
</n-theme-editor>
|
||||
</template>
|
||||
```
|
||||
@ -6,44 +6,6 @@
|
||||
The following features are <n-text strong>unstable</n-text>. Use them if you really need and perpare to follow the API changes.
|
||||
</n-alert>
|
||||
|
||||
## Customize Theme
|
||||
|
||||
```html
|
||||
<script>
|
||||
import { NConfigProvider } from 'naive-ui'
|
||||
|
||||
/**
|
||||
* @type import('../src').GlobalThemeOverrides
|
||||
*/
|
||||
const themeOverrides = {
|
||||
common: {
|
||||
primaryColor: '#FF0000'
|
||||
},
|
||||
Button: {
|
||||
textColor: '#FF0000'
|
||||
},
|
||||
Select: {
|
||||
peers: {
|
||||
InternalSelection: {
|
||||
textColor: '#FF0000'
|
||||
}
|
||||
}
|
||||
}
|
||||
// ...
|
||||
}
|
||||
|
||||
// ...
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<n-config-provider :theme-overrides="themeOverrides">
|
||||
<my-app />
|
||||
</n-config-provider>
|
||||
</template>
|
||||
```
|
||||
|
||||
For specific variables, please follow `GlobalThemeOverrides` type hint.
|
||||
|
||||
## Use Tusimple Theme
|
||||
|
||||
```html
|
||||
|
||||
@ -6,44 +6,6 @@
|
||||
下列的所有功能都是<n-text strong>不稳定</n-text>的。只在真的需要的时候再使用他们，API 有可能在未来被改变。
|
||||
</n-alert>
|
||||
|
||||
## 定制主题
|
||||
|
||||
```html
|
||||
<script>
|
||||
import { NConfigProvider } from 'naive-ui'
|
||||
|
||||
/**
|
||||
* @type import('../src').GlobalThemeOverrides
|
||||
*/
|
||||
const themeOverrides = {
|
||||
common: {
|
||||
primaryColor: '#FF0000'
|
||||
},
|
||||
Button: {
|
||||
textColor: '#FF0000'
|
||||
},
|
||||
Select: {
|
||||
peers: {
|
||||
InternalSelection: {
|
||||
textColor: '#FF0000'
|
||||
}
|
||||
}
|
||||
}
|
||||
// ...
|
||||
}
|
||||
|
||||
// ...
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<n-config-provider :theme-overrides="themeOverrides">
|
||||
<my-app />
|
||||
</n-config-provider>
|
||||
</template>
|
||||
```
|
||||
|
||||
具体可使用变量请参考 `GlobalThemeOverrides` 类型提示。
|
||||
|
||||
## 使用图森主题
|
||||
|
||||
```html
|
||||
|
||||
@ -20,6 +20,10 @@ export const enDocRoutes = [
|
||||
path: 'experimental-features',
|
||||
component: () => import('../pages/docs/experimental-features/enUS/index.md')
|
||||
},
|
||||
{
|
||||
path: 'customize-theme',
|
||||
component: () => import('../pages/docs/customize-theme/enUS/index.md')
|
||||
},
|
||||
{
|
||||
path: 'changelog',
|
||||
component: () => import('../pages/docs/changelog/enUS/index.vue')
|
||||
@ -52,6 +56,10 @@ export const zhDocRoutes = [
|
||||
path: 'from-v1',
|
||||
component: () => import('../pages/docs/vue3/zhCN/index.vue')
|
||||
},
|
||||
{
|
||||
path: 'customize-theme',
|
||||
component: () => import('../pages/docs/customize-theme/zhCN/index.md')
|
||||
},
|
||||
{
|
||||
path: 'experimental-features',
|
||||
component: () => import('../pages/docs/experimental-features/zhCN/index.md')
|
||||
|
||||
@ -82,6 +82,11 @@ export function createDocumentationMenuOptions ({ lang, theme, mode }) {
|
||||
zh: 'JSX & TSX',
|
||||
path: '/jsx'
|
||||
},
|
||||
{
|
||||
en: 'Customize Theme',
|
||||
zh: '调整主题',
|
||||
path: '/customize-theme'
|
||||
},
|
||||
{
|
||||
en: 'Create Themed Component',
|
||||
zh: '创建适配主题的组件',
|
||||
|
||||
@ -2,6 +2,8 @@
|
||||
|
||||
Config Provider is used to set global theme, set global language and set namespace for components (detached parts).
|
||||
|
||||
For more info about theming, see [Customize Theme](../docs/customize-theme).
|
||||
|
||||
## Demos
|
||||
|
||||
```demo
|
||||
|
||||
@ -2,6 +2,8 @@
|
||||
|
||||
全局化配置设置内部组件的主题、语言和组件卸载于其他位置的 DOM 的类名。
|
||||
|
||||
了解更多关于主题设定的信息，参见[调整主题](../docs/customize-theme)。
|
||||
|
||||
## 演示
|
||||
|
||||
```demo
|
||||
|
||||
@ -1,21 +1,14 @@
|
||||
# Global Style
|
||||
|
||||
Sometimes you want apply some naive-ui style to document body. For example font family, background color & font...
|
||||
For the following reasons, you may need to set some styles on `document.body`
|
||||
|
||||
A specific scene is on iOS Safari, if you over-scroll the page in dark mode, the overflowed part will be white. At that time you may want to set body's color.
|
||||
1. Naive-ui will mount some global style that is unresponsive (to theme, not media query). For example `font-family`. The style works fine by default, however they won't change when theme is changed.
|
||||
2. `n-config-provider` can't sync global style (for example, body's background color) outside it.
|
||||
|
||||
If you want work with theme, put it inside `n-config-provider`.
|
||||
You can use `n-global-style` to sync common global style to the body element. In the following example, `n-global-style` will sync the theme provided by `n-config-provider` to `document.body`.
|
||||
|
||||
## Usage
|
||||
|
||||
```html
|
||||
// default theme
|
||||
<app>
|
||||
<n-global-style />
|
||||
...
|
||||
</app>
|
||||
```
|
||||
|
||||
```html
|
||||
// follow config-provider's theme
|
||||
<n-config-provider>
|
||||
|
||||
@ -1,21 +1,14 @@
|
||||
# 全局样式 Global Style
|
||||
|
||||
有时候你会希望某些样式会应用到 body 上，例如背景色，字体或者其他什么的。
|
||||
出于以下原因，你可能需要将某些样式设定在 `document.body` 上。
|
||||
|
||||
具体的例子是在暗色模式下，iOS Safari 在过度滚动的情况下会显示出白色，这时候需要我们设定 body 的颜色。
|
||||
1. naive-ui 会设定一些非响应式的全局样式（例如字体），它们在默认状况下工作良好，但是不能响应主题的变化。
|
||||
2. `n-config-provider` 无法将全局样式同步到它以外的地方（例如 body 背景色）。
|
||||
|
||||
如果你需要它随主题变化，那么请把它放到 `n-config-provider` 内部。
|
||||
通过使用 `n-global-style` 可以将常见的全局样式同步到 body 上。在下面的例子中，`n-global-style` 会将 `n-config-provider` 提供的主题同步到 `document.body` 上。
|
||||
|
||||
## 用法
|
||||
|
||||
```html
|
||||
// 默认主题
|
||||
<app>
|
||||
<n-global-style />
|
||||
...
|
||||
</app>
|
||||
```
|
||||
|
||||
```html
|
||||
// 跟随 n-config-provider 的主题
|
||||
<n-config-provider>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user