mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2024-11-27 04:09:51 +08:00
docs: change a v-slot to #
This commit is contained in:
07akioni
parent
3185a76fd7
commit
b33a4394e9
@ -6,12 +6,14 @@ function createRenderer (wrapCodeWithCard = true) {
|
||||
const overrides = {
|
||||
table (header, body) {
|
||||
if (body) body = '<tbody class="n-table__tbody">' + body + '</tbody>'
|
||||
return '<n-table single-column class="md-table">\n' +
|
||||
return (
|
||||
'<n-table single-column class="md-table">\n' +
|
||||
'<thead class="n-table__thead">\n' +
|
||||
header +
|
||||
'</thead>\n' +
|
||||
body +
|
||||
'</n-table>\n'
|
||||
)
|
||||
},
|
||||
|
||||
tablerow (content) {
|
||||
@ -21,7 +23,12 @@ function createRenderer (wrapCodeWithCard = true) {
|
||||
tablecell (content, flags) {
|
||||
const type = flags.header ? 'th' : 'td'
|
||||
const tag = flags.align
|
||||
? '<' + type + ` class="n-table__${type}"` + ' align="' + flags.align + '">'
|
||||
? '<' +
|
||||
type +
|
||||
` class="n-table__${type}"` +
|
||||
' align="' +
|
||||
flags.align +
|
||||
'">'
|
||||
: '<' + type + ` class="n-table__${type}"` + '>'
|
||||
return tag + content + '</' + type + '>\n'
|
||||
},
|
||||
@ -29,11 +36,15 @@ function createRenderer (wrapCodeWithCard = true) {
|
||||
code: (code, language) => {
|
||||
const isLanguageValid = !!(language && hljs.getLanguage(language))
|
||||
if (!isLanguageValid) {
|
||||
throw new Error(`MdRendererError: ${language} is not valid for code - ${code}`)
|
||||
throw new Error(
|
||||
`MdRendererError: ${language} is not valid for code - ${code}`
|
||||
)
|
||||
}
|
||||
const highlighted = hljs.highlight(language, code).value
|
||||
return `${wrapCodeWithCard ? '<n-card size="small" class="md-card">' : ''}<n-config-consumer>
|
||||
<template v-slot="{ theme }">
|
||||
return `${
|
||||
wrapCodeWithCard ? '<n-card size="small" class="md-card">' : ''
|
||||
}<n-config-consumer>
|
||||
<template #="{ theme }">
|
||||
<pre class="n-code" :class="'n-' + theme + '-theme'"><code v-pre>${highlighted}</code><n-code style="display: none;" /></pre>
|
||||
</template>
|
||||
</n-config-consumer>${wrapCodeWithCard ? '</n-card>' : ''}`
|
||||
@ -42,20 +53,20 @@ function createRenderer (wrapCodeWithCard = true) {
|
||||
const id = text.replace(/ /g, '-')
|
||||
return `<n-h${level} id="${id}">${text}</n-h${level}>`
|
||||
},
|
||||
blockquote: quote => {
|
||||
blockquote: (quote) => {
|
||||
return `<n-blockquote>${quote}</n-blockquote>`
|
||||
},
|
||||
hr: () => '<n-hr />',
|
||||
paragraph: text => {
|
||||
paragraph: (text) => {
|
||||
return `<n-p>${text}</n-p>`
|
||||
},
|
||||
link (href, title, text) {
|
||||
if (/^(http:|https:)/.test(href)) return `<n-a href="${href}" target="_blank">${text}</n-a>`
|
||||
if (/^(http:|https:)/.test(href)) { return `<n-a href="${href}" target="_blank">${text}</n-a>` }
|
||||
return `<n-a to="${href}" >${text}</n-a>`
|
||||
},
|
||||
list (body, ordered, start) {
|
||||
const type = ordered ? 'n-ol' : 'n-ul'
|
||||
const startatt = (ordered && start !== 1) ? (' start="' + start + '"') : ''
|
||||
const startatt = ordered && start !== 1 ? ' start="' + start + '"' : ''
|
||||
return `<${type}${startatt}>\n` + body + `</${type}>\n`
|
||||
},
|
||||
listitem (text) {
|
||||
@ -72,7 +83,7 @@ function createRenderer (wrapCodeWithCard = true) {
|
||||
}
|
||||
}
|
||||
|
||||
Object.keys(overrides).forEach(key => {
|
||||
Object.keys(overrides).forEach((key) => {
|
||||
renderer[key] = overrides[key]
|
||||
})
|
||||
return renderer
|
||||
|
||||
@ -2,13 +2,15 @@
|
||||
|
||||
```html
|
||||
<n-element tag="div" class="myel">
|
||||
<template v-slot="{ styleScheme }">
|
||||
<template #="{ styleScheme }">
|
||||
<pre
|
||||
:style="{
|
||||
color: styleScheme.secondaryTextColor,
|
||||
transition: `color .3s ${styleScheme.easeInOutCubicBezier}`
|
||||
}"
|
||||
>{{ JSON.stringify(styleScheme, 0, 2) }}</pre>
|
||||
>
|
||||
{{ JSON.stringify(styleScheme, 0, 2) }}</pre
|
||||
>
|
||||
</template>
|
||||
</n-element>
|
||||
```
|
||||
```
|
||||
|
||||
@ -4,7 +4,7 @@ You can replace auto-complete's input element.
|
||||
|
||||
```html
|
||||
<n-auto-complete :options="options" v-model:value="value">
|
||||
<template v-slot="{ handleInput, handleBlur, handleFocus, value }">
|
||||
<template #="{ handleInput, handleBlur, handleFocus, value }">
|
||||
<n-input
|
||||
type="textarea"
|
||||
@input="handleInput"
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
|
||||
```html
|
||||
<n-auto-complete :options="options" v-model:value="value">
|
||||
<template v-slot="{ handleInput, handleBlur, handleFocus, value }">
|
||||
<template #="{ handleInput, handleBlur, handleFocus, value }">
|
||||
<n-input
|
||||
type="textarea"
|
||||
@input="handleInput"
|
||||
|
||||
@ -8,7 +8,6 @@
|
||||
<n-space><n-switch v-model:value="showPath" />Show Path</n-space>
|
||||
</n-space>
|
||||
<n-cascader
|
||||
show
|
||||
v-model:value="value"
|
||||
placeholder="没啥用的值"
|
||||
:options="options"
|
||||
|
||||
@ -7,7 +7,7 @@ Get current theme and namespace.
|
||||
@theme-change="handleThemeChange"
|
||||
@namespace-change="handleNamespaceChange"
|
||||
>
|
||||
<template v-slot="{ theme, namespace }">
|
||||
<template #="{ theme, namespace }">
|
||||
<div>
|
||||
<div>theme: {{ theme }}</div>
|
||||
<div>namespace: {{ namespace }}</div>
|
||||
|
||||
@ -6,7 +6,7 @@ To make sure you know what do these colors mean. See [Caveat on Using Style Sche
|
||||
|
||||
```html
|
||||
<div style="overflow: auto;">
|
||||
<n-config-consumer v-slot="{ styleScheme }">
|
||||
<n-config-consumer #="{ styleScheme }">
|
||||
<pre
|
||||
:style="{
|
||||
color: styleScheme.secondaryTextColor,
|
||||
|
||||
@ -9,7 +9,7 @@ Get current theme environment.
|
||||
<n-button @click="theme = 'light'">Light Theme</n-button>
|
||||
</n-space>
|
||||
<n-config-provider :theme="theme" :theme-environments="env">
|
||||
<n-config-consumer v-slot="{ themeEnvironment }">
|
||||
<n-config-consumer #="{ themeEnvironment }">
|
||||
<n-card>
|
||||
<n-tag>{{ themeEnvironment }}</n-tag>
|
||||
</n-card>
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
@theme-change="handleThemeChange"
|
||||
@namespace-change="handleNamespaceChange"
|
||||
>
|
||||
<template v-slot="{ theme, namespace }">
|
||||
<template #="{ theme, namespace }">
|
||||
<div>
|
||||
<div>主题：{{ theme }}</div>
|
||||
<div>命名空间：{{ namespace }}</div>
|
||||
|
||||
@ -6,7 +6,7 @@ Naive UI 有内置的一组样式变量，你可以使用它来完成和 Naive U
|
||||
|
||||
```html
|
||||
<div style="overflow: auto;">
|
||||
<n-config-consumer v-slot="{ styleScheme }">
|
||||
<n-config-consumer #="{ styleScheme }">
|
||||
<pre
|
||||
:style="{
|
||||
color: styleScheme.secondaryTextColor,
|
||||
|
||||
@ -9,7 +9,7 @@
|
||||
<n-button @click="theme = 'light'">浅色主题</n-button>
|
||||
</n-space>
|
||||
<n-config-provider :theme="theme" :theme-environments="env">
|
||||
<n-config-consumer v-slot="{ themeEnvironment }">
|
||||
<n-config-consumer #="{ themeEnvironment }">
|
||||
<n-card>
|
||||
<n-tag>{{ themeEnvironment }}</n-tag>
|
||||
</n-card>
|
||||
|
||||
@ -8,7 +8,7 @@ Sometimes you may need some component to access some values at specific theme. Y
|
||||
<n-button @click="theme = 'light'">Light Theme</n-button>
|
||||
</div>
|
||||
<n-config-provider :theme="theme" :theme-environments="env">
|
||||
<n-config-consumer v-slot="{ themeEnvironment }">
|
||||
<n-config-consumer #="{ themeEnvironment }">
|
||||
<n-card>
|
||||
<n-tag>{{ themeEnvironment }}</n-tag>
|
||||
</n-card>
|
||||
|
||||
@ -9,7 +9,7 @@ If you don't need wrapper DOM, set `abstract` on it. (Note, in this case it can
|
||||
<n-button @click="theme = 'light'">Light Theme</n-button>
|
||||
</n-space>
|
||||
<n-config-provider :theme="theme" :theme-environments="env" abstract>
|
||||
<n-config-consumer v-slot="{ themeEnvironment }">
|
||||
<n-config-consumer #="{ themeEnvironment }">
|
||||
<n-card>
|
||||
<n-tag>No Wrapper DOM: {{ themeEnvironment }}</n-tag>
|
||||
</n-card>
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
<n-button @click="theme = 'light'">浅色主题</n-button>
|
||||
</div>
|
||||
<n-config-provider :theme="theme" :theme-environments="env">
|
||||
<n-config-consumer v-slot="{ themeEnvironment }">
|
||||
<n-config-consumer #="{ themeEnvironment }">
|
||||
<n-card>
|
||||
<n-tag>{{ themeEnvironment }}</n-tag>
|
||||
</n-card>
|
||||
|
||||
@ -9,7 +9,7 @@
|
||||
<n-button @click="theme = 'light'">浅色主题</n-button>
|
||||
</n-space>
|
||||
<n-config-provider :theme="theme" :theme-environments="env" abstract>
|
||||
<n-config-consumer v-slot="{ themeEnvironment }">
|
||||
<n-config-consumer #="{ themeEnvironment }">
|
||||
<n-card>
|
||||
<n-tag>无包裹 DOM：{{ themeEnvironment }}</n-tag>
|
||||
</n-card>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
|
||||
```html
|
||||
<n-dynamic-input v-model:value="customValue" :on-create="onCreate">
|
||||
<template v-slot="{ value }">
|
||||
<template #="{ value }">
|
||||
<div style="width: 100%;">
|
||||
<div style="display: flex; align-items: center;">
|
||||
<n-checkbox
|
||||
|
||||
@ -14,7 +14,7 @@
|
||||
key-field="key"
|
||||
:on-create="onCreate"
|
||||
>
|
||||
<template v-slot="{ index, value }">
|
||||
<template #="{ index, value }">
|
||||
<div style="display: flex;">
|
||||
<!--
|
||||
Usually, the path change will cause the form-item verification content
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
|
||||
```html
|
||||
<n-dynamic-input v-model:value="customValue" :on-create="onCreate">
|
||||
<template v-slot="{ value }">
|
||||
<template #="{ value }">
|
||||
<div style="width: 100%;">
|
||||
<div style="display: flex; align-items: center;">
|
||||
<n-checkbox
|
||||
|
||||
@ -13,7 +13,7 @@
|
||||
key-field="key"
|
||||
:on-create="onCreate"
|
||||
>
|
||||
<template v-slot="{ index, value }">
|
||||
<template #="{ index, value }">
|
||||
<div style="display: flex;">
|
||||
<!--
|
||||
通常，path 的变化会导致 form-item 验证内容或规则的改变，所以 naive-ui 会清理掉
|
||||
|
||||
@ -5,12 +5,7 @@ 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
|
||||
tag="div"
|
||||
class="myel"
|
||||
style="overflow: auto;"
|
||||
v-slot="{ styleScheme }"
|
||||
>
|
||||
<n-element tag="div" class="myel" style="overflow: auto;" #="{ styleScheme }">
|
||||
<pre
|
||||
:style="{
|
||||
color: styleScheme.secondaryTextColor,
|
||||
|
||||
@ -5,12 +5,7 @@
|
||||
确保你理解这些颜色的含义，请看[使用样式方案的注意事项](../doc/n-theme#style-scheme)。
|
||||
|
||||
```html
|
||||
<n-element
|
||||
tag="div"
|
||||
class="myel"
|
||||
style="overflow: auto;"
|
||||
v-slot="{ styleScheme }"
|
||||
>
|
||||
<n-element tag="div" class="myel" style="overflow: auto;" #="{ styleScheme }">
|
||||
<pre
|
||||
:style="{
|
||||
color: styleScheme.secondaryTextColor,
|
||||
|
||||
@ -4,7 +4,7 @@ If you are not satisfied with builtin colors.
|
||||
|
||||
```html
|
||||
<n-config-consumer>
|
||||
<template v-slot="{ styleScheme }">
|
||||
<template #="{ styleScheme }">
|
||||
<div>
|
||||
<n-progress
|
||||
style="margin: 0 8px 12px 0;"
|
||||
|
||||
@ -7,7 +7,7 @@ Maybe your product manager will need it.
|
||||
```html
|
||||
<n-space vertical>
|
||||
<n-config-consumer>
|
||||
<template v-slot="{ styleScheme }">
|
||||
<template #="{ styleScheme }">
|
||||
<n-progress
|
||||
type="multiple-circle"
|
||||
:stroke-width="6"
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
|
||||
```html
|
||||
<n-config-consumer>
|
||||
<template v-slot="{ styleScheme }">
|
||||
<template #="{ styleScheme }">
|
||||
<div>
|
||||
<n-progress
|
||||
style="margin: 0 8px 12px 0;"
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
```html
|
||||
<n-space vertical>
|
||||
<n-config-consumer>
|
||||
<template v-slot="{ styleScheme }">
|
||||
<template #="{ styleScheme }">
|
||||
<n-progress
|
||||
type="multiple-circle"
|
||||
:stroke-width="6"
|
||||
|
||||
@ -9,7 +9,7 @@ Sometimes you may need some component to access some values at specific theme. Y
|
||||
</div>
|
||||
<n-config-provider :theme="theme" :theme-environments="env">
|
||||
<n-card>
|
||||
<n-config-consumer v-slot="{ themeEnvironment }">
|
||||
<n-config-consumer #="{ themeEnvironment }">
|
||||
<n-tag>{{ themeEnvironment }}</n-tag>
|
||||
</n-config-consumer>
|
||||
</n-card>
|
||||
|
||||
@ -9,7 +9,7 @@ Components inside naive-ui may use different variables in different themes. Beca
|
||||
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 }">
|
||||
<n-config-consumer #="{ styleScheme }">
|
||||
<button
|
||||
:style="{
|
||||
fontSize: '14px',
|
||||
@ -25,7 +25,7 @@ In most case you may want to use a `x-overlay-color`: For example is you use `pr
|
||||
</button>
|
||||
</n-config-consumer>
|
||||
<br />
|
||||
<n-element tag="div" style="overflow: auto;" v-slot="{ styleScheme }">
|
||||
<n-element tag="div" style="overflow: auto;" #="{ styleScheme }">
|
||||
<pre
|
||||
:style="{
|
||||
color: styleScheme.secondaryTextColor,
|
||||
|
||||
@ -9,7 +9,7 @@
|
||||
</div>
|
||||
<n-config-provider :theme="theme" :theme-environments="env">
|
||||
<n-card>
|
||||
<n-config-consumer v-slot="{ themeEnvironment }">
|
||||
<n-config-consumer #="{ themeEnvironment }">
|
||||
<n-tag>{{ themeEnvironment }}</n-tag>
|
||||
</n-config-consumer>
|
||||
</n-card>
|
||||
|
||||
@ -10,7 +10,7 @@
|
||||
</n-space>
|
||||
<n-config-provider :theme="theme">
|
||||
<n-card>
|
||||
<n-config-consumer @theme-change="handleThemeChange" v-slot="{ theme }">
|
||||
<n-config-consumer @theme-change="handleThemeChange" #="{ theme }">
|
||||
<div>主题：{{ theme }}</div>
|
||||
</n-config-consumer>
|
||||
</n-card>
|
||||
|
||||
@ -9,7 +9,7 @@ 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 }">
|
||||
<n-config-consumer #="{ styleScheme }">
|
||||
<button
|
||||
:style="{
|
||||
fontSize: '14px',
|
||||
@ -25,7 +25,7 @@ Naive UI 内部的组件可能会在不同的主题下使用不同的变量作
|
||||
</button>
|
||||
</n-config-consumer>
|
||||
<br />
|
||||
<n-element tag="div" style="overflow: auto;" v-slot="{ styleScheme }">
|
||||
<n-element tag="div" style="overflow: auto;" #="{ styleScheme }">
|
||||
<pre
|
||||
:style="{
|
||||
color: styleScheme.secondaryTextColor,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user