mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2024-12-09 04:31:35 +08:00
07akioni
GitHub Enterprise
commit
e1fbbae46c
412
demo/demo.vue
412
demo/demo.vue
@ -15,6 +15,7 @@
|
||||
|
||||
<script>
|
||||
import DocHeader from './header.vue'
|
||||
import menuOptions from './menuOptions'
|
||||
import { i18n } from './init'
|
||||
|
||||
export default {
|
||||
@ -36,416 +37,7 @@ export default {
|
||||
},
|
||||
computed: {
|
||||
items () {
|
||||
const appendCounts = item => {
|
||||
if (!item.childItems) {
|
||||
item.count = 1
|
||||
return item
|
||||
}
|
||||
if (item.childItems) {
|
||||
item.childItems.forEach(appendCounts)
|
||||
item.count = item.childItems.reduce((sum, item) => sum + item.count, 0)
|
||||
if (!item.group) {
|
||||
item.title = h => {
|
||||
return h('n-config-consumer', {
|
||||
props: {
|
||||
transparent: true
|
||||
},
|
||||
scopedSlots: {
|
||||
default: ({ styleScheme }) => {
|
||||
return h('span', {
|
||||
|
||||
}, [ item.name, h('span', {
|
||||
style: {
|
||||
color: styleScheme.tertiaryTextColor,
|
||||
fontWeight: '400',
|
||||
transition: `color .3s ${styleScheme.easeInOutCubicBezier}`
|
||||
}
|
||||
}, [ ' (', item.count, ')' ])])
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
} else {
|
||||
item.name += ` (${item.count})`
|
||||
}
|
||||
return item
|
||||
}
|
||||
}
|
||||
return [
|
||||
{
|
||||
name: 'Naive UI',
|
||||
path: `/${this.lang}/${this.theme}` + '/intro'
|
||||
},
|
||||
{
|
||||
name: 'Getting Started',
|
||||
path: `/${this.lang}/${this.theme}` + '/start'
|
||||
},
|
||||
{
|
||||
name: 'Develop Guidelines',
|
||||
path: `/${this.lang}/${this.theme}` + '/dev-guildlines'
|
||||
},
|
||||
{
|
||||
name: 'Create Themed Component',
|
||||
path: `/${this.lang}/${this.theme}` + '/n-theme'
|
||||
},
|
||||
appendCounts({
|
||||
name: 'Config Components',
|
||||
group: true,
|
||||
childItems: [
|
||||
{
|
||||
name: 'Config Provider',
|
||||
path: `/${this.lang}/${this.theme}` + '/n-config-provider'
|
||||
},
|
||||
{
|
||||
name: 'Config Consumer',
|
||||
path: `/${this.lang}/${this.theme}` + '/n-config-consumer'
|
||||
},
|
||||
{
|
||||
name: 'Element',
|
||||
path: `/${this.lang}/${this.theme}` + '/n-element'
|
||||
}
|
||||
]
|
||||
}),
|
||||
appendCounts({
|
||||
name: 'Layout Components',
|
||||
group: true,
|
||||
childItems: [
|
||||
{
|
||||
name: 'Layout',
|
||||
path: `/${this.lang}/${this.theme}` + '/n-layout'
|
||||
},
|
||||
{
|
||||
name: 'Grid',
|
||||
path: `/${this.lang}/${this.theme}` + '/n-grid'
|
||||
}
|
||||
]
|
||||
}),
|
||||
appendCounts({
|
||||
name: 'Common Components',
|
||||
group: true,
|
||||
childItems: [
|
||||
{
|
||||
name: 'Avatar',
|
||||
path: `/${this.lang}/${this.theme}` + '/n-avatar'
|
||||
},
|
||||
{
|
||||
name: 'Button',
|
||||
path: `/${this.lang}/${this.theme}` + '/n-button'
|
||||
},
|
||||
{
|
||||
name: 'Card',
|
||||
path: `/${this.lang}/${this.theme}` + '/n-card'
|
||||
},
|
||||
{
|
||||
name: 'Collapse',
|
||||
path: `/${this.lang}/${this.theme}` + '/n-collapse'
|
||||
},
|
||||
{
|
||||
name: 'Divider',
|
||||
path: `/${this.lang}/${this.theme}` + '/n-divider'
|
||||
},
|
||||
{
|
||||
name: 'Dropdown',
|
||||
path: `/${this.lang}/${this.theme}` + '/n-dropdown'
|
||||
},
|
||||
{
|
||||
name: 'Gradient Text',
|
||||
path: `/${this.lang}/${this.theme}` + '/n-gradient-text'
|
||||
},
|
||||
{
|
||||
name: 'Icon',
|
||||
path: `/${this.lang}/${this.theme}` + '/n-icon'
|
||||
},
|
||||
{
|
||||
name: 'Tag',
|
||||
path: `/${this.lang}/${this.theme}` + '/n-tag'
|
||||
},
|
||||
{
|
||||
name: 'Typography',
|
||||
path: `/${this.lang}/${this.theme}` + '/n-typography'
|
||||
}
|
||||
]
|
||||
}),
|
||||
appendCounts({
|
||||
name: 'Data Input Components',
|
||||
group: true,
|
||||
childItems: [
|
||||
{
|
||||
name: 'Auto Complete',
|
||||
path: `/${this.lang}/${this.theme}` + '/n-auto-complete'
|
||||
},
|
||||
{
|
||||
name: 'Cascader',
|
||||
path: `/${this.lang}/${this.theme}` + '/n-cascader'
|
||||
},
|
||||
{
|
||||
name: 'Checkbox',
|
||||
path: `/${this.lang}/${this.theme}` + '/n-checkbox'
|
||||
},
|
||||
{
|
||||
name: 'Custom Input (in progress)',
|
||||
path: `/${this.lang}/${this.theme}` + '/n-custom-input'
|
||||
},
|
||||
{
|
||||
name: 'Date Picker',
|
||||
path: `/${this.lang}/${this.theme}` + '/n-date-picker'
|
||||
},
|
||||
{
|
||||
name: 'Form',
|
||||
path: `/${this.lang}/${this.theme}` + '/n-form'
|
||||
},
|
||||
{
|
||||
name: 'Input',
|
||||
path: `/${this.lang}/${this.theme}` + '/n-input'
|
||||
},
|
||||
{
|
||||
name: 'Input Number',
|
||||
path: `/${this.lang}/${this.theme}` + '/n-input-number'
|
||||
},
|
||||
{
|
||||
name: 'Radio',
|
||||
path: `/${this.lang}/${this.theme}` + '/n-radio'
|
||||
},
|
||||
{
|
||||
name: 'Select',
|
||||
path: `/${this.lang}/${this.theme}` + '/n-select'
|
||||
},
|
||||
{
|
||||
name: 'Slider',
|
||||
path: `/${this.lang}/${this.theme}` + '/n-slider'
|
||||
},
|
||||
{
|
||||
name: 'Switch',
|
||||
path: `/${this.lang}/${this.theme}` + '/n-switch'
|
||||
},
|
||||
{
|
||||
name: 'Time Picker',
|
||||
path: `/${this.lang}/${this.theme}` + '/n-time-picker'
|
||||
},
|
||||
{
|
||||
name: 'Transfer',
|
||||
path: `/${this.lang}/${this.theme}` + '/n-transfer'
|
||||
}
|
||||
]
|
||||
}),
|
||||
appendCounts({
|
||||
name: 'Data Display Components',
|
||||
group: true,
|
||||
childItems: [
|
||||
{
|
||||
name: 'Code',
|
||||
path: `/${this.lang}/${this.theme}` + '/n-code'
|
||||
},
|
||||
{
|
||||
name: 'DataTable',
|
||||
path: `/${this.lang}/${this.theme}` + '/n-data-table'
|
||||
},
|
||||
{
|
||||
name: 'Descriptions',
|
||||
path: `/${this.lang}/${this.theme}` + '/n-descriptions'
|
||||
},
|
||||
{
|
||||
name: 'Empty',
|
||||
path: `/${this.lang}/${this.theme}` + '/n-empty'
|
||||
},
|
||||
{
|
||||
name: 'List',
|
||||
path: `/${this.lang}/${this.theme}` + '/n-list'
|
||||
},
|
||||
{
|
||||
name: 'Log',
|
||||
path: `/${this.lang}/${this.theme}` + '/n-log'
|
||||
},
|
||||
{
|
||||
name: 'Statistic',
|
||||
path: `/${this.lang}/${this.theme}` + '/n-statistic'
|
||||
},
|
||||
{
|
||||
name: 'Thing',
|
||||
path: `/${this.lang}/${this.theme}` + '/n-thing'
|
||||
},
|
||||
{
|
||||
name: 'Time',
|
||||
path: `/${this.lang}/${this.theme}` + '/n-time'
|
||||
},
|
||||
{
|
||||
name: 'Timeline',
|
||||
path: `/${this.lang}/${this.theme}` + '/n-timeline'
|
||||
},
|
||||
{
|
||||
name: 'Tree (in progress)',
|
||||
path: `/${this.lang}/${this.theme}` + '/n-tree'
|
||||
}
|
||||
]
|
||||
}),
|
||||
appendCounts({
|
||||
name: 'Navigation Components',
|
||||
group: true,
|
||||
childItems: [
|
||||
{
|
||||
name: 'Affix',
|
||||
path: `/${this.lang}/${this.theme}` + '/n-affix'
|
||||
},
|
||||
{
|
||||
name: 'Anchor',
|
||||
path: `/${this.lang}/${this.theme}` + '/n-anchor'
|
||||
},
|
||||
{
|
||||
name: 'BackTop',
|
||||
path: `/${this.lang}/${this.theme}` + '/n-back-top'
|
||||
},
|
||||
{
|
||||
name: 'Breadcrumb',
|
||||
path: `/${this.lang}/${this.theme}` + '/n-breadcrumb'
|
||||
},
|
||||
{
|
||||
name: 'Loading Bar',
|
||||
path: `/${this.lang}/${this.theme}` + '/n-loading-bar'
|
||||
},
|
||||
{
|
||||
name: 'Menu',
|
||||
path: `/${this.lang}/${this.theme}` + '/n-menu'
|
||||
},
|
||||
{
|
||||
name: 'Pagination',
|
||||
path: `/${this.lang}/${this.theme}` + '/n-pagination'
|
||||
},
|
||||
{
|
||||
name: 'Steps',
|
||||
path: `/${this.lang}/${this.theme}` + '/n-steps'
|
||||
},
|
||||
{
|
||||
name: 'Tabs',
|
||||
path: `/${this.lang}/${this.theme}` + '/n-tabs'
|
||||
}
|
||||
]
|
||||
}),
|
||||
appendCounts({
|
||||
name: 'Feedback Components',
|
||||
group: true,
|
||||
childItems: [
|
||||
{
|
||||
name: 'Alert',
|
||||
path: `/${this.lang}/${this.theme}` + '/n-alert'
|
||||
},
|
||||
{
|
||||
name: 'Badge',
|
||||
path: `/${this.lang}/${this.theme}` + '/n-badge'
|
||||
},
|
||||
{
|
||||
name: 'Confirm',
|
||||
path: `/${this.lang}/${this.theme}` + '/n-confirm'
|
||||
},
|
||||
{
|
||||
name: 'Drawer',
|
||||
path: `/${this.lang}/${this.theme}` + '/n-drawer'
|
||||
},
|
||||
{
|
||||
name: 'Message',
|
||||
path: `/${this.lang}/${this.theme}` + '/n-message'
|
||||
},
|
||||
{
|
||||
name: 'Modal',
|
||||
path: `/${this.lang}/${this.theme}` + '/n-modal'
|
||||
},
|
||||
{
|
||||
name: 'Notification',
|
||||
path: `/${this.lang}/${this.theme}` + '/n-notification'
|
||||
},
|
||||
{
|
||||
name: 'Popover',
|
||||
path: `/${this.lang}/${this.theme}` + '/n-popover'
|
||||
},
|
||||
{
|
||||
name: 'Popconfirm',
|
||||
path: `/${this.lang}/${this.theme}` + '/n-popconfirm'
|
||||
},
|
||||
{
|
||||
name: 'Popselect',
|
||||
path: `/${this.lang}/${this.theme}` + '/n-popselect'
|
||||
},
|
||||
{
|
||||
name: 'Progress',
|
||||
path: `/${this.lang}/${this.theme}` + '/n-progress'
|
||||
},
|
||||
{
|
||||
name: 'Result',
|
||||
path: `/${this.lang}/${this.theme}` + '/n-result'
|
||||
},
|
||||
{
|
||||
name: 'Spin',
|
||||
path: `/${this.lang}/${this.theme}` + '/n-spin'
|
||||
},
|
||||
{
|
||||
name: 'Tooltip',
|
||||
path: `/${this.lang}/${this.theme}` + '/n-tooltip'
|
||||
}
|
||||
]
|
||||
}),
|
||||
{
|
||||
name: 'Deprecated',
|
||||
path: `/${this.lang}/${this.theme}` + '/',
|
||||
childItems: [
|
||||
{
|
||||
name: 'Nimbus Service Layout',
|
||||
path: `/${this.lang}/${this.theme}` + '/n-nimbus-service-layout'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'Debug',
|
||||
childItems: [
|
||||
{
|
||||
name: 'CancelMarkDebug',
|
||||
path: `/${this.lang}/${this.theme}` + '/n-cancel-mark-debug'
|
||||
},
|
||||
{
|
||||
name: 'PopoverDebug',
|
||||
path: `/${this.lang}/${this.theme}` + '/n-popover-debug'
|
||||
},
|
||||
{
|
||||
name: 'RouterDebug',
|
||||
path: `/${this.lang}/${this.theme}` + '/n-router-debug'
|
||||
},
|
||||
{
|
||||
name: 'ModalDebug',
|
||||
path: `/${this.lang}/${this.theme}` + '/n-modal-debug'
|
||||
},
|
||||
{
|
||||
name: 'ScrollbarDebug',
|
||||
path: `/${this.lang}/${this.theme}` + '/n-scrollbar-debug'
|
||||
},
|
||||
{
|
||||
name: 'ScrollbarDebug2',
|
||||
path: `/${this.lang}/${this.theme}` + '/n-scrollbar-debug2'
|
||||
},
|
||||
{
|
||||
name: 'DatePickerDebug',
|
||||
path: `/${this.lang}/${this.theme}` + '/n-date-picker-debug'
|
||||
},
|
||||
{
|
||||
name: 'BackTopDebug',
|
||||
path: `/${this.lang}/${this.theme}` + '/n-back-top-debug'
|
||||
},
|
||||
{
|
||||
name: 'CascaderDebug',
|
||||
path: `/${this.lang}/${this.theme}` + '/n-cascader-debug'
|
||||
},
|
||||
{
|
||||
name: 'VerticalAlignDebug',
|
||||
path: `/${this.lang}/${this.theme}` + '/n-vertical-align-debug'
|
||||
},
|
||||
{
|
||||
name: 'IconTransitionDebug',
|
||||
path: `/${this.lang}/${this.theme}` + '/n-icon-transition-debug'
|
||||
},
|
||||
{
|
||||
name: 'SelectDebug',
|
||||
path: `/${this.lang}/${this.theme}` + '/n-select-debug'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
return menuOptions(this.lang, this)
|
||||
},
|
||||
flattenedItems () {
|
||||
const flattenedItems = []
|
||||
|
||||
@ -6,10 +6,10 @@ Affix has `offset-top`, `top`, `offset-bottom` and `bottom`. `offset-top` is top
|
||||
<div class="content">
|
||||
<n-row>
|
||||
<n-col :span="12">
|
||||
<n-affix :top="120" :offset-top="60"><n-tag>Top 60px</n-tag></n-affix>
|
||||
<n-affix :top="120" :offset-top="60"><n-tag>Affix Trigger Top 60px</n-tag></n-affix>
|
||||
</n-col>
|
||||
<n-col :span="12">
|
||||
<n-affix :bottom="120" :offset-bottom="60"><n-tag>Bottom 60px</n-tag></n-affix>
|
||||
<n-affix :bottom="120" :offset-bottom="60"><n-tag>Affix Trigger Bottom 60px</n-tag></n-affix>
|
||||
</n-col>
|
||||
</n-row>
|
||||
</div>
|
||||
|
||||
@ -9,8 +9,8 @@ position
|
||||
|Name|Type|Default|Description|
|
||||
|-|-|-|-|
|
||||
|position|`'fixed' \| 'absolute'`|`'fixed'`||
|
||||
|top|`number`|`null`|The distance px to top of target to trigger top affix. (if not set, use `offset-top` prop)|
|
||||
|offset-top|`number`|`null`|The css top property after trigger top affix. (if not set, use `top` prop)|
|
||||
|bottom|`number`|`null`|The distance px to bottom of target to trigger bottom affix. (if not set, use `offset-bottom` prop)|
|
||||
|offset-bottom|`number`|`null`|The css bottom property after trigger bottom affix. (if not set, use `bottom` prop)|
|
||||
|top|`number`|`null`|The css top property after trigger top affix. (if not set, use `offset-top` prop)|
|
||||
|offset-top|`number`|`null`|The distance px to top of target to trigger top affix. (if not set, use `top` prop)|
|
||||
|bottom|`number`|`null`|The css bottom property after trigger bottom affix. (if not set, use `offset-bottom` prop)|
|
||||
|offset-bottom|`number`|`null`|The distance px to bottom of target to trigger bottom affix. (if not set, use `bottom` prop)|
|
||||
|target|`() => HTMLElement`|a function that returns the nearest scrollable ascendant element|The scrolling element to listen scrolling.|
|
||||
@ -6,10 +6,10 @@ Affix can be `absolute` or `fixed` positioned. You may need some css tricks to m
|
||||
<div class="padding"></div>
|
||||
<div class="content">
|
||||
<div style="display: inline-block; width: 50%;">
|
||||
<n-affix :offset-top="50" position="absolute"><n-tag>Offset Top 50px</n-tag></n-affix>
|
||||
<n-affix :offset-top="50" position="absolute"><n-tag>Affix Trigger Top 50px</n-tag></n-affix>
|
||||
</div>
|
||||
<div style="display: inline-block; width: 50%;">
|
||||
<n-affix :offset-bottom="60" position="absolute"><n-tag>Offset Bottom 60px</n-tag></n-affix>
|
||||
<n-affix :offset-bottom="60" position="absolute"><n-tag>Affix Trigger Bottom 60px</n-tag></n-affix>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
36
demo/documentation/components/affix/zhCN/basic.md
Normal file
36
demo/documentation/components/affix/zhCN/basic.md
Normal file
@ -0,0 +1,36 @@
|
||||
# 基础用法
|
||||
Affix 有 `offset-top`、`top`、`offset-bottom` 和 `bottom` 属性。`offset-top` 是顶部固定的触发距离，`top` 是在触发顶部固定之后 CSS 的 `top` 值。`offset-bottom` 和 `bottom` 类似。
|
||||
```html
|
||||
<div class="container">
|
||||
<div class="padding"></div>
|
||||
<div class="content">
|
||||
<n-row>
|
||||
<n-col :span="12">
|
||||
<n-affix :top="120" :offset-top="60"><n-tag>顶部触发距离 60px</n-tag></n-affix>
|
||||
</n-col>
|
||||
<n-col :span="12">
|
||||
<n-affix :bottom="120" :offset-bottom="60"><n-tag>底部触发距离 60px</n-tag></n-affix>
|
||||
</n-col>
|
||||
</n-row>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
```css
|
||||
.container {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
background-color: rgba(128, 128, 128, .3);
|
||||
border-radius: 6px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.padding {
|
||||
height: 150px;
|
||||
width: 100%;
|
||||
background-color: rgba(128, 128, 128, .15);
|
||||
}
|
||||
|
||||
.content {
|
||||
height: 600px;
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,16 @@
|
||||
# 固钉 Affix
|
||||
Affix 可以让内容在页面滚动的时候固定在一个位置，它和 `position: sticky` 有那么点像不过可以做更多事。
|
||||
## 演示
|
||||
```demo
|
||||
basic
|
||||
position
|
||||
```
|
||||
## Props
|
||||
|Name|Type|Default|Description|
|
||||
|-|-|-|-|
|
||||
|position|`'fixed' \| 'absolute'`|`'fixed'`||
|
||||
|top|`number`|`null`|在触发顶部固定后 Affix 的 CSS top 属性（如果没设定，会使用 `offset-top` 代替)|
|
||||
|offset-top|`number`|`null`|触发顶部固定时，Affix 和目标元素元素的顶部距离（如果没设定，会使用 `top` 代替)|
|
||||
|bottom|`number`|`null`|在触发顶部固定后 Affix 的 CSS bottom 属性（如果没设定，会使用 `offset-bottom` 代替)|
|
||||
|offset-bottom|`number`|`null`|触发底部固定时，Affix 和目标元素元素的底部距离（如果没设定，会使用 `bottom` 代替)|
|
||||
|target|`() => HTMLElement`|一个返回最邻近可滚动祖先元素的函数|需要监听滚动的元素|
|
||||
41
demo/documentation/components/affix/zhCN/position.md
Normal file
41
demo/documentation/components/affix/zhCN/position.md
Normal file
@ -0,0 +1,41 @@
|
||||
# 位置
|
||||
Affix 可以 `absolute` 或者 `fixed` 定位。你可能还需要写一些额外的 CSS 才能让达到例子的效果。 默认情况下位置是 `fixed`，因为大多数情况下，滚动的元素是 `#document`.
|
||||
```html
|
||||
<div class="absolute-anchor-container">
|
||||
<div class="container">
|
||||
<div class="padding"></div>
|
||||
<div class="content">
|
||||
<div style="display: inline-block; width: 50%;">
|
||||
<n-affix :offset-top="50" position="absolute"><n-tag>顶部触发距离 50px</n-tag></n-affix>
|
||||
</div>
|
||||
<div style="display: inline-block; width: 50%;">
|
||||
<n-affix :offset-bottom="60" position="absolute"><n-tag>底部触发距离 60px</n-tag></n-affix>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
```css
|
||||
.absolute-anchor-container {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.container {
|
||||
height: 200px;
|
||||
background-color: rgba(128, 128, 128, .3);
|
||||
border-radius: 6px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.padding {
|
||||
height: 150px;
|
||||
width: 100%;
|
||||
background-color: rgba(128, 128, 128, .15);
|
||||
}
|
||||
|
||||
.content {
|
||||
height: 600px;
|
||||
}
|
||||
```
|
||||
@ -1,6 +1,6 @@
|
||||
# Basic
|
||||
```html
|
||||
<n-alert title="Info Text" type="default">
|
||||
<n-alert title="Default Text" type="default">
|
||||
<template v-slot:icon>
|
||||
<n-icon>
|
||||
<ios-airplane />
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
# Closable
|
||||
```html
|
||||
<n-alert title="Info Text" type="default" closable>
|
||||
<n-alert title="Default Text" type="default" closable>
|
||||
<template v-slot:icon>
|
||||
<n-icon>
|
||||
<ios-airplane />
|
||||
|
||||
@ -14,7 +14,7 @@ no-icon
|
||||
|show-icon|`string`|`true`||
|
||||
|type|`'default' \| 'info' \| 'success' \| 'warning' \| 'error'`|`'default'`||
|
||||
|closable|`boolean`|`false`||
|
||||
|on-close|`(next: function) => any`|`next => next()`|Call next to make alert close, nor it won't close|
|
||||
|on-close|`(next: function) => any`|`next => next()`|Callback when close clicked. Call next to make alert close, nor it won't close|
|
||||
|on-after-hide|`function`|`null`||
|
||||
|
||||
## Slots
|
||||
|
||||
37
demo/documentation/components/alert/zhCN/basic.md
Normal file
37
demo/documentation/components/alert/zhCN/basic.md
Normal file
@ -0,0 +1,37 @@
|
||||
# 基础用法
|
||||
```html
|
||||
<n-alert title="Default 类型" type="default">
|
||||
<template v-slot:icon>
|
||||
<n-icon>
|
||||
<ios-airplane />
|
||||
</n-icon>
|
||||
</template>
|
||||
Gee it's good to be back home
|
||||
</n-alert>
|
||||
<n-alert title="Info 类型" type="info">
|
||||
Gee it's good to be back home
|
||||
</n-alert>
|
||||
<n-alert title="Success 类型" type="success">
|
||||
Leave it till tomorrow to unpack my case
|
||||
</n-alert>
|
||||
<n-alert title="Warning 类型" type="warning">
|
||||
Honey disconnect the phone
|
||||
</n-alert>
|
||||
<n-alert title="Error 类型" type="error">
|
||||
I'm back in the U.S.S.R.
|
||||
</n-alert>
|
||||
```
|
||||
```js
|
||||
import iosAirplane from 'naive-ui/lib/icons/ios-airplane'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
iosAirplane
|
||||
}
|
||||
}
|
||||
```
|
||||
```css
|
||||
.n-alert {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
```
|
||||
42
demo/documentation/components/alert/zhCN/closable.md
Normal file
42
demo/documentation/components/alert/zhCN/closable.md
Normal file
@ -0,0 +1,42 @@
|
||||
# 可以关掉
|
||||
```html
|
||||
<n-alert title="Default 类型" type="default" closable>
|
||||
<template v-slot:icon>
|
||||
<n-icon>
|
||||
<ios-airplane />
|
||||
</n-icon>
|
||||
</template>
|
||||
Gee it's good to be back home
|
||||
</n-alert>
|
||||
<n-alert title="Info 类型" type="info" closable>
|
||||
Gee it's good to be back home
|
||||
</n-alert>
|
||||
<n-alert title="Success 类型" type="success" closable>
|
||||
Leave it till tomorrow to unpack my case
|
||||
</n-alert>
|
||||
<n-alert title="Warning 类型" type="warning" closable>
|
||||
Honey disconnect the phone
|
||||
</n-alert>
|
||||
<n-alert title="Error 类型" type="error" closable>
|
||||
I'm back in the U.S.S.R.
|
||||
</n-alert>
|
||||
```
|
||||
```js
|
||||
import iosAirplane from 'naive-ui/lib/icons/ios-airplane'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
iosAirplane
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
show: true
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
```css
|
||||
.n-alert {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
```
|
||||
24
demo/documentation/components/alert/zhCN/icon.md
Normal file
24
demo/documentation/components/alert/zhCN/icon.md
Normal file
@ -0,0 +1,24 @@
|
||||
# 图标
|
||||
```html
|
||||
<n-alert title="Back in the U.S.S.R.">
|
||||
<template v-slot:icon>
|
||||
<n-icon>
|
||||
<ios-airplane />
|
||||
</n-icon>
|
||||
</template>
|
||||
Well the Ukraine girls really knock me out<br />
|
||||
They leave the West behind<br />
|
||||
And Moscow girls make me sing and shout<br />
|
||||
That Georgia's always on my mind<br />
|
||||
Aw come on!
|
||||
</n-alert>
|
||||
```
|
||||
```js
|
||||
import iosAirplane from 'naive-ui/lib/icons/ios-airplane'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
iosAirplane
|
||||
}
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,31 @@
|
||||
# 警示信息 Alert
|
||||
根据我的经验，这东西使用最频繁的场景是让你关掉 AdBlocks。
|
||||
## 演示
|
||||
```demo
|
||||
basic
|
||||
closable
|
||||
icon
|
||||
no-icon
|
||||
```
|
||||
## Props
|
||||
|名称|类型|默认值|介绍|
|
||||
|-|-|-|-|
|
||||
|title|`string`|`null`||
|
||||
|show-icon|`string`|`true`||
|
||||
|type|`'default' \| 'info' \| 'success' \| 'warning' \| 'error'`|`'default'`||
|
||||
|closable|`boolean`|`false`||
|
||||
|on-close|`(next: function) => any`|`next => next()`|点击关闭的回调，调用 next 才能让 Alert 关闭|
|
||||
|on-after-hide|`function`|`null`||
|
||||
|
||||
## Slots
|
||||
|名称|参数|介绍|
|
||||
|-|-|-|
|
||||
|header|`()`||
|
||||
|default|`()`||
|
||||
|icon|`()`||
|
||||
|
||||
## Events
|
||||
|名称|参数|介绍|
|
||||
|-|-|-|
|
||||
|close|`()`||
|
||||
|after-hide|`()`||
|
||||
7
demo/documentation/components/alert/zhCN/noIcon.md
Normal file
7
demo/documentation/components/alert/zhCN/noIcon.md
Normal file
@ -0,0 +1,7 @@
|
||||
# 没有图标
|
||||
```html
|
||||
<n-alert :show-icon="false">
|
||||
Yeah I'm back in the U.S.S.R.<br />
|
||||
You don't know how lucky you are boys
|
||||
</n-alert>
|
||||
```
|
||||
@ -1,6 +1,6 @@
|
||||
# Anchor
|
||||
<!--single-column-->
|
||||
The demo used to use some charactor names from *Hard-Boiled Wonderland and the End of the World* as anchor links, but if so there will be too wired in this page. So I rewrite them. What a pity.
|
||||
These demos used to use some charactor names from *Hard-Boiled Wonderland and the End of the World* as anchor links, but if so there will be too wired in this page compared with other pages. So I rewrite them. What a pity.
|
||||
## Demos
|
||||
```demo
|
||||
basic
|
||||
@ -11,10 +11,10 @@ scrollto
|
||||
|Name|Type|Default|Description|
|
||||
|-|-|-|-|
|
||||
|affix|`boolean`|`false`|If it works like a affix. If set to `true`, it will recieve props from [affix](n-affix#Props)|
|
||||
|target|`() => HTMLElement`|A function that returns the nearest scrollable ascendant element|The element that anchor listens to scroll event.|
|
||||
|target|`() => HTMLElement`|A function that returns the nearest scrollable ascendant element|The element that anchor listens to scroll event. (If you want affix & anchor to listen to different target, manually warp anchor in affix instead.)|
|
||||
|bound|`number`|`12`||
|
||||
|
||||
## Methods
|
||||
|Method|Description|
|
||||
|-|-|
|
||||
|`scrollTo(href: string)`||
|
||||
|Name|Type|Description|
|
||||
|-|-|-|
|
||||
|scrollTo|`(href: string) => void`||
|
||||
14
demo/documentation/components/anchor/zhCN/affix.md
Normal file
14
demo/documentation/components/anchor/zhCN/affix.md
Normal file
@ -0,0 +1,14 @@
|
||||
# 固定
|
||||
在固定模式下，Anchor 还接受和 Affix 一样的 Props。
|
||||
```html
|
||||
<div style="height: 200px;">
|
||||
<n-anchor affix :offset-top="24" :top="88" style="z-index: 1;" :bound="24">
|
||||
<n-anchor-link title="演示" href="#Demos">
|
||||
<n-anchor-link title="基础用法" href="#basic"/>
|
||||
<n-anchor-link title="固定" href="#affix"/>
|
||||
<n-anchor-link title="滚动到" href="#scrollto"/>
|
||||
</n-anchor-link>
|
||||
<n-anchor-link title="Props" href="#Props" />
|
||||
</n-anchor>
|
||||
</div>
|
||||
```
|
||||
13
demo/documentation/components/anchor/zhCN/basic.md
Normal file
13
demo/documentation/components/anchor/zhCN/basic.md
Normal file
@ -0,0 +1,13 @@
|
||||
# 基础用法
|
||||
```html
|
||||
<div>
|
||||
<n-anchor>
|
||||
<n-anchor-link title="演示" href="#Demos">
|
||||
<n-anchor-link title="基础用法" href="#basic"/>
|
||||
<n-anchor-link title="固定" href="#affix"/>
|
||||
<n-anchor-link title="滚动到" href="#scrollto"/>
|
||||
</n-anchor-link>
|
||||
<n-anchor-link title="Props" href="#Props" />
|
||||
</n-anchor>
|
||||
</div>
|
||||
```
|
||||
@ -0,0 +1,20 @@
|
||||
# 页面导航 Anchor
|
||||
<!--single-column-->
|
||||
下面的演示曾经用的是《世界尽头与冷酷仙境》的一些角色名称作为 Anchor 的子标题，但是这样的话和其他页面差的就有点远了。所以最后还是重写了这个页面，表示遗憾。
|
||||
## 演示
|
||||
```demo
|
||||
basic
|
||||
affix
|
||||
scrollto
|
||||
```
|
||||
## Props
|
||||
|名称|类型|默认值|介绍|
|
||||
|-|-|-|-|
|
||||
|affix|`boolean`|`false`|Anchor 是否像 Affix 一样展示，如果设定为 `true`，它还会接受 [Affix](n-affix#Props) 的 Props|
|
||||
|target|`() => HTMLElement`|一个返回最邻近可滚动祖先元素的函数|需要监听滚动的元素（如果你希望 Anchor 和 Affix 分别监听不同的元素，可以手动的组合 Anchor 和 Affix）|
|
||||
|bound|`number`|`12`||
|
||||
|
||||
## Methods
|
||||
|名称|类型|介绍|
|
||||
|-|-|-|
|
||||
|scrollTo|`(href: string) => void`||
|
||||
31
demo/documentation/components/anchor/zhCN/scrollto.md
Normal file
31
demo/documentation/components/anchor/zhCN/scrollto.md
Normal file
@ -0,0 +1,31 @@
|
||||
# 滚动到
|
||||
```html
|
||||
<div style="height: 200px; padding-left: 200px;">
|
||||
<n-anchor affix :offset-top="24" :top="88" :bound="24" style="z-index: 1;" ref="anchor">
|
||||
<n-anchor-link title="演示" href="#Demos">
|
||||
<n-anchor-link title="基础用法" href="#basic"/>
|
||||
<n-anchor-link title="固定" href="#affix"/>
|
||||
<n-anchor-link title="滚动到" href="#scrollto"/>
|
||||
</n-anchor-link>
|
||||
<n-anchor-link title="Props" href="#Props" />
|
||||
</n-anchor>
|
||||
</div>
|
||||
<div style="padding-left: 400px;">
|
||||
<n-button @click="scrollTo('#basic')">基础用法</n-button>
|
||||
<n-button @click="scrollTo('#affix')">固定</n-button>
|
||||
</div>
|
||||
```
|
||||
```js
|
||||
export default {
|
||||
methods: {
|
||||
scrollTo (href) {
|
||||
this.$refs.anchor.scrollTo(href)
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
```css
|
||||
.n-button {
|
||||
margin: 0 8px 12px 0;
|
||||
}
|
||||
```
|
||||
@ -16,17 +16,34 @@ after-select
|
||||
|-|-|-|-|
|
||||
|size|`'small' \| 'medium' \| 'large'`|`'medium'`||
|
||||
|value|`string`|`null`||
|
||||
|options|`Array`|`[]`||
|
||||
|options|`Array<AutoCompleteOption \| AutoCompleteOptionGroup>`|`[]`||
|
||||
|placeholder|`string`|`null`||
|
||||
|blur-after-select|`boolean`|`false`||
|
||||
|clear-after-select|`boolean`|`false`||
|
||||
|
||||
## API
|
||||
### AutoCompleteOption Type
|
||||
|Property|Type|Description|
|
||||
|-|-|-|
|
||||
|label|`string`||
|
||||
|value|`string \| number`|Should be unique in options.|
|
||||
|disabled|`boolean`||
|
||||
|render|`function`||
|
||||
|
||||
### AutoCompleteOptionGroup Type
|
||||
|Property|Type|Description|
|
||||
|-|-|-|
|
||||
|type|`'group'`||
|
||||
|name|`string`||
|
||||
|children|`Array<AutoCompleteOption>`||
|
||||
|
||||
## Slots
|
||||
|Name|Parameters|Description|
|
||||
|-|-|-|
|
||||
|default|`({ handleInput, handleFocus, handleBlur, value })`||
|
||||
|default|`({ handleInput: (value: string) => any, handleFocus: function, handleBlur: function, value: string })`||
|
||||
|
||||
## Events
|
||||
|Name|Parameters|Description}
|
||||
|Name|Parameters|Description|
|
||||
|-|-|-|
|
||||
|input|`(value: string \| null)`||
|
||||
|select|`(value: string)`||
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
# 选择后的动作
|
||||
在选中选项后清除内容或者选择后 Blur。
|
||||
```html
|
||||
<n-auto-complete
|
||||
:options="options"
|
||||
@ -10,7 +11,7 @@
|
||||
:options="options"
|
||||
v-model="value"
|
||||
blur-after-select
|
||||
placeholder="选择后失焦"
|
||||
placeholder="选择后 Blur"
|
||||
/>
|
||||
```
|
||||
```js
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
# 基础
|
||||
# 基本用法
|
||||
```html
|
||||
<n-auto-complete :options="options" v-model="value" placeholder="邮箱" />
|
||||
```
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
# 自定义输入元素
|
||||
你可以替换 AutoComplete 的输入元素。
|
||||
```html
|
||||
<n-auto-complete :options="options" v-model="value">
|
||||
<template v-slot:activator="{ handleInput, handleBlur, handleFocus, value }">
|
||||
|
||||
@ -1,6 +1,34 @@
|
||||
# 自动完成
|
||||
# 自动填充 Auto Complete
|
||||
用来当搜索提示或者类似的东西。
|
||||
## 演示
|
||||
```demo
|
||||
basic
|
||||
custom-input
|
||||
after-select
|
||||
```
|
||||
|
||||
## V-model
|
||||
|Prop|Event|
|
||||
|-|-|
|
||||
|value|input|
|
||||
|
||||
## Props
|
||||
|名称|类型|默认值|介绍|
|
||||
|-|-|-|-|
|
||||
|size|`'small' \| 'medium' \| 'large'`|`'medium'`||
|
||||
|value|`string`|`null`||
|
||||
|options|`Array`|`[]`||
|
||||
|placeholder|`string`|`null`||
|
||||
|blur-after-select|`boolean`|`false`||
|
||||
|clear-after-select|`boolean`|`false`||
|
||||
|
||||
## Slots
|
||||
|名称|参数|介绍|
|
||||
|-|-|-|
|
||||
|default|`({ handleInput: (value: string) => any, handleFocus: function, handleBlur: function, value: string })`||
|
||||
|
||||
## Events
|
||||
|名称|参数|介绍|
|
||||
|-|-|-|
|
||||
|input|`(value: string \| null)`||
|
||||
|select|`(value: string)`||
|
||||
|
||||
@ -12,7 +12,7 @@ name-size
|
||||
## Props
|
||||
|Name|Type|Default|Description|
|
||||
|-|-|-|-|
|
||||
|size|`'small' \| 'medium' \| 'large' \| 'huge'`| `'medium'`||
|
||||
|size|`'small' \| 'medium' \| 'large' \| number`| `'medium'`||
|
||||
|src|`string`|`null`||
|
||||
|round|`boolean`|`false`||
|
||||
|themed-style|`object`|`null`||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
# Size
|
||||
|
||||
Avatar has `small`, `medium` and `large` size.
|
||||
Avatar has `small`, `medium` and `large` size. You could alse custom size by a px number.
|
||||
|
||||
```html
|
||||
<n-avatar size="small" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1573566445479&di=8804b1996cbf89582232a3994665454c&imgtype=jpg&src=http%3A%2F%2Fimg4.imgtn.bdimg.com%2Fit%2Fu%3D3628555514%2C2933400515%26fm%3D214%26gp%3D0.jpg"/>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
# 徽标
|
||||
|
||||
# 标记
|
||||
和 Badge 一起用也挺好的 (如果你喜欢看到一堆一堆的推送)。
|
||||
```html
|
||||
<n-badge value="666">
|
||||
<n-avatar>666</n-avatar>
|
||||
<n-badge value="999+">
|
||||
<n-avatar>App</n-avatar>
|
||||
</n-badge>
|
||||
```
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
# 颜色
|
||||
|
||||
颜色可以对不同主题分别设定的，你可以把它设成某种和你爱吃的东西有关的颜色。
|
||||
```html
|
||||
<n-avatar :themed-style="{
|
||||
light: {
|
||||
@ -10,5 +10,5 @@
|
||||
color: 'red',
|
||||
backgroundColor: 'yellow'
|
||||
}
|
||||
}">刘<br>德华</n-avatar>
|
||||
}">M</n-avatar>
|
||||
```
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
# 图标
|
||||
我喜欢用图标当头像。
|
||||
```html
|
||||
<n-avatar>
|
||||
<n-icon>
|
||||
|
||||
@ -1,4 +1,6 @@
|
||||
# 头像
|
||||
# 头像 Avatar
|
||||
在互联网上，没有人知道你是一条狗。即使你的头像是一只狗狗。
|
||||
## 演示
|
||||
```demo
|
||||
size
|
||||
shape
|
||||
@ -7,3 +9,15 @@ badge
|
||||
icon
|
||||
name-size
|
||||
```
|
||||
## Props
|
||||
|名称|类型|默认值|介绍|
|
||||
|-|-|-|-|
|
||||
|size|`'small' \| 'medium' \| 'large' \| number`| `'medium'`||
|
||||
|src|`string`|`null`||
|
||||
|round|`boolean`|`false`||
|
||||
|themed-style|`object`|`null`||
|
||||
|
||||
## Slots
|
||||
|名称|参数|介绍|
|
||||
|-|-|-|
|
||||
|default|`()`||
|
||||
|
||||
@ -1,16 +1,22 @@
|
||||
# 字号
|
||||
字号会根据内容文字自动调整。
|
||||
```html
|
||||
<n-avatar>{{ value }}</n-avatar>
|
||||
<n-avatar circle>{{ value }}</n-avatar>
|
||||
<n-avatar circle>刘<br>{{ value }}</n-avatar>
|
||||
<n-avatar circle>the <br>{{ value }}</n-avatar>
|
||||
<n-input v-model="value"/>
|
||||
```
|
||||
```js
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
value: '德华'
|
||||
value: 'Oasis'
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
```css
|
||||
.n-avatar {
|
||||
margin: 0 8px 12px 0;
|
||||
}
|
||||
```
|
||||
@ -8,3 +8,9 @@
|
||||
<n-avatar circle size="large" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1573566445479&di=8804b1996cbf89582232a3994665454c&imgtype=jpg&src=http%3A%2F%2Fimg4.imgtn.bdimg.com%2Fit%2Fu%3D3628555514%2C2933400515%26fm%3D214%26gp%3D0.jpg"/>
|
||||
<n-avatar circle :size="48" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1573566445479&di=8804b1996cbf89582232a3994665454c&imgtype=jpg&src=http%3A%2F%2Fimg4.imgtn.bdimg.com%2Fit%2Fu%3D3628555514%2C2933400515%26fm%3D214%26gp%3D0.jpg"/>
|
||||
```
|
||||
|
||||
```css
|
||||
.n-avatar {
|
||||
margin: 0 8px 12px 0;
|
||||
}
|
||||
```
|
||||
@ -1,6 +1,6 @@
|
||||
# 尺寸
|
||||
|
||||
头像有 `small`、`medium` 和 `large` 尺寸。
|
||||
头像有 `small`、`medium` 和 `large` 大小，也可以自己设定尺寸。
|
||||
|
||||
```html
|
||||
<n-avatar size="small" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1573566445479&di=8804b1996cbf89582232a3994665454c&imgtype=jpg&src=http%3A%2F%2Fimg4.imgtn.bdimg.com%2Fit%2Fu%3D3628555514%2C2933400515%26fm%3D214%26gp%3D0.jpg"/>
|
||||
@ -8,3 +8,9 @@
|
||||
<n-avatar size="large" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1573566445479&di=8804b1996cbf89582232a3994665454c&imgtype=jpg&src=http%3A%2F%2Fimg4.imgtn.bdimg.com%2Fit%2Fu%3D3628555514%2C2933400515%26fm%3D214%26gp%3D0.jpg"/>
|
||||
<n-avatar :size="48" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1573566445479&di=8804b1996cbf89582232a3994665454c&imgtype=jpg&src=http%3A%2F%2Fimg4.imgtn.bdimg.com%2Fit%2Fu%3D3628555514%2C2933400515%26fm%3D214%26gp%3D0.jpg"/>
|
||||
```
|
||||
|
||||
```css
|
||||
.n-avatar {
|
||||
margin: 0 8px 12px 0;
|
||||
}
|
||||
```
|
||||
@ -1,4 +1,4 @@
|
||||
# BackTop
|
||||
# Back Top
|
||||
<!--single-column-->
|
||||
It helps you back to where you were. However, time never goes back.
|
||||
## Demos
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
# Target
|
||||
# Target to be Listened to
|
||||
You can specify target to listen scroll event of.
|
||||
```html
|
||||
<n-back-top
|
||||
|
||||
5
demo/documentation/components/backTop/zhCN/basic.md
Normal file
5
demo/documentation/components/backTop/zhCN/basic.md
Normal file
@ -0,0 +1,5 @@
|
||||
# 基本用法
|
||||
Back Top 会找到首个可滚动的祖先元素并且监听它的滚动事件。
|
||||
```html
|
||||
<n-back-top />
|
||||
```
|
||||
25
demo/documentation/components/backTop/zhCN/changePosition.md
Normal file
25
demo/documentation/components/backTop/zhCN/changePosition.md
Normal file
@ -0,0 +1,25 @@
|
||||
# 改变位置
|
||||
例如：right 40px & bottom 160px。
|
||||
```html
|
||||
<n-back-top
|
||||
:right="40"
|
||||
:bottom="160"
|
||||
:style="{
|
||||
transition: 'all .3s cubic-bezier(.4, 0, .2, 1)'
|
||||
}"
|
||||
:themed-style="{
|
||||
light: {
|
||||
color: 'rgb(0, 0, 0)',
|
||||
backgroundColor: 'rgba(0, 0, 0, .3)'
|
||||
},
|
||||
dark: {
|
||||
color: 'rgb(255, 255, 255)',
|
||||
backgroundColor: 'rgba(255, 255, 255, .3)'
|
||||
}
|
||||
}"
|
||||
>
|
||||
<div style="width: 200px; height: 40px; line-height: 40px; text-align: center; font-size: 14px;">
|
||||
改变位置
|
||||
</div>
|
||||
</n-back-top>
|
||||
```
|
||||
@ -0,0 +1,27 @@
|
||||
# 回到顶部 Back Top
|
||||
<!--single-column-->
|
||||
它可以帮你回到你曾经到过的地方。不过时间是回不去了。
|
||||
## 演示
|
||||
向下滚动页面查看效果。
|
||||
|
||||
```demo
|
||||
basic
|
||||
visibilityHeight
|
||||
changePosition
|
||||
targetContainerSelector
|
||||
```
|
||||
|
||||
## Props
|
||||
|名称|类型|默认值|介绍|
|
||||
|-|-|-|-|
|
||||
|target|`() => HTMLElement`|一个返回最邻近可滚动父级元素的函数||
|
||||
|right|`number`|`40`||
|
||||
|bottom|`number`|`40`||
|
||||
|visibility-height|`number`|`180`||
|
||||
|themed-style|`object`|`null`||
|
||||
|
||||
## Events
|
||||
|名称|参数|介绍|
|
||||
|-|-|-|
|
||||
|show|`()`||
|
||||
|hide|`()`||
|
||||
@ -0,0 +1,44 @@
|
||||
# 监听目标
|
||||
你可以设定监听哪个元素来触发 Back Top。
|
||||
```html
|
||||
<n-back-top
|
||||
:target="target"
|
||||
:bottom="220"
|
||||
:visibility-height="10"
|
||||
:style="{
|
||||
transition: 'all .3s cubic-bezier(.4, 0, .2, 1)'
|
||||
}"
|
||||
:themed-style="{
|
||||
light: {
|
||||
color: 'rgb(0, 0, 0)',
|
||||
backgroundColor: 'rgba(0, 0, 0, .3)'
|
||||
},
|
||||
dark: {
|
||||
color: 'rgb(255, 255, 255)',
|
||||
backgroundColor: 'rgba(255, 255, 255, .3)'
|
||||
}
|
||||
}"
|
||||
>
|
||||
<div style="width: 200px; height: 40px; line-height: 40px; text-align: center; font-size: 14px;">
|
||||
指定目标
|
||||
</div>
|
||||
</n-back-top>
|
||||
<div ref="scrollContainer" style="overflow: auto; height: 72px; line-height: 1.5;">
|
||||
A funny joke is need to be wrote here.<br/>
|
||||
A funny joke is need to be wrote here.<br/>
|
||||
A funny joke is need to be wrote here.<br/>
|
||||
A funny joke is need to be wrote here.<br/>
|
||||
A funny joke is need to be wrote here.<br/>
|
||||
A funny joke is need to be wrote here.<br/>
|
||||
A funny joke is need to be wrote here.<br/>
|
||||
</div>
|
||||
```
|
||||
```js
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
target: () => this.$refs.scrollContainer
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,25 @@
|
||||
# 可视高度
|
||||
可以改变 Back Top 的可视高度。
|
||||
```html
|
||||
<n-back-top
|
||||
:bottom="100"
|
||||
:visibility-height="300"
|
||||
:style="{
|
||||
transition: 'all .3s cubic-bezier(.4, 0, .2, 1)'
|
||||
}"
|
||||
:themed-style="{
|
||||
light: {
|
||||
color: 'rgb(0, 0, 0)',
|
||||
backgroundColor: 'rgba(0, 0, 0, .3)'
|
||||
},
|
||||
dark: {
|
||||
color: 'rgb(255, 255, 255)',
|
||||
backgroundColor: 'rgba(255, 255, 255, .3)'
|
||||
}
|
||||
}"
|
||||
>
|
||||
<div style="width: 200px; height: 40px; line-height: 40px; text-align: center; font-size: 14px;">
|
||||
可视高度：300px
|
||||
</div>
|
||||
</n-back-top>
|
||||
```
|
||||
@ -1,4 +1,4 @@
|
||||
# Custom content
|
||||
# Custom Content
|
||||
Insert some custom content in it.
|
||||
```html
|
||||
<n-badge value="new">
|
||||
|
||||
52
demo/documentation/components/badge/zhCN/basic.md
Normal file
52
demo/documentation/components/badge/zhCN/basic.md
Normal file
@ -0,0 +1,52 @@
|
||||
# 基础用法
|
||||
```html
|
||||
<n-badge :value="value" :max="15">
|
||||
<div class="block" />
|
||||
</n-badge>
|
||||
<n-badge :value="value" dot>
|
||||
<div class="block" />
|
||||
</n-badge>
|
||||
<n-button-group>
|
||||
<n-button @click="value = Math.min(16, value + 1)">
|
||||
<template v-slot:icon>
|
||||
<n-icon><md-add /></n-icon>
|
||||
</template>
|
||||
</n-button>
|
||||
<n-button @click="value = Math.max(0, value - 1)">
|
||||
<template v-slot:icon>
|
||||
<n-icon><md-remove /></n-icon>
|
||||
</template>
|
||||
</n-button>
|
||||
</n-button-group>
|
||||
```
|
||||
```js
|
||||
import mdAdd from 'naive-ui/lib/icons/md-add'
|
||||
import mdRemove from 'naive-ui/lib/icons/md-remove'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
mdAdd,
|
||||
mdRemove
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
value: 5
|
||||
};
|
||||
}
|
||||
};
|
||||
```
|
||||
```css
|
||||
.n-badge {
|
||||
margin: 0 32px 8px 0;
|
||||
}
|
||||
.block {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
background-color: #dddddd;
|
||||
border-radius: 4px;
|
||||
transition: background-color .3s cubic-bezier(.4, 0, .2, 1);
|
||||
}
|
||||
.n-dark-theme .block {
|
||||
background-color: rgba(255, 255, 255, .15);
|
||||
}
|
||||
```
|
||||
25
demo/documentation/components/badge/zhCN/customContent.md
Normal file
25
demo/documentation/components/badge/zhCN/customContent.md
Normal file
@ -0,0 +1,25 @@
|
||||
# 自定义内容
|
||||
在里面插入一些自定义内容。
|
||||
```html
|
||||
<n-badge value="新">
|
||||
<div class="block" />
|
||||
</n-badge>
|
||||
<n-badge value="火">
|
||||
<div class="block" />
|
||||
</n-badge>
|
||||
```
|
||||
```css
|
||||
.n-badge {
|
||||
margin: 0 32px 8px 0;
|
||||
}
|
||||
.block {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
background-color: #dddddd;
|
||||
border-radius: 4px;
|
||||
transition: background-color .3s cubic-bezier(.4, 0, .2, 1);
|
||||
}
|
||||
.n-dark-theme .block {
|
||||
background-color: rgba(255, 255, 255, .15);
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,28 @@
|
||||
# 标记 Badge
|
||||
我敢说你肯定见过这玩意而且知道怎么用它。
|
||||
## 演示
|
||||
```demo
|
||||
basic
|
||||
type
|
||||
processing
|
||||
show-zero
|
||||
overflow
|
||||
manual
|
||||
custom-content
|
||||
raw
|
||||
```
|
||||
## Props
|
||||
|名称|类型|默认值|介绍|
|
||||
|-|-|-|-|
|
||||
|value|`string \| number`|`null`||
|
||||
|max|`number`|`null`||
|
||||
|dot|`boolean`|`false`||
|
||||
|type|`'default' \| 'success' \| 'error' \| 'warning' \| 'info'`|`'default'`||
|
||||
|show|`boolean`|`true`||
|
||||
|show-zero|`boolean`|`false`||
|
||||
|processing|`boolean`|`false`||
|
||||
|
||||
## Slots
|
||||
|名称|参数|介绍|
|
||||
|-|-|-|
|
||||
|default|`()`||
|
||||
63
demo/documentation/components/badge/zhCN/manual.md
Normal file
63
demo/documentation/components/badge/zhCN/manual.md
Normal file
@ -0,0 +1,63 @@
|
||||
# 受控显示
|
||||
```html
|
||||
<div class="demo">
|
||||
<n-badge :value="value" :max="15" :show="show">
|
||||
<div class="block" />
|
||||
</n-badge>
|
||||
<n-badge :value="value" dot :show="show">
|
||||
<div class="block" />
|
||||
</n-badge>
|
||||
<n-button-group>
|
||||
<n-button @click="value = Math.min(16, value + 1)">
|
||||
<template v-slot:icon>
|
||||
<n-icon><md-add /></n-icon>
|
||||
</template>
|
||||
</n-button>
|
||||
<n-button @click="value = Math.max(0, value - 1)" >
|
||||
<template v-slot:icon>
|
||||
<n-icon><md-remove /></n-icon>
|
||||
</template>
|
||||
</n-button>
|
||||
</n-button-group>
|
||||
<n-switch v-model="show"/>
|
||||
</div>
|
||||
```
|
||||
```js
|
||||
import mdAdd from 'naive-ui/lib/icons/md-add'
|
||||
import mdRemove from 'naive-ui/lib/icons/md-remove'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
mdAdd,
|
||||
mdRemove
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
value: 5,
|
||||
show: true
|
||||
};
|
||||
}
|
||||
};
|
||||
```
|
||||
```css
|
||||
.n-badge {
|
||||
margin: 0 32px 0px 0;
|
||||
}
|
||||
.demo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.n-button-group {
|
||||
margin: 0 12px 0 0;
|
||||
}
|
||||
.block {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
background-color: #dddddd;
|
||||
border-radius: 4px;
|
||||
transition: background-color .3s cubic-bezier(.4, 0, .2, 1);
|
||||
}
|
||||
.n-dark-theme .block {
|
||||
background-color: rgba(255, 255, 255, .15);
|
||||
}
|
||||
```
|
||||
59
demo/documentation/components/badge/zhCN/overflow.md
Normal file
59
demo/documentation/components/badge/zhCN/overflow.md
Normal file
@ -0,0 +1,59 @@
|
||||
# 溢出
|
||||
设定 `max` 来处理溢出情况。
|
||||
```html
|
||||
<n-badge :value="value" show-zero>
|
||||
<div class="block" />
|
||||
</n-badge>
|
||||
<n-badge :value="value" :max="99">
|
||||
<div class="block" />
|
||||
</n-badge>
|
||||
<n-badge :value="value" show-zero :max="100">
|
||||
<div class="block" />
|
||||
</n-badge>
|
||||
<n-badge :value="value" show-zero :max="10">
|
||||
<div class="block" />
|
||||
</n-badge>
|
||||
<n-button-group>
|
||||
<n-button @click="value = Math.min(16, value + 1)">
|
||||
<template v-slot:icon>
|
||||
<n-icon><md-add /></n-icon>
|
||||
</template>
|
||||
</n-button>
|
||||
<n-button @click="value = Math.max(0, value - 1)" >
|
||||
<template v-slot:icon>
|
||||
<n-icon><md-remove /></n-icon>
|
||||
</template>
|
||||
</n-button>
|
||||
</n-button-group>
|
||||
```
|
||||
```js
|
||||
import mdAdd from 'naive-ui/lib/icons/md-add'
|
||||
import mdRemove from 'naive-ui/lib/icons/md-remove'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
mdAdd,
|
||||
mdRemove
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
value: 101
|
||||
};
|
||||
}
|
||||
};
|
||||
```
|
||||
```css
|
||||
.n-badge {
|
||||
margin: 0 32px 8px 0;
|
||||
}
|
||||
.block {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
background-color: #dddddd;
|
||||
border-radius: 4px;
|
||||
transition: background-color .3s cubic-bezier(.4, 0, .2, 1);
|
||||
}
|
||||
.n-dark-theme .block {
|
||||
background-color: rgba(255, 255, 255, .15);
|
||||
}
|
||||
```
|
||||
28
demo/documentation/components/badge/zhCN/processing.md
Normal file
28
demo/documentation/components/badge/zhCN/processing.md
Normal file
@ -0,0 +1,28 @@
|
||||
# 处理中
|
||||
设定 `processing` 来表明正在处理。
|
||||
```html
|
||||
<n-badge dot processing>
|
||||
<div class="block" />
|
||||
</n-badge>
|
||||
<n-badge :value="20" processing>
|
||||
<div class="block" />
|
||||
</n-badge>
|
||||
<n-badge dot type="info" processing>
|
||||
<div class="block" />
|
||||
</n-badge>
|
||||
```
|
||||
```css
|
||||
.n-badge {
|
||||
margin: 0 32px 8px 0;
|
||||
}
|
||||
.block {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
background-color: #dddddd;
|
||||
border-radius: 4px;
|
||||
transition: background-color .3s cubic-bezier(.4, 0, .2, 1);
|
||||
}
|
||||
.n-dark-theme .block {
|
||||
background-color: rgba(255, 255, 255, .15);
|
||||
}
|
||||
```
|
||||
48
demo/documentation/components/badge/zhCN/raw.md
Normal file
48
demo/documentation/components/badge/zhCN/raw.md
Normal file
@ -0,0 +1,48 @@
|
||||
# 直接使用
|
||||
```html
|
||||
<n-badge :value="value" :max="15" />
|
||||
<n-badge :value="value" dot/>
|
||||
<n-button-group>
|
||||
<n-button @click="value = Math.min(16, value + 1)">
|
||||
<template v-slot:icon>
|
||||
<n-icon><md-add /></n-icon>
|
||||
</template>
|
||||
</n-button>
|
||||
<n-button @click="value = Math.max(0, value - 1)">
|
||||
<template v-slot:icon>
|
||||
<n-icon><md-remove /></n-icon>
|
||||
</template>
|
||||
</n-button>
|
||||
</n-button-group>
|
||||
```
|
||||
```js
|
||||
import mdAdd from 'naive-ui/lib/icons/md-add'
|
||||
import mdRemove from 'naive-ui/lib/icons/md-remove'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
mdAdd,
|
||||
mdRemove
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
value: 5
|
||||
};
|
||||
}
|
||||
};
|
||||
```
|
||||
```css
|
||||
.n-badge {
|
||||
margin: 0 32px 0 0;
|
||||
}
|
||||
.block {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
background-color: #dddddd;
|
||||
border-radius: 4px;
|
||||
transition: background-color .3s cubic-bezier(.4, 0, .2, 1);
|
||||
}
|
||||
.n-dark-theme .block {
|
||||
background-color: rgba(255, 255, 255, .15);
|
||||
}
|
||||
```
|
||||
53
demo/documentation/components/badge/zhCN/showZero.md
Normal file
53
demo/documentation/components/badge/zhCN/showZero.md
Normal file
@ -0,0 +1,53 @@
|
||||
# 显示 0
|
||||
设定 `show-zero` 来显示 0。
|
||||
```html
|
||||
<n-badge :value="value">
|
||||
<div class="block" />
|
||||
</n-badge>
|
||||
<n-badge :value="value" show-zero>
|
||||
<div class="block" />
|
||||
</n-badge>
|
||||
<n-button-group>
|
||||
<n-button @click="value = Math.min(16, value + 1)">
|
||||
<template v-slot:icon>
|
||||
<n-icon><md-add /></n-icon>
|
||||
</template>
|
||||
</n-button>
|
||||
<n-button @click="value = Math.max(0, value - 1)">
|
||||
<template v-slot:icon>
|
||||
<n-icon><md-remove /></n-icon>
|
||||
</template>
|
||||
</n-button>
|
||||
</n-button-group>
|
||||
```
|
||||
```js
|
||||
import mdAdd from 'naive-ui/lib/icons/md-add'
|
||||
import mdRemove from 'naive-ui/lib/icons/md-remove'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
mdAdd,
|
||||
mdRemove
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
value: 0
|
||||
};
|
||||
}
|
||||
};
|
||||
```
|
||||
```css
|
||||
.n-badge {
|
||||
margin: 0 32px 8px 0;
|
||||
}
|
||||
.block {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
background-color: #dddddd;
|
||||
border-radius: 4px;
|
||||
transition: background-color .3s cubic-bezier(.4, 0, .2, 1);
|
||||
}
|
||||
.n-dark-theme .block {
|
||||
background-color: rgba(255, 255, 255, .15);
|
||||
}
|
||||
```
|
||||
43
demo/documentation/components/badge/zhCN/type.md
Normal file
43
demo/documentation/components/badge/zhCN/type.md
Normal file
@ -0,0 +1,43 @@
|
||||
# 类型
|
||||
标记有 `default`、`error`、`info`、`success`、`warning` 类型。
|
||||
```html
|
||||
<n-badge dot>
|
||||
<div class="block" />
|
||||
</n-badge>
|
||||
<n-badge dot type="error">
|
||||
<div class="block" />
|
||||
</n-badge>
|
||||
<n-badge dot type="info">
|
||||
<div class="block" />
|
||||
</n-badge>
|
||||
<n-badge dot type="success">
|
||||
<div class="block" />
|
||||
</n-badge>
|
||||
<n-badge dot type="warning">
|
||||
<div class="block" />
|
||||
</n-badge>
|
||||
```
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value: 10
|
||||
};
|
||||
}
|
||||
};
|
||||
```
|
||||
```css
|
||||
.n-badge {
|
||||
margin: 0 32px 8px 0;
|
||||
}
|
||||
.block {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
background-color: #dddddd;
|
||||
border-radius: 4px;
|
||||
transition: background-color .3s cubic-bezier(.4, 0, .2, 1);
|
||||
}
|
||||
.n-dark-theme .block {
|
||||
background-color: rgba(255, 255, 255, .15);
|
||||
}
|
||||
```
|
||||
@ -1,6 +1,6 @@
|
||||
# 面包屑 Breadcrumb
|
||||
这东西长得和它名字不怎么像。
|
||||
## 例子
|
||||
## 演示
|
||||
```demo
|
||||
basic
|
||||
```
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
# Debug
|
||||
# Pretend You Didn't See It
|
||||
List all buttons here for debug usage.
|
||||
```html
|
||||
<n-config-consumer transparent>
|
||||
|
||||
@ -18,7 +18,7 @@ Button can be disabled.
|
||||
round
|
||||
type="primary"
|
||||
>
|
||||
regular size
|
||||
Disabled
|
||||
</n-button>
|
||||
<n-button
|
||||
disabled
|
||||
|
||||
@ -14,7 +14,7 @@ group
|
||||
debug
|
||||
```
|
||||
## Props
|
||||
### Button
|
||||
### Button Props
|
||||
|Name|Type|Default|Description|
|
||||
|-|-|-|-|
|
||||
|size|`'small' \| 'medium' \| 'large'`|`'medium'`
|
||||
@ -27,25 +27,25 @@ debug
|
||||
|loading|`boolean`|`false`||
|
||||
|icon-placement|`'left' \| 'right'`|`'left'`||
|
||||
|
||||
### Button Group
|
||||
### Button Group Props
|
||||
|Name|Type|Default|Description|
|
||||
|-|-|-|-|
|
||||
|vertical|`boolean`|`false`||
|
||||
|
||||
## Slots
|
||||
### Button
|
||||
### Button Slots
|
||||
|Name|Parameters|Description|
|
||||
|-|-|-|
|
||||
|default|`()`||
|
||||
|icon|`()`||
|
||||
|
||||
### Button Group
|
||||
### Button Group Slots
|
||||
|Name|Parameters|Description|
|
||||
|-|-|-|
|
||||
|default|`()`||
|
||||
|
||||
## Events
|
||||
### Button
|
||||
### Button Events
|
||||
|Name|Parameters|Description|
|
||||
|-|-|-|
|
||||
|click|`(e: MouseEvent)`||
|
||||
@ -1,5 +1,5 @@
|
||||
# Debug
|
||||
列出所有的按钮用来 debug。
|
||||
# 装作你没看见
|
||||
Debug 用的。
|
||||
```html
|
||||
<div class="debug-zone"
|
||||
n-light-theme-background-color-hint="#ececec"
|
||||
|
||||
@ -5,29 +5,42 @@
|
||||
size="small"
|
||||
disabled
|
||||
>
|
||||
Disabled
|
||||
不许点
|
||||
</n-button>
|
||||
<n-button
|
||||
disabled
|
||||
type="primary"
|
||||
>
|
||||
Disabled
|
||||
不许点
|
||||
</n-button>
|
||||
<n-button
|
||||
disabled
|
||||
round
|
||||
type="primary"
|
||||
>
|
||||
regular size
|
||||
不许点
|
||||
</n-button>
|
||||
<n-button
|
||||
disabled
|
||||
circle
|
||||
icon="md-save"
|
||||
/>
|
||||
>
|
||||
<template v-slot:icon>
|
||||
<md-save />
|
||||
</template>
|
||||
</n-button>
|
||||
```
|
||||
```js
|
||||
import mdSave from 'naive-ui/lib/icons/md-save'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
mdSave
|
||||
}
|
||||
}
|
||||
```
|
||||
```css
|
||||
.n-button {
|
||||
margin: 0 8px 8px 0;
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
处理按钮的事件。
|
||||
```html
|
||||
<n-button @click="handleClick">
|
||||
Click Me
|
||||
点它
|
||||
</n-button>
|
||||
```
|
||||
|
||||
|
||||
@ -5,13 +5,13 @@
|
||||
<template v-slot:icon>
|
||||
<md-save />
|
||||
</template>
|
||||
Save
|
||||
保存
|
||||
</n-button>
|
||||
<n-button icon-placement="right">
|
||||
<template v-slot:icon>
|
||||
<md-save />
|
||||
</template>
|
||||
Save
|
||||
保存
|
||||
</n-button>
|
||||
```
|
||||
```js
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
# 按钮
|
||||
# 按钮 Button
|
||||
按钮用来触发一些操作。
|
||||
## 演示
|
||||
```demo
|
||||
@ -13,7 +13,39 @@ loading
|
||||
group
|
||||
debug
|
||||
```
|
||||
## API
|
||||
|属性|说明|类型|默认值|版本|
|
||||
|-|-|-|-|-|
|
||||
|type|按钮类型|string|`'default'`||
|
||||
## Props
|
||||
### Button Props
|
||||
|名称|类型|默认值|介绍|
|
||||
|-|-|-|-|
|
||||
|size|`'small' \| 'medium' \| 'large'`|`'medium'`
|
||||
|type|`'default' \| 'primary' \| 'success' \| 'info' \| 'warning' \| 'error'`|`'default'`||
|
||||
|text|`boolean`|`false`||
|
||||
|ghost|`boolean`|`false`||
|
||||
|disabled|`boolean`|`false`||
|
||||
|circle|`boolean`|`false`||
|
||||
|round|`boolean`|`false`||
|
||||
|loading|`boolean`|`false`||
|
||||
|icon-placement|`'left' \| 'right'`|`'left'`||
|
||||
|
||||
### Button Group Props
|
||||
|名称|类型|默认值|介绍|
|
||||
|-|-|-|-|
|
||||
|vertical|`boolean`|`false`||
|
||||
|
||||
## Slots
|
||||
### Button Slots
|
||||
|名称|参数|介绍|
|
||||
|-|-|-|
|
||||
|default|`()`||
|
||||
|icon|`()`||
|
||||
|
||||
### Button Group Slots
|
||||
|名称|参数|介绍|
|
||||
|-|-|-|
|
||||
|default|`()`||
|
||||
|
||||
## Events
|
||||
### Button Events
|
||||
|名称|参数|介绍|
|
||||
|-|-|-|
|
||||
|click|`(e: MouseEvent)`||
|
||||
|
||||
@ -8,8 +8,9 @@
|
||||
<template v-slot:icon>
|
||||
<md-save />
|
||||
</template>
|
||||
Loading
|
||||
加载中
|
||||
</n-button>
|
||||
<br>
|
||||
<n-button
|
||||
:loading="loading"
|
||||
icon-placement="right"
|
||||
@ -18,22 +19,25 @@
|
||||
<template v-slot:icon>
|
||||
<md-save />
|
||||
</template>
|
||||
Loading
|
||||
加载中
|
||||
</n-button>
|
||||
<br>
|
||||
<n-button
|
||||
:loading="loading"
|
||||
size="small"
|
||||
@click="loading = !loading"
|
||||
>
|
||||
Loading
|
||||
加载中
|
||||
</n-button>
|
||||
<br>
|
||||
<n-button
|
||||
:loading="loading"
|
||||
size="large"
|
||||
@click="loading = !loading"
|
||||
>
|
||||
Loading
|
||||
加载中
|
||||
</n-button>
|
||||
<br>
|
||||
<n-button
|
||||
:loading="loading"
|
||||
type="primary"
|
||||
@ -41,7 +45,7 @@
|
||||
round
|
||||
@click="loading = !loading"
|
||||
>
|
||||
Loading
|
||||
加载中
|
||||
</n-button>
|
||||
```
|
||||
|
||||
|
||||
@ -1,10 +1,24 @@
|
||||
# 形状
|
||||
按钮拥有不同的形状。
|
||||
Button has different shapes.
|
||||
```html
|
||||
<n-button circle icon="md-save" />
|
||||
<n-button circle>
|
||||
<template v-slot:icon>
|
||||
<md-save />
|
||||
</template>
|
||||
</n-button>
|
||||
<n-button type="primary" round>Primary</n-button>
|
||||
<n-button type="info">Info</n-button>
|
||||
```
|
||||
```js
|
||||
import mdSave from 'naive-ui/lib/icons/md-save'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
mdSave
|
||||
}
|
||||
}
|
||||
```
|
||||
```css
|
||||
.n-button {
|
||||
margin: 0 8px 8px 0;
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
# 基础
|
||||
# 基础用法
|
||||
基础卡片
|
||||
```html
|
||||
<n-card title="卡片">
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
# 可关闭
|
||||
用于 Modal 的时候，你可能需要这个属性。
|
||||
```html
|
||||
<n-card title="卡片" closable @close="handleClose">
|
||||
卡片内容
|
||||
|
||||
@ -1,4 +1,6 @@
|
||||
# 卡片
|
||||
# 卡片 Card
|
||||
一些经验不足的 UI 喜欢它在上面滥用阴影。
|
||||
## 演示
|
||||
```demo
|
||||
basic
|
||||
size
|
||||
@ -8,3 +10,27 @@ border
|
||||
segment
|
||||
closable
|
||||
```
|
||||
## Props
|
||||
|名称|类型|默认值|介绍|
|
||||
|-|-|-|-|
|
||||
|title|`string`|`null`||
|
||||
|content-style|`object \| string`|`null`||
|
||||
|header-style|`object \| string`|`null`||
|
||||
|segmented|`boolean \| object`|`false`||
|
||||
|size|`'small' \| 'medium' \| 'large' \| 'huge'`|`'medium'`||
|
||||
|bordered|`boolean`|`true`||
|
||||
|closable|`boolean`|`false`||
|
||||
|
||||
## Events
|
||||
|名称|参数|介绍|
|
||||
|-|-|-|
|
||||
|close|`()`||
|
||||
|
||||
## Slots
|
||||
|名称|参数|介绍|
|
||||
|-|-|-|
|
||||
|header|`()`||
|
||||
|header-extra|`()`||
|
||||
|default|`()`||
|
||||
|footer|`()`||
|
||||
|action|`()`||
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
# 插槽
|
||||
卡片有很多插槽，希望能帮你少写点代码。
|
||||
```html
|
||||
<n-card title="卡片插槽示例">
|
||||
<template v-slot:header-extra>
|
||||
|
||||
@ -1,4 +1,6 @@
|
||||
# Cascader
|
||||
Cascader can be used to select some tree structured data.
|
||||
## Demos
|
||||
```demo
|
||||
single-leaf-only
|
||||
trigger
|
||||
@ -14,4 +16,31 @@ multiple-leaf-only-lazy
|
||||
single-lazy
|
||||
multiple-lazy
|
||||
filter
|
||||
```
|
||||
```
|
||||
## V-model
|
||||
|Prop|Event|
|
||||
|-|-|
|
||||
|value|change|
|
||||
|
||||
## Props
|
||||
|Name|Type|Default|Description|
|
||||
|-|-|-|-|
|
||||
|options|`Array<CascaderOption>`|`null`||
|
||||
|value|`string \| number`|`null`||
|
||||
|placeholder|`string`|`Please Select`||
|
||||
|multiple|`boolean`|`false`||
|
||||
|size|`'small' \| 'medium' \| 'large'`|`'medium'`||
|
||||
|filterable|`boolean`|`false`|Can't be `true` with `remote` prop at same time.|
|
||||
|disabled|`boolean`|`false`||
|
||||
|expand-trigger|`'click' \| 'hover'`|`'click'`||
|
||||
|leaf-only|`boolean`|`true`||
|
||||
|clearable|`boolean`|`false`||
|
||||
|remote|`boolean`|`false`||
|
||||
|on-load|`(option: CascaderOption, resolve: (children: Array<CascaderOption>) => void) => any`|`() => {}`|Callback when click at unloaded nodes. Pass resolved children to `resolve` function to set children of the node.|
|
||||
|splitor|`string`|`'/'`||
|
||||
|filter|`(pattern: string, option: CascaderOption, path: Array<CascaderOption>) => boolean`|A string based filter.||
|
||||
|
||||
## Events
|
||||
|Name|Parameters|Description|
|
||||
|-|-|-|
|
||||
|change|`(value: string \| number \| Array<string \| number>)`
|
||||
@ -1,4 +1,4 @@
|
||||
# Lazy Multiple
|
||||
# Async Multiple
|
||||
```html
|
||||
<n-cascader
|
||||
v-model="value"
|
||||
@ -6,7 +6,7 @@
|
||||
:leaf-only="false"
|
||||
placeholder="Please Select Something"
|
||||
:options="options"
|
||||
lazy
|
||||
remote
|
||||
:on-load="handleLoad"
|
||||
/>
|
||||
```
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
# Lazy Multiple (Leaf Only)
|
||||
# Async Multiple (Leaf Only)
|
||||
```html
|
||||
<n-cascader
|
||||
v-model="value"
|
||||
@ -6,7 +6,7 @@
|
||||
placeholder="Please Select Something"
|
||||
:options="options"
|
||||
style="flex-grow: 1; margin-right: 12px;"
|
||||
lazy
|
||||
remote
|
||||
:on-load="handleLoad"
|
||||
/>
|
||||
```
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
# Lazy Single
|
||||
# Async Single
|
||||
```html
|
||||
<n-cascader
|
||||
v-model="value"
|
||||
placeholder="Please Select Something"
|
||||
:options="options"
|
||||
:leaf-only="false"
|
||||
lazy
|
||||
remote
|
||||
:on-load="handleLoad"
|
||||
/>
|
||||
```
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
# Lazy Single (Leaf Only)
|
||||
# Async Single (Leaf Only)
|
||||
```html
|
||||
<n-cascader
|
||||
v-model="value"
|
||||
placeholder="Please Select Something"
|
||||
lazy
|
||||
remote
|
||||
:on-load="handleLoad"
|
||||
/>
|
||||
```
|
||||
|
||||
@ -1,4 +1,6 @@
|
||||
# 级联选择
|
||||
# 级联选择 Cascader
|
||||
用来选一些树型信息。
|
||||
## 演示
|
||||
```demo
|
||||
single-leaf-only
|
||||
trigger
|
||||
@ -15,3 +17,31 @@ single-lazy
|
||||
multiple-lazy
|
||||
filter
|
||||
```
|
||||
|
||||
## V-model
|
||||
|Prop|Event|
|
||||
|-|-|
|
||||
|value|change|
|
||||
|
||||
## Props
|
||||
|名称|类型|默认值|介绍|
|
||||
|-|-|-|-|
|
||||
|options|`Array<CascaderOption>`|`null`||
|
||||
|value|`string \| number`|`null`||
|
||||
|placeholder|`string`|`Please Select`||
|
||||
|multiple|`boolean`|`false`||
|
||||
|size|`'small' \| 'medium' \| 'large'`|`'medium'`||
|
||||
|filterable|`boolean`|`false`|不能在和 `remote` prop 同时为 `true`|
|
||||
|disabled|`boolean`|`false`||
|
||||
|expand-trigger|`'click' \| 'hover'`|`'click'`||
|
||||
|leaf-only|`boolean`|`true`||
|
||||
|clearable|`boolean`|`false`||
|
||||
|remote|`boolean`|`false`||
|
||||
|on-load|`(option: CascaderOption, resolve: (children: Array<CascaderOption>) => void) => any`|`() => {}`|在点击未加载完成节点时的回调。把获得的子节点传入 `resolve` 函数来设定这个节点的子节点。|
|
||||
|splitor|`string`|`'/'`||
|
||||
|filter|`(pattern: string, option: CascaderOption, path: Array<CascaderOption>) => boolean`|一个基于字符串的过滤算法||
|
||||
|
||||
## Events
|
||||
|名称|参数|介绍|
|
||||
|-|-|-|
|
||||
|change|`(value: string \| number \| Array<string \| number>)`
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
# 延迟多项
|
||||
# 异步多项
|
||||
```html
|
||||
<n-cascader
|
||||
v-model="value"
|
||||
@ -6,7 +6,7 @@
|
||||
:leaf-only="false"
|
||||
placeholder="请选些什么"
|
||||
:options="options"
|
||||
lazy
|
||||
remote
|
||||
:on-load="handleLoad"
|
||||
/>
|
||||
```
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
# 延迟多项（仅叶子节点）
|
||||
# 异步多项（仅叶子节点）
|
||||
```html
|
||||
<n-cascader
|
||||
v-model="value"
|
||||
@ -6,7 +6,7 @@
|
||||
placeholder="请选些什么"
|
||||
:options="options"
|
||||
style="flex-grow: 1; margin-right: 12px;"
|
||||
lazy
|
||||
remote
|
||||
:on-load="handleLoad"
|
||||
/>
|
||||
```
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
# 延迟单项
|
||||
# 异步单项
|
||||
```html
|
||||
<n-cascader
|
||||
v-model="value"
|
||||
placeholder="请选些什么"
|
||||
:options="options"
|
||||
:leaf-only="false"
|
||||
lazy
|
||||
remote
|
||||
:on-load="handleLoad"
|
||||
/>
|
||||
```
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
# 延迟单项（仅叶子节点）
|
||||
# 异步单项（仅叶子节点）
|
||||
```html
|
||||
<n-cascader
|
||||
v-model="value"
|
||||
placeholder="请选些什么"
|
||||
lazy
|
||||
remote
|
||||
:on-load="handleLoad"
|
||||
/>
|
||||
```
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
# 触发
|
||||
# 触发方式
|
||||
可以是 `hover` 或者 `click`。
|
||||
```html
|
||||
<n-cascader
|
||||
v-model="value"
|
||||
|
||||
@ -10,48 +10,48 @@ controlled
|
||||
event
|
||||
```
|
||||
## V-model
|
||||
### Checkbox
|
||||
### Checkbox V-model
|
||||
|Prop|Event|
|
||||
|-|-|
|
||||
|change|checked|
|
||||
|
||||
### Checkbox Group
|
||||
### Checkbox Group V-model
|
||||
|Prop|Event|
|
||||
|-|-|
|
||||
|change|value|
|
||||
|
||||
## Props
|
||||
### Checkbox
|
||||
### Checkbox Props
|
||||
|Name|Type|Default|Description|
|
||||
|-|-|-|-|
|
||||
|value|`string \| number`|`null`||
|
||||
|checked|`boolean`|`false`||
|
||||
|disabled|`boolean`|`false`||
|
||||
|
||||
### Checkbox Group
|
||||
### Checkbox Group Props
|
||||
|Name|Type|Default|Description|
|
||||
|-|-|-|-|
|
||||
|value|`Array`|`null`||
|
||||
|value|`Array<string \| number>`|`null`||
|
||||
|disabled|`boolean`|`false`||
|
||||
|
||||
## Slots
|
||||
### Checkbox
|
||||
### Checkbox Slots
|
||||
|Name|Parameters|Description|
|
||||
|-|-|-|
|
||||
|default|`()`||
|
||||
|
||||
### Checkbox Group
|
||||
### Checkbox Group Slots
|
||||
|Name|Parameters|Description|
|
||||
|-|-|-|
|
||||
|default|`()`||
|
||||
|
||||
## Events
|
||||
### Checkbox
|
||||
### Checkbox Events
|
||||
|Name|Parameters|Description|
|
||||
|-|-|-|
|
||||
|change|`(checked: boolean)`||
|
||||
|
||||
### Checkbox Group
|
||||
### Checkbox Group Events
|
||||
|Name|Paramaters|Description|
|
||||
|-|-|-|
|
||||
|change|`(value: string \| number)`||
|
||||
22
demo/documentation/components/checkbox/zhCN/basic.md
Normal file
22
demo/documentation/components/checkbox/zhCN/basic.md
Normal file
@ -0,0 +1,22 @@
|
||||
# 基础用法
|
||||
```html
|
||||
<n-checkbox v-model="value">复选框</n-checkbox>
|
||||
<n-checkbox v-model="value"/>
|
||||
<n-checkbox v-model="value" :disabled="disabled">复选框</n-checkbox>
|
||||
<n-button @click="disabled = !disabled" size="small">禁用</n-button>
|
||||
```
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value: false,
|
||||
disabled: true
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
```css
|
||||
.n-checkbox, .n-button {
|
||||
margin: 0 12px 8px 0;
|
||||
}
|
||||
```
|
||||
19
demo/documentation/components/checkbox/zhCN/controlled.md
Normal file
19
demo/documentation/components/checkbox/zhCN/controlled.md
Normal file
@ -0,0 +1,19 @@
|
||||
# 受控状态
|
||||
```html
|
||||
<n-checkbox :checked="value">复选框</n-checkbox>
|
||||
<n-switch v-model="value"/>
|
||||
```
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value: false
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
```css
|
||||
.n-checkbox {
|
||||
margin: 0 12px 8px 0;
|
||||
}
|
||||
```
|
||||
30
demo/documentation/components/checkbox/zhCN/event.md
Normal file
30
demo/documentation/components/checkbox/zhCN/event.md
Normal file
@ -0,0 +1,30 @@
|
||||
# 事件
|
||||
```html
|
||||
<n-checkbox v-model="value" @change="handleChange">事件</n-checkbox>
|
||||
<n-checkbox-group v-model="cities" @change="handleChange">
|
||||
<n-checkbox value="Beijing">北京</n-checkbox>
|
||||
<n-checkbox value="Shanghai">上海</n-checkbox>
|
||||
<n-checkbox value="Guangzhou">广州</n-checkbox>
|
||||
<n-checkbox value="Shenzen">深圳</n-checkbox>
|
||||
</n-checkbox-group>
|
||||
```
|
||||
```js
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
value: false,
|
||||
cities: null
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleChange (v) {
|
||||
this.$NMessage.info(JSON.stringify(v))
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
```css
|
||||
.n-checkbox, .n-button {
|
||||
margin: 0 12px 8px 0;
|
||||
}
|
||||
```
|
||||
68
demo/documentation/components/checkbox/zhCN/grid.md
Normal file
68
demo/documentation/components/checkbox/zhCN/grid.md
Normal file
@ -0,0 +1,68 @@
|
||||
# 栅格
|
||||
和栅格一起使用。
|
||||
```html
|
||||
<n-checkbox-group v-model="value">
|
||||
<n-row>
|
||||
<n-col :span="12">
|
||||
<n-checkbox value="Prosperity">富强</n-checkbox>
|
||||
</n-col>
|
||||
<n-col :span="12">
|
||||
<n-checkbox value="Democracy">民主</n-checkbox>
|
||||
</n-col>
|
||||
</n-row>
|
||||
<n-row>
|
||||
<n-col :span="12">
|
||||
<n-checkbox value="Civility">文明</n-checkbox>
|
||||
</n-col>
|
||||
<n-col :span="12">
|
||||
<n-checkbox value="Harmony">和谐</n-checkbox>
|
||||
</n-col>
|
||||
</n-row>
|
||||
<n-row>
|
||||
<n-col :span="12">
|
||||
<n-checkbox value="Freedom">自由</n-checkbox>
|
||||
</n-col>
|
||||
<n-col :span="12">
|
||||
<n-checkbox value="Equality">平等</n-checkbox>
|
||||
</n-col>
|
||||
</n-row>
|
||||
<n-row>
|
||||
<n-col :span="12">
|
||||
<n-checkbox value="Justice">公正</n-checkbox>
|
||||
</n-col>
|
||||
<n-col :span="12">
|
||||
<n-checkbox value="Rule of Law">法制</n-checkbox>
|
||||
</n-col>
|
||||
</n-row>
|
||||
<n-row>
|
||||
<n-col :span="12">
|
||||
<n-checkbox value="Patriotism">爱过</n-checkbox>
|
||||
</n-col>
|
||||
<n-col :span="12">
|
||||
<n-checkbox value="Dedication">敬业</n-checkbox>
|
||||
</n-col>
|
||||
</n-row>
|
||||
<n-row>
|
||||
<n-col :span="12">
|
||||
<n-checkbox value="Integrity">诚信</n-checkbox>
|
||||
</n-col>
|
||||
<n-col :span="12">
|
||||
<n-checkbox value="Friendship">友善</n-checkbox>
|
||||
</n-col>
|
||||
</n-row>
|
||||
</n-checkbox-group>
|
||||
```
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value: null
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
```css
|
||||
.n-checkbox, .n-button {
|
||||
margin: 0 12px 8px 0;
|
||||
}
|
||||
```
|
||||
23
demo/documentation/components/checkbox/zhCN/group.md
Normal file
23
demo/documentation/components/checkbox/zhCN/group.md
Normal file
@ -0,0 +1,23 @@
|
||||
# 选项组
|
||||
```html
|
||||
<n-checkbox-group v-model="cities">
|
||||
<n-checkbox value="Beijing">北京</n-checkbox>
|
||||
<n-checkbox value="Shanghai">上海</n-checkbox>
|
||||
<n-checkbox value="Guangzhou">广州</n-checkbox>
|
||||
<n-checkbox value="Shenzen">深圳</n-checkbox>
|
||||
</n-checkbox-group>
|
||||
```
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
cities: null
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
```css
|
||||
.n-checkbox {
|
||||
margin-right: 12px;
|
||||
}
|
||||
```
|
||||
23
demo/documentation/components/checkbox/zhCN/indeterminate.md
Normal file
23
demo/documentation/components/checkbox/zhCN/indeterminate.md
Normal file
@ -0,0 +1,23 @@
|
||||
# 部分选中
|
||||
```html
|
||||
<n-checkbox v-model="value" :indeterminate="indeterminate">复选框</n-checkbox>
|
||||
<n-checkbox v-model="value" :indeterminate="indeterminate"/>
|
||||
<n-checkbox v-model="value" :indeterminate="indeterminate" disabled/>
|
||||
<n-button @click="value = !value" size="small">选中</n-button>
|
||||
<n-button @click="indeterminate = !indeterminate" size="small">部分选中</n-button>
|
||||
```
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value: false,
|
||||
indeterminate: false
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
```css
|
||||
.n-checkbox, .n-button {
|
||||
margin: 0 12px 8px 0;
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,57 @@
|
||||
# 复选框 Checkbox
|
||||
哟，哟，Check it out。
|
||||
## 演示
|
||||
```demo
|
||||
basic
|
||||
group
|
||||
grid
|
||||
indeterminate
|
||||
controlled
|
||||
event
|
||||
```
|
||||
## V-model
|
||||
### Checkbox V-model
|
||||
|Prop|Event|
|
||||
|-|-|
|
||||
|change|checked|
|
||||
|
||||
### Checkbox Group V-model
|
||||
|Prop|Event|
|
||||
|-|-|
|
||||
|change|value|
|
||||
|
||||
## Props
|
||||
### Checkbox Props
|
||||
|名称|类型|默认值|介绍|
|
||||
|-|-|-|-|
|
||||
|value|`string \| number`|`null`||
|
||||
|checked|`boolean`|`false`||
|
||||
|disabled|`boolean`|`false`||
|
||||
|
||||
### Checkbox Group Props
|
||||
|名称|类型|默认值|介绍|
|
||||
|-|-|-|-|
|
||||
|value|`Array<string \| number>`|`null`||
|
||||
|disabled|`boolean`|`false`||
|
||||
|
||||
## Slots
|
||||
### Checkbox Slots
|
||||
|名称|参数|介绍|
|
||||
|-|-|-|
|
||||
|default|`()`||
|
||||
|
||||
### Checkbox Group Slots
|
||||
|名称|参数|介绍|
|
||||
|-|-|-|
|
||||
|default|`()`||
|
||||
|
||||
## Events
|
||||
### Checkbox Events
|
||||
|名称|参数|介绍|
|
||||
|-|-|-|
|
||||
|change|`(checked: boolean)`||
|
||||
|
||||
### Checkbox Group Events
|
||||
|名称|参数|介绍|
|
||||
|-|-|-|
|
||||
|change|`(value: string \| number)`||
|
||||
@ -1,4 +1,5 @@
|
||||
# Basic
|
||||
For example, javascript, python and cpp.
|
||||
```html
|
||||
<div style="overflow: auto;">
|
||||
<n-code :code="`
|
||||
|
||||
35
demo/documentation/components/code/zhCN/basic.md
Normal file
35
demo/documentation/components/code/zhCN/basic.md
Normal file
@ -0,0 +1,35 @@
|
||||
# 基础用法
|
||||
Javascript、Python、Cpp 的例子。
|
||||
```html
|
||||
<div style="overflow: auto;">
|
||||
<n-code :code="`
|
||||
function sleep (ms = 1000) {
|
||||
return new Promise(res => setTimeout(res, ms))
|
||||
}
|
||||
`" language="javascript" />
|
||||
|
||||
<n-code :code="`
|
||||
def say_hello():
|
||||
print('Hello Naive UI')
|
||||
`" language="python" />
|
||||
|
||||
<n-code :code="cppCode" language="cpp" />
|
||||
</div>
|
||||
```
|
||||
```js
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
cppCode: `int main () {
|
||||
std::cout << "Hello Naive UI";
|
||||
return 0;
|
||||
}`
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
```css
|
||||
.n-code {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,34 @@
|
||||
# 代码 Code
|
||||
|
||||
## 预备条件
|
||||
|
||||
<n-alert title="Note" type="warning">
|
||||
由于尺寸原因，Naive UI 并不把 hightlight.js 内置。如果你需要高亮日志，请确保你在使用之前已经设定了 highlight.js。
|
||||
</n-alert>
|
||||
|
||||
下面的代码展示了如何为 Naive UI 设定 hljs。比较推荐的方式是按需引入，因为它可以极大的减小打包尺寸。
|
||||
|
||||
```js
|
||||
import Vue from 'vue'
|
||||
import NaiveUI from 'naive-ui'
|
||||
import hljs from 'highlight.js/lib/highlight'
|
||||
import cpp from 'highlight.js/lib/languages/cpp'
|
||||
|
||||
hljs.registerLanguage('cpp', cpp)
|
||||
Vue.use(NaiveUI)
|
||||
NaiveUI.setHljs(hljs)
|
||||
```
|
||||
|
||||
## 例子
|
||||
|
||||
```demo
|
||||
basic
|
||||
```
|
||||
|
||||
## Props
|
||||
|名称|类型|默认值|介绍|
|
||||
|-|-|-|-|
|
||||
|language|`string`|`null`||
|
||||
|code|`string`|`null`||
|
||||
|trim|`boolean`|`true`||
|
||||
|hljs|`object`|`null`|If you want to set hljs locally, set it on code by the prop|
|
||||
@ -22,7 +22,18 @@ nested
|
||||
|Name|Type|Default|Description|
|
||||
|-|-|-|-|
|
||||
|title|`string \| number`|`null`||
|
||||
|name|`string \| number`||required|
|
||||
|name|`string \| number`||**required**|
|
||||
|
||||
## Slots
|
||||
### Collapse Slots
|
||||
|Name|Parameters|Description|
|
||||
|-|-|-|
|
||||
|default|`()`||
|
||||
|
||||
### Collapse Item Slots
|
||||
|Name|Parameters|Description|
|
||||
|-|-|-|
|
||||
|default|`()`||
|
||||
|
||||
## Event
|
||||
|Name|Parameters|Description|
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
# 手风琴
|
||||
像一个手风琴
|
||||
```html
|
||||
<n-collapse v-model="activeNames" accordion>
|
||||
<n-collapse-item title="动态类型" name="1">
|
||||
|
||||
@ -1,6 +1,42 @@
|
||||
# 折叠面板
|
||||
# 折叠面板 Collapse
|
||||
我看到它总被用在界面边栏的控制面板上。
|
||||
## 演示
|
||||
```demo
|
||||
basic
|
||||
accordion
|
||||
nested
|
||||
```
|
||||
## V-model
|
||||
|Prop|Event|
|
||||
|-|-|
|
||||
|expand-names|expand-names-change|
|
||||
|
||||
## Props
|
||||
### Collapse Props
|
||||
|名称|类型|默认值|介绍|
|
||||
|-|-|-|-|
|
||||
|expand-names|`Array`|`null`||
|
||||
|accordion|`boolean`|`false`||
|
||||
|
||||
### Collapse Item Props
|
||||
|名称|类型|默认值|介绍|
|
||||
|-|-|-|-|
|
||||
|title|`string \| number`|`null`||
|
||||
|name|`string \| number`||**必需**|
|
||||
|
||||
## Slots
|
||||
### Collapse Slots
|
||||
|名称|参数|介绍|
|
||||
|-|-|-|
|
||||
|default|`()`||
|
||||
|
||||
### Collapse Item Slots
|
||||
|名称|参数|介绍|
|
||||
|-|-|-|
|
||||
|default|`()`||
|
||||
|
||||
|
||||
## Event
|
||||
|名称|参数|介绍|
|
||||
|-|-|-|
|
||||
|expand-names|`(expandNames: Array<string>)`||
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
# 嵌套
|
||||
可以嵌套。
|
||||
```html
|
||||
<n-collapse v-model="activeNames">
|
||||
<n-collapse-item title="绿灯" name="1">
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
# Basic
|
||||
Get current theme and namespace.
|
||||
```html
|
||||
<n-config-consumer
|
||||
@theme-change="handleThemeChange"
|
||||
|
||||
@ -1,13 +1,11 @@
|
||||
# Config Consumer
|
||||
Config Consumer is built for getting config (usually as global config) of Config Provider. It will be helpful when you want to build a component which supports themes or other mutable features.
|
||||
Config Consumer is built for getting config (usually as global config) of Config Provider. It will be helpful when you want to build a component which supports themes or other theme-related mutable features.
|
||||
## Demos
|
||||
```demo
|
||||
basic
|
||||
theme-environment
|
||||
color
|
||||
```
|
||||
## Props
|
||||
|
||||
## Events
|
||||
|Name|Parameters|Description|
|
||||
|-|-|-|
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
# Theme Environment
|
||||
Get current theme environment.
|
||||
```html
|
||||
<n-button @click="theme = 'dark'">Dark Theme</n-button>
|
||||
<n-button @click="theme = 'light'">Light Theme</n-button>
|
||||
@ -6,7 +7,7 @@
|
||||
<n-config-provider :theme="theme" :theme-environment="env">
|
||||
<n-config-consumer>
|
||||
<template v-slot="{ themeEnvironment }">
|
||||
{{ themeEnvironment }}
|
||||
<n-tag>{{ themeEnvironment }}</n-tag>
|
||||
</template>
|
||||
</n-config-consumer>
|
||||
</n-config-provider>
|
||||
@ -18,8 +19,8 @@ export default {
|
||||
return {
|
||||
theme: 'light',
|
||||
env: {
|
||||
dark: 'Dark 666',
|
||||
light: 'Light 666'
|
||||
dark: 'NaCl',
|
||||
light: 'Ionic Compound'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
# 基础
|
||||
获得当前主题和命名空间。
|
||||
```html
|
||||
<n-config-consumer
|
||||
@theme-change="handleThemeChange"
|
||||
|
||||
@ -1,9 +1,11 @@
|
||||
# 样式方案
|
||||
|
||||
Naive UI 有内置的一组样式变量，你可以使用它来完成和 Naive UI 组件风格一致的组件。
|
||||
```html
|
||||
<n-config-consumer>
|
||||
<template v-slot="{ styleScheme }">
|
||||
<n-code :code="JSON.stringify(styleScheme, 0, 2)" language="js"></n-code>
|
||||
</template>
|
||||
</n-config-consumer>
|
||||
<div style="overflow: auto;">
|
||||
<n-config-consumer>
|
||||
<template v-slot="{ styleScheme }">
|
||||
<n-code :code="JSON.stringify(styleScheme, 0, 2)" language="js"></n-code>
|
||||
</template>
|
||||
</n-config-consumer>
|
||||
</div>
|
||||
```
|
||||
|
||||
@ -1,8 +1,19 @@
|
||||
# 配置消费者
|
||||
配置消费者的作用是获取配置提供者的（通常是全局的）配置。当你想创建一个支持主题或其他可变特性的组件时，它十分管用。
|
||||
# 配置消费者 Config Consumer
|
||||
配置消费者的作用是获取配置提供者的（通常是全局的）配置。当你想创建一个支持主题或随主题变更内容的组件时，它十分管用。
|
||||
## 演示
|
||||
```demo
|
||||
basic
|
||||
theme-environment
|
||||
color
|
||||
```
|
||||
## Events
|
||||
|名称|参数|介绍|
|
||||
|-|-|-|
|
||||
|theme-change|`(theme: string)`||
|
||||
|namespace-change|`(namespace: string)`||
|
||||
|language-change|`(language: string)`||
|
||||
|
||||
## Slots
|
||||
|名称|参数|介绍|
|
||||
|-|-|-|
|
||||
|default|`({ theme: string, namespace: string, language: string, themeEnvironment: any, styleScheme: object })`||
|
||||
@ -1,11 +1,12 @@
|
||||
# 主题环境
|
||||
获得当前主题环境值。
|
||||
```html
|
||||
<n-button @click="theme = 'dark'">深色主题</n-button>
|
||||
<n-button @click="theme = 'light'">浅色主题</n-button>
|
||||
<n-config-provider :theme="theme" :theme-environment="env">
|
||||
<n-config-consumer>
|
||||
<template v-slot="{ themeEnvironment }">
|
||||
{{ themeEnvironment }}
|
||||
<n-tag>{{ themeEnvironment }}</n-tag>
|
||||
</template>
|
||||
</n-config-consumer>
|
||||
</n-config-provider>
|
||||
@ -16,10 +17,15 @@ export default {
|
||||
return {
|
||||
theme: 'light',
|
||||
env: {
|
||||
dark: '深色666',
|
||||
light: '浅色666'
|
||||
dark: '氯化钠',
|
||||
light: '离子化合物'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
```css
|
||||
.n-button {
|
||||
margin: 0 8px 12px 0;
|
||||
}
|
||||
```
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
# Inherit Theme
|
||||
If you don't set theme of app, the theme of app is inherited by default.
|
||||
If you don't set theme of config provider, the theme of config provider is inherited by default.
|
||||
```html
|
||||
<n-config-provider>
|
||||
<n-tag>Oops</n-tag>
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user