mirror/naive-ui
2
0
Fork 0
mirror of https://github.com/tusen-ai/naive-ui.git synced 2024-12-21 04:50:14 +08:00
Code Issues Packages Projects Releases Wiki Activity

doc: style scheme related

Browse Source
This commit is contained in:
07akioni 2020-06-01 19:10:48 +08:00
parent 22396fbbea
commit 465b82a915
6 changed files with 20 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
demo/documentation/components/configConsumer/enUS/color.md
View File

@ -1,5 +1,7 @@
# Style Scheme
Style scheme exposes the style variables used inside naive-ui. You can use it to create same styled components of naive-ui.
To make sure you know what do these colors mean. See [Caveat on Using Style Scheme](../doc/n-theme#style-scheme).
```html
<div style="overflow: auto;">
<n-config-consumer v-slot="{ styleScheme }">

2
demo/documentation/components/configConsumer/zhCN/color.md
View File

@ -1,5 +1,7 @@
# 样式方案
Naive UI 有内置的一组样式变量，你可以使用它来完成和 Naive UI 组件风格一致的组件。
确保你理解这些颜色的含义，请看[使用样式方案的注意事项](../doc/n-theme#style-scheme)。
```html
<div style="overflow: auto;">
<n-config-consumer v-slot="{ styleScheme }">

2
demo/documentation/components/element/enUS/color.md
View File

@ -1,5 +1,7 @@
# Style Scheme
It can also access style scheme.
To make sure you know what do these colors mean. See [Caveat on Using Style Scheme](../doc/n-theme#style-scheme).
```html
<n-element as="div" class="myel" style="overflow: auto;" v-slot="{ styleScheme }">
<pre

2
demo/documentation/components/element/zhCN/color.md
View File

@ -1,5 +1,7 @@
# 样式方案
它也可以获得 Style Scheme。
确保你理解这些颜色的含义，请看[使用样式方案的注意事项](../doc/n-theme#style-scheme)。
```html
<n-element as="div" class="myel" style="overflow: auto;" v-slot="{ styleScheme }">
<pre

6
demo/documentation/theme/enUS/styleScheme.md
View File

@ -1,5 +1,11 @@
# Use Style Scheme
Naive UI has a built-in style scheme. It's powerful for you to create Naive UI styled component. `n-config-consumer` & `n-element` have access to style scheme.
If you find `x-color` and `x-overlay-color` both exist, the `x-color` is composited by `base-background-color` and `x-overlay-color`. `x-color` is guranteed to be a opaque color and `x-overlay-color` is guranteed to be a translucent color.
Components inside naive-ui may use different variables in different themes. Because the different circurmstances need different types of color (opaque or translucent).
In most case you may want to use a `x-overlay-color`: For example is you use `primary-text-color` in the dark mode. It will darker than `primary-text-overlay-color`. Because `primary-text-color` is composited based on pure black(#000). But text are always not placed in a pure black background. In the light mode, those two colors usually looks the same, because `primary-text-overlay-color` is usually be displayed in a pure white background.
```html
<n-config-consumer v-slot="{ styleScheme }">
<button

6
demo/documentation/theme/zhCN/styleScheme.md
View File

@ -1,5 +1,11 @@
# 使用样式方案
Naive UI 有一组内置的样式方案，对创建一个 Naive UI 相同风格的组件时很有帮助。配置消费者 `n-config-consumer` 和元素 `n-element` 可以读取样式方案。
如果你看到了 `x-color` 和 `x-overlay-color` 同时存在，那么 `x-color` 是由 `base-background-color` 和 `x-overlay-color` 混合得来的。`x-color` 保证没有透明度，`x-overlay-color` 保证是半透明的。
Naive UI 内部的组件可能会在不同的主题下使用不同的变量作为背景色，因为不同的场景对与透明色和不透明色的需求是不同的。
通常大部分情况下你想使用的是 `x-overlay-color`：例如在暗色模式下使用 `primary-text-color` 会比 `primary-text-overlay-color` 更暗，因为 `primary-text-color` 是在纯黑色混合出来的，但是文字放置的背景色一般比纯黑亮；而在浅色模式下，这两种颜色看起来一般没什么区别，因为 `primary-text-overlay-color` 一般会被放在纯白色的背景。
```html
<n-config-consumer v-slot="{ styleScheme }">
<button