mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2025-01-18 12:34:25 +08:00
Merge branch 'develop' of ***REMOVED*** into feature/advace-table-header
This commit is contained in:
JiwenBai
commit
d049402567
163
README.md
163
README.md
@ -1,156 +1,9 @@
|
||||
# naive-ui
|
||||
TuSimple Vue-Based Frontend Component Library
|
||||
<p align="center">
|
||||
<img width="144px" src="https://naiveui.oss-cn-hongkong.aliyuncs.com/Naive%20UI%20-%20LOGO.svg" />
|
||||
</p>
|
||||
|
||||
<h1 align="center">Naive UI</h1>
|
||||
<p align="center">A style first Vue-based component library.</p>
|
||||
|
||||
## Documentation
|
||||
[http://***REMOVED***/#/start](http://***REMOVED***/#/start)
|
||||
## Repository
|
||||
[https://***REMOVED***/naive-ui/tree/develop](https://***REMOVED***/naive-ui/tree/develop)
|
||||
## Develop Guidelines
|
||||
### Git Commit Message Style
|
||||
You **MUST** follow [Angular Commit Format](https://gist.github.com/brianclements/841ea7bffdb01346392c).
|
||||
|
||||
If you want see some example, see [Angular Commits on Github](https://github.com/angular/angular/commits/master).
|
||||
### Code Styles
|
||||
#### Javascript Style
|
||||
You **MUST** follow [Standard JS](https://standardjs.com/).
|
||||
#### SCSS Style
|
||||
Run `npm run lint-style` to check styles.
|
||||
#### Check Both
|
||||
Run `npm run lint`
|
||||
You **MUST** fix all lint warnings and errors before you push your branch.
|
||||
### Unit test
|
||||
If you create a component, you **MUST** add unit test for it.
|
||||
|
||||
Run `npm run test` to test all components.
|
||||
Run `npm run test-cov` to test all components and see detailed test coverage report.
|
||||
|
||||
## Want to see how component works
|
||||
1. Run `npm run dev`
|
||||
2. Open `http://localhost:8086/` in browser.
|
||||
|
||||
## Want to add your own component
|
||||
There is no guideline for now. If you want to know how to do it, you can explore by yourself or ask `lecong.zhang@tusimple.ai`.
|
||||
|
||||
## Publish a new version
|
||||
1. You **MUST** change your version according to [semver](https://semver.org/)
|
||||
2. `npm run release`
|
||||
3. You **MAY** publish documentation by running `npm run release-doc`
|
||||
|
||||
## Installation & Usage
|
||||
First install it.
|
||||
|
||||
```bash
|
||||
npm install --save-dev naive-ui
|
||||
```
|
||||
Then add the following lines in you entry point js file.
|
||||
```js
|
||||
import naiveUi from 'naive-ui'
|
||||
import 'naive-ui/dist/lib/index.css'
|
||||
|
||||
Vue.use(naiveUi)
|
||||
```
|
||||
## Component Develop Status
|
||||
|Component|Develop status|Unit Test|Note|
|
||||
|--|:--:|:--:|--|
|
||||
|Alert|😍|❌||
|
||||
|Button|😍|🆗||
|
||||
|Checkbox|😍|🆗||
|
||||
|DatePicker|😍|❌||
|
||||
|TimePicker|😍|❌||
|
||||
|GradientText|😍|🆗||
|
||||
|Icon|😍|🆗||
|
||||
|Input|😍|🆗||
|
||||
|Message|😍|❌|Code clean in need|
|
||||
|Modal|😍|❌|Code clean in need|
|
||||
|Notification|😍|❌|Code clean in need|
|
||||
|Pagination|😍|🆗|Unit test is not enough|
|
||||
|Select|😍|🆗|Multiple search is not done|
|
||||
|Switch|😍|❌||
|
||||
|Tooltip|😍|❌||
|
||||
|Popover|😍|❌||
|
||||
|InputNumber|😍|❌||
|
||||
|Radio|😍|||
|
||||
|Tab|😍|||
|
||||
|Badge|😍|||
|
||||
|Steps|😍|||
|
||||
|Tag|😍|||
|
||||
|Divider|😍|||
|
||||
|Popconfirm|😍|||
|
||||
|BackTop|😍|||
|
||||
|Progress|😍||Multiple Value|
|
||||
|Timeline|😍|||
|
||||
|Collapse|😍|||
|
||||
|Cascader|😍|||
|
||||
|Dropdown|😍|||
|
||||
|Transfer|😍|||
|
||||
|Spin|😍|||
|
||||
|Drawer|🤔|||
|
||||
|FormItem|🤔|❌||
|
||||
|Form|🤔|❌||
|
||||
|Table|🤔|❌|Function is not fulfilled|
|
||||
|Slider|🤔|||
|
||||
|LoadingBar|😍|||
|
||||
|AutoComplete|🚧|||
|
||||
|Tree|🤔|||
|
||||
|TreeSelect|🚧|||
|
||||
|Upload|🚧|||
|
||||
|Time|🚧|||
|
||||
|Anchor|🚧|||
|
||||
|Statistic|🚧|||
|
||||
|Breadcrumb|🚧|||
|
||||
|Card|🚧|||
|
||||
|Empty|🚧|||
|
||||
|Grid|🚧|||
|
||||
|Layout|🚧|||
|
||||
|Affix|🚧|||
|
||||
|Rating|🚧|||
|
||||
|Avator|🚧|||
|
||||
|Result|🚧|||
|
||||
|Menu|✋||Not Planned|
|
||||
|Typography|✋||Not Planned|
|
||||
|Mentions|✋||Not Planned|
|
||||
|Calendar|✋||Not Planned|
|
||||
|Carousel|✋||Not Planned|
|
||||
|
||||
1. Z-index management on `Select` & `Tooltip` & `Modal`(Low Priority)
|
||||
2. Full featured table component(Medium Priority)
|
||||
3. Form component(Medium Priority)
|
||||
4. FormItem component(High Priority)
|
||||
5. Complete unit test for all existing components(High Priority)
|
||||
6. Create a Markdown webpack loader to convert documentation(Low Priority)
|
||||
7. Refactor documentation page(for code clairity)
|
||||
8. Code refactor for some 😢 messy code(which is my bad...)
|
||||
9. Refactor CSS use mixins(which means I should learn SCSS hard...)
|
||||
|
||||
## RoadMap
|
||||
v0.3 cascader
|
||||
|
||||
v0.4 refactor popover
|
||||
|
||||
v0.5 finish all planned components
|
||||
|
||||
v0.6 add keyboard event on planned components
|
||||
|
||||
v0.7 refactor form component
|
||||
|
||||
v0.8 refactor table component
|
||||
|
||||
v0.9 fulfill props for all components
|
||||
|
||||
v0.10 split icons for components
|
||||
|
||||
v0.11 refactor css
|
||||
|
||||
v0.12 import on demand
|
||||
|
||||
v0.13 i18n
|
||||
|
||||
v0.14 unit test
|
||||
|
||||
v0.15 light theme
|
||||
|
||||
v0.16 refactor using proper html tags
|
||||
|
||||
v0.17 document formation
|
||||
|
||||
v0.18 refactor document page
|
||||
|
||||
[www.naiveui.com](www.naiveui.com)
|
||||
|
||||
@ -41,7 +41,7 @@ const webpackConfig = {
|
||||
new webpack.HotModuleReplacementPlugin(),
|
||||
new HtmlWebpackPlugin({
|
||||
template: './demo/index.tpl',
|
||||
filename: './index.html'
|
||||
favicon: './demo/assets/images/naivelogo.png'
|
||||
}),
|
||||
new VueLoaderPlugin(),
|
||||
new webpack.LoaderOptionsPlugin({
|
||||
|
||||
@ -34,7 +34,7 @@ const webpackConfig = {
|
||||
plugins: [
|
||||
new HtmlWebpackPlugin({
|
||||
template: './demo/index.tpl',
|
||||
filename: './index.html'
|
||||
favicon: './demo/assets/images/naivelogo.png'
|
||||
}),
|
||||
new VueLoaderPlugin(),
|
||||
new webpack.LoaderOptionsPlugin({
|
||||
|
||||
@ -7,9 +7,10 @@ const config = require('./config')
|
||||
const HtmlWebpackPlugin = require('html-webpack-plugin')
|
||||
const VueLoaderPlugin = require('vue-loader/lib/plugin')
|
||||
const ExtractTextPlugin = require('extract-text-webpack-plugin')
|
||||
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
|
||||
|
||||
const webpackConfig = {
|
||||
mode: 'development',
|
||||
mode: 'production',
|
||||
entry: './demo/privateIndex.js',
|
||||
output: {
|
||||
path: path.resolve(__dirname, '..', 'doc', 'dist'),
|
||||
@ -34,7 +35,7 @@ const webpackConfig = {
|
||||
plugins: [
|
||||
new HtmlWebpackPlugin({
|
||||
template: './demo/index.tpl',
|
||||
filename: './index.html'
|
||||
favicon: './demo/assets/images/naivelogo.png'
|
||||
}),
|
||||
new VueLoaderPlugin(),
|
||||
new webpack.LoaderOptionsPlugin({
|
||||
@ -44,7 +45,8 @@ const webpackConfig = {
|
||||
}
|
||||
}
|
||||
}),
|
||||
new ExtractTextPlugin('[name].[hash:7].css')
|
||||
new ExtractTextPlugin('[name].[hash:7].css'),
|
||||
new BundleAnalyzerPlugin()
|
||||
]
|
||||
}
|
||||
|
||||
|
||||
@ -63,10 +63,9 @@ const webpackConfig = {
|
||||
]
|
||||
},
|
||||
plugins: [
|
||||
new webpack.HotModuleReplacementPlugin(),
|
||||
new HtmlWebpackPlugin({
|
||||
template: './demo/index.tpl',
|
||||
filename: './index.html'
|
||||
favicon: './demo/assets/images/naivelogo.png'
|
||||
}),
|
||||
new VueLoaderPlugin(),
|
||||
new webpack.LoaderOptionsPlugin({
|
||||
|
||||
@ -1,14 +1,13 @@
|
||||
<template>
|
||||
<div style="overflow: hidden;">
|
||||
<div
|
||||
<!-- <div
|
||||
style="width: 100%; box-sizing: border-box; border-radius: 8px; border: 2px solid #5c657eff; height: 39px; background-color: black; margin-bottom: 12px; display: flex; align-items: center; justify-content: center; cursor: pointer;"
|
||||
@click="collapse = !collapse"
|
||||
>
|
||||
<span v-if="collapse">Click to Expand</span>
|
||||
<span v-else>Click to Collapse</span>
|
||||
</div>
|
||||
</div> -->
|
||||
<div
|
||||
v-if="!collapse"
|
||||
ref="source"
|
||||
class="n-doc-section__source"
|
||||
>
|
||||
@ -18,7 +17,6 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CodeMirror from 'codemirror'
|
||||
|
||||
export default {
|
||||
name: 'NDocSourceBlock',
|
||||
@ -27,18 +25,14 @@ export default {
|
||||
collapse: true
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
collapse (newValue) {
|
||||
if (!newValue) {
|
||||
this.$nextTick().then(() => {
|
||||
CodeMirror.fromTextArea(this.$refs.source.querySelector('textarea'), {
|
||||
lineNumbers: false,
|
||||
mode: 'htmlmixed',
|
||||
theme: 'vibrant-ink'
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
mounted () {
|
||||
this.$nextTick().then(() => {
|
||||
Array.from(this.$refs.source.querySelector('textarea')).forEach(ta => {
|
||||
console.log('ta', ta)
|
||||
const rows = ta.value.split('\n').length
|
||||
ta.setAttribute('rows', rows)
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
BIN
demo/assets/images/naivelogo.png
Normal file
BIN
demo/assets/images/naivelogo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.9 KiB |
@ -233,10 +233,6 @@ export default {
|
||||
name: 'Tabs',
|
||||
path: `/${this.lang}/${this.theme}` + '/n-tabs'
|
||||
},
|
||||
{
|
||||
name: 'Table',
|
||||
path: `/${this.lang}/${this.theme}` + '/n-table'
|
||||
},
|
||||
{
|
||||
name: 'Tag',
|
||||
path: `/${this.lang}/${this.theme}` + '/n-tag'
|
||||
@ -371,18 +367,6 @@ body {
|
||||
-webkit-text-size-adjust: 100%;
|
||||
}
|
||||
|
||||
.CodeMirror {
|
||||
border: 2px solid #5c657eff;
|
||||
height: auto !important;
|
||||
z-index: 0;
|
||||
border-radius: 8px;
|
||||
padding: 8px;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
.CodeMirror-scroll {
|
||||
overflow-y: hidden !important;
|
||||
overflow-x: auto !important;
|
||||
}
|
||||
.n-doc {
|
||||
width: 720px;
|
||||
margin: 0 auto;
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
# Date
|
||||
# Datetime
|
||||
```html
|
||||
<n-date-picker
|
||||
v-model="timestamp"
|
||||
|
||||
@ -1,7 +1,3 @@
|
||||
import CodeMirror from 'codemirror'
|
||||
import 'codemirror/mode/htmlmixed/htmlmixed'
|
||||
import 'codemirror/theme/vibrant-ink.css'
|
||||
|
||||
export default {
|
||||
mounted () {
|
||||
const textAreaNotToRender = new Set(this.$refs.doc.querySelectorAll('.not-code textarea'))
|
||||
@ -9,11 +5,9 @@ export default {
|
||||
if (textAreaNotToRender.has(ta)) {
|
||||
return
|
||||
}
|
||||
CodeMirror.fromTextArea(ta, {
|
||||
lineNumbers: false,
|
||||
mode: 'htmlmixed',
|
||||
theme: 'vibrant-ink'
|
||||
})
|
||||
const rows = ta.value.split('\n').length
|
||||
ta.style.width = '100%'
|
||||
ta.setAttribute('rows', rows)
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
18
demo/documentation/components/drawer/enUS/basic.md
Normal file
18
demo/documentation/components/drawer/enUS/basic.md
Normal file
@ -0,0 +1,18 @@
|
||||
# Basic
|
||||
```html
|
||||
<n-button @click="active = !active">
|
||||
active
|
||||
</n-button>
|
||||
<n-drawer v-model="active">
|
||||
777
|
||||
</n-drawer>
|
||||
```
|
||||
```js
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
active: false
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
4
demo/documentation/components/drawer/enUS/index.md
Normal file
4
demo/documentation/components/drawer/enUS/index.md
Normal file
@ -0,0 +1,4 @@
|
||||
# Drawer
|
||||
```demo
|
||||
basic
|
||||
```
|
||||
0
demo/documentation/components/drawer/index.entry
Normal file
0
demo/documentation/components/drawer/index.entry
Normal file
0
demo/documentation/components/drawer/zhCN/index.md
Normal file
0
demo/documentation/components/drawer/zhCN/index.md
Normal file
@ -1,32 +0,0 @@
|
||||
<template>
|
||||
<div
|
||||
ref="doc"
|
||||
class="n-doc"
|
||||
>
|
||||
<div class="n-doc-header">
|
||||
<n-gradient-text :font-size="20">
|
||||
Drawer
|
||||
</n-gradient-text>
|
||||
</div>
|
||||
<div class="n-doc-body">
|
||||
<scaffold />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import scaffold from './scaffold.demo.vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
scaffold
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -1,33 +0,0 @@
|
||||
<template>
|
||||
<div class="n-doc-section">
|
||||
<div class="n-doc-section__header">
|
||||
Basic Usage
|
||||
</div>
|
||||
<div
|
||||
class="n-doc-section__view"
|
||||
style="flex-wrap: nowrap;"
|
||||
>
|
||||
<!--EXAMPLE_START-->
|
||||
<n-button @click="active = !active">
|
||||
active
|
||||
</n-button>
|
||||
<n-drawer v-model="active">
|
||||
777
|
||||
</n-drawer>
|
||||
<!--EXAMPLE_END-->
|
||||
</div>
|
||||
<n-doc-source-block>
|
||||
<!--SOURCE-->
|
||||
</n-doc-source-block>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
active: false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
29
demo/documentation/components/dropdown/enUS/basic.md
Normal file
29
demo/documentation/components/dropdown/enUS/basic.md
Normal file
@ -0,0 +1,29 @@
|
||||
# Basic
|
||||
```html
|
||||
<n-dropdown>
|
||||
<template v-slot:activator>
|
||||
<div>menu</div>
|
||||
</template>
|
||||
<n-dropdown-item
|
||||
v-for="item in items"
|
||||
:key="item"
|
||||
@click="handleClick(item)"
|
||||
>
|
||||
{{ item }}
|
||||
</n-dropdown-item>
|
||||
</n-dropdown>
|
||||
```
|
||||
```js
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
items: ['item1longlonglong', 'item2longlonglong', 'item3longlonglong', 'item4longlonglong']
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleClick (item) {
|
||||
this.$NMessage.info(item)
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
50
demo/documentation/components/dropdown/enUS/cascade.md
Normal file
50
demo/documentation/components/dropdown/enUS/cascade.md
Normal file
@ -0,0 +1,50 @@
|
||||
# Cascade
|
||||
```html
|
||||
<n-dropdown
|
||||
placement="bottom-start"
|
||||
trigger="hover"
|
||||
>
|
||||
<template v-slot:activator>
|
||||
<div>menu</div>
|
||||
</template>
|
||||
<n-dropdown-item>
|
||||
item1
|
||||
</n-dropdown-item>
|
||||
<n-dropdown-item>
|
||||
item2
|
||||
</n-dropdown-item>
|
||||
<n-dropdown-item>
|
||||
item3
|
||||
</n-dropdown-item>
|
||||
<n-dropdown-submenu>
|
||||
<template v-slot:activator>
|
||||
<n-dropdown-item
|
||||
arrow
|
||||
>
|
||||
submenu
|
||||
</n-dropdown-item>
|
||||
</template>
|
||||
<n-dropdown-item>
|
||||
item4
|
||||
</n-dropdown-item>
|
||||
<n-dropdown-item>
|
||||
item5
|
||||
</n-dropdown-item>
|
||||
<n-dropdown-submenu>
|
||||
<template v-slot:activator>
|
||||
<n-dropdown-item
|
||||
arrow
|
||||
>
|
||||
submenu2
|
||||
</n-dropdown-item>
|
||||
</template>
|
||||
<n-dropdown-item>
|
||||
item6
|
||||
</n-dropdown-item>
|
||||
<n-dropdown-item>
|
||||
item7
|
||||
</n-dropdown-item>
|
||||
</n-dropdown-submenu>
|
||||
</n-dropdown-submenu>
|
||||
</n-dropdown>
|
||||
```
|
||||
7
demo/documentation/components/dropdown/enUS/index.md
Normal file
7
demo/documentation/components/dropdown/enUS/index.md
Normal file
@ -0,0 +1,7 @@
|
||||
# Dropdown
|
||||
```demo
|
||||
basic
|
||||
trigger
|
||||
placement
|
||||
cascade
|
||||
```
|
||||
29
demo/documentation/components/dropdown/enUS/placement.md
Normal file
29
demo/documentation/components/dropdown/enUS/placement.md
Normal file
@ -0,0 +1,29 @@
|
||||
# Placement
|
||||
```html
|
||||
<n-dropdown placement="bottom-start">
|
||||
<template v-slot:activator>
|
||||
<div>menu</div>
|
||||
</template>
|
||||
<n-dropdown-item
|
||||
v-for="item in items"
|
||||
:key="item"
|
||||
@click="handleClick(item)"
|
||||
>
|
||||
{{ item }}
|
||||
</n-dropdown-item>
|
||||
</n-dropdown>
|
||||
```
|
||||
```js
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
items: ['item1longlonglong', 'item2longlonglong', 'item3longlonglong', 'item4longlonglong']
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleClick (item) {
|
||||
this.$NMessage.info(item)
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
44
demo/documentation/components/dropdown/enUS/trigger.md
Normal file
44
demo/documentation/components/dropdown/enUS/trigger.md
Normal file
@ -0,0 +1,44 @@
|
||||
# Trigger
|
||||
```html
|
||||
<n-dropdown
|
||||
trigger="hover"
|
||||
style="margin-right: 16px;"
|
||||
>
|
||||
<template v-slot:activator>
|
||||
<div>Trigger: hover</div>
|
||||
</template>
|
||||
<n-dropdown-item
|
||||
v-for="item in items"
|
||||
:key="item"
|
||||
@click="handleClick(item)"
|
||||
>
|
||||
{{ item }}
|
||||
</n-dropdown-item>
|
||||
</n-dropdown>
|
||||
<n-dropdown trigger="click">
|
||||
<template v-slot:activator>
|
||||
<div>Trigger: click</div>
|
||||
</template>
|
||||
<n-dropdown-item
|
||||
v-for="item in items"
|
||||
:key="item"
|
||||
@click="handleClick(item)"
|
||||
>
|
||||
{{ item }}
|
||||
</n-dropdown-item>
|
||||
</n-dropdown>
|
||||
```
|
||||
```js
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
items: ['item1longlonglong', 'item2longlonglong', 'item3longlonglong', 'item4longlonglong']
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleClick (item) {
|
||||
this.$NMessage.info(item)
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
0
demo/documentation/components/dropdown/index.entry
Normal file
0
demo/documentation/components/dropdown/index.entry
Normal file
@ -1,44 +0,0 @@
|
||||
<template>
|
||||
<div class="n-doc-section">
|
||||
<div class="n-doc-section__header">
|
||||
Basic Usage
|
||||
</div>
|
||||
<div
|
||||
class="n-doc-section__view"
|
||||
style="flex-wrap: nowrap;"
|
||||
>
|
||||
<!--EXAMPLE_START-->
|
||||
<n-dropdown>
|
||||
<template v-slot:activator>
|
||||
<div>menu</div>
|
||||
</template>
|
||||
<n-dropdown-item
|
||||
v-for="item in items"
|
||||
:key="item"
|
||||
@click="handleClick(item)"
|
||||
>
|
||||
{{ item }}
|
||||
</n-dropdown-item>
|
||||
</n-dropdown>
|
||||
<!--EXAMPLE_END-->
|
||||
</div>
|
||||
<n-doc-source-block>
|
||||
<!--SOURCE-->
|
||||
</n-doc-source-block>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
items: ['item1longlonglong', 'item2longlonglong', 'item3longlonglong', 'item4longlonglong']
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleClick (item) {
|
||||
this.$NMessage.info(item)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -1,73 +0,0 @@
|
||||
<template>
|
||||
<div class="n-doc-section">
|
||||
<div class="n-doc-section__header">
|
||||
Cascade
|
||||
</div>
|
||||
<div
|
||||
class="n-doc-section__view"
|
||||
style="flex-wrap: nowrap;"
|
||||
>
|
||||
<!--EXAMPLE_START-->
|
||||
<n-dropdown
|
||||
placement="bottom-start"
|
||||
trigger="hover"
|
||||
>
|
||||
<template v-slot:activator>
|
||||
<div>menu</div>
|
||||
</template>
|
||||
<n-dropdown-item>
|
||||
item1
|
||||
</n-dropdown-item>
|
||||
<n-dropdown-item>
|
||||
item2
|
||||
</n-dropdown-item>
|
||||
<n-dropdown-item>
|
||||
item3
|
||||
</n-dropdown-item>
|
||||
<n-dropdown-submenu>
|
||||
<template v-slot:activator>
|
||||
<n-dropdown-item
|
||||
arrow
|
||||
>
|
||||
submenu
|
||||
</n-dropdown-item>
|
||||
</template>
|
||||
<n-dropdown-item>
|
||||
item4
|
||||
</n-dropdown-item>
|
||||
<n-dropdown-item>
|
||||
item5
|
||||
</n-dropdown-item>
|
||||
<n-dropdown-submenu>
|
||||
<template v-slot:activator>
|
||||
<n-dropdown-item
|
||||
arrow
|
||||
>
|
||||
submenu2
|
||||
</n-dropdown-item>
|
||||
</template>
|
||||
<n-dropdown-item>
|
||||
item6
|
||||
</n-dropdown-item>
|
||||
<n-dropdown-item>
|
||||
item7
|
||||
</n-dropdown-item>
|
||||
</n-dropdown-submenu>
|
||||
</n-dropdown-submenu>
|
||||
</n-dropdown>
|
||||
<!--EXAMPLE_END-->
|
||||
</div>
|
||||
<n-doc-source-block>
|
||||
<!--SOURCE-->
|
||||
</n-doc-source-block>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -1,41 +0,0 @@
|
||||
<template>
|
||||
<div
|
||||
ref="doc"
|
||||
class="n-doc"
|
||||
>
|
||||
<div class="n-doc-header">
|
||||
<n-gradient-text :font-size="20">
|
||||
Dropdown / n-dropdown
|
||||
</n-gradient-text>
|
||||
</div>
|
||||
<div class="n-doc-body">
|
||||
<basic-usage />
|
||||
<trigger />
|
||||
<placement />
|
||||
<cascade />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import basicUsage from './basicUsage.demo'
|
||||
import cascade from './cascade.demo.vue'
|
||||
import placement from './placement.demo.vue'
|
||||
import trigger from './trigger.demo.vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
cascade,
|
||||
basicUsage,
|
||||
placement,
|
||||
trigger
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -1,44 +0,0 @@
|
||||
<template>
|
||||
<div class="n-doc-section">
|
||||
<div class="n-doc-section__header">
|
||||
Placement
|
||||
</div>
|
||||
<div
|
||||
class="n-doc-section__view"
|
||||
style="flex-wrap: nowrap;"
|
||||
>
|
||||
<!--EXAMPLE_START-->
|
||||
<n-dropdown placement="bottom-start">
|
||||
<template v-slot:activator>
|
||||
<div>menu</div>
|
||||
</template>
|
||||
<n-dropdown-item
|
||||
v-for="item in items"
|
||||
:key="item"
|
||||
@click="handleClick(item)"
|
||||
>
|
||||
{{ item }}
|
||||
</n-dropdown-item>
|
||||
</n-dropdown>
|
||||
<!--EXAMPLE_END-->
|
||||
</div>
|
||||
<n-doc-source-block>
|
||||
<!--SOURCE-->
|
||||
</n-doc-source-block>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
items: ['item1longlonglong', 'item2longlonglong', 'item3longlonglong', 'item4longlonglong']
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleClick (item) {
|
||||
this.$NMessage.info(item)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -1,59 +0,0 @@
|
||||
<template>
|
||||
<div class="n-doc-section">
|
||||
<div class="n-doc-section__header">
|
||||
Basic Usage
|
||||
</div>
|
||||
<div
|
||||
class="n-doc-section__view"
|
||||
style="flex-wrap: nowrap;"
|
||||
>
|
||||
<!--EXAMPLE_START-->
|
||||
<n-dropdown
|
||||
trigger="hover"
|
||||
style="margin-right: 16px;"
|
||||
>
|
||||
<template v-slot:activator>
|
||||
<div>Trigger: hover</div>
|
||||
</template>
|
||||
<n-dropdown-item
|
||||
v-for="item in items"
|
||||
:key="item"
|
||||
@click="handleClick(item)"
|
||||
>
|
||||
{{ item }}
|
||||
</n-dropdown-item>
|
||||
</n-dropdown>
|
||||
<n-dropdown trigger="click">
|
||||
<template v-slot:activator>
|
||||
<div>Trigger: click</div>
|
||||
</template>
|
||||
<n-dropdown-item
|
||||
v-for="item in items"
|
||||
:key="item"
|
||||
@click="handleClick(item)"
|
||||
>
|
||||
{{ item }}
|
||||
</n-dropdown-item>
|
||||
</n-dropdown>
|
||||
<!--EXAMPLE_END-->
|
||||
</div>
|
||||
<n-doc-source-block>
|
||||
<!--SOURCE-->
|
||||
</n-doc-source-block>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
items: ['item1longlonglong', 'item2longlonglong', 'item3longlonglong', 'item4longlonglong']
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleClick (item) {
|
||||
this.$NMessage.info(item)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
15
demo/documentation/components/inputNumber/enUS/basic.md
Normal file
15
demo/documentation/components/inputNumber/enUS/basic.md
Normal file
@ -0,0 +1,15 @@
|
||||
# Basic
|
||||
```html
|
||||
<n-input-number
|
||||
v-model="value"
|
||||
/>
|
||||
```
|
||||
```js
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
value: 0
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
16
demo/documentation/components/inputNumber/enUS/disabled.md
Normal file
16
demo/documentation/components/inputNumber/enUS/disabled.md
Normal file
@ -0,0 +1,16 @@
|
||||
# Disabled
|
||||
```html
|
||||
<n-input-number
|
||||
disabled
|
||||
v-model="value"
|
||||
/>
|
||||
```
|
||||
```js
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
value: 0
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
21
demo/documentation/components/inputNumber/enUS/event.md
Normal file
21
demo/documentation/components/inputNumber/enUS/event.md
Normal file
@ -0,0 +1,21 @@
|
||||
# Event
|
||||
```html
|
||||
<n-input-number
|
||||
v-model="value"
|
||||
@change="handleChange"
|
||||
/>
|
||||
```
|
||||
```js
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
value: 0
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleChange (newValue) {
|
||||
this.$NMessage.info(`value: ${newValue}`)
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
9
demo/documentation/components/inputNumber/enUS/index.md
Normal file
9
demo/documentation/components/inputNumber/enUS/index.md
Normal file
@ -0,0 +1,9 @@
|
||||
# Input Number
|
||||
```demo
|
||||
basic
|
||||
disabled
|
||||
event
|
||||
min-max
|
||||
size
|
||||
step
|
||||
```
|
||||
22
demo/documentation/components/inputNumber/enUS/minMax.md
Normal file
22
demo/documentation/components/inputNumber/enUS/minMax.md
Normal file
@ -0,0 +1,22 @@
|
||||
# Min and Max
|
||||
```html
|
||||
<n-input-number
|
||||
v-model="value"
|
||||
:min="-3"
|
||||
:max="5"
|
||||
/>
|
||||
<n-input-number
|
||||
v-model="value"
|
||||
:min="-5"
|
||||
:max="3"
|
||||
/>
|
||||
```
|
||||
```js
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
value: 0
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
24
demo/documentation/components/inputNumber/enUS/size.md
Normal file
24
demo/documentation/components/inputNumber/enUS/size.md
Normal file
@ -0,0 +1,24 @@
|
||||
# Size
|
||||
```html
|
||||
<n-input-number
|
||||
v-model="value"
|
||||
size="small"
|
||||
/>
|
||||
<n-input-number
|
||||
v-model="value"
|
||||
size="medium"
|
||||
/>
|
||||
<n-input-number
|
||||
v-model="value"
|
||||
size="large"
|
||||
/>
|
||||
```
|
||||
```js
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
value: 0
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
16
demo/documentation/components/inputNumber/enUS/step.md
Normal file
16
demo/documentation/components/inputNumber/enUS/step.md
Normal file
@ -0,0 +1,16 @@
|
||||
# Step
|
||||
```html
|
||||
<n-input-number
|
||||
v-model="value"
|
||||
:step="2"
|
||||
/>
|
||||
```
|
||||
```js
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
value: 0
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
@ -1,31 +0,0 @@
|
||||
<template>
|
||||
<div class="n-doc-section">
|
||||
<div class="n-doc-section__header">
|
||||
Basic Usage
|
||||
</div>
|
||||
<div
|
||||
class="n-doc-section__view"
|
||||
style="flex-wrap: nowrap;"
|
||||
>
|
||||
<!--EXAMPLE_START-->
|
||||
<n-input-number
|
||||
v-model="value"
|
||||
/>
|
||||
<!--EXAMPLE_END-->
|
||||
</div>
|
||||
<pre class="n-doc-section__inspect">value: {{ JSON.stringify(value) }}</pre>
|
||||
<n-doc-source-block>
|
||||
<!--SOURCE-->
|
||||
</n-doc-source-block>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
value: 0
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -1,32 +0,0 @@
|
||||
<template>
|
||||
<div class="n-doc-section">
|
||||
<div class="n-doc-section__header">
|
||||
Disabled
|
||||
</div>
|
||||
<div
|
||||
class="n-doc-section__view"
|
||||
style="flex-wrap: nowrap;"
|
||||
>
|
||||
<!--EXAMPLE_START-->
|
||||
<n-input-number
|
||||
v-model="value"
|
||||
disabled
|
||||
/>
|
||||
<!--EXAMPLE_END-->
|
||||
</div>
|
||||
<pre class="n-doc-section__inspect">value: {{ JSON.stringify(value) }}</pre>
|
||||
<n-doc-source-block>
|
||||
<!--SOURCE-->
|
||||
</n-doc-source-block>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
value: 3
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -1,37 +0,0 @@
|
||||
<template>
|
||||
<div class="n-doc-section">
|
||||
<div class="n-doc-section__header">
|
||||
Event
|
||||
</div>
|
||||
<div
|
||||
class="n-doc-section__view"
|
||||
style="flex-wrap: nowrap;"
|
||||
>
|
||||
<!--EXAMPLE_START-->
|
||||
<n-input-number
|
||||
v-model="value"
|
||||
@change="handleChange"
|
||||
/>
|
||||
<!--EXAMPLE_END-->
|
||||
</div>
|
||||
<pre class="n-doc-section__inspect">value: {{ JSON.stringify(value) }}</pre>
|
||||
<n-doc-source-block>
|
||||
<!--SOURCE-->
|
||||
</n-doc-source-block>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
value: 0
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleChange (newValue) {
|
||||
this.$NMessage.info(`value: ${newValue}`)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -1,47 +0,0 @@
|
||||
<template>
|
||||
<div
|
||||
ref="doc"
|
||||
class="n-doc"
|
||||
>
|
||||
<div class="n-doc-header">
|
||||
<n-gradient-text :font-size="20">
|
||||
InputNumber / n-input-number
|
||||
</n-gradient-text>
|
||||
</div>
|
||||
<div class="n-doc-body">
|
||||
<basic-usage />
|
||||
<disabled />
|
||||
<event />
|
||||
<min-and-max />
|
||||
<size />
|
||||
<step />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import basicUsage from './basicUsage.demo.vue'
|
||||
import disabled from './disabled.demo'
|
||||
import event from './event.demo'
|
||||
import minAndMax from './minAndMax.demo'
|
||||
import size from './size.demo'
|
||||
import step from './step.demo'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
basicUsage,
|
||||
disabled,
|
||||
event,
|
||||
minAndMax,
|
||||
size,
|
||||
step
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -1,38 +0,0 @@
|
||||
<template>
|
||||
<div class="n-doc-section">
|
||||
<div class="n-doc-section__header">
|
||||
Min and Max
|
||||
</div>
|
||||
<div
|
||||
class="n-doc-section__view"
|
||||
style="flex-wrap: nowrap;"
|
||||
>
|
||||
<!--EXAMPLE_START-->
|
||||
<n-input-number
|
||||
v-model="value"
|
||||
:min="-3"
|
||||
:max="5"
|
||||
/>
|
||||
<n-input-number
|
||||
v-model="value"
|
||||
:min="-5"
|
||||
:max="3"
|
||||
/>
|
||||
<!--EXAMPLE_END-->
|
||||
</div>
|
||||
<pre class="n-doc-section__inspect">value: {{ JSON.stringify(value) }}</pre>
|
||||
<n-doc-source-block>
|
||||
<!--SOURCE-->
|
||||
</n-doc-source-block>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
value: 0
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -1,40 +0,0 @@
|
||||
<template>
|
||||
<div class="n-doc-section">
|
||||
<div class="n-doc-section__header">
|
||||
Size
|
||||
</div>
|
||||
<div
|
||||
class="n-doc-section__view"
|
||||
style="flex-wrap: nowrap;"
|
||||
>
|
||||
<!--EXAMPLE_START-->
|
||||
<n-input-number
|
||||
v-model="value"
|
||||
size="small"
|
||||
/>
|
||||
<n-input-number
|
||||
v-model="value"
|
||||
size="medium"
|
||||
/>
|
||||
<n-input-number
|
||||
v-model="value"
|
||||
size="large"
|
||||
/>
|
||||
<!--EXAMPLE_END-->
|
||||
</div>
|
||||
<pre class="n-doc-section__inspect">value: {{ JSON.stringify(value) }}</pre>
|
||||
<n-doc-source-block>
|
||||
<!--SOURCE-->
|
||||
</n-doc-source-block>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
value: 0
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -1,32 +0,0 @@
|
||||
<template>
|
||||
<div class="n-doc-section">
|
||||
<div class="n-doc-section__header">
|
||||
Step
|
||||
</div>
|
||||
<div
|
||||
class="n-doc-section__view"
|
||||
style="flex-wrap: nowrap;"
|
||||
>
|
||||
<!--EXAMPLE_START-->
|
||||
<n-input-number
|
||||
v-model="value"
|
||||
:step="2"
|
||||
/>
|
||||
<!--EXAMPLE_END-->
|
||||
</div>
|
||||
<pre class="n-doc-section__inspect">value: {{ JSON.stringify(value) }}</pre>
|
||||
<n-doc-source-block>
|
||||
<!--SOURCE-->
|
||||
</n-doc-source-block>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
value: 0
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
12
demo/documentation/components/popconfirm/enUS/basic.md
Normal file
12
demo/documentation/components/popconfirm/enUS/basic.md
Normal file
@ -0,0 +1,12 @@
|
||||
# Basic
|
||||
```html
|
||||
<n-popconfirm
|
||||
positive-text="ok"
|
||||
negative-text="not ok"
|
||||
>
|
||||
<template v-slot:activator>
|
||||
<n-button>Quit</n-button>
|
||||
</template>
|
||||
Are you sure to quit this game?
|
||||
</n-popconfirm>
|
||||
```
|
||||
@ -0,0 +1,17 @@
|
||||
# Custom Action
|
||||
```html
|
||||
<n-popconfirm :controller="controller">
|
||||
<template v-slot:activator>
|
||||
<n-button>Quit</n-button>
|
||||
</template>
|
||||
Are you sure to quit this game?
|
||||
<template v-slot:action>
|
||||
<n-button
|
||||
size="tiny"
|
||||
@click="handleOopsClick"
|
||||
>
|
||||
oops!
|
||||
</n-button>
|
||||
</template>
|
||||
</n-popconfirm>
|
||||
```
|
||||
18
demo/documentation/components/popconfirm/enUS/customIcon.md
Normal file
18
demo/documentation/components/popconfirm/enUS/customIcon.md
Normal file
@ -0,0 +1,18 @@
|
||||
# Custom Icon
|
||||
```html
|
||||
<n-popconfirm
|
||||
positive-text="ok"
|
||||
negative-text="not ok"
|
||||
>
|
||||
<template v-slot:icon>
|
||||
<n-icon
|
||||
type="md-hand"
|
||||
color="red"
|
||||
/>
|
||||
</template>
|
||||
<template v-slot:activator>
|
||||
<n-button>Quit</n-button>
|
||||
</template>
|
||||
Are you sure to quit this game?
|
||||
</n-popconfirm>
|
||||
```
|
||||
24
demo/documentation/components/popconfirm/enUS/event.md
Normal file
24
demo/documentation/components/popconfirm/enUS/event.md
Normal file
@ -0,0 +1,24 @@
|
||||
# Event
|
||||
```html
|
||||
<n-popconfirm
|
||||
@positive-click="handlePositiveClick"
|
||||
@negative-click="handleNegativeClick"
|
||||
>
|
||||
<template v-slot:activator>
|
||||
<n-button>Quit</n-button>
|
||||
</template>
|
||||
Are you sure to quit this game?
|
||||
</n-popconfirm>
|
||||
```
|
||||
```js
|
||||
export default {
|
||||
methods: {
|
||||
handlePositiveClick () {
|
||||
this.$NMessage.info('positive click')
|
||||
},
|
||||
handleNegativeClick () {
|
||||
this.$NMessage.info('negative click')
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
8
demo/documentation/components/popconfirm/enUS/index.md
Normal file
8
demo/documentation/components/popconfirm/enUS/index.md
Normal file
@ -0,0 +1,8 @@
|
||||
# Popconfirm
|
||||
```demo
|
||||
basic
|
||||
custom-action
|
||||
custom-icon
|
||||
event
|
||||
no-icon
|
||||
```
|
||||
9
demo/documentation/components/popconfirm/enUS/noIcon.md
Normal file
9
demo/documentation/components/popconfirm/enUS/noIcon.md
Normal file
@ -0,0 +1,9 @@
|
||||
# No Icon
|
||||
```html
|
||||
<n-popconfirm :show-icon="false">
|
||||
<template v-slot:activator>
|
||||
<n-button>No Icon</n-button>
|
||||
</template>
|
||||
Are you sure to quit this game?
|
||||
</n-popconfirm>
|
||||
```
|
||||
@ -1,35 +0,0 @@
|
||||
<template>
|
||||
<div class="n-doc-section">
|
||||
<div class="n-doc-section__header">
|
||||
Basic Usage
|
||||
</div>
|
||||
<div
|
||||
class="n-doc-section__view"
|
||||
style="flex-wrap: nowrap;"
|
||||
>
|
||||
<!--EXAMPLE_START-->
|
||||
<n-popconfirm
|
||||
positive-text="ok"
|
||||
negative-text="not ok"
|
||||
>
|
||||
<template v-slot:activator>
|
||||
<n-button>Quit</n-button>
|
||||
</template>
|
||||
Are you sure to quit this game?
|
||||
</n-popconfirm>
|
||||
<!--EXAMPLE_END-->
|
||||
</div>
|
||||
<n-doc-source-block>
|
||||
<!--SOURCE-->
|
||||
</n-doc-source-block>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -1,47 +0,0 @@
|
||||
<template>
|
||||
<div class="n-doc-section">
|
||||
<div class="n-doc-section__header">
|
||||
Custom Action
|
||||
</div>
|
||||
<div
|
||||
class="n-doc-section__view"
|
||||
style="flex-wrap: nowrap;"
|
||||
>
|
||||
<!--EXAMPLE_START-->
|
||||
<n-popconfirm :controller="controller">
|
||||
<template v-slot:activator>
|
||||
<n-button>Quit</n-button>
|
||||
</template>
|
||||
Are you sure to quit this game?
|
||||
<template v-slot:action>
|
||||
<n-button
|
||||
size="tiny"
|
||||
@click="handleOopsClick"
|
||||
>
|
||||
oops!
|
||||
</n-button>
|
||||
</template>
|
||||
</n-popconfirm>
|
||||
<!--EXAMPLE_END-->
|
||||
</div>
|
||||
<n-doc-source-block>
|
||||
<!--SOURCE-->
|
||||
</n-doc-source-block>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
controller: {}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleOopsClick () {
|
||||
this.$NMessage.info('oops!')
|
||||
if (this.controller) this.controller.hide()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -1,41 +0,0 @@
|
||||
<template>
|
||||
<div class="n-doc-section">
|
||||
<div class="n-doc-section__header">
|
||||
Custom Icon
|
||||
</div>
|
||||
<div
|
||||
class="n-doc-section__view"
|
||||
style="flex-wrap: nowrap;"
|
||||
>
|
||||
<!--EXAMPLE_START-->
|
||||
<n-popconfirm
|
||||
positive-text="ok"
|
||||
negative-text="not ok"
|
||||
>
|
||||
<template v-slot:icon>
|
||||
<n-icon
|
||||
type="md-hand"
|
||||
color="red"
|
||||
/>
|
||||
</template>
|
||||
<template v-slot:activator>
|
||||
<n-button>Quit</n-button>
|
||||
</template>
|
||||
Are you sure to quit this game?
|
||||
</n-popconfirm>
|
||||
<!--EXAMPLE_END-->
|
||||
</div>
|
||||
<n-doc-source-block>
|
||||
<!--SOURCE-->
|
||||
</n-doc-source-block>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -1,39 +0,0 @@
|
||||
<template>
|
||||
<div class="n-doc-section">
|
||||
<div class="n-doc-section__header">
|
||||
Event
|
||||
</div>
|
||||
<div
|
||||
class="n-doc-section__view"
|
||||
style="flex-wrap: nowrap;"
|
||||
>
|
||||
<!--EXAMPLE_START-->
|
||||
<n-popconfirm
|
||||
@positive-click="handlePositiveClick"
|
||||
@negative-click="handleNegativeClick"
|
||||
>
|
||||
<template v-slot:activator>
|
||||
<n-button>Quit</n-button>
|
||||
</template>
|
||||
Are you sure to quit this game?
|
||||
</n-popconfirm>
|
||||
<!--EXAMPLE_END-->
|
||||
</div>
|
||||
<n-doc-source-block>
|
||||
<!--SOURCE-->
|
||||
</n-doc-source-block>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
handlePositiveClick () {
|
||||
this.$NMessage.info('positive click')
|
||||
},
|
||||
handleNegativeClick () {
|
||||
this.$NMessage.info('negative click')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -1,44 +0,0 @@
|
||||
<template>
|
||||
<div
|
||||
ref="doc"
|
||||
class="n-doc"
|
||||
>
|
||||
<div class="n-doc-header">
|
||||
<n-gradient-text :font-size="20">
|
||||
Popconfirm / n-popconfirm
|
||||
</n-gradient-text>
|
||||
</div>
|
||||
<div class="n-doc-body">
|
||||
<basic-usage />
|
||||
<no-icon />
|
||||
<event />
|
||||
<custom-action />
|
||||
<custom-icon />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import basicUsage from './basicUsage.demo.vue'
|
||||
import event from './event.demo.vue'
|
||||
import customAction from './customAction.demo.vue'
|
||||
import noIcon from './noIcon.demo.vue'
|
||||
import customIcon from './customIcon.demo.vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
basicUsage,
|
||||
event,
|
||||
customAction,
|
||||
noIcon,
|
||||
customIcon
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -1,32 +0,0 @@
|
||||
<template>
|
||||
<div class="n-doc-section">
|
||||
<div class="n-doc-section__header">
|
||||
No Icon
|
||||
</div>
|
||||
<div
|
||||
class="n-doc-section__view"
|
||||
style="flex-wrap: nowrap;"
|
||||
>
|
||||
<!--EXAMPLE_START-->
|
||||
<n-popconfirm no-icon>
|
||||
<template v-slot:activator>
|
||||
<n-button>No Icon</n-button>
|
||||
</template>
|
||||
Are you sure to quit this game?
|
||||
</n-popconfirm>
|
||||
<!--EXAMPLE_END-->
|
||||
</div>
|
||||
<n-doc-source-block>
|
||||
<!--SOURCE-->
|
||||
</n-doc-source-block>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
31
demo/documentation/components/radio/enUS/basic.md
Normal file
31
demo/documentation/components/radio/enUS/basic.md
Normal file
@ -0,0 +1,31 @@
|
||||
# Basic
|
||||
```html
|
||||
<n-radio
|
||||
v-model="value"
|
||||
value="Definitely Maybe"
|
||||
>
|
||||
Definitely Maybe
|
||||
</n-radio>
|
||||
<n-radio
|
||||
v-model="value"
|
||||
value="Be Here Now"
|
||||
>
|
||||
Be Here Now
|
||||
</n-radio>
|
||||
<n-radio
|
||||
v-model="value"
|
||||
value="Be Here Now"
|
||||
disabled
|
||||
>
|
||||
Be Here Now
|
||||
</n-radio>
|
||||
```
|
||||
```js
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
value: null
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
61
demo/documentation/components/radio/enUS/buttonGroup.md
Normal file
61
demo/documentation/components/radio/enUS/buttonGroup.md
Normal file
@ -0,0 +1,61 @@
|
||||
# Button Group
|
||||
```html
|
||||
<n-radio-group v-model="value">
|
||||
<n-radio-button
|
||||
v-for="song in songs"
|
||||
:key="song.value"
|
||||
:value="song.value"
|
||||
:disabled="(song.label === 'Live Forever' && disabled1 || song.label === 'Shakermaker' && disabled2)"
|
||||
>
|
||||
{{ song.label }}
|
||||
</n-radio-button>
|
||||
</n-radio-group>
|
||||
|
||||
<n-checkbox
|
||||
v-model="disabled2"
|
||||
style="margin-right: 12px;"
|
||||
>
|
||||
disable Shakemaker
|
||||
</n-checkbox>
|
||||
<n-checkbox
|
||||
v-model="disabled1"
|
||||
>
|
||||
disable Live Forever
|
||||
</n-checkbox>
|
||||
```
|
||||
```js
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
value: null,
|
||||
disabled2: false,
|
||||
disabled1: false,
|
||||
songs: [
|
||||
{
|
||||
value: 'Rock\'n\'Roll Star',
|
||||
label: 'Rock\'n\'Roll Star'
|
||||
},
|
||||
{
|
||||
value: 'Shakermaker',
|
||||
label: 'Shakermaker'
|
||||
},
|
||||
{
|
||||
value: 'Live Forever',
|
||||
label: 'Live Forever'
|
||||
},
|
||||
{
|
||||
value: 'Up in the Sky',
|
||||
label: 'Up in the Sky'
|
||||
},
|
||||
{
|
||||
value: '...',
|
||||
label: '...'
|
||||
}
|
||||
].map(s => {
|
||||
s.value = s.value.toLowerCase()
|
||||
return s
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
46
demo/documentation/components/radio/enUS/group.md
Normal file
46
demo/documentation/components/radio/enUS/group.md
Normal file
@ -0,0 +1,46 @@
|
||||
# Group
|
||||
```html
|
||||
<n-radio-group v-model="value">
|
||||
<n-radio
|
||||
v-for="song in songs"
|
||||
:key="song.value"
|
||||
:value="song.value"
|
||||
>
|
||||
{{ song.label }}
|
||||
</n-radio>
|
||||
</n-radio-group>
|
||||
```
|
||||
```js
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
value: null,
|
||||
songs: [
|
||||
{
|
||||
value: 'Rock\'n\'Roll Star',
|
||||
label: 'Rock\'n\'Roll Star'
|
||||
},
|
||||
{
|
||||
value: 'Shakermaker',
|
||||
label: 'Shakermaker'
|
||||
},
|
||||
{
|
||||
value: 'Live Forever',
|
||||
label: 'Live Forever'
|
||||
},
|
||||
{
|
||||
value: 'Up in the Sky',
|
||||
label: 'Up in the Sky'
|
||||
},
|
||||
{
|
||||
value: '...',
|
||||
label: '...'
|
||||
}
|
||||
].map(s => {
|
||||
s.value = s.value.toLowerCase()
|
||||
return s
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
7
demo/documentation/components/radio/enUS/index.md
Normal file
7
demo/documentation/components/radio/enUS/index.md
Normal file
@ -0,0 +1,7 @@
|
||||
# Radio
|
||||
<!--single-column-->
|
||||
```demo
|
||||
basic
|
||||
group
|
||||
button-group
|
||||
```
|
||||
0
demo/documentation/components/radio/index.entry
Normal file
0
demo/documentation/components/radio/index.entry
Normal file
0
demo/documentation/components/radio/zhCN/index.md
Normal file
0
demo/documentation/components/radio/zhCN/index.md
Normal file
@ -1,258 +0,0 @@
|
||||
<template>
|
||||
<div
|
||||
ref="doc"
|
||||
class="n-doc"
|
||||
>
|
||||
<div class="n-doc-header">
|
||||
<n-gradient-text :font-size="20">
|
||||
Radio
|
||||
</n-gradient-text>
|
||||
</div>
|
||||
<div class="n-doc-body">
|
||||
<div class="n-doc-section">
|
||||
<div class="n-doc-section__header">
|
||||
Single Radio
|
||||
</div>
|
||||
<div class="n-doc-section__view">
|
||||
<n-radio
|
||||
v-model="value1"
|
||||
value="Definitely Maybe"
|
||||
>
|
||||
Definitely Maybe
|
||||
</n-radio>
|
||||
<n-radio
|
||||
v-model="value1"
|
||||
value="Be Here Now"
|
||||
>
|
||||
Be Here Now
|
||||
</n-radio>
|
||||
<n-radio
|
||||
v-model="value1"
|
||||
value="Be Here Now"
|
||||
disabled
|
||||
>
|
||||
Be Here Now
|
||||
</n-radio>
|
||||
</div>
|
||||
<pre class="n-doc-section__inspect">value: {{ JSON.stringify(value1) }}</pre>
|
||||
<div class="n-doc-section__source">
|
||||
<textarea><n-radio
|
||||
v-model="value"
|
||||
value="Definitely Maybe"
|
||||
>
|
||||
Definitely Maybe
|
||||
</n-radio>
|
||||
<n-radio
|
||||
v-model="value"
|
||||
value="Be Here Now"
|
||||
>
|
||||
Be Here Now
|
||||
</n-radio>
|
||||
<n-radio
|
||||
v-model="value"
|
||||
value="Be Here Now"
|
||||
disabled
|
||||
>
|
||||
Be Here Now
|
||||
</n-radio>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
value: null
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="n-doc-section">
|
||||
<div class="n-doc-section__header">
|
||||
Radio Group
|
||||
</div>
|
||||
<div class="n-doc-section__view">
|
||||
<n-radio-group v-model="value2">
|
||||
<n-radio
|
||||
v-for="song in songs"
|
||||
:key="song.value"
|
||||
:value="song.value"
|
||||
>
|
||||
{{ song.label }}
|
||||
</n-radio>
|
||||
</n-radio-group>
|
||||
</div>
|
||||
<pre class="n-doc-section__inspect">value: {{ JSON.stringify(value2) }}</pre>
|
||||
<div class="n-doc-section__source">
|
||||
<textarea v-pre><n-radio-group v-model="value">
|
||||
<n-radio
|
||||
v-for="song in songs"
|
||||
:key="song.value"
|
||||
:value="song.value"
|
||||
>
|
||||
{{ song.label }}
|
||||
</n-radio>
|
||||
</n-radio-group>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
value: null,
|
||||
songs: [
|
||||
{
|
||||
value: 'Rock\'n\'Roll Star',
|
||||
label: 'Rock\'n\'Roll Star'
|
||||
},
|
||||
{
|
||||
value: 'Shakermaker',
|
||||
label: 'Shakermaker'
|
||||
},
|
||||
{
|
||||
value: 'Live Forever',
|
||||
label: 'Live Forever'
|
||||
},
|
||||
{
|
||||
value: 'Up in the Sky',
|
||||
label: 'Up in the Sky'
|
||||
},
|
||||
{
|
||||
value: '...',
|
||||
label: '...'
|
||||
}
|
||||
].map(s => {
|
||||
s.value = s.value.toLowerCase()
|
||||
return s
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="n-doc-section">
|
||||
<div class="n-doc-section__header">
|
||||
Radio Button Group
|
||||
</div>
|
||||
<div class="n-doc-section__view">
|
||||
<n-radio-group v-model="value3">
|
||||
<n-radio-button
|
||||
v-for="song in songs"
|
||||
:key="song.value"
|
||||
:value="song.value"
|
||||
:disabled="(song.label === 'Live Forever' && disabled1 || song.label === 'Shakermaker' && disabled2)"
|
||||
>
|
||||
{{ song.label }}
|
||||
</n-radio-button>
|
||||
</n-radio-group>
|
||||
</div>
|
||||
<div class="n-doc-section__view">
|
||||
<n-checkbox
|
||||
v-model="disabled2"
|
||||
style="margin-right: 12px;"
|
||||
>
|
||||
disable Shakemaker
|
||||
</n-checkbox>
|
||||
<n-checkbox
|
||||
v-model="disabled1"
|
||||
>
|
||||
disable Live Forever
|
||||
</n-checkbox>
|
||||
</div>
|
||||
<pre class="n-doc-section__inspect">value: {{ JSON.stringify(value3) }}</pre>
|
||||
<div class="n-doc-section__source">
|
||||
<textarea v-pre><n-radio-group v-model="value">
|
||||
<n-radio
|
||||
v-for="song in songs"
|
||||
:key="song.value"
|
||||
:value="song.value"
|
||||
>
|
||||
{{ song.label }}
|
||||
</n-radio>
|
||||
</n-radio-group>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
value: null,
|
||||
songs: [
|
||||
{
|
||||
value: 'Rock\'n\'Roll Star',
|
||||
label: 'Rock\'n\'Roll Star'
|
||||
},
|
||||
{
|
||||
value: 'Shakermaker',
|
||||
label: 'Shakermaker'
|
||||
},
|
||||
{
|
||||
value: 'Live Forever',
|
||||
label: 'Live Forever'
|
||||
},
|
||||
{
|
||||
value: 'Up in the Sky',
|
||||
label: 'Up in the Sky'
|
||||
},
|
||||
{
|
||||
value: '...',
|
||||
label: '...'
|
||||
}
|
||||
].map(s => {
|
||||
s.value = s.value.toLowerCase()
|
||||
return s
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import docCodeEditorMixin from './docCodeEditorMixin'
|
||||
export default {
|
||||
mixins: [docCodeEditorMixin],
|
||||
data () {
|
||||
return {
|
||||
value1: null,
|
||||
value2: null,
|
||||
value3: 'Shakermaker',
|
||||
disabled1: false,
|
||||
disabled2: false,
|
||||
songs: [
|
||||
{
|
||||
value: 'Rock\'n\'Roll Star',
|
||||
label: 'Rock\'n\'Roll Star'
|
||||
},
|
||||
{
|
||||
value: 'Shakermaker',
|
||||
label: 'Shakermaker'
|
||||
},
|
||||
{
|
||||
value: 'Live Forever',
|
||||
label: 'Live Forever'
|
||||
},
|
||||
{
|
||||
value: 'Up in the Sky',
|
||||
label: 'Up in the Sky'
|
||||
},
|
||||
{
|
||||
value: '...',
|
||||
label: '...'
|
||||
}
|
||||
].map(s => {
|
||||
s.value = s.value.toLowerCase()
|
||||
return s
|
||||
})
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -1,32 +0,0 @@
|
||||
<template>
|
||||
<div
|
||||
ref="doc"
|
||||
class="n-doc"
|
||||
>
|
||||
<div class="n-doc-header">
|
||||
<n-gradient-text :font-size="20">
|
||||
scaffold
|
||||
</n-gradient-text>
|
||||
</div>
|
||||
<div class="n-doc-body">
|
||||
<scaffold />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import scaffold from './scaffold.demo.vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
scaffold
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -1,28 +0,0 @@
|
||||
<template>
|
||||
<div class="n-doc-section">
|
||||
<div class="n-doc-section__header">
|
||||
Scaffold
|
||||
</div>
|
||||
<div
|
||||
class="n-doc-section__view"
|
||||
style="flex-wrap: nowrap;"
|
||||
>
|
||||
<!--EXAMPLE_START-->
|
||||
Write some demo here
|
||||
<!--EXAMPLE_END-->
|
||||
</div>
|
||||
<pre class="n-doc-section__inspect">Inspect some value here</pre>
|
||||
<n-doc-source-block>
|
||||
<!--SOURCE-->
|
||||
</n-doc-source-block>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -6,6 +6,7 @@
|
||||
placeholder="Search Songs"
|
||||
:options="options"
|
||||
:on-search="handleSearch"
|
||||
clearable
|
||||
remote
|
||||
:no-data-content="noDataContent"
|
||||
:loading="loading"
|
||||
|
||||
@ -7,6 +7,7 @@
|
||||
placeholder="Search Songs"
|
||||
:options="options"
|
||||
:on-search="handleSearch"
|
||||
clearable
|
||||
remote
|
||||
:no-data-content="noDataContent"
|
||||
:loading="loading"
|
||||
|
||||
19
demo/documentation/components/slider/enUS/basic.md
Normal file
19
demo/documentation/components/slider/enUS/basic.md
Normal file
@ -0,0 +1,19 @@
|
||||
# Basic
|
||||
```html
|
||||
<n-slider
|
||||
v-model="value"
|
||||
:step="10"
|
||||
/>
|
||||
<n-input-number
|
||||
v-model="value"
|
||||
/>
|
||||
```
|
||||
```js
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
value: 50
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
6
demo/documentation/components/slider/enUS/index.md
Normal file
6
demo/documentation/components/slider/enUS/index.md
Normal file
@ -0,0 +1,6 @@
|
||||
# Slider
|
||||
```demo
|
||||
basic
|
||||
range
|
||||
mark
|
||||
````
|
||||
28
demo/documentation/components/slider/enUS/mark.md
Normal file
28
demo/documentation/components/slider/enUS/mark.md
Normal file
@ -0,0 +1,28 @@
|
||||
# Mark
|
||||
```html
|
||||
<n-slider
|
||||
v-model="value"
|
||||
range
|
||||
:marks="marks"
|
||||
:step="10"
|
||||
/>
|
||||
<n-input-number
|
||||
v-model="value[0]"
|
||||
/>
|
||||
<n-input-number
|
||||
v-model="value[1]"
|
||||
/>
|
||||
```
|
||||
```js
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
value: [50, 70],
|
||||
marks: {
|
||||
34: 'Amazing',
|
||||
75: 'Good'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
23
demo/documentation/components/slider/enUS/range.md
Normal file
23
demo/documentation/components/slider/enUS/range.md
Normal file
@ -0,0 +1,23 @@
|
||||
# Range
|
||||
```html
|
||||
<n-slider
|
||||
v-model="value"
|
||||
range
|
||||
:step="1"
|
||||
/>
|
||||
<n-input-number
|
||||
v-model="value[0]"
|
||||
/>
|
||||
<n-input-number
|
||||
v-model="value[1]"
|
||||
/>
|
||||
```
|
||||
```js
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
value: [50, 70]
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
0
demo/documentation/components/slider/index.entry
Normal file
0
demo/documentation/components/slider/index.entry
Normal file
0
demo/documentation/components/slider/zhCN/index.md
Normal file
0
demo/documentation/components/slider/zhCN/index.md
Normal file
@ -1,38 +0,0 @@
|
||||
<template>
|
||||
<div
|
||||
ref="doc"
|
||||
class="n-doc"
|
||||
>
|
||||
<div class="n-doc-header">
|
||||
<n-gradient-text :font-size="20">
|
||||
Slider / n-slider
|
||||
</n-gradient-text>
|
||||
</div>
|
||||
<div class="n-doc-body">
|
||||
<scaffold />
|
||||
<range />
|
||||
<mark-demo />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import scaffold from './scaffold.demo.vue'
|
||||
import range from './range.demo.vue'
|
||||
import markDemo from './mark.demo.vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
scaffold,
|
||||
range,
|
||||
markDemo
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -1,45 +0,0 @@
|
||||
<template>
|
||||
<div class="n-doc-section">
|
||||
<div class="n-doc-section__header">
|
||||
Mark
|
||||
</div>
|
||||
<div
|
||||
class="n-doc-section__view"
|
||||
style="flex-wrap: nowrap;"
|
||||
>
|
||||
<!--EXAMPLE_START-->
|
||||
<n-slider
|
||||
v-model="value"
|
||||
range
|
||||
:marks="marks"
|
||||
:step="10"
|
||||
/>
|
||||
<!--EXAMPLE_END-->
|
||||
</div>
|
||||
<div class="n-doc-section__inspect">
|
||||
<n-input-number
|
||||
v-model="value[0]"
|
||||
/>
|
||||
<n-input-number
|
||||
v-model="value[1]"
|
||||
/>
|
||||
</div>
|
||||
<n-doc-source-block>
|
||||
<!--SOURCE-->
|
||||
</n-doc-source-block>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
value: [50, 70],
|
||||
marks: {
|
||||
34: 'Amazing',
|
||||
75: 'Good'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -1,40 +0,0 @@
|
||||
<template>
|
||||
<div class="n-doc-section">
|
||||
<div class="n-doc-section__header">
|
||||
Range
|
||||
</div>
|
||||
<div
|
||||
class="n-doc-section__view"
|
||||
style="flex-wrap: nowrap;"
|
||||
>
|
||||
<!--EXAMPLE_START-->
|
||||
<n-slider
|
||||
v-model="value"
|
||||
range
|
||||
:step="1"
|
||||
/>
|
||||
<!--EXAMPLE_END-->
|
||||
</div>
|
||||
<div class="n-doc-section__inspect">
|
||||
<n-input-number
|
||||
v-model="value[0]"
|
||||
/>
|
||||
<n-input-number
|
||||
v-model="value[1]"
|
||||
/>
|
||||
</div>
|
||||
<n-doc-source-block>
|
||||
<!--SOURCE-->
|
||||
</n-doc-source-block>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
value: [50, 70]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -1,36 +0,0 @@
|
||||
<template>
|
||||
<div class="n-doc-section">
|
||||
<div class="n-doc-section__header">
|
||||
Basic Usage
|
||||
</div>
|
||||
<div
|
||||
class="n-doc-section__view"
|
||||
style="flex-wrap: nowrap;"
|
||||
>
|
||||
<!--EXAMPLE_START-->
|
||||
<n-slider
|
||||
v-model="value"
|
||||
:step="10"
|
||||
/>
|
||||
<!--EXAMPLE_END-->
|
||||
</div>
|
||||
<div class="n-doc-section__inspect">
|
||||
<n-input-number
|
||||
v-model="value"
|
||||
/>
|
||||
</div>
|
||||
<n-doc-source-block>
|
||||
<!--SOURCE-->
|
||||
</n-doc-source-block>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
value: 50
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
64
demo/documentation/components/steps/enUS/basic.md
Normal file
64
demo/documentation/components/steps/enUS/basic.md
Normal file
@ -0,0 +1,64 @@
|
||||
# Basic
|
||||
```html
|
||||
<n-steps
|
||||
:current="current"
|
||||
:status="currentStatus"
|
||||
>
|
||||
<n-step
|
||||
title="I Me Mine"
|
||||
description="All through the day, I me mine I me mine, I me mine"
|
||||
/>
|
||||
<n-step
|
||||
title="Let It Be"
|
||||
description="When I find myself in times of trouble Mother Mary comes to me"
|
||||
/>
|
||||
<n-step
|
||||
title="Come Together"
|
||||
description="Here come old flat top He come grooving up slowly"
|
||||
/>
|
||||
<n-step
|
||||
title="Something"
|
||||
description="Something in the way she moves Attracts me like no other lover"
|
||||
/>
|
||||
</n-steps>
|
||||
<div
|
||||
style="display: flex; justify-content: center; flex-wrap: wrap; margin-top: 48px;"
|
||||
>
|
||||
<n-button
|
||||
icon="md-arrow-round-back"
|
||||
@click="prev"
|
||||
/><n-button
|
||||
icon="md-arrow-round-forward"
|
||||
@click="next"
|
||||
/>
|
||||
<n-button @click="currentStatus='error'">
|
||||
current-status: error
|
||||
</n-button>
|
||||
<n-button @click="currentStatus='process'">
|
||||
current-status: process
|
||||
</n-button>
|
||||
</div>
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
current: null,
|
||||
currentStatus: 'error'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
next () {
|
||||
if (this.current === null) this.current = 1
|
||||
else if (this.current >= 4) this.current = null
|
||||
else this.current++
|
||||
},
|
||||
prev () {
|
||||
if (this.current === 0) this.current = null
|
||||
else if (this.current === null) this.current = 4
|
||||
else this.current--
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
5
demo/documentation/components/steps/enUS/index.md
Normal file
5
demo/documentation/components/steps/enUS/index.md
Normal file
@ -0,0 +1,5 @@
|
||||
# Step
|
||||
<!--single-column-->
|
||||
```demo
|
||||
basic
|
||||
```
|
||||
0
demo/documentation/components/steps/index.entry
Normal file
0
demo/documentation/components/steps/index.entry
Normal file
0
demo/documentation/components/steps/zhCN/index.md
Normal file
0
demo/documentation/components/steps/zhCN/index.md
Normal file
@ -1,32 +0,0 @@
|
||||
<template>
|
||||
<div
|
||||
ref="doc"
|
||||
class="n-doc"
|
||||
>
|
||||
<div class="n-doc-header">
|
||||
<n-gradient-text :font-size="20">
|
||||
NSteps / n-steps
|
||||
</n-gradient-text>
|
||||
</div>
|
||||
<div class="n-doc-body">
|
||||
<scaffold />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import scaffold from './scaffold.demo.vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
scaffold
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -1,92 +0,0 @@
|
||||
<template>
|
||||
<div class="n-doc-section">
|
||||
<div class="n-doc-section__header">
|
||||
Basic Usage
|
||||
</div>
|
||||
<div
|
||||
class="n-doc-section__view"
|
||||
style="flex-wrap: wrap;"
|
||||
>
|
||||
<!--EXAMPLE_START-->
|
||||
<n-steps
|
||||
:current="current"
|
||||
:finish-status="finishStatus"
|
||||
:current-status="currentStatus"
|
||||
>
|
||||
<n-step
|
||||
title="I Me Mine"
|
||||
description="All through the day, I me mine I me mine, I me mine"
|
||||
/>
|
||||
<n-step
|
||||
title="Let It Be"
|
||||
description="When I find myself in times of trouble Mother Mary comes to me"
|
||||
/>
|
||||
<n-step
|
||||
title="Come Together"
|
||||
description="Here come old flat top He come grooving up slowly"
|
||||
/>
|
||||
<n-step
|
||||
title="Something"
|
||||
description="Something in the way she moves Attracts me like no other lover"
|
||||
/>
|
||||
</n-steps>
|
||||
<div
|
||||
style="display: flex; justify-content: center; flex-wrap: wrap; margin-top: 48px;"
|
||||
>
|
||||
<n-button
|
||||
icon="md-arrow-round-back"
|
||||
@click="prev"
|
||||
/><n-button
|
||||
icon="md-arrow-round-forward"
|
||||
@click="next"
|
||||
/>
|
||||
<n-button @click="currentStatus='error'">
|
||||
current-status: error
|
||||
</n-button>
|
||||
<n-button @click="currentStatus='process'">
|
||||
current-status: process
|
||||
</n-button>
|
||||
<n-button @click="finishStatus='error'">
|
||||
finish-status: error
|
||||
</n-button>
|
||||
<n-button @click="finishStatus='process'">
|
||||
finish-status: process
|
||||
</n-button>
|
||||
<n-button @click="finishStatus='success'">
|
||||
finish-status: success
|
||||
</n-button>
|
||||
</div>
|
||||
<!--EXAMPLE_END-->
|
||||
</div>
|
||||
|
||||
<n-doc-source-block>
|
||||
<!--SOURCE-->
|
||||
</n-doc-source-block>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
current: null,
|
||||
finishStatus: 'success',
|
||||
currentStatus: 'error'
|
||||
}
|
||||
},
|
||||
beforeDestroy () {
|
||||
},
|
||||
methods: {
|
||||
next () {
|
||||
if (this.current === null) this.current = 0
|
||||
else if (this.current >= 3) this.current = null
|
||||
else this.current++
|
||||
},
|
||||
prev () {
|
||||
if (this.current === 0) this.current = null
|
||||
else if (this.current === null) this.current = 3
|
||||
else this.current--
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -1,99 +0,0 @@
|
||||
<template>
|
||||
<div
|
||||
ref="doc"
|
||||
class="n-doc"
|
||||
>
|
||||
<div class="n-doc-header">
|
||||
<n-gradient-text :font-size="20">
|
||||
Table / n-table
|
||||
</n-gradient-text>
|
||||
</div>
|
||||
<div class="n-doc-body">
|
||||
<div class="n-doc-section">
|
||||
<div class="n-doc-section__header">
|
||||
Basic Usage
|
||||
</div>
|
||||
<div class="n-doc-section__view">
|
||||
<n-table>
|
||||
<n-thead>
|
||||
<n-tr>
|
||||
<n-th>ID</n-th>
|
||||
<n-th>Cluster</n-th>
|
||||
<n-th>Cluster Type</n-th>
|
||||
<n-th>Tags</n-th>
|
||||
<n-th>Network Type</n-th>
|
||||
<n-th>Cluster Status</n-th>
|
||||
<n-th>Nodes</n-th>
|
||||
<n-th>Location</n-th>
|
||||
<n-th>Version</n-th>
|
||||
</n-tr>
|
||||
</n-thead>
|
||||
<n-tbody>
|
||||
<n-tr
|
||||
v-for="i in [1,2,3,4,5]"
|
||||
:key="i"
|
||||
>
|
||||
<n-td>1</n-td>
|
||||
<n-td>Name1</n-td>
|
||||
<n-td>Type1</n-td>
|
||||
<n-td>bla</n-td>
|
||||
<n-td>blablabla</n-td>
|
||||
<n-td>Running</n-td>
|
||||
<n-td>6</n-td>
|
||||
<n-td>Beijing</n-td>
|
||||
<n-td>1.12.6-aliyun.1</n-td>
|
||||
</n-tr>
|
||||
</n-tbody>
|
||||
</n-table>
|
||||
</div>
|
||||
<div class="n-doc-section__source">
|
||||
<textarea><n-table>
|
||||
<n-thead>
|
||||
<n-tr>
|
||||
<n-th>ID</n-th>
|
||||
<n-th>Cluster</n-th>
|
||||
<n-th>Cluster Type</n-th>
|
||||
<n-th>Tags</n-th>
|
||||
<n-th>Network Type</n-th>
|
||||
<n-th>Cluster Status</n-th>
|
||||
<n-th>Nodes</n-th>
|
||||
<n-th>Location</n-th>
|
||||
<n-th>Version</n-th>
|
||||
</n-tr>
|
||||
</n-thead>
|
||||
<n-tbody>
|
||||
<n-tr
|
||||
v-for="i in [1,2,3,4,5]"
|
||||
:key="i"
|
||||
>
|
||||
<n-td>1</n-td>
|
||||
<n-td>Name1</n-td>
|
||||
<n-td>Type1</n-td>
|
||||
<n-td>bla</n-td>
|
||||
<n-td>blablabla</n-td>
|
||||
<n-td>Running</n-td>
|
||||
<n-td>6</n-td>
|
||||
<n-td>Beijing</n-td>
|
||||
<n-td>1.12.6-aliyun.1</n-td>
|
||||
</n-tr>
|
||||
</n-tbody>
|
||||
</n-table></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import docCodeEditorMixin from './docCodeEditorMixin'
|
||||
export default {
|
||||
mixins: [docCodeEditorMixin],
|
||||
data () {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
101
demo/documentation/components/tabs/enUS/basic.md
Normal file
101
demo/documentation/components/tabs/enUS/basic.md
Normal file
@ -0,0 +1,101 @@
|
||||
# Basic
|
||||
```html
|
||||
<n-tabs
|
||||
v-model="name"
|
||||
closable
|
||||
>
|
||||
<n-tab-panel
|
||||
name="a"
|
||||
label="aaaaaaaa"
|
||||
>
|
||||
Name: a. <br>
|
||||
</n-tab-panel>
|
||||
<n-tab-panel
|
||||
name="b"
|
||||
label="bbbbbbbb"
|
||||
>
|
||||
Name: b. <br>
|
||||
We can control the element display by setting the tab's name attribute.<br>
|
||||
Also we can use tab-panel's active attribute to init the display.
|
||||
And tab-panels's active attribute is the first priority.
|
||||
</n-tab-panel>
|
||||
<n-tab-panel
|
||||
name="c"
|
||||
label="cccccccc"
|
||||
>
|
||||
Name: a. <br>
|
||||
</n-tab-panel>
|
||||
<n-tab-panel
|
||||
name="d"
|
||||
label="dddddddd"
|
||||
>
|
||||
Name: b. <br>
|
||||
We can control the element display by setting the tab's name attribute.<br>
|
||||
Also we can use tab-panel's active attribute to init the display.
|
||||
And tab-panels's active attribute is the first priority.
|
||||
</n-tab-panel>
|
||||
<n-tab-panel
|
||||
name="e"
|
||||
label="eeeeeeee"
|
||||
>
|
||||
Name: a. <br>
|
||||
</n-tab-panel>
|
||||
<n-tab-panel
|
||||
name="f"
|
||||
label="ffffffff"
|
||||
>
|
||||
Name: b. <br>
|
||||
We can control the element display by setting the tab's name attribute.<br>
|
||||
Also we can use tab-panel's active attribute to init the display.
|
||||
And tab-panels's active attribute is the first priority.
|
||||
</n-tab-panel>
|
||||
<n-tab-panel
|
||||
name="i"
|
||||
label="iiiiiiii"
|
||||
>
|
||||
Name: a. <br>
|
||||
</n-tab-panel>
|
||||
<n-tab-panel
|
||||
name="f"
|
||||
label="jjjjjjjj"
|
||||
>
|
||||
Name: b. <br>
|
||||
We can control the element display by setting the tab's name attribute.<br>
|
||||
Also we can use tab-panel's active attribute to init the display.
|
||||
And tab-panels's active attribute is the first priority.
|
||||
</n-tab-panel>
|
||||
<n-tab-panel
|
||||
name="g"
|
||||
label="gggggggg"
|
||||
>
|
||||
Name: a. <br>
|
||||
</n-tab-panel>
|
||||
<n-tab-panel
|
||||
name="h"
|
||||
label="hhhhhhhh"
|
||||
>
|
||||
Name: b. <br>
|
||||
We can control the element display by setting the tab's name attribute.<br>
|
||||
Also we can use tab-panel's active attribute to init the display.
|
||||
And tab-panels's active attribute is the first priority.
|
||||
</n-tab-panel>
|
||||
<n-tab-panel
|
||||
disabled
|
||||
label="Disabled"
|
||||
/>
|
||||
</n-tabs>
|
||||
```
|
||||
```js
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
name: 'b'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
updateName () {
|
||||
this.name = this.name === 'a' ? 'b' : 'a'
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
37
demo/documentation/components/tabs/enUS/card.md
Normal file
37
demo/documentation/components/tabs/enUS/card.md
Normal file
@ -0,0 +1,37 @@
|
||||
# Card
|
||||
```html
|
||||
<n-tabs
|
||||
v-model="name"
|
||||
type="card"
|
||||
closable
|
||||
@close="handleClose"
|
||||
>
|
||||
<n-tab-panel
|
||||
v-for="panel in panels"
|
||||
:key="panel"
|
||||
:label="panel.toString()"
|
||||
:name="panel.toString()"
|
||||
>
|
||||
{{ panel }}
|
||||
</n-tab-panel>
|
||||
</n-tabs>
|
||||
```
|
||||
```js
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
panels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15],
|
||||
name: '1'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleClose (name) {
|
||||
this.$NMessage.info('Close ' + name)
|
||||
const index = this.panels.findIndex(v => name === v.toString())
|
||||
if (~index) {
|
||||
this.panels.splice(index, 1)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
5
demo/documentation/components/tabs/enUS/index.md
Normal file
5
demo/documentation/components/tabs/enUS/index.md
Normal file
@ -0,0 +1,5 @@
|
||||
# Tabs
|
||||
```demo
|
||||
basic
|
||||
card
|
||||
```
|
||||
0
demo/documentation/components/tabs/index.entry
Normal file
0
demo/documentation/components/tabs/index.entry
Normal file
0
demo/documentation/components/tabs/zhCN/index.md
Normal file
0
demo/documentation/components/tabs/zhCN/index.md
Normal file
@ -1,117 +0,0 @@
|
||||
<template>
|
||||
<div class="n-doc-section">
|
||||
<div class="n-doc-section__header">
|
||||
Basic Panel
|
||||
</div>
|
||||
<div
|
||||
class="n-doc-section__view"
|
||||
style="flex-wrap: nowrap;"
|
||||
>
|
||||
<!--EXAMPLE_START-->
|
||||
<n-tabs
|
||||
v-model="name"
|
||||
closable
|
||||
>
|
||||
<n-tab-panel
|
||||
name="a"
|
||||
label="aaaaaaaa"
|
||||
>
|
||||
Name: a. <br>
|
||||
</n-tab-panel>
|
||||
<n-tab-panel
|
||||
name="b"
|
||||
label="bbbbbbbb"
|
||||
>
|
||||
Name: b. <br>
|
||||
We can control the element display by setting the tab's name attribute.<br>
|
||||
Also we can use tab-panel's active attribute to init the display.
|
||||
And tab-panels's active attribute is the first priority.
|
||||
</n-tab-panel>
|
||||
<n-tab-panel
|
||||
name="c"
|
||||
label="cccccccc"
|
||||
>
|
||||
Name: a. <br>
|
||||
</n-tab-panel>
|
||||
<n-tab-panel
|
||||
name="d"
|
||||
label="dddddddd"
|
||||
>
|
||||
Name: b. <br>
|
||||
We can control the element display by setting the tab's name attribute.<br>
|
||||
Also we can use tab-panel's active attribute to init the display.
|
||||
And tab-panels's active attribute is the first priority.
|
||||
</n-tab-panel>
|
||||
<n-tab-panel
|
||||
name="e"
|
||||
label="eeeeeeee"
|
||||
>
|
||||
Name: a. <br>
|
||||
</n-tab-panel>
|
||||
<n-tab-panel
|
||||
name="f"
|
||||
label="ffffffff"
|
||||
>
|
||||
Name: b. <br>
|
||||
We can control the element display by setting the tab's name attribute.<br>
|
||||
Also we can use tab-panel's active attribute to init the display.
|
||||
And tab-panels's active attribute is the first priority.
|
||||
</n-tab-panel>
|
||||
<n-tab-panel
|
||||
name="i"
|
||||
label="iiiiiiii"
|
||||
>
|
||||
Name: a. <br>
|
||||
</n-tab-panel>
|
||||
<n-tab-panel
|
||||
name="f"
|
||||
label="jjjjjjjj"
|
||||
>
|
||||
Name: b. <br>
|
||||
We can control the element display by setting the tab's name attribute.<br>
|
||||
Also we can use tab-panel's active attribute to init the display.
|
||||
And tab-panels's active attribute is the first priority.
|
||||
</n-tab-panel>
|
||||
<n-tab-panel
|
||||
name="g"
|
||||
label="gggggggg"
|
||||
>
|
||||
Name: a. <br>
|
||||
</n-tab-panel>
|
||||
<n-tab-panel
|
||||
name="h"
|
||||
label="hhhhhhhh"
|
||||
>
|
||||
Name: b. <br>
|
||||
We can control the element display by setting the tab's name attribute.<br>
|
||||
Also we can use tab-panel's active attribute to init the display.
|
||||
And tab-panels's active attribute is the first priority.
|
||||
</n-tab-panel>
|
||||
<n-tab-panel
|
||||
disabled
|
||||
label="Disabled"
|
||||
/>
|
||||
</n-tabs>
|
||||
<!--EXAMPLE_END-->
|
||||
</div>
|
||||
<pre class="n-doc-section__inspect">name: {{ name }}</pre>
|
||||
<n-doc-source-block>
|
||||
<!--SOURCE-->
|
||||
</n-doc-source-block>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
name: 'b'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
updateName () {
|
||||
this.name = this.name === 'a' ? 'b' : 'a'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -1,52 +0,0 @@
|
||||
<template>
|
||||
<div class="n-doc-section">
|
||||
<div class="n-doc-section__header">
|
||||
Card
|
||||
</div>
|
||||
<div
|
||||
class="n-doc-section__view"
|
||||
>
|
||||
<!--EXAMPLE_START-->
|
||||
<n-tabs
|
||||
v-model="name"
|
||||
type="card"
|
||||
closable
|
||||
@close="handleClose"
|
||||
>
|
||||
<n-tab-panel
|
||||
v-for="panel in panels"
|
||||
:key="panel"
|
||||
:label="panel.toString()"
|
||||
:name="panel.toString()"
|
||||
>
|
||||
{{ panel }}
|
||||
</n-tab-panel>
|
||||
</n-tabs>
|
||||
<!--EXAMPLE_END-->
|
||||
</div>
|
||||
<pre class="n-doc-section__inspect">Inspect some value here</pre>
|
||||
<n-doc-source-block>
|
||||
<!--SOURCE-->
|
||||
</n-doc-source-block>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
panels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15],
|
||||
name: '1'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleClose (name) {
|
||||
this.$NMessage.info('Close ' + name)
|
||||
const index = this.panels.findIndex(v => name === v.toString())
|
||||
if (~index) {
|
||||
this.panels.splice(index, 1)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -1,35 +0,0 @@
|
||||
<template>
|
||||
<div
|
||||
ref="doc"
|
||||
class="n-doc"
|
||||
>
|
||||
<div class="n-doc-header">
|
||||
<n-gradient-text :font-size="20">
|
||||
Tabs / n-tabs
|
||||
</n-gradient-text>
|
||||
</div>
|
||||
<div class="n-doc-body">
|
||||
<basic />
|
||||
<card />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import basic from './basic.demo.vue'
|
||||
import card from './card.demo.vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
basic,
|
||||
card
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
15
demo/documentation/components/time/enUS/basic.md
Normal file
15
demo/documentation/components/time/enUS/basic.md
Normal file
@ -0,0 +1,15 @@
|
||||
# Basic
|
||||
```html
|
||||
<n-time :time="0"/>
|
||||
<br>
|
||||
<n-time :time="time"/>
|
||||
```
|
||||
```js
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
time: new Date(0)
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
8
demo/documentation/components/time/enUS/format.md
Normal file
8
demo/documentation/components/time/enUS/format.md
Normal file
@ -0,0 +1,8 @@
|
||||
# Format
|
||||
```html
|
||||
<n-time :time="0" format="yyyy-MM-dd"/>
|
||||
<br>
|
||||
<n-time :time="0" format="yyyy-MM-dd hh:mm"/>
|
||||
<br>
|
||||
<n-time :time="0" format="yyyy-MM-dd hh:mm:ss"/>
|
||||
```
|
||||
7
demo/documentation/components/time/enUS/index.md
Normal file
7
demo/documentation/components/time/enUS/index.md
Normal file
@ -0,0 +1,7 @@
|
||||
# Time
|
||||
```demo
|
||||
basic
|
||||
type
|
||||
format
|
||||
relative
|
||||
```
|
||||
8
demo/documentation/components/time/enUS/relative.md
Normal file
8
demo/documentation/components/time/enUS/relative.md
Normal file
@ -0,0 +1,8 @@
|
||||
# Relative
|
||||
```html
|
||||
<n-time :time="0" :to="86400000"/>
|
||||
<br>
|
||||
<n-time :time="0" :to="864000000"/>
|
||||
<br>
|
||||
<n-time :time="0" :to="8640000000"/>
|
||||
```
|
||||
15
demo/documentation/components/time/enUS/type.md
Normal file
15
demo/documentation/components/time/enUS/type.md
Normal file
@ -0,0 +1,15 @@
|
||||
# Type
|
||||
```html
|
||||
<n-time :time="0" type="date"/>
|
||||
<br>
|
||||
<n-time :time="time" type="datetime"/>
|
||||
```
|
||||
```js
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
time: new Date(0)
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
0
demo/documentation/components/time/index.entry
Normal file
0
demo/documentation/components/time/index.entry
Normal file
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user