mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2025-04-12 14:40:47 +08:00
merge from upstream
This commit is contained in:
songwanli2025@163.com
parent
d9189e7361
commit
4f90dd3b05
@ -11,6 +11,7 @@ const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPl
|
||||
|
||||
const webpackConfig = {
|
||||
mode: 'production',
|
||||
// mode: 'development',
|
||||
entry: './demo/privateIndex.js',
|
||||
output: {
|
||||
path: path.resolve(__dirname, '..', 'doc', 'dist'),
|
||||
|
||||
64
demo/debugComponents/iconTransitionDebug.vue
Normal file
64
demo/debugComponents/iconTransitionDebug.vue
Normal file
@ -0,0 +1,64 @@
|
||||
<template>
|
||||
<div
|
||||
ref="doc"
|
||||
class="n-doc"
|
||||
style="padding: 150px;"
|
||||
>
|
||||
<n-button @click="show = !show">
|
||||
show
|
||||
</n-button>
|
||||
<n-button @click="i = 0">
|
||||
cash
|
||||
</n-button>
|
||||
<n-button @click="i = 1">
|
||||
contacts
|
||||
</n-button>
|
||||
<n-button @click="i = 2">
|
||||
contacts2
|
||||
</n-button>
|
||||
<div style="position: relative;">
|
||||
<n-base-icon-transition v-if="show">
|
||||
<n-icon
|
||||
v-if="i === 0"
|
||||
:size="60"
|
||||
:themed-style="{
|
||||
dark: {
|
||||
fill: 'white'
|
||||
},
|
||||
light: {
|
||||
fill: 'black'
|
||||
}
|
||||
}"
|
||||
>
|
||||
<md-cash />
|
||||
</n-icon>
|
||||
<n-icon v-else-if="i === 1" :size="60">
|
||||
<md-contacts />
|
||||
</n-icon>
|
||||
<span v-else-if="i === 2" style="display: inline-block;">
|
||||
123
|
||||
</span>
|
||||
</n-base-icon-transition>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import mdCash from 'naive-ui/lib/icons/md-cash'
|
||||
import mdContacts from 'naive-ui/lib/icons/md-contacts'
|
||||
import iosContacts from 'naive-ui/lib/icons/ios-contacts'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
mdCash,
|
||||
mdContacts,
|
||||
iosContacts
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
i: 0,
|
||||
show: false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -1,13 +1,6 @@
|
||||
<template>
|
||||
<n-config-provider
|
||||
class="demo"
|
||||
namespace="naive-ui-doc"
|
||||
:theme="theme"
|
||||
>
|
||||
<n-nimbus-service-layout
|
||||
:padding-body="false"
|
||||
:items="items"
|
||||
>
|
||||
<n-config-provider class="demo" namespace="naive-ui-doc" :theme="theme">
|
||||
<n-nimbus-service-layout :padding-body="false" :items="items">
|
||||
<template v-slot:nav>
|
||||
<doc-header
|
||||
:lang="lang"
|
||||
@ -53,8 +46,8 @@ export default {
|
||||
path: `/${this.lang}/${this.theme}` + '/dev-guildlines'
|
||||
},
|
||||
{
|
||||
name: 'Develop Status',
|
||||
path: `/${this.lang}/${this.theme}` + '/status'
|
||||
name: 'Create Themed Component',
|
||||
path: `/${this.lang}/${this.theme}` + '/n-theme'
|
||||
},
|
||||
{
|
||||
name: 'Nimbus Components',
|
||||
@ -76,6 +69,10 @@ export default {
|
||||
{
|
||||
name: 'Config Consumer',
|
||||
path: `/${this.lang}/${this.theme}` + '/n-config-consumer'
|
||||
},
|
||||
{
|
||||
name: 'Element',
|
||||
path: `/${this.lang}/${this.theme}` + '/n-element'
|
||||
}
|
||||
]
|
||||
},
|
||||
@ -137,7 +134,7 @@ export default {
|
||||
name: 'Data Input Components',
|
||||
childItems: [
|
||||
{
|
||||
name: 'Auto Complete (in progress)',
|
||||
name: 'Auto Complete',
|
||||
path: `/${this.lang}/${this.theme}` + '/n-auto-complete'
|
||||
},
|
||||
{
|
||||
@ -198,8 +195,12 @@ export default {
|
||||
name: 'Data Display Components',
|
||||
childItems: [
|
||||
{
|
||||
name: 'Advanced Table (in progress)',
|
||||
path: `/${this.lang}/${this.theme}` + '/n-advance-table'
|
||||
name: 'Table',
|
||||
path: `/${this.lang}/${this.theme}` + '/n-table'
|
||||
},
|
||||
{
|
||||
name: 'Code',
|
||||
path: `/${this.lang}/${this.theme}` + '/n-code'
|
||||
},
|
||||
{
|
||||
name: 'Descriptions',
|
||||
@ -213,6 +214,10 @@ export default {
|
||||
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'
|
||||
@ -379,6 +384,10 @@ export default {
|
||||
{
|
||||
name: 'VerticalAlignDebug',
|
||||
path: `/${this.lang}/${this.theme}` + '/n-vertical-align-debug'
|
||||
},
|
||||
{
|
||||
name: 'IconTransitionDebug',
|
||||
path: `/${this.lang}/${this.theme}` + '/n-icon-transition-debug'
|
||||
}
|
||||
]
|
||||
}
|
||||
@ -402,10 +411,7 @@ export default {
|
||||
return this.$route.params.lang || 'en-us'
|
||||
},
|
||||
set (lang) {
|
||||
this.$router.push(changeLangInPath(
|
||||
this.$route.fullPath,
|
||||
lang
|
||||
))
|
||||
this.$router.push(changeLangInPath(this.$route.fullPath, lang))
|
||||
}
|
||||
},
|
||||
theme: {
|
||||
@ -413,10 +419,7 @@ export default {
|
||||
return this.$route.params.theme === 'light' ? 'light' : 'dark'
|
||||
},
|
||||
set (theme) {
|
||||
this.$router.push(changeThemeInPath(
|
||||
this.$route.fullPath,
|
||||
theme
|
||||
))
|
||||
this.$router.push(changeThemeInPath(this.$route.fullPath, theme))
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
@ -1,259 +0,0 @@
|
||||
<!--
|
||||
* @Author: Volankey@gmail.com
|
||||
* @Company: Tusimple
|
||||
* @Date: 2019-10-24 16:04:28
|
||||
* @LastEditors: Jiwen.bai
|
||||
* @LastEditTime: 2019-10-24 16:04:29
|
||||
-->
|
||||
|
||||
# Basic
|
||||
|
||||
```html
|
||||
<n-advance-table
|
||||
ref="table"
|
||||
:row-class-name="computeRowcls"
|
||||
:columns="columns"
|
||||
:data="data"
|
||||
max-height="300px"
|
||||
:search="search"
|
||||
:pagination="{total:data.length,limit:10}"
|
||||
@on-change="onChange"
|
||||
@on-selected-change="onSelectedChange"
|
||||
>
|
||||
<div slot="table-operation-batch-left" style="padding-left:27px;">
|
||||
<n-icon
|
||||
v-show="selectedRow.length"
|
||||
color="rgba(255,255,255,.7)"
|
||||
type="md-trash"
|
||||
size="24"
|
||||
title="delete all"
|
||||
style="cursor:pointer;"
|
||||
@click="batchDelete"
|
||||
/>
|
||||
<n-button
|
||||
v-show="selectedRow.length"
|
||||
color="rgba(255,255,255,.7)"
|
||||
size="small"
|
||||
@click="clearSelect"
|
||||
>
|
||||
clear select
|
||||
</n-button>
|
||||
</div>
|
||||
</n-advance-table>
|
||||
```
|
||||
|
||||
```js
|
||||
const items = [
|
||||
{
|
||||
label: 'greater than 15',
|
||||
value: 15
|
||||
},
|
||||
{
|
||||
label: 'less then 14',
|
||||
value: 14
|
||||
}
|
||||
]
|
||||
const sex = [
|
||||
{
|
||||
label: 'male',
|
||||
value: 'male'
|
||||
},
|
||||
{
|
||||
label: 'female',
|
||||
value: 'female'
|
||||
}
|
||||
]
|
||||
const _columns3 = $this => {
|
||||
return [
|
||||
{
|
||||
type: 'selection'
|
||||
// disabled (params, index) {
|
||||
// return params.row.age < 8
|
||||
// }
|
||||
},
|
||||
{
|
||||
title: 'Name',
|
||||
key: 'name',
|
||||
sortable: true,
|
||||
width: 300,
|
||||
renderHeader(h, column) {
|
||||
return <n-tag>{column.title}</n-tag>
|
||||
}
|
||||
},
|
||||
{
|
||||
title: 'Age',
|
||||
key: 'age',
|
||||
sortable: true,
|
||||
sorter(a, b) {
|
||||
return a.age - b.age
|
||||
},
|
||||
// filterMultiple: true,
|
||||
filterItems: items,
|
||||
onFilter: (value, record) => {
|
||||
// value 为选中值, 请注意,value为了和过去版本兼容,无论单选或者多选都会返回一个数组,在未来的大版本更新中将会区分单选多选返回单值或数组
|
||||
switch (value[0]) {
|
||||
case 15:
|
||||
return record.age > 15
|
||||
case 14:
|
||||
return record.age < 14
|
||||
}
|
||||
},
|
||||
render: (h, params) => {
|
||||
return <b>{params.row.age}</b>
|
||||
}
|
||||
},
|
||||
{
|
||||
title: 'Sex',
|
||||
key: 'sex',
|
||||
onFilter: (values, record) => {
|
||||
return values.includes(record.sex)
|
||||
},
|
||||
filterMultiple: true,
|
||||
asyncFilterItems() {
|
||||
return new Promise((resolve, reject) => {
|
||||
setTimeout(() => {
|
||||
Math.random() > 0.6
|
||||
? resolve(sex)
|
||||
: reject(new Error('network error'))
|
||||
}, 1000)
|
||||
})
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '#',
|
||||
render: (h, params) => {
|
||||
return (
|
||||
<n-button
|
||||
style="margin:0;"
|
||||
size="small"
|
||||
onClick={() => $this.handleDelete(params)}
|
||||
>
|
||||
delete
|
||||
</n-button>
|
||||
)
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
export default {
|
||||
components: {},
|
||||
data() {
|
||||
const columns = _columns3(this)
|
||||
|
||||
return {
|
||||
selectedRow: [],
|
||||
columns,
|
||||
data: [],
|
||||
query: {},
|
||||
search: {
|
||||
// 如果你不传入search.column,那么搜索框左侧的搜索选项不会显示
|
||||
columns: [
|
||||
{ label: 'Name', value: 'name' },
|
||||
{ label: 'Age', value: 'age' }
|
||||
],
|
||||
onSearch: (key, word, record) => {
|
||||
switch (key) {
|
||||
case 'age':
|
||||
return record['age'] === +word
|
||||
case 'name':
|
||||
return record['name'].includes(word)
|
||||
}
|
||||
},
|
||||
placeholder: 'search in local data'
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.data = this.getData()
|
||||
// data一定要先有值才可以再selectRow
|
||||
this.$refs.table.selectRow([1, 2, 5])
|
||||
// this.$refs.table.selectRow('all') // 可以全选当前展示数据
|
||||
},
|
||||
methods: {
|
||||
clearSelect() {
|
||||
this.$refs.table.clearSelect()
|
||||
},
|
||||
batchDelete() {
|
||||
this.selectedRow.forEach(item => {
|
||||
let index = item._index
|
||||
this.data[index] = null
|
||||
})
|
||||
this.data = this.data.filter(item => item !== null)
|
||||
},
|
||||
computeRowcls(params) {
|
||||
if (params.row.age > 15) {
|
||||
return 'age-too-old'
|
||||
}
|
||||
return ''
|
||||
},
|
||||
handleDelete(params) {
|
||||
let index = params._index
|
||||
this.data.splice(index, 1)
|
||||
this.$NMessage.success('Delete successfully,', { duration: 2000 })
|
||||
this.$NMessage.warning('Data change,selected will be clear!', {
|
||||
duration: 4000
|
||||
})
|
||||
},
|
||||
getData(args) {
|
||||
let d = new Array(20).fill(0)
|
||||
d = d.map((item, idx) => {
|
||||
return {
|
||||
name: 'xiaobai' + idx,
|
||||
age: Math.ceil(Math.random() * 20),
|
||||
sex: Math.random() > 0.5 ? 'male' : 'female'
|
||||
}
|
||||
})
|
||||
return d
|
||||
},
|
||||
onSelectedChange(selectedRow) {
|
||||
console.log(selectedRow)
|
||||
this.selectedRow = selectedRow
|
||||
},
|
||||
onChange(args) {
|
||||
/**
|
||||
* "filter": {
|
||||
"age": {
|
||||
"value": [
|
||||
15
|
||||
]
|
||||
}
|
||||
},
|
||||
"sorter": {
|
||||
"sortable": "custom",
|
||||
"key": "age",
|
||||
"type": -1,
|
||||
"column": {
|
||||
"title": "Age",
|
||||
"key": "age",
|
||||
"sortable": "custom",
|
||||
"onFilter": "custom"
|
||||
},
|
||||
"i": 1
|
||||
},
|
||||
"pagination": {
|
||||
"currentPage": 1,
|
||||
"total": 20,
|
||||
"limit": 10,
|
||||
"custom": true
|
||||
},
|
||||
"search": {
|
||||
"key": "name",
|
||||
"word": "xiaobai"
|
||||
}
|
||||
}
|
||||
*/
|
||||
},
|
||||
clear() {
|
||||
// 清除所有的Filter选项,会触发onchange事件
|
||||
this.$refs.table.setParams({})
|
||||
this.$NMessage.info('clear all filters', { duration: 5000 })
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```css
|
||||
.age-too-old {
|
||||
color: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
```
|
||||
@ -1,195 +0,0 @@
|
||||
# Column
|
||||
```html
|
||||
<n-advance-table
|
||||
:columns="columns"
|
||||
:data="data"
|
||||
/>
|
||||
```
|
||||
```js
|
||||
const _columns3 = ($this) => {
|
||||
return [
|
||||
{
|
||||
title: '属性',
|
||||
key: 'name',
|
||||
width: 180
|
||||
|
||||
},
|
||||
{
|
||||
title: '说明',
|
||||
key: 'desc',
|
||||
width: 500,
|
||||
render (h, params) {
|
||||
return <pre class="n-table-props-desc">
|
||||
{params.row.desc}
|
||||
</pre>
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '类型',
|
||||
key: 'type',
|
||||
width: 200
|
||||
|
||||
},
|
||||
{
|
||||
title: '默认值',
|
||||
key: 'default',
|
||||
width: 100,
|
||||
render (h, params) {
|
||||
return <pre class="n-table-props-desc">
|
||||
{params.row.default}
|
||||
</pre>
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
const data = [
|
||||
{
|
||||
name: 'title',
|
||||
desc: '列头显示文字',
|
||||
type: 'String',
|
||||
default: ``
|
||||
},
|
||||
{
|
||||
name: 'key',
|
||||
desc: '对应列内容的字段名',
|
||||
type: 'String',
|
||||
default: ``
|
||||
},
|
||||
{
|
||||
name: 'width',
|
||||
desc: '列宽',
|
||||
type: 'Number',
|
||||
default: ''
|
||||
},
|
||||
{
|
||||
name: 'align',
|
||||
desc: `对齐方式，可选值为 left 左对齐、right 右对齐和 center 居中对齐`,
|
||||
type: 'String',
|
||||
default: ``
|
||||
},
|
||||
{
|
||||
name: 'className',
|
||||
desc: `列的样式名称
|
||||
传入函数可以根据行数据进行判断返回相应的classname
|
||||
(params)=>{return 'classname'}
|
||||
-----
|
||||
传入字符串将会所有的都设置同样的classname
|
||||
`,
|
||||
type: 'Function | String',
|
||||
default: ``
|
||||
},
|
||||
{
|
||||
name: 'sortable',
|
||||
desc: '当前列是否排序,sortable===custom 触发on-change进行远程排序,sortable==true使用本地排序,',
|
||||
type: 'String, Boolean',
|
||||
default: `false`
|
||||
},
|
||||
{
|
||||
name: 'sorter',
|
||||
desc: `
|
||||
本地排序的自定义排序函数,若没有将使用默认的字符串比较排序
|
||||
example:
|
||||
// a,b为rowData
|
||||
(a, b) => {
|
||||
return a.age - b.age;
|
||||
},
|
||||
`,
|
||||
type: 'Function',
|
||||
default: ``
|
||||
},
|
||||
{
|
||||
name: 'ellipsis',
|
||||
desc: '文本不换行,超出部分显示省略号',
|
||||
type: 'Boolean',
|
||||
default: `false`
|
||||
},
|
||||
{
|
||||
name: 'render',
|
||||
desc: '自定义渲染列，使用 Vue 的 Render 函数。传入两个参数，第一个是 h，第二个为对象，包含 row,_index,包含行数据,数据的索引',
|
||||
type: 'number | string',
|
||||
default: `auto`
|
||||
},
|
||||
{
|
||||
name: 'onFilter',
|
||||
desc: `过滤筛选 onFilter===custom 触发on-change进行远程排序,onFilter==function使用本地排序
|
||||
example:
|
||||
// value为选中的值,record为行数据
|
||||
(value, record) => {
|
||||
// value 为选中值, 请注意,value为了和过去版本兼容,无论单选或者多选都会返回一个数组,在未来的大版本更新中将会区分单选多选返回单值或数组
|
||||
switch (value[0]) {
|
||||
case 15:
|
||||
return record.age > 15;
|
||||
case 14:
|
||||
return record.age < 14;
|
||||
}
|
||||
}`,
|
||||
type: 'Function | String',
|
||||
default: ``
|
||||
},
|
||||
{
|
||||
name: 'filterItems',
|
||||
desc: `过滤的选项列表 与onFilter一起使用,否则无效
|
||||
example:
|
||||
[
|
||||
{
|
||||
label:'age 15',
|
||||
value: '15'
|
||||
},
|
||||
{
|
||||
label:'age 14',
|
||||
value: '14'
|
||||
}
|
||||
]
|
||||
`,
|
||||
type: 'Array',
|
||||
default: ``
|
||||
},
|
||||
{
|
||||
name: 'filterMultiple',
|
||||
desc: `是否开启多选过滤`,
|
||||
type: 'Boolean',
|
||||
default: `false`
|
||||
},
|
||||
{
|
||||
name: 'asyncFilterItems',
|
||||
desc: `异步获取过滤的选项列表 与onFilter一起使用,否则无效,
|
||||
example:
|
||||
注意: 此函数需要返回如下格式:
|
||||
[
|
||||
{
|
||||
label:'age 15',
|
||||
value: '15'
|
||||
},
|
||||
{
|
||||
label:'age 14',
|
||||
value: '14'
|
||||
}
|
||||
]
|
||||
|
||||
asyncFilterItems() {
|
||||
return fetch('/filteritems')
|
||||
}
|
||||
`,
|
||||
type: 'async Function',
|
||||
default: ``
|
||||
}
|
||||
|
||||
]
|
||||
export default {
|
||||
components: {
|
||||
},
|
||||
data () {
|
||||
const columns = _columns3(this)
|
||||
|
||||
return {
|
||||
columns,
|
||||
data
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
```css
|
||||
.n-table-props-desc {
|
||||
white-space:pre-wrap;
|
||||
}
|
||||
```
|
||||
@ -1,182 +0,0 @@
|
||||
<!--
|
||||
* @Author: Volankey@gmail.com
|
||||
* @Company: Tusimple
|
||||
* @Date: 2019-10-24 16:36:44
|
||||
* @LastEditors: Jiwen.bai
|
||||
* @LastEditTime: 2019-10-24 16:37:22
|
||||
-->
|
||||
|
||||
# Event
|
||||
|
||||
```html
|
||||
<n-advance-table :columns="columns" :data="data" />
|
||||
```
|
||||
|
||||
```js
|
||||
const _columns3 = $this => {
|
||||
return [
|
||||
{
|
||||
title: '名称',
|
||||
key: 'name'
|
||||
},
|
||||
{
|
||||
title: '说明',
|
||||
key: 'desc'
|
||||
},
|
||||
{
|
||||
title: '返回值',
|
||||
key: 'returns',
|
||||
render(h, params) {
|
||||
const arr = params.row.returns.map(item => {
|
||||
return (
|
||||
<li>
|
||||
{item.name} <pre>{item.desc}</pre>
|
||||
</li>
|
||||
)
|
||||
})
|
||||
return <ul>{arr}</ul>
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
const data = [
|
||||
{
|
||||
name: 'on-change',
|
||||
desc:
|
||||
'远程事件触发(排序,搜索,分页,过滤等 custom=true的条件下),可在这里调用获取data数据,改变data',
|
||||
returns: [
|
||||
{
|
||||
name: 'filtersData',
|
||||
desc: `
|
||||
example:
|
||||
{
|
||||
"filter": {
|
||||
"age": {
|
||||
"value": [
|
||||
15
|
||||
]
|
||||
}
|
||||
},
|
||||
"sorter": {
|
||||
"sortable": "custom",
|
||||
"key": "age",
|
||||
"type": -1,
|
||||
"column": {
|
||||
"title": "Age",
|
||||
"key": "age",
|
||||
"sortable": "custom",
|
||||
"onFilter": "custom"
|
||||
},
|
||||
"i": 1
|
||||
},
|
||||
"pagination": {
|
||||
"currentPage": 1,
|
||||
"total": 20,
|
||||
"limit": 10,
|
||||
"custom": true
|
||||
},
|
||||
"search": {
|
||||
"key": "name",
|
||||
"word": "xiaobai"
|
||||
}
|
||||
}`
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'on-page-change',
|
||||
desc: '页码发生改变触发',
|
||||
returns: [
|
||||
{
|
||||
name: 'paginationer',
|
||||
desc: `
|
||||
{
|
||||
"currentPage": ,
|
||||
"total": ,
|
||||
"limit": ,
|
||||
"custom":
|
||||
},`
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'on-filter-change',
|
||||
desc: '过滤数据发生改变触发',
|
||||
returns: [
|
||||
{
|
||||
name: 'filter',
|
||||
desc: `
|
||||
example:
|
||||
{
|
||||
"age": {
|
||||
"value": [
|
||||
15,14
|
||||
]
|
||||
}
|
||||
}`
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'on-selected-change',
|
||||
desc: 'checkbox选中项发生改变',
|
||||
returns: [
|
||||
{
|
||||
name: '选中的行数据,数组'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'on-sort-change',
|
||||
desc: '排序数据发生改变触发',
|
||||
returns: [
|
||||
{
|
||||
name: 'sorter',
|
||||
desc: `
|
||||
example:
|
||||
{
|
||||
"sortable": "custom",
|
||||
"key": "age",
|
||||
"type": -1,
|
||||
"column": {
|
||||
"title": "Age",
|
||||
"key": "age",
|
||||
"sortable": "custom",
|
||||
"onFilter": "custom"
|
||||
},
|
||||
"i": 1
|
||||
}
|
||||
`
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
export default {
|
||||
components: {},
|
||||
data() {
|
||||
const columns = _columns3(this)
|
||||
|
||||
return {
|
||||
columns,
|
||||
data,
|
||||
query: {},
|
||||
search: {
|
||||
// 如果你不传入search.column,那么搜索框左侧的搜索选项不会显示
|
||||
columns: [
|
||||
{ label: 'Name', value: 'name' },
|
||||
{ label: 'Age', value: 'age' }
|
||||
],
|
||||
onSearch: (key, word, record) => {
|
||||
switch (key) {
|
||||
case 'age':
|
||||
return record['age'] === +word
|
||||
case 'name':
|
||||
return record['name'].includes(word)
|
||||
}
|
||||
},
|
||||
placeholder: 'search in local data'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
@ -1,11 +0,0 @@
|
||||
# Advanced Table
|
||||
<!--single-column-->
|
||||
```demo
|
||||
basic
|
||||
column
|
||||
event
|
||||
senior-usage
|
||||
slot-usage
|
||||
table-methods
|
||||
table-props
|
||||
```
|
||||
@ -1,209 +0,0 @@
|
||||
# Senior Usage
|
||||
```html
|
||||
<n-advance-table
|
||||
ref="table"
|
||||
:loading="loading"
|
||||
:columns="columns"
|
||||
:data="data"
|
||||
max-height="300px"
|
||||
:search="search"
|
||||
:pagination="{total:data.length,limit:10,custom:true}"
|
||||
@on-change="onChange"
|
||||
>
|
||||
<div slot="table-operation-batch-left">
|
||||
<n-button
|
||||
size="small"
|
||||
@click="clear"
|
||||
>
|
||||
clear all filters
|
||||
</n-button>
|
||||
</div>
|
||||
</n-advance-table>
|
||||
<h1>Network params</h1>
|
||||
<pre>{{ query }}</pre>
|
||||
```
|
||||
```js
|
||||
const items = [
|
||||
{
|
||||
label: 'age 15 asdsadsadsadsad',
|
||||
value: 15
|
||||
},
|
||||
{
|
||||
label: 'age 14',
|
||||
value: 14
|
||||
},
|
||||
{
|
||||
label: 'age 13',
|
||||
value: 13
|
||||
},
|
||||
{
|
||||
label: 'age 12',
|
||||
value: 12
|
||||
},
|
||||
{
|
||||
label: 'age 11',
|
||||
value: 11
|
||||
}
|
||||
]
|
||||
const sex = [
|
||||
{
|
||||
label: 'male',
|
||||
value: 'male'
|
||||
},
|
||||
{
|
||||
label: 'female',
|
||||
value: 'female'
|
||||
}
|
||||
]
|
||||
const _columns3 = ($this) => {
|
||||
return [
|
||||
{
|
||||
title: 'Name',
|
||||
key: 'name',
|
||||
sortable: 'custom',
|
||||
onFilter: (value, record) => {
|
||||
return value.includes(record.name + '')
|
||||
}
|
||||
},
|
||||
{
|
||||
title: 'Age',
|
||||
key: 'age',
|
||||
sortable: true,
|
||||
sorter (a, b) {
|
||||
return a.age - b.age
|
||||
},
|
||||
// filterMultiple: true,
|
||||
asyncFilterItems () {
|
||||
return new Promise((resolve, reject) => {
|
||||
setTimeout(() => {
|
||||
// 模拟概率发生错误
|
||||
Math.random() > 0.6
|
||||
? resolve(items)
|
||||
: reject(new Error('network error'))
|
||||
}, 1000)
|
||||
})
|
||||
},
|
||||
onFilter: 'custom',
|
||||
render: (h, params) => {
|
||||
return <b>{params.row.age}</b>
|
||||
}
|
||||
},
|
||||
{
|
||||
title: 'Sex',
|
||||
key: 'sex',
|
||||
onFilter: (values, record) => {
|
||||
return values.includes(record.sex)
|
||||
},
|
||||
filterMultiple: true,
|
||||
asyncFilterItems () {
|
||||
return new Promise((resolve, reject) => {
|
||||
setTimeout(() => {
|
||||
Math.random() > 0.6
|
||||
? resolve(sex)
|
||||
: reject(new Error('network error'))
|
||||
}, 1000)
|
||||
})
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '#',
|
||||
render: (h, params) => {
|
||||
return (
|
||||
<n-button
|
||||
style="margin:0;"
|
||||
size="small"
|
||||
onClick={() => this.handleClick(params)}
|
||||
>
|
||||
delete
|
||||
</n-button>
|
||||
)
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
export default {
|
||||
components: {},
|
||||
data () {
|
||||
const columns = _columns3(this)
|
||||
return {
|
||||
loading: false,
|
||||
data: [],
|
||||
query: {},
|
||||
columns,
|
||||
search: {
|
||||
columns: [
|
||||
{ label: 'Name', value: 'name' },
|
||||
{ label: 'Age', value: 'age' }
|
||||
],
|
||||
onSearch: 'custom',
|
||||
placeholder: 'search from net'
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.$refs.table.setParams({
|
||||
filter: { age: [15] },
|
||||
sorter: { key: 'age', type: -1 },
|
||||
searcher: { key: 'name', value: 'xiaobai' }
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
getData (args) {
|
||||
this.loading = true
|
||||
setTimeout(() => {
|
||||
let d = new Array(20).fill(0)
|
||||
d = d.map((item, idx) => {
|
||||
return {
|
||||
name: 'xiaobai213213132123213111121' + idx,
|
||||
age: Math.ceil(Math.random() * 20),
|
||||
sex: Math.random() > 0.5 ? 'male' : 'female'
|
||||
}
|
||||
})
|
||||
this.data = d
|
||||
this.loading = false
|
||||
}, 3000)
|
||||
},
|
||||
onChange (args) {
|
||||
this.query = args
|
||||
/**
|
||||
* "filter": {
|
||||
"age": {
|
||||
"value": [
|
||||
15
|
||||
]
|
||||
}
|
||||
},
|
||||
"sorter": {
|
||||
"sortable": "custom",
|
||||
"key": "age",
|
||||
"type": -1,
|
||||
"column": {
|
||||
"title": "Age",
|
||||
"key": "age",
|
||||
"sortable": "custom",
|
||||
"onFilter": "custom"
|
||||
},
|
||||
"i": 1
|
||||
},
|
||||
"pagination": {
|
||||
"currentPage": 1,
|
||||
"total": 20,
|
||||
"limit": 10,
|
||||
"custom": true
|
||||
},
|
||||
"search": {
|
||||
"key": "name",
|
||||
"word": "xiaobai"
|
||||
}
|
||||
}
|
||||
*/
|
||||
this.getData(args)
|
||||
},
|
||||
clear () {
|
||||
// 清除所有的Filter选项,会触发onchange事件
|
||||
this.$refs.table.setParams({})
|
||||
this.$NMessage.info('clear all filters', { duration: 5000 })
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
@ -1,217 +0,0 @@
|
||||
# Slot Usage
|
||||
```html
|
||||
<n-advance-table
|
||||
:columns="columns"
|
||||
:data="data"
|
||||
max-height="300px"
|
||||
:search="search"
|
||||
:pagination="{total:data.length,limit:10}"
|
||||
@on-change="onChange"
|
||||
>
|
||||
<div
|
||||
slot="table-operation-batch-left"
|
||||
style="display:inline-block;"
|
||||
>
|
||||
<div style="width:100px;">
|
||||
table-operation-batch-left
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
slot="table-operation-batch-right"
|
||||
style="display:inline-block;"
|
||||
>
|
||||
<div style="width:100px;display:inline-block;">
|
||||
table-operation-batch-right
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
slot="table-operation"
|
||||
style="display:inline-block;"
|
||||
>
|
||||
<div style="width:100px;display:inline-block;">
|
||||
table-operation
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
slot="table-operation-search-right"
|
||||
style="display:inline-block;"
|
||||
>
|
||||
<div style="width:100px;display:inline-block;">
|
||||
table-operation-search-right
|
||||
</div>
|
||||
</div>
|
||||
</n-advance-table>
|
||||
```
|
||||
```js
|
||||
const items = [
|
||||
{
|
||||
label: 'greater than 15',
|
||||
value: 15
|
||||
},
|
||||
{
|
||||
label: 'less then 14',
|
||||
value: 14
|
||||
}
|
||||
]
|
||||
const sex = [
|
||||
{
|
||||
label: 'male',
|
||||
value: 'male'
|
||||
},
|
||||
{
|
||||
label: 'female',
|
||||
value: 'female'
|
||||
}
|
||||
]
|
||||
const _columns3 = ($this) => {
|
||||
return [
|
||||
{
|
||||
title: 'Name',
|
||||
key: 'name',
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
title: 'Age',
|
||||
key: 'age',
|
||||
sortable: true,
|
||||
sorter (a, b) {
|
||||
return a.age - b.age
|
||||
},
|
||||
// filterMultiple: true,
|
||||
filterItems: items,
|
||||
onFilter: (value, record) => {
|
||||
// value 为选中值, 请注意,value为了和过去版本兼容,无论单选或者多选都会返回一个数组,在未来的大版本更新中将会区分单选多选返回单值或数组
|
||||
switch (value[0]) {
|
||||
case 15:
|
||||
return record.age > 15
|
||||
case 14:
|
||||
return record.age < 14
|
||||
}
|
||||
},
|
||||
render: (h, params) => {
|
||||
return <b>{params.row.age}</b>
|
||||
}
|
||||
},
|
||||
{
|
||||
title: 'Sex',
|
||||
key: 'sex',
|
||||
onFilter: (values, record) => {
|
||||
return values.includes(record.sex)
|
||||
},
|
||||
filterMultiple: true,
|
||||
asyncFilterItems () {
|
||||
return new Promise((resolve, reject) => {
|
||||
setTimeout(() => {
|
||||
Math.random() > 0.6
|
||||
? resolve(sex)
|
||||
: reject(new Error('network error'))
|
||||
}, 1000)
|
||||
})
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '#',
|
||||
render: (h, params) => {
|
||||
return (
|
||||
<n-button
|
||||
style="margin:0;"
|
||||
size="small"
|
||||
onClick={() => $this.handleDelete(params)}
|
||||
>
|
||||
delete
|
||||
</n-button>
|
||||
)
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
export default {
|
||||
components: {},
|
||||
data () {
|
||||
const columns = _columns3(this)
|
||||
|
||||
return {
|
||||
columns,
|
||||
data: [],
|
||||
query: {},
|
||||
search: {
|
||||
// 如果你不传入search.column,那么搜索框左侧的搜索选项不会显示
|
||||
columns: [
|
||||
{ label: 'Name', value: 'name' },
|
||||
{ label: 'Age', value: 'age' }
|
||||
],
|
||||
onSearch: (key, word, record) => {
|
||||
switch (key) {
|
||||
case 'age':
|
||||
return record['age'] === +word
|
||||
case 'name':
|
||||
return record['name'].includes(word)
|
||||
}
|
||||
},
|
||||
placeholder: 'search in local data'
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.data = this.getData()
|
||||
},
|
||||
methods: {
|
||||
handleDelete (params) {
|
||||
let index = params._index
|
||||
this.data.splice(index, 1)
|
||||
this.$NMessage.success('Delete successfully', { duration: 2000 })
|
||||
},
|
||||
getData (args) {
|
||||
let d = new Array(20).fill(0)
|
||||
d = d.map((item, idx) => {
|
||||
return {
|
||||
name: 'xiaobai' + idx,
|
||||
age: Math.ceil(Math.random() * 20),
|
||||
sex: Math.random() > 0.5 ? 'male' : 'female'
|
||||
}
|
||||
})
|
||||
return d
|
||||
},
|
||||
onChange (args) {
|
||||
/**
|
||||
* "filter": {
|
||||
"age": {
|
||||
"value": [
|
||||
15
|
||||
]
|
||||
}
|
||||
},
|
||||
"sorter": {
|
||||
"sortable": "custom",
|
||||
"key": "age",
|
||||
"type": -1,
|
||||
"column": {
|
||||
"title": "Age",
|
||||
"key": "age",
|
||||
"sortable": "custom",
|
||||
"onFilter": "custom"
|
||||
},
|
||||
"i": 1
|
||||
},
|
||||
"pagination": {
|
||||
"currentPage": 1,
|
||||
"total": 20,
|
||||
"limit": 10,
|
||||
"custom": true
|
||||
},
|
||||
"search": {
|
||||
"key": "name",
|
||||
"word": "xiaobai"
|
||||
}
|
||||
}
|
||||
*/
|
||||
},
|
||||
clear () {
|
||||
// 清除所有的Filter选项,会触发onchange事件
|
||||
this.$refs.table.setParams({})
|
||||
this.$NMessage.info('clear all filters', { duration: 5000 })
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
@ -1,81 +0,0 @@
|
||||
# Methods
|
||||
```html
|
||||
<n-advance-table
|
||||
:columns="columns"
|
||||
:data="data"
|
||||
/>
|
||||
```
|
||||
```js
|
||||
const _columns3 = ($this) => {
|
||||
return [
|
||||
{
|
||||
title: '名称',
|
||||
key: 'name'
|
||||
},
|
||||
{
|
||||
title: '说明',
|
||||
key: 'desc'
|
||||
},
|
||||
{
|
||||
title: '参数',
|
||||
key: 'params',
|
||||
render (h, params) {
|
||||
const arr = params.row.params.map((item) => {
|
||||
return <li>{item.name} <pre>{item.desc}</pre></li>
|
||||
})
|
||||
return (
|
||||
<ul>
|
||||
{arr}
|
||||
</ul>
|
||||
)
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
const data = [
|
||||
{
|
||||
name: 'setParams',
|
||||
desc: '可以在mounted里setParams设置初始的sort,page,filter,search等,此操作会触发on-change事件,请在on-change里进行数据更新',
|
||||
params: [
|
||||
{
|
||||
name: 'filterData',
|
||||
desc: `
|
||||
{
|
||||
filter: { age: [15] } or null,
|
||||
sorter: { key: 'age', type: -1 } or null,
|
||||
searcher: { key: 'name', value: 'xiaobai' } or null,
|
||||
page: 2 or null
|
||||
}
|
||||
`
|
||||
}
|
||||
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'selectRow',
|
||||
desc: '可以在mounted里selectRow来进行选中某一行,当为字符串all时,选中当前显示所有行,当为数组时,选中行号-1的行(注意data数据要已经存在)',
|
||||
params: [
|
||||
{
|
||||
name: 'rowIndexs Array|String',
|
||||
desc: `
|
||||
[0,1,2]
|
||||
all
|
||||
`
|
||||
}
|
||||
|
||||
]
|
||||
}
|
||||
]
|
||||
export default {
|
||||
components: {
|
||||
},
|
||||
data () {
|
||||
const columns = _columns3(this)
|
||||
|
||||
return {
|
||||
columns,
|
||||
data
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
@ -1,174 +0,0 @@
|
||||
<!--
|
||||
* @Author: Volankey@gmail.com
|
||||
* @Company: Tusimple
|
||||
* @Date: 2019-10-24 16:38:36
|
||||
* @LastEditors: Jiwen.bai
|
||||
* @LastEditTime: 2019-10-24 16:40:05
|
||||
-->
|
||||
|
||||
# Props
|
||||
|
||||
```html
|
||||
<n-advance-table :columns="columns" :data="data" />
|
||||
```
|
||||
|
||||
```js
|
||||
const _columns3 = $this => {
|
||||
return [
|
||||
{
|
||||
title: '属性',
|
||||
key: 'name',
|
||||
width: 180
|
||||
},
|
||||
{
|
||||
title: '说明',
|
||||
key: 'desc',
|
||||
width: 500,
|
||||
render(h, params) {
|
||||
return <pre class="n-table-props-desc">{params.row.desc}</pre>
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '类型',
|
||||
key: 'type',
|
||||
width: 200
|
||||
},
|
||||
{
|
||||
title: '默认值',
|
||||
key: 'default',
|
||||
width: 500,
|
||||
render(h, params) {
|
||||
return <pre class="n-table-props-desc">{params.row.default}</pre>
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
const data = [
|
||||
{
|
||||
name: 'columns',
|
||||
desc: '表格列配置项',
|
||||
type: 'Array',
|
||||
default: `[]`
|
||||
},
|
||||
{
|
||||
name: 'loading',
|
||||
desc: '表格是否加载中',
|
||||
type: 'boolean',
|
||||
default: `false`
|
||||
},
|
||||
{
|
||||
name: 'max-height',
|
||||
desc: '最大高度,超出后会固定头部,并显示滚动条',
|
||||
type: 'number | string',
|
||||
default: `auto`
|
||||
},
|
||||
{
|
||||
name: 'data',
|
||||
desc: '显示的结构化数据',
|
||||
type: 'Array',
|
||||
default: '[]'
|
||||
},
|
||||
{
|
||||
name: 'row-class-name',
|
||||
desc: `行的css className
|
||||
当为Function时传入参数是
|
||||
- {row,_index} 行数据以及在源data数据中的索引
|
||||
- index行索引`,
|
||||
type: '[Array, String, Object, Function]',
|
||||
default: `''`
|
||||
},
|
||||
{
|
||||
name: 'search',
|
||||
desc: `是否显示搜索,如果传入一个Object格式需要如下:
|
||||
example1: 本地搜索
|
||||
{
|
||||
// 如果你不传入search.column,那么搜索框左侧的搜索选项不会显示
|
||||
columns: [
|
||||
{ label: 'Name',
|
||||
value: 'name' },
|
||||
{ label: 'Age',
|
||||
value: 'age' }
|
||||
],
|
||||
onSearch: (key, word, record) => {
|
||||
switch (key) {
|
||||
case 'age':
|
||||
return record['age'] === +word
|
||||
case 'name':
|
||||
return record['name'].includes(word)
|
||||
}
|
||||
},
|
||||
placeholder: 'search in local data'
|
||||
}
|
||||
--------
|
||||
example2: 远程搜索
|
||||
{
|
||||
// 如果你不传入search.column,那么搜索框左侧的搜索选项不会显示
|
||||
columns: [
|
||||
{ label: 'Name',
|
||||
value: 'name' },
|
||||
{ label: 'Age',
|
||||
value: 'age' }
|
||||
],
|
||||
onSearch: 'custom', //触发on-change事件进行网络搜索
|
||||
placeholder: 'search in local data'
|
||||
}
|
||||
`,
|
||||
type: 'Object,Boolean',
|
||||
default: `false`
|
||||
},
|
||||
{
|
||||
name: 'pagination',
|
||||
desc: '分页功能',
|
||||
type: 'Object, Boolean',
|
||||
default: `
|
||||
example1: 远程分页触发on-change事件
|
||||
"pagination": {
|
||||
"total": 20,//items总数
|
||||
"limit": 10,//每页显示数量
|
||||
"custom": true
|
||||
},
|
||||
-----------
|
||||
example2: 本地分页
|
||||
"pagination": {
|
||||
"total": 20,
|
||||
"limit": 10,
|
||||
},
|
||||
`
|
||||
},
|
||||
{
|
||||
name: 'onChange',
|
||||
desc: '同event中的on-change,未来将会被废弃!',
|
||||
type: 'Function',
|
||||
default: `()=>{}`
|
||||
},
|
||||
{
|
||||
name: 'minHeight',
|
||||
desc: '最小高度',
|
||||
type: 'number | string',
|
||||
default: `unset`
|
||||
},
|
||||
{
|
||||
name: 'maxHeight',
|
||||
desc: '最大高度,超出后会固定头部,并显示滚动条',
|
||||
type: 'number | string',
|
||||
default: `auto`
|
||||
}
|
||||
]
|
||||
export default {
|
||||
components: {},
|
||||
data() {
|
||||
const columns = _columns3(this)
|
||||
|
||||
return {
|
||||
columns,
|
||||
data
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```css
|
||||
.n-table-props-desc {
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
```
|
||||
@ -1,12 +1,17 @@
|
||||
# Basic
|
||||
Affix has `offset-top`, `top`, `offset-bottom` and `bottom`. `offset-top` is top affixing trigger point. `top` is the style `top` value after top affixing is trigger. `offset-bottom` and `bottom` work in similar way.
|
||||
```html
|
||||
<div class="container">
|
||||
<div class="padding"></div>
|
||||
<div class="content">
|
||||
<n-affix :top="60"><n-tag>Top 50px</n-tag></n-affix>
|
||||
<!-- <n-affix :bottom="60" style="margin-left: 80px"><n-tag>Bottom 50px</n-tag></n-affix>
|
||||
<n-affix :top="60" :bottom="60" style="margin-left: 200px"><n-tag>Top 50px & Bottom 50px</n-tag></n-affix> -->
|
||||
<!-- <n-affix :bottom="60"><n-tag>Bottom 60px</n-tag></n-affix> -->
|
||||
<n-row>
|
||||
<n-col :span="12">
|
||||
<n-affix :top="120" :offset-top="60"><n-tag>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-col>
|
||||
</n-row>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
@ -17,7 +22,6 @@
|
||||
background-color: rgba(128, 128, 128, .3);
|
||||
border-radius: 6px;
|
||||
overflow: auto;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.padding {
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
# Affix
|
||||
```demo
|
||||
basic
|
||||
position
|
||||
```
|
||||
43
demo/documentation/components/affix/enUS/position.md
Normal file
43
demo/documentation/components/affix/enUS/position.md
Normal file
@ -0,0 +1,43 @@
|
||||
# Position
|
||||
Affix can be `absolute` or `fix` positioned. You may need some css tricks to make it works as following. By default position is set to `fix`, because in most cases scrolled element is `#document`.
|
||||
```html
|
||||
<div class="absolute-anchor-container">
|
||||
<div class="container">
|
||||
<div class="padding"></div>
|
||||
<div class="content">
|
||||
<n-row>
|
||||
<n-col :span="12">
|
||||
<n-affix :offset-top="60" position="absolute"><n-tag>Top 50px</n-tag></n-affix>
|
||||
</n-col>
|
||||
<n-col :span="12">
|
||||
<n-affix :offset-bottom="60" position="absolute"><n-tag>Bottom 60px</n-tag></n-affix>
|
||||
</n-col>
|
||||
</n-row>
|
||||
</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,5 +1,13 @@
|
||||
# Basic
|
||||
```html
|
||||
<n-alert title="Info Text" 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 Text" type="info">
|
||||
Gee it's good to be back home
|
||||
</n-alert>
|
||||
@ -13,6 +21,15 @@
|
||||
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/enUS/closable.md
Normal file
42
demo/documentation/components/alert/enUS/closable.md
Normal file
@ -0,0 +1,42 @@
|
||||
# Closable
|
||||
```html
|
||||
<n-alert title="Info Text" 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 Text" type="info" closable>
|
||||
Gee it's good to be back home
|
||||
</n-alert>
|
||||
<n-alert title="Success Text" type="success" closable>
|
||||
Leave it till tomorrow to unpack my case
|
||||
</n-alert>
|
||||
<n-alert title="Warning Text" type="warning" closable>
|
||||
Honey disconnect the phone
|
||||
</n-alert>
|
||||
<n-alert title="Error Text" 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;
|
||||
}
|
||||
```
|
||||
@ -1,29 +0,0 @@
|
||||
# Custom Icon
|
||||
Use custom icon such as image.
|
||||
```html
|
||||
<n-alert>
|
||||
<template v-slot:icon>
|
||||
<img
|
||||
src="data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxOS44IDE4Ij48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2ZmOTJhNDt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPkFsZXJ0IC0gSWNvbiAyPC90aXRsZT48ZyBpZD0iUGFnZS0xIj48ZyBpZD0iR3JvdXAtNC1Db3B5LTQiPjxnIGlkPSJHcm91cC01Ij48ZyBpZD0iTm90aWZpY2F0aW9uIj48cGF0aCBpZD0iU2hhcGUiIGNsYXNzPSJjbHMtMSIgZD0iTS43NSw1LjE5QTEuMzQsMS4zNCwwLDAsMCwwLDYuMzF2NS42MUExLjMsMS4zLDAsMCwwLC43NiwxM2wxMiw0LjkxYS41MS41MSwwLDAsMCwuNzYtLjQ5Vi41NGEuNDkuNDksMCwwLDAtLjc1LS40OFoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgMCkiLz48cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik0xNS4zLDQuNWE0LjUsNC41LDAsMCwxLDAsOSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCAwKSIvPjwvZz48L2c+PC9nPjwvZz48L3N2Zz4="
|
||||
style="height: 19px; width: 19px;"
|
||||
/>
|
||||
</template>
|
||||
You don't know how lucky you are boy
|
||||
</n-alert>
|
||||
<n-alert title="Back in the U.S.S.R." type="error">
|
||||
<template v-slot:icon>
|
||||
<img
|
||||
src="data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxOS44IDE4Ij48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2ZmOTJhNDt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPkFsZXJ0IC0gSWNvbiAyPC90aXRsZT48ZyBpZD0iUGFnZS0xIj48ZyBpZD0iR3JvdXAtNC1Db3B5LTQiPjxnIGlkPSJHcm91cC01Ij48ZyBpZD0iTm90aWZpY2F0aW9uIj48cGF0aCBpZD0iU2hhcGUiIGNsYXNzPSJjbHMtMSIgZD0iTS43NSw1LjE5QTEuMzQsMS4zNCwwLDAsMCwwLDYuMzF2NS42MUExLjMsMS4zLDAsMCwwLC43NiwxM2wxMiw0LjkxYS41MS41MSwwLDAsMCwuNzYtLjQ5Vi41NGEuNDkuNDksMCwwLDAtLjc1LS40OFoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgMCkiLz48cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik0xNS4zLDQuNWE0LjUsNC41LDAsMCwxLDAsOSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCAwKSIvPjwvZz48L2c+PC9nPjwvZz48L3N2Zz4="
|
||||
style="height: 19px; width: 19px;"
|
||||
/>
|
||||
</template>
|
||||
Back in the U.S.<br />
|
||||
Back in the U.S.<br />
|
||||
Back in the U.S.S.R.
|
||||
</n-alert>
|
||||
```
|
||||
```css
|
||||
.n-alert {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
```
|
||||
@ -1,7 +1,7 @@
|
||||
# Alert
|
||||
```demo
|
||||
basic
|
||||
closable
|
||||
icon
|
||||
custom-icon
|
||||
no-icon
|
||||
```
|
||||
15
demo/documentation/components/anchor/enUS/affix.md
Normal file
15
demo/documentation/components/anchor/enUS/affix.md
Normal file
@ -0,0 +1,15 @@
|
||||
# Affix
|
||||
When in affix mode, Anchor can recieve addition props as same as Affix.
|
||||
```html
|
||||
<div style="height: 200px;">
|
||||
<n-anchor affix :offset-top="24" :top="88" style="z-index: 1;">
|
||||
<n-anchor-link title="The Narrator" href="#the-narrator"/>
|
||||
<n-anchor-link title="The Narrator's Shadow" href="#the-narrator-s-shadow"/>
|
||||
<n-anchor-link title="The Gatekeeper" href="#the-gatekeeper"/>
|
||||
<n-anchor-link title="The Librarian" href="#the-librarian">
|
||||
<n-anchor-link title="The Colonel" href="#the-colonel"/>
|
||||
<n-anchor-link title="The Caretaker" href="#the-caretaker"/>
|
||||
</n-anchor-link>
|
||||
</n-anchor>
|
||||
</div>
|
||||
```
|
||||
@ -1,13 +1,14 @@
|
||||
# Basic
|
||||
```html
|
||||
<div style="height: 200px; padding-left: 200px;">
|
||||
<n-anchor affix :top="80" style="z-index: 1;">
|
||||
<div style="height: 200px;">
|
||||
<n-anchor>
|
||||
<n-anchor-link title="The Narrator" href="#the-narrator"/>
|
||||
<n-anchor-link title="The Narrator's Shadow" href="#the-narrator-s-shadow"/>
|
||||
<n-anchor-link title="The Gatekeeper" href="#the-gatekeeper"/>
|
||||
<n-anchor-link title="The Librarian" href="#the-librarian"/>
|
||||
<n-anchor-link title="The Colonel" href="#the-colonel"/>
|
||||
<n-anchor-link title="The Caretaker" href="#the-caretaker"/>
|
||||
<n-anchor-link title="The Librarian" href="#the-librarian">
|
||||
<n-anchor-link title="The Colonel" href="#the-colonel"/>
|
||||
<n-anchor-link title="The Caretaker" href="#the-caretaker"/>
|
||||
</n-anchor-link>
|
||||
</n-anchor>
|
||||
</div>
|
||||
```
|
||||
@ -2,6 +2,8 @@
|
||||
<!--single-column-->
|
||||
```demo
|
||||
basic
|
||||
affix
|
||||
scrollto
|
||||
the-narrator
|
||||
the-narrator-s-shadow
|
||||
the-gatekeeper
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
# Placeholder
|
||||
```html
|
||||
<div style="height: 600px;"></div>
|
||||
<div style="height: 1200px;"></div>
|
||||
```
|
||||
32
demo/documentation/components/anchor/enUS/scrollto.md
Normal file
32
demo/documentation/components/anchor/enUS/scrollto.md
Normal file
@ -0,0 +1,32 @@
|
||||
# Scroll To
|
||||
```html
|
||||
<div style="height: 200px; padding-left: 200px;">
|
||||
<n-anchor affix :offset-top="24" :top="88" style="z-index: 1;" ref="anchor">
|
||||
<n-anchor-link title="The Narrator" href="#the-narrator"/>
|
||||
<n-anchor-link title="The Narrator's Shadow" href="#the-narrator-s-shadow"/>
|
||||
<n-anchor-link title="The Gatekeeper" href="#the-gatekeeper"/>
|
||||
<n-anchor-link title="The Librarian" href="#the-librarian">
|
||||
<n-anchor-link title="The Colonel" href="#the-colonel"/>
|
||||
<n-anchor-link title="The Caretaker" href="#the-caretaker"/>
|
||||
</n-anchor-link>
|
||||
</n-anchor>
|
||||
</div>
|
||||
<div style="padding-left: 400px;">
|
||||
<n-button @click="scrollTo('#the-librarian')">Librarian</n-button>
|
||||
<n-button @click="scrollTo('#the-caretaker')">Caretaker</n-button>
|
||||
</div>
|
||||
```
|
||||
```js
|
||||
export default {
|
||||
methods: {
|
||||
scrollTo (href) {
|
||||
this.$refs.anchor.scrollTo(href)
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
```css
|
||||
.n-button {
|
||||
margin: 0 8px 12px 0;
|
||||
}
|
||||
```
|
||||
@ -1,4 +1,3 @@
|
||||
# The Caretaker
|
||||
```html
|
||||
<n-tag id="the-caretaker">The Caretaker</n-tag>
|
||||
```
|
||||
@ -1,4 +1,3 @@
|
||||
# The Colonel
|
||||
```html
|
||||
<n-tag id="the-colonel">The Colonel</n-tag>
|
||||
```
|
||||
@ -1,4 +1,3 @@
|
||||
# The Gatekeeper
|
||||
```html
|
||||
<n-tag id="the-gatekeeper">The Gatekeeper</n-tag>
|
||||
```
|
||||
@ -1,4 +1,3 @@
|
||||
# The Librarian
|
||||
```html
|
||||
<n-tag id="the-librarian">The Librarian</n-tag>
|
||||
```
|
||||
@ -1,4 +1,3 @@
|
||||
# The Narrator
|
||||
```html
|
||||
<n-tag id="the-narrator">The Narrator</n-tag>
|
||||
```
|
||||
@ -1,4 +1,3 @@
|
||||
# The Narrators's Shadow
|
||||
```html
|
||||
<n-tag id="the-narrator-s-shadow">The Narrators's Shadow</n-tag>
|
||||
```
|
||||
@ -0,0 +1,45 @@
|
||||
# Actions After Select
|
||||
```html
|
||||
<n-auto-complete
|
||||
:options="options"
|
||||
v-model="value"
|
||||
clear-after-select
|
||||
placeholder="Clear After Select"
|
||||
/>
|
||||
<n-auto-complete
|
||||
:options="options"
|
||||
v-model="value"
|
||||
blur-after-select
|
||||
placeholder="Blur After Select"
|
||||
/>
|
||||
```
|
||||
```js
|
||||
export default {
|
||||
computed: {
|
||||
options () {
|
||||
return [
|
||||
'@gmail.com',
|
||||
'@163.com',
|
||||
'@qq.com'
|
||||
].map(suffix => {
|
||||
const value = this.value === null ? '' : this.value
|
||||
const prefix = value.split('@')[0]
|
||||
return {
|
||||
label: prefix + suffix,
|
||||
value: prefix + suffix,
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
value: null
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
```css
|
||||
.n-auto-complete {
|
||||
margin: 0 0 12px 0;
|
||||
}
|
||||
```
|
||||
@ -1,9 +1,6 @@
|
||||
# Basic
|
||||
# Basic
|
||||
```html
|
||||
<n-auto-complete :options="options" v-model="value"/>
|
||||
<br>
|
||||
{{ value }}
|
||||
<n-auto-complete :options="options" v-model="value" placeholder="Email" />
|
||||
```
|
||||
```js
|
||||
export default {
|
||||
@ -13,10 +10,13 @@ export default {
|
||||
'@gmail.com',
|
||||
'@163.com',
|
||||
'@qq.com'
|
||||
].map(suffix => ({
|
||||
label: this.value + suffix,
|
||||
value: this.value + suffix,
|
||||
}))
|
||||
].map(suffix => {
|
||||
const prefix = this.value.split('@')[0]
|
||||
return {
|
||||
label: prefix + suffix,
|
||||
value: prefix + suffix,
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
data () {
|
||||
|
||||
@ -0,0 +1,39 @@
|
||||
# Custom Input Element
|
||||
```html
|
||||
<n-auto-complete :options="options" v-model="value">
|
||||
<template v-slot:activator="{ handleInput, handleBlur, handleFocus, value }">
|
||||
<n-input
|
||||
type="textarea"
|
||||
@input="handleInput"
|
||||
@focus="handleFocus"
|
||||
@blur="handleBlur"
|
||||
:value="value"
|
||||
placeholder="Email"
|
||||
/>
|
||||
</template>
|
||||
</n-auto-complete>
|
||||
```
|
||||
```js
|
||||
export default {
|
||||
computed: {
|
||||
options () {
|
||||
return [
|
||||
'@gmail.com',
|
||||
'@163.com',
|
||||
'@qq.com'
|
||||
].map(suffix => {
|
||||
const prefix = this.value.split('@')[0]
|
||||
return {
|
||||
label: prefix + suffix,
|
||||
value: prefix + suffix,
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
value: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
@ -1,4 +1,6 @@
|
||||
# Auto Complete
|
||||
```demo
|
||||
basic
|
||||
custom-input
|
||||
after-select
|
||||
```
|
||||
@ -1,4 +1,4 @@
|
||||
# Size
|
||||
# Shape
|
||||
|
||||
Avatar can be circle shaped.
|
||||
|
||||
|
||||
7
demo/documentation/components/avatar/zhCN/badge.md
Normal file
7
demo/documentation/components/avatar/zhCN/badge.md
Normal file
@ -0,0 +1,7 @@
|
||||
# 徽标
|
||||
|
||||
```html
|
||||
<n-badge value="666">
|
||||
<n-avatar>666</n-avatar>
|
||||
</n-badge>
|
||||
```
|
||||
14
demo/documentation/components/avatar/zhCN/color.md
Normal file
14
demo/documentation/components/avatar/zhCN/color.md
Normal file
@ -0,0 +1,14 @@
|
||||
# 颜色
|
||||
|
||||
```html
|
||||
<n-avatar :themed-style="{
|
||||
light: {
|
||||
color: 'yellow',
|
||||
backgroundColor: 'red'
|
||||
},
|
||||
dark: {
|
||||
color: 'red',
|
||||
backgroundColor: 'yellow'
|
||||
}
|
||||
}">刘<br>德华</n-avatar>
|
||||
```
|
||||
21
demo/documentation/components/avatar/zhCN/icon.md
Normal file
21
demo/documentation/components/avatar/zhCN/icon.md
Normal file
@ -0,0 +1,21 @@
|
||||
# 图标
|
||||
```html
|
||||
<n-avatar>
|
||||
<n-icon>
|
||||
<md-cash />
|
||||
</n-icon>
|
||||
</n-avatar>
|
||||
```
|
||||
```js
|
||||
import mdCash from 'naive-ui/lib/icons/md-cash'
|
||||
import mdContacts from 'naive-ui/lib/icons/md-contacts'
|
||||
import iosContacts from 'naive-ui/lib/icons/ios-contacts'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
mdCash,
|
||||
mdContacts,
|
||||
iosContacts
|
||||
}
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,9 @@
|
||||
# 头像
|
||||
```demo
|
||||
size
|
||||
shape
|
||||
color
|
||||
badge
|
||||
icon
|
||||
name-size
|
||||
```
|
||||
16
demo/documentation/components/avatar/zhCN/nameSize.md
Normal file
16
demo/documentation/components/avatar/zhCN/nameSize.md
Normal file
@ -0,0 +1,16 @@
|
||||
# 字号
|
||||
```html
|
||||
<n-avatar>{{ value }}</n-avatar>
|
||||
<n-avatar circle>{{ value }}</n-avatar>
|
||||
<n-avatar circle>刘<br>{{ value }}</n-avatar>
|
||||
<n-input v-model="value"/>
|
||||
```
|
||||
```js
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
value: '德华'
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
10
demo/documentation/components/avatar/zhCN/shape.md
Normal file
10
demo/documentation/components/avatar/zhCN/shape.md
Normal file
@ -0,0 +1,10 @@
|
||||
# 形状
|
||||
|
||||
头像可以是圆形。
|
||||
|
||||
```html
|
||||
<n-avatar circle 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"/>
|
||||
<n-avatar circle size="medium" 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="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"/>
|
||||
```
|
||||
10
demo/documentation/components/avatar/zhCN/size.md
Normal file
10
demo/documentation/components/avatar/zhCN/size.md
Normal file
@ -0,0 +1,10 @@
|
||||
# 尺寸
|
||||
|
||||
头像有 `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"/>
|
||||
<n-avatar size="medium" 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="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"/>
|
||||
```
|
||||
@ -1,4 +1,5 @@
|
||||
# Basic
|
||||
BackTop will find its first scrollable ascendant element and listen scroll event on it.
|
||||
```html
|
||||
<n-back-top />
|
||||
```
|
||||
@ -2,11 +2,24 @@
|
||||
```html
|
||||
<n-back-top
|
||||
:right="40"
|
||||
:bottom="100"
|
||||
:bottom="160"
|
||||
:visibility-height="200"
|
||||
: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: 40px; height: 40px; line-height: 40px; text-align: center;">
|
||||
3
|
||||
<div style="width: 200px; height: 40px; line-height: 40px; text-align: center; font-size: 14px;">
|
||||
Change Position
|
||||
</div>
|
||||
</n-back-top>
|
||||
```
|
||||
@ -1,26 +1,36 @@
|
||||
# Target
|
||||
You can specify target to listen scroll event of.
|
||||
```html
|
||||
<n-back-top
|
||||
:target="target"
|
||||
:right="160"
|
||||
: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: 40px; height: 40px; line-height: 40px; text-align: center;">
|
||||
2.2
|
||||
<div style="width: 200px; height: 40px; line-height: 40px; text-align: center; font-size: 14px;">
|
||||
Specify Target
|
||||
</div>
|
||||
</n-back-top>
|
||||
<div ref="scrollContainer" style="overflow: auto; height: 64px;">
|
||||
6<br>
|
||||
6<br>
|
||||
6<br>
|
||||
6<br>
|
||||
6<br>
|
||||
6<br>
|
||||
6<br>
|
||||
6<br>
|
||||
6<br>
|
||||
6<br>
|
||||
6<br>
|
||||
<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
|
||||
|
||||
@ -1,12 +1,25 @@
|
||||
# Visibility Height
|
||||
You can change visibility height of backtop.
|
||||
```html
|
||||
<n-back-top
|
||||
:right="100"
|
||||
:bottom="100"
|
||||
:visibility-height="600"
|
||||
: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: 40px; height: 40px; line-height: 40px; text-align: center;">
|
||||
4
|
||||
<div style="width: 200px; height: 40px; line-height: 40px; text-align: center; font-size: 14px;">
|
||||
Visibility Height: 600px
|
||||
</div>
|
||||
</n-back-top>
|
||||
```
|
||||
@ -1,5 +1,5 @@
|
||||
# Basic
|
||||
There are `default`, `primary`, `info`, `success`, `warning` and `error` type of button
|
||||
There are `default`, `primary`, `info`, `success`, `warning` and `error` type of button.
|
||||
```html
|
||||
<n-button>Default</n-button>
|
||||
<n-button type="primary">Primary</n-button>
|
||||
@ -12,4 +12,4 @@ There are `default`, `primary`, `info`, `success`, `warning` and `error` type of
|
||||
.n-button {
|
||||
margin: 0 8px 8px 0;
|
||||
}
|
||||
```
|
||||
```
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
# Disabled
|
||||
Button can be disabled
|
||||
Button can be disabled.
|
||||
```html
|
||||
<n-button
|
||||
size="small"
|
||||
@ -42,4 +42,4 @@ export default {
|
||||
.n-button {
|
||||
margin: 0 8px 8px 0;
|
||||
}
|
||||
```
|
||||
```
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
# Events
|
||||
Listening events on button.
|
||||
Handle events on button.
|
||||
```html
|
||||
<n-button @click="handleClick">
|
||||
Click Me
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
# Icon
|
||||
Using icon in button
|
||||
Use icon in button.
|
||||
```html
|
||||
<n-button>
|
||||
<template v-slot:icon>
|
||||
@ -27,4 +27,4 @@ export default {
|
||||
.n-button {
|
||||
margin: 0 8px 8px 0;
|
||||
}
|
||||
```
|
||||
```
|
||||
|
||||
@ -3,6 +3,7 @@ Button is used to trigger some actions.
|
||||
## Demos
|
||||
```demo
|
||||
basic
|
||||
text
|
||||
disabled
|
||||
icon
|
||||
events
|
||||
|
||||
14
demo/documentation/components/button/enUS/text.md
Normal file
14
demo/documentation/components/button/enUS/text.md
Normal file
@ -0,0 +1,14 @@
|
||||
# Text Button
|
||||
```html
|
||||
<n-button text>Default</n-button>
|
||||
<n-button text type="primary">Primary</n-button>
|
||||
<n-button text type="info">Info</n-button>
|
||||
<n-button text type="success">Success</n-button>
|
||||
<n-button text type="warning">Warning</n-button>
|
||||
<n-button text type="error">Error</n-button>
|
||||
```
|
||||
```css
|
||||
.n-button {
|
||||
margin: 0 8px 8px 0;
|
||||
}
|
||||
```
|
||||
@ -7,354 +7,455 @@
|
||||
>
|
||||
<n-button
|
||||
type="default"
|
||||
icon="md-save"
|
||||
round
|
||||
>
|
||||
<template v-slot:icon>
|
||||
<md-save />
|
||||
</template>
|
||||
Default
|
||||
</n-button>
|
||||
<n-button
|
||||
type="primary"
|
||||
icon="md-save"
|
||||
disabled
|
||||
>
|
||||
<template v-slot:icon>
|
||||
<md-save />
|
||||
</template>
|
||||
Primary
|
||||
</n-button>
|
||||
<n-button
|
||||
type="info"
|
||||
icon="md-save"
|
||||
icon-position="right"
|
||||
>
|
||||
<template v-slot:icon>
|
||||
<md-save />
|
||||
</template>
|
||||
Info
|
||||
</n-button>
|
||||
<n-button
|
||||
type="warning"
|
||||
icon="md-save"
|
||||
>
|
||||
<template v-slot:icon>
|
||||
<md-save />
|
||||
</template>
|
||||
Warning
|
||||
</n-button>
|
||||
<n-button
|
||||
type="success"
|
||||
icon="md-save"
|
||||
>
|
||||
<template v-slot:icon>
|
||||
<md-save />
|
||||
</template>
|
||||
Success
|
||||
</n-button>
|
||||
<n-button
|
||||
type="error"
|
||||
icon="md-save"
|
||||
>
|
||||
<template v-slot:icon>
|
||||
<md-save />
|
||||
</template>
|
||||
Error
|
||||
</n-button>
|
||||
<n-button
|
||||
type="default"
|
||||
icon="md-save"
|
||||
ghost
|
||||
>
|
||||
<template v-slot:icon>
|
||||
<md-save />
|
||||
</template>
|
||||
Default
|
||||
</n-button>
|
||||
<n-button
|
||||
type="primary"
|
||||
icon="md-save"
|
||||
ghost
|
||||
round
|
||||
>
|
||||
<template v-slot:icon>
|
||||
<md-save />
|
||||
</template>
|
||||
Primary
|
||||
</n-button>
|
||||
<n-button
|
||||
type="info"
|
||||
icon="md-save"
|
||||
ghost
|
||||
disabled
|
||||
>
|
||||
<template v-slot:icon>
|
||||
<md-save />
|
||||
</template>
|
||||
Info
|
||||
</n-button>
|
||||
<n-button
|
||||
type="warning"
|
||||
icon="md-save"
|
||||
ghost
|
||||
icon-position="right"
|
||||
>
|
||||
<template v-slot:icon>
|
||||
<md-save />
|
||||
</template>
|
||||
Warning
|
||||
</n-button>
|
||||
<n-button
|
||||
type="success"
|
||||
icon="md-save"
|
||||
ghost
|
||||
>
|
||||
<template v-slot:icon>
|
||||
<md-save />
|
||||
</template>
|
||||
Success
|
||||
</n-button>
|
||||
<n-button
|
||||
type="error"
|
||||
icon="md-save"
|
||||
ghost
|
||||
>
|
||||
<template v-slot:icon>
|
||||
<md-save />
|
||||
</template>
|
||||
Error
|
||||
</n-button>
|
||||
<n-button
|
||||
type="default"
|
||||
icon="md-save"
|
||||
loading
|
||||
>
|
||||
<template v-slot:icon>
|
||||
<md-save />
|
||||
</template>
|
||||
Default
|
||||
</n-button>
|
||||
<n-button
|
||||
type="primary"
|
||||
icon="md-save"
|
||||
loading
|
||||
>
|
||||
<template v-slot:icon>
|
||||
<md-save />
|
||||
</template>
|
||||
Primary
|
||||
</n-button>
|
||||
<n-button
|
||||
type="info"
|
||||
icon="md-save"
|
||||
loading
|
||||
round
|
||||
>
|
||||
<template v-slot:icon>
|
||||
<md-save />
|
||||
</template>
|
||||
Info
|
||||
</n-button>
|
||||
<n-button
|
||||
type="warning"
|
||||
icon="md-save"
|
||||
loading
|
||||
disabled
|
||||
>
|
||||
<template v-slot:icon>
|
||||
<md-save />
|
||||
</template>
|
||||
Warning
|
||||
</n-button>
|
||||
<n-button
|
||||
type="success"
|
||||
icon="md-save"
|
||||
loading
|
||||
icon-position="right"
|
||||
>
|
||||
<template v-slot:icon>
|
||||
<md-save />
|
||||
</template>
|
||||
Success
|
||||
</n-button>
|
||||
<n-button
|
||||
type="error"
|
||||
icon="md-save"
|
||||
loading
|
||||
>
|
||||
<template v-slot:icon>
|
||||
<md-save />
|
||||
</template>
|
||||
Error
|
||||
</n-button>
|
||||
<n-button
|
||||
type="default"
|
||||
icon="md-save"
|
||||
ghost
|
||||
loading
|
||||
>
|
||||
<template v-slot:icon>
|
||||
<md-save />
|
||||
</template>
|
||||
Default
|
||||
</n-button>
|
||||
<n-button
|
||||
type="primary"
|
||||
icon="md-save"
|
||||
ghost
|
||||
loading
|
||||
>
|
||||
<template v-slot:icon>
|
||||
<md-save />
|
||||
</template>
|
||||
Primary
|
||||
</n-button>
|
||||
<n-button
|
||||
type="info"
|
||||
icon="md-save"
|
||||
ghost
|
||||
loading
|
||||
>
|
||||
<template v-slot:icon>
|
||||
<md-save />
|
||||
</template>
|
||||
Info
|
||||
</n-button>
|
||||
<n-button
|
||||
type="warning"
|
||||
icon="md-save"
|
||||
ghost
|
||||
loading
|
||||
round
|
||||
>
|
||||
<template v-slot:icon>
|
||||
<md-save />
|
||||
</template>
|
||||
Warning
|
||||
</n-button>
|
||||
<n-button
|
||||
type="success"
|
||||
icon="md-save"
|
||||
ghost
|
||||
loading
|
||||
disabled
|
||||
>
|
||||
<template v-slot:icon>
|
||||
<md-save />
|
||||
</template>
|
||||
Success
|
||||
</n-button>
|
||||
<n-button
|
||||
type="error"
|
||||
icon="md-save"
|
||||
ghost
|
||||
loading
|
||||
icon-position="right"
|
||||
>
|
||||
<template v-slot:icon>
|
||||
<md-save />
|
||||
</template>
|
||||
Error
|
||||
</n-button>
|
||||
<n-button
|
||||
type="default"
|
||||
icon="md-save"
|
||||
round
|
||||
block
|
||||
>
|
||||
<template v-slot:icon>
|
||||
<md-save />
|
||||
</template>
|
||||
Default
|
||||
</n-button>
|
||||
<n-button
|
||||
type="primary"
|
||||
icon="md-save"
|
||||
disabled
|
||||
block
|
||||
size="small"
|
||||
>
|
||||
<template v-slot:icon>
|
||||
<md-save />
|
||||
</template>
|
||||
Primary
|
||||
</n-button>
|
||||
<n-button
|
||||
type="info"
|
||||
icon="md-save"
|
||||
icon-position="right"
|
||||
block
|
||||
size="large"
|
||||
>
|
||||
<template v-slot:icon>
|
||||
<md-save />
|
||||
</template>
|
||||
Info
|
||||
</n-button>
|
||||
<n-button
|
||||
type="warning"
|
||||
icon="md-save"
|
||||
block
|
||||
ghost
|
||||
>
|
||||
<template v-slot:icon>
|
||||
<md-save />
|
||||
</template>
|
||||
Warning
|
||||
</n-button>
|
||||
<n-button
|
||||
type="success"
|
||||
icon="md-save"
|
||||
block
|
||||
loading
|
||||
>
|
||||
<template v-slot:icon>
|
||||
<md-save />
|
||||
</template>
|
||||
Success
|
||||
</n-button>
|
||||
<n-button
|
||||
type="error"
|
||||
icon="md-save"
|
||||
block
|
||||
>
|
||||
<template v-slot:icon>
|
||||
<md-save />
|
||||
</template>
|
||||
Error
|
||||
</n-button>
|
||||
<n-button
|
||||
type="primary"
|
||||
icon="md-save"
|
||||
disabled
|
||||
circle
|
||||
size="small"
|
||||
>
|
||||
<template v-slot:icon>
|
||||
<md-save />
|
||||
</template>
|
||||
Primary
|
||||
</n-button>
|
||||
<n-button
|
||||
type="info"
|
||||
icon="md-save"
|
||||
icon-position="right"
|
||||
circle
|
||||
size="large"
|
||||
>
|
||||
<template v-slot:icon>
|
||||
<md-save />
|
||||
</template>
|
||||
Info
|
||||
</n-button>
|
||||
<n-button
|
||||
type="warning"
|
||||
icon="md-save"
|
||||
circle
|
||||
ghost
|
||||
>
|
||||
<template v-slot:icon>
|
||||
<md-save />
|
||||
</template>
|
||||
Warning
|
||||
</n-button>
|
||||
<n-button
|
||||
type="success"
|
||||
icon="md-save"
|
||||
circle
|
||||
loading
|
||||
>
|
||||
<template v-slot:icon>
|
||||
<md-save />
|
||||
</template>
|
||||
Success
|
||||
</n-button>
|
||||
<n-button
|
||||
type="error"
|
||||
icon="md-save"
|
||||
circle
|
||||
>
|
||||
<template v-slot:icon>
|
||||
<md-save />
|
||||
</template>
|
||||
Error
|
||||
</n-button>
|
||||
<n-button
|
||||
type="error"
|
||||
icon="md-save"
|
||||
>
|
||||
<template v-slot:icon>
|
||||
<md-save />
|
||||
</template>
|
||||
Error
|
||||
</n-button>
|
||||
<n-button
|
||||
type="error"
|
||||
icon="md-save"
|
||||
size="large"
|
||||
/>
|
||||
>
|
||||
<template v-slot:icon>
|
||||
<md-save />
|
||||
</template>
|
||||
</n-button>
|
||||
<n-button
|
||||
type="error"
|
||||
round
|
||||
icon="md-save"
|
||||
size="large"
|
||||
/>
|
||||
>
|
||||
<template v-slot:icon>
|
||||
<md-save />
|
||||
</template>
|
||||
</n-button>
|
||||
<n-button-group>
|
||||
<n-button
|
||||
type="default"
|
||||
icon="md-save"
|
||||
round
|
||||
>
|
||||
<template v-slot:icon>
|
||||
<md-save />
|
||||
</template>
|
||||
Default
|
||||
</n-button>
|
||||
<n-button
|
||||
type="primary"
|
||||
icon="md-save"
|
||||
disabled
|
||||
>
|
||||
<template v-slot:icon>
|
||||
<md-save />
|
||||
</template>
|
||||
Primary
|
||||
</n-button>
|
||||
<n-button
|
||||
type="info"
|
||||
icon="md-save"
|
||||
icon-position="right"
|
||||
>
|
||||
<template v-slot:icon>
|
||||
<md-save />
|
||||
</template>
|
||||
Info
|
||||
</n-button>
|
||||
<n-button
|
||||
type="warning"
|
||||
icon="md-save"
|
||||
>
|
||||
<template v-slot:icon>
|
||||
<md-save />
|
||||
</template>
|
||||
Warning
|
||||
</n-button>
|
||||
</n-button-group>
|
||||
<n-button-group vertical>
|
||||
<n-button
|
||||
type="default"
|
||||
icon="md-save"
|
||||
round
|
||||
>
|
||||
<template v-slot:icon>
|
||||
<md-save />
|
||||
</template>
|
||||
Default
|
||||
</n-button>
|
||||
<n-button
|
||||
type="primary"
|
||||
icon="md-save"
|
||||
disabled
|
||||
>
|
||||
<template v-slot:icon>
|
||||
<md-save />
|
||||
</template>
|
||||
Primary
|
||||
</n-button>
|
||||
<n-button
|
||||
type="info"
|
||||
icon="md-save"
|
||||
icon-position="right"
|
||||
>
|
||||
<template v-slot:icon>
|
||||
<md-save />
|
||||
</template>
|
||||
Info
|
||||
</n-button>
|
||||
<n-button
|
||||
type="warning"
|
||||
icon="md-save"
|
||||
>
|
||||
<template v-slot:icon>
|
||||
<md-save />
|
||||
</template>
|
||||
Warning
|
||||
</n-button>
|
||||
</n-button-group>
|
||||
</div>
|
||||
```
|
||||
```js
|
||||
export default {
|
||||
import mdSave from 'naive-ui/lib/icons/md-save'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
mdSave
|
||||
},
|
||||
mounted () {
|
||||
console.log(this)
|
||||
}
|
||||
}
|
||||
```
|
||||
```css
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
# 禁用
|
||||
按钮可以被禁用
|
||||
按钮可以被禁用。
|
||||
```html
|
||||
<n-button
|
||||
size="small"
|
||||
@ -30,4 +30,4 @@
|
||||
.n-button {
|
||||
margin: 0 8px 8px 0;
|
||||
}
|
||||
```
|
||||
```
|
||||
|
||||
@ -4,10 +4,23 @@
|
||||
<n-button ghost>Default</n-button>
|
||||
<n-button round type="primary" ghost>Primary</n-button>
|
||||
<n-button type="info" ghost>Info</n-button>
|
||||
<n-button circle type="success" icon="md-save" ghost />
|
||||
<n-button circle type="success" ghost >
|
||||
<template v-slot:icon>
|
||||
<md-save />
|
||||
</template>
|
||||
</n-button>
|
||||
<n-button type="warning" ghost>Warning</n-button>
|
||||
<n-button type="error" ghost disabled>Error</n-button>
|
||||
```
|
||||
```js
|
||||
import mdSave from 'naive-ui/lib/icons/md-save'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
mdSave
|
||||
}
|
||||
}
|
||||
```
|
||||
```css
|
||||
.n-button {
|
||||
margin: 0 8px 8px 0;
|
||||
|
||||
@ -4,62 +4,87 @@
|
||||
<n-button-group>
|
||||
<n-button
|
||||
type="default"
|
||||
icon="md-save"
|
||||
round
|
||||
>
|
||||
<template v-slot:icon>
|
||||
<md-save />
|
||||
</template>
|
||||
Default
|
||||
</n-button>
|
||||
<n-button
|
||||
type="primary"
|
||||
icon="md-save"
|
||||
disabled
|
||||
>
|
||||
<template v-slot:icon>
|
||||
<md-save />
|
||||
</template>
|
||||
Primary
|
||||
</n-button>
|
||||
<n-button
|
||||
type="info"
|
||||
icon="md-save"
|
||||
icon-position="right"
|
||||
>
|
||||
<template v-slot:icon>
|
||||
<md-save />
|
||||
</template>
|
||||
Info
|
||||
</n-button>
|
||||
<n-button
|
||||
type="warning"
|
||||
icon="md-save"
|
||||
>
|
||||
<template v-slot:icon>
|
||||
<md-save />
|
||||
</template>
|
||||
Warning
|
||||
</n-button>
|
||||
</n-button-group>
|
||||
<n-button-group vertical>
|
||||
<n-button
|
||||
type="default"
|
||||
icon="md-save"
|
||||
round
|
||||
>
|
||||
<template v-slot:icon>
|
||||
<md-save />
|
||||
</template>
|
||||
Default
|
||||
</n-button>
|
||||
<n-button
|
||||
type="primary"
|
||||
icon="md-save"
|
||||
disabled
|
||||
>
|
||||
<template v-slot:icon>
|
||||
<md-save />
|
||||
</template>
|
||||
Primary
|
||||
</n-button>
|
||||
<n-button
|
||||
type="info"
|
||||
icon="md-save"
|
||||
icon-position="right"
|
||||
>
|
||||
<template v-slot:icon>
|
||||
<md-save />
|
||||
</template>
|
||||
Info
|
||||
</n-button>
|
||||
<n-button
|
||||
type="warning"
|
||||
icon="md-save"
|
||||
>
|
||||
<template v-slot:icon>
|
||||
<md-save />
|
||||
</template>
|
||||
Warning
|
||||
</n-button>
|
||||
</n-button-group>
|
||||
```
|
||||
```js
|
||||
import mdSave from 'naive-ui/lib/icons/md-save'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
mdSave
|
||||
}
|
||||
}
|
||||
```
|
||||
```css
|
||||
.n-button {
|
||||
margin: 0 8px 8px 0;
|
||||
|
||||
@ -1,11 +1,30 @@
|
||||
# 图标
|
||||
在按钮上使用图标
|
||||
在按钮上使用图标。
|
||||
```html
|
||||
<n-button icon="md-save">Save</n-button>
|
||||
<n-button icon="md-save" icon-position="right">Save</n-button>
|
||||
<n-button>
|
||||
<template v-slot:icon>
|
||||
<md-save />
|
||||
</template>
|
||||
Save
|
||||
</n-button>
|
||||
<n-button icon-position="right">
|
||||
<template v-slot:icon>
|
||||
<md-save />
|
||||
</template>
|
||||
Save
|
||||
</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,5 +1,5 @@
|
||||
# 按钮
|
||||
按钮用来触发一些操作
|
||||
按钮用来触发一些操作。
|
||||
## 演示
|
||||
```demo
|
||||
basic
|
||||
@ -15,4 +15,4 @@ debug
|
||||
## API
|
||||
|属性|说明|类型|默认值|版本|
|
||||
|-|-|-|-|-|
|
||||
|type|按钮类型|string|`'default'`||
|
||||
|type|按钮类型|string|`'default'`||
|
||||
|
||||
@ -1,19 +1,23 @@
|
||||
# 加载中
|
||||
按钮有加载状态
|
||||
按钮有加载状态。
|
||||
```html
|
||||
<n-button
|
||||
icon="md-save"
|
||||
:loading="loading"
|
||||
@click="loading = !loading"
|
||||
>
|
||||
<template v-slot:icon>
|
||||
<md-save />
|
||||
</template>
|
||||
Loading
|
||||
</n-button>
|
||||
<n-button
|
||||
icon="md-save"
|
||||
:loading="loading"
|
||||
icon-position="right"
|
||||
@click="loading = !loading"
|
||||
>
|
||||
<template v-slot:icon>
|
||||
<md-save />
|
||||
</template>
|
||||
Loading
|
||||
</n-button>
|
||||
<n-button
|
||||
@ -42,7 +46,12 @@
|
||||
```
|
||||
|
||||
```js
|
||||
import mdSave from 'naive-ui/lib/icons/md-save'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
mdSave
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
loading: false
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
# 形状
|
||||
按钮拥有不同的形状
|
||||
按钮拥有不同的形状。
|
||||
```html
|
||||
<n-button circle icon="md-save" />
|
||||
<n-button type="primary" round>Primary</n-button>
|
||||
@ -9,4 +9,4 @@
|
||||
.n-button {
|
||||
margin: 0 8px 8px 0;
|
||||
}
|
||||
```
|
||||
```
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
# Segmented
|
||||
`header`, `content`, `footer` and action can be `hard` or `soft` segmented.
|
||||
`header`, `content`, `footer` and `action` can be `hard` or `soft` segmented.
|
||||
```html
|
||||
<n-card title="Card Segmented Demo" :segmented="{
|
||||
header: 'soft',
|
||||
@ -9,7 +9,7 @@
|
||||
<template v-slot:header-extra>
|
||||
v-slot:header-extra
|
||||
</template>
|
||||
Card content
|
||||
Card Content
|
||||
<template v-slot:footer>
|
||||
v-slot:footer
|
||||
</template>
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
# Slots Demo
|
||||
# Slots
|
||||
```html
|
||||
<n-card title="Card Slots Demo">
|
||||
<template v-slot:header-extra>
|
||||
v-slot:header-extra
|
||||
</template>
|
||||
Card content
|
||||
Card Content
|
||||
<template v-slot:footer>
|
||||
v-slot:footer
|
||||
</template>
|
||||
@ -12,4 +12,4 @@
|
||||
v-slot:action
|
||||
</template>
|
||||
</n-card>
|
||||
```
|
||||
```
|
||||
|
||||
12
demo/documentation/components/card/zhCN/basic.md
Normal file
12
demo/documentation/components/card/zhCN/basic.md
Normal file
@ -0,0 +1,12 @@
|
||||
# 基础
|
||||
基础卡片
|
||||
```html
|
||||
<n-card title="卡片">
|
||||
卡片内容
|
||||
</n-card>
|
||||
```
|
||||
```css
|
||||
.n-card {
|
||||
max-width: 300px;
|
||||
}
|
||||
```
|
||||
7
demo/documentation/components/card/zhCN/border.md
Normal file
7
demo/documentation/components/card/zhCN/border.md
Normal file
@ -0,0 +1,7 @@
|
||||
# 边框
|
||||
卡片可以没有边框。
|
||||
```html
|
||||
<n-card :bordered="false" title="无边框的卡片">
|
||||
卡片内容
|
||||
</n-card>
|
||||
```
|
||||
20
demo/documentation/components/card/zhCN/closable.md
Normal file
20
demo/documentation/components/card/zhCN/closable.md
Normal file
@ -0,0 +1,20 @@
|
||||
# 可关闭
|
||||
```html
|
||||
<n-card title="卡片" closable @close="handleClose">
|
||||
卡片内容
|
||||
</n-card>
|
||||
```
|
||||
```js
|
||||
export default {
|
||||
methods: {
|
||||
handleClose () {
|
||||
this.$NMessage.info('卡片关闭')
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
```css
|
||||
.n-card {
|
||||
max-width: 300px;
|
||||
}
|
||||
```
|
||||
15
demo/documentation/components/card/zhCN/cover.md
Normal file
15
demo/documentation/components/card/zhCN/cover.md
Normal file
@ -0,0 +1,15 @@
|
||||
# 封面
|
||||
卡片可以有封面。
|
||||
```html
|
||||
<n-card title="带封面的卡片">
|
||||
<template v-slot:cover>
|
||||
<img 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">
|
||||
</template>
|
||||
卡片内容
|
||||
</n-card>
|
||||
```
|
||||
```css
|
||||
.n-card {
|
||||
max-width: 300px;
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,10 @@
|
||||
# 卡片
|
||||
```demo
|
||||
basic
|
||||
size
|
||||
cover
|
||||
slots
|
||||
border
|
||||
segment
|
||||
closable
|
||||
```
|
||||
20
demo/documentation/components/card/zhCN/segment.md
Normal file
20
demo/documentation/components/card/zhCN/segment.md
Normal file
@ -0,0 +1,20 @@
|
||||
# 分段
|
||||
`header`、`content`、`footer` 和 `action` 可以被 `hard` 或 `soft` 分段。
|
||||
```html
|
||||
<n-card title="卡片分段示例" :segmented="{
|
||||
header: 'soft',
|
||||
content: 'hard',
|
||||
footer: 'hard'
|
||||
}">
|
||||
<template v-slot:header-extra>
|
||||
v-slot:header-extra
|
||||
</template>
|
||||
卡片内容
|
||||
<template v-slot:footer>
|
||||
v-slot:footer
|
||||
</template>
|
||||
<template v-slot:action>
|
||||
v-slot:action
|
||||
</template>
|
||||
</n-card>
|
||||
```
|
||||
21
demo/documentation/components/card/zhCN/size.md
Normal file
21
demo/documentation/components/card/zhCN/size.md
Normal file
@ -0,0 +1,21 @@
|
||||
# 尺寸
|
||||
卡片有 `small`、`medium`、`large`、`huge` 尺寸。
|
||||
```html
|
||||
<n-card title="小卡片" size="small">
|
||||
卡片内容
|
||||
</n-card>
|
||||
<n-card title="中卡片" size="medium">
|
||||
卡片内容
|
||||
</n-card>
|
||||
<n-card title="大卡片" size="large">
|
||||
卡片内容
|
||||
</n-card>
|
||||
<n-card title="超大卡片" size="huge">
|
||||
卡片内容
|
||||
</n-card>
|
||||
```
|
||||
```css
|
||||
.n-card {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
```
|
||||
15
demo/documentation/components/card/zhCN/slots.md
Normal file
15
demo/documentation/components/card/zhCN/slots.md
Normal file
@ -0,0 +1,15 @@
|
||||
# 插槽
|
||||
```html
|
||||
<n-card title="卡片插槽示例">
|
||||
<template v-slot:header-extra>
|
||||
v-slot:header-extra
|
||||
</template>
|
||||
卡片内容
|
||||
<template v-slot:footer>
|
||||
v-slot:footer
|
||||
</template>
|
||||
<template v-slot:action>
|
||||
v-slot:action
|
||||
</template>
|
||||
</n-card>
|
||||
```
|
||||
@ -1,4 +1,4 @@
|
||||
# Trigger (Leaf Only)
|
||||
# Trigger
|
||||
```html
|
||||
<n-cascader
|
||||
v-model="value"
|
||||
|
||||
32
demo/documentation/components/code/enUS/basic.md
Normal file
32
demo/documentation/components/code/enUS/basic.md
Normal file
@ -0,0 +1,32 @@
|
||||
# Basic
|
||||
```html
|
||||
<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" />
|
||||
```
|
||||
```js
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
cppCode: `int main () {
|
||||
std::cout << "Hello Naive UI";
|
||||
return 0;
|
||||
}`
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
```css
|
||||
.n-code {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
```
|
||||
26
demo/documentation/components/code/enUS/index.md
Normal file
26
demo/documentation/components/code/enUS/index.md
Normal file
@ -0,0 +1,26 @@
|
||||
# Code
|
||||
|
||||
## Prequisites
|
||||
|
||||
<n-alert title="Note" type="warning">
|
||||
Due to package size, Naive UI doesn't include highlight.js. If you want use Code, make sure you have set highlightjs before using it.
|
||||
</n-alert>
|
||||
|
||||
The following code shows how to set hljs of Naive UI. Importing highlight.js on demand is recommonded, because it can significantly reduce bundle size of your app.
|
||||
|
||||
```js
|
||||
import Vue from 'vue'
|
||||
import NaiveUI from 'naive-ui'
|
||||
import hljs from 'highlight.js/lib/highlight'
|
||||
import javascript from 'highlight.js/lib/languages/javascript'
|
||||
|
||||
hljs.registerLanguage('cpp', cpp)
|
||||
Vue.use(NaiveUI)
|
||||
NaiveUI.setHljs(hljs)
|
||||
```
|
||||
|
||||
## Demos
|
||||
|
||||
```demo
|
||||
basic
|
||||
```
|
||||
20
demo/documentation/components/collapse/zhCN/accordion.md
Normal file
20
demo/documentation/components/collapse/zhCN/accordion.md
Normal file
@ -0,0 +1,20 @@
|
||||
# 手风琴
|
||||
```html
|
||||
<n-collapse v-model="activeNames" accordion>
|
||||
<n-collapse-item title="动态类型" name="1">
|
||||
<div>Python</div>
|
||||
</n-collapse-item>
|
||||
<n-collapse-item title="静态类型" name="2">
|
||||
<div>Java</div>
|
||||
</n-collapse-item>
|
||||
</n-collapse>
|
||||
```
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
activeNames: []
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
23
demo/documentation/components/collapse/zhCN/basic.md
Normal file
23
demo/documentation/components/collapse/zhCN/basic.md
Normal file
@ -0,0 +1,23 @@
|
||||
# 基础
|
||||
```html
|
||||
<n-collapse v-model="activeNames">
|
||||
<n-collapse-item title="青铜" name="1">
|
||||
<div>可以</div>
|
||||
</n-collapse-item>
|
||||
<n-collapse-item title="白银" name="2">
|
||||
<div>很好</div>
|
||||
</n-collapse-item>
|
||||
<n-collapse-item title="黄金" name="3">
|
||||
<div>真棒</div>
|
||||
</n-collapse-item>
|
||||
</n-collapse>
|
||||
```
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
activeNames: []
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,6 @@
|
||||
# 折叠面板
|
||||
```demo
|
||||
basic
|
||||
accordion
|
||||
nested
|
||||
```
|
||||
28
demo/documentation/components/collapse/zhCN/nested.md
Normal file
28
demo/documentation/components/collapse/zhCN/nested.md
Normal file
@ -0,0 +1,28 @@
|
||||
# 嵌套
|
||||
```html
|
||||
<n-collapse v-model="activeNames">
|
||||
<n-collapse-item title="绿灯" name="1">
|
||||
<n-collapse v-model="activeNames2">
|
||||
<n-collapse-item title="常亮" name="1">
|
||||
<div>通过</div>
|
||||
</n-collapse-item>
|
||||
<n-collapse-item title="闪烁" name="2">
|
||||
<div>快速通过</div>
|
||||
</n-collapse-item>
|
||||
</n-collapse>
|
||||
</n-collapse-item>
|
||||
<n-collapse-item title="红灯" name="2">
|
||||
<div>停</div>
|
||||
</n-collapse-item>
|
||||
</n-collapse>
|
||||
```
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
activeNames: [],
|
||||
activeNames2: []
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
@ -16,7 +16,7 @@
|
||||
export default {
|
||||
methods: {
|
||||
handleClick(e) {
|
||||
const confirmInstance = this.$NModal.success({
|
||||
const confirmInstance = this.$NConfirm.success({
|
||||
title: "Success",
|
||||
content:
|
||||
"Premium designed icons for use in web, iOS, Android, and desktop apps. Support for SVG and web font. Completely open source, MIT licensed and built by the Ionic Framework team.",
|
||||
|
||||
@ -19,7 +19,7 @@
|
||||
export default {
|
||||
methods: {
|
||||
handleConfirm (e) {
|
||||
const confirmInstance = this.$NModal.confirm({
|
||||
const confirmInstance = this.$NConfirm.open({
|
||||
title: "Confirm",
|
||||
content: "Are u sure to ...?",
|
||||
onPositiveClick: (hide) => {
|
||||
@ -33,7 +33,7 @@ export default {
|
||||
});
|
||||
},
|
||||
handleSuccess (e) {
|
||||
const confirmInstance = this.$NModal.success({
|
||||
const confirmInstance = this.$NConfirm.success({
|
||||
title: "Success",
|
||||
content:
|
||||
"Premium designed icons for use in web, iOS, Android, and desktop apps. Support for SVG and web font. Completely open source, MIT licensed and built by the Ionic Framework team.",
|
||||
@ -44,7 +44,7 @@ export default {
|
||||
});
|
||||
},
|
||||
handleError(e) {
|
||||
const confirmInstance = this.$NModal.error({
|
||||
const confirmInstance = this.$NConfirm.error({
|
||||
title: "Error",
|
||||
content: "这是一个测试？",
|
||||
onPositiveClick: (hide) => {
|
||||
|
||||
@ -2,4 +2,5 @@
|
||||
```demo
|
||||
basic
|
||||
async
|
||||
use-component
|
||||
```
|
||||
@ -1,8 +1,29 @@
|
||||
# Use Component
|
||||
```html
|
||||
<n-confirm title="Title">
|
||||
<n-confirm
|
||||
title="Confirm"
|
||||
content="Are you sure?"
|
||||
:closable="false"
|
||||
positive-text="submit"
|
||||
@positive-click="cancelCallback"
|
||||
@negative-click="submitCallback"
|
||||
negative-text="cancel">
|
||||
</n-confirm>
|
||||
```
|
||||
```js
|
||||
export default {
|
||||
methods: {
|
||||
cancelCallback () {
|
||||
this.$NMessage.success('cancel')
|
||||
this.isActive = false
|
||||
},
|
||||
submitCallback () {
|
||||
this.$NMessage.success('submit')
|
||||
this.isActive = false
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
```css
|
||||
.n-button {
|
||||
margin: 0 12px 8px 0;
|
||||
|
||||
@ -2,5 +2,5 @@
|
||||
```html
|
||||
I love her.
|
||||
<n-divider />
|
||||
She love him.
|
||||
```
|
||||
She loves him.
|
||||
```
|
||||
|
||||
@ -4,13 +4,13 @@ I love her.
|
||||
<n-divider title-placement="left">
|
||||
A Happy Ending
|
||||
</n-divider>
|
||||
She love him.
|
||||
She loves him.
|
||||
<n-divider title-placement="right">
|
||||
A Happy Ending
|
||||
</n-divider>
|
||||
He love me.
|
||||
He loves me.
|
||||
<n-divider dashed>
|
||||
A Happy Ending
|
||||
</n-divider>
|
||||
Oops.
|
||||
```
|
||||
```
|
||||
|
||||
6
demo/documentation/components/divider/zhCN/basic.md
Normal file
6
demo/documentation/components/divider/zhCN/basic.md
Normal file
@ -0,0 +1,6 @@
|
||||
# 基础
|
||||
```html
|
||||
我爱她。
|
||||
<n-divider />
|
||||
她爱他。
|
||||
```
|
||||
16
demo/documentation/components/divider/zhCN/content.md
Normal file
16
demo/documentation/components/divider/zhCN/content.md
Normal file
@ -0,0 +1,16 @@
|
||||
# 标题
|
||||
```html
|
||||
我爱她。
|
||||
<n-divider title-placement="left">
|
||||
大团圆结局
|
||||
</n-divider>
|
||||
她爱他。
|
||||
<n-divider title-placement="right">
|
||||
大团圆结局
|
||||
</n-divider>
|
||||
他爱我。
|
||||
<n-divider dashed>
|
||||
大团圆结局
|
||||
</n-divider>
|
||||
完了。
|
||||
```
|
||||
@ -0,0 +1,6 @@
|
||||
# 分割线
|
||||
```demo
|
||||
basic
|
||||
content
|
||||
vertical
|
||||
```
|
||||
4
demo/documentation/components/divider/zhCN/vertical.md
Normal file
4
demo/documentation/components/divider/zhCN/vertical.md
Normal file
@ -0,0 +1,4 @@
|
||||
# 垂直
|
||||
```html
|
||||
大<n-divider vertical />团圆<n-divider vertical />结局
|
||||
```
|
||||
@ -1,28 +1,29 @@
|
||||
# Basic
|
||||
```html
|
||||
<n-dropdown>
|
||||
<n-dropdown @select="handleSelect" :focusable="false">
|
||||
<template v-slot:activator>
|
||||
<div>menu</div>
|
||||
<n-button>Money Force Us to Work Rather Than Sleep</n-button>
|
||||
</template>
|
||||
<n-dropdown-item
|
||||
v-for="item in items"
|
||||
:key="item"
|
||||
@click="handleClick(item)"
|
||||
>
|
||||
{{ item }}
|
||||
</n-dropdown-item>
|
||||
v-for="hotel in hotels"
|
||||
:key="hotel"
|
||||
:name="hotel.toLowerCase()"
|
||||
:label="hotel"
|
||||
/>
|
||||
</n-dropdown>
|
||||
```
|
||||
```js
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
items: ['item1longlonglong', 'item2longlonglong', 'item3longlonglong', 'item4longlonglong']
|
||||
hotels: [
|
||||
'Marina Bay Sands, Singapore', 'Brown’s Hotel, London', 'Atlantis Bahamas, Nassau', 'The Beverly Hills Hotel, Los Angeles'
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleClick (item) {
|
||||
this.$NMessage.info(item)
|
||||
handleSelect (name) {
|
||||
this.$NMessage.info(name)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,49 +2,53 @@
|
||||
```html
|
||||
<n-dropdown
|
||||
placement="bottom-start"
|
||||
trigger="hover"
|
||||
trigger="click"
|
||||
@select="handleSelect"
|
||||
>
|
||||
<template v-slot:activator>
|
||||
<div>menu</div>
|
||||
<n-button>People and Some Food to Eat</n-button>
|
||||
</template>
|
||||
<n-dropdown-item>
|
||||
item1
|
||||
<n-dropdown-item name="jay gatsby">
|
||||
Jay Gatsby
|
||||
</n-dropdown-item>
|
||||
<n-dropdown-item>
|
||||
item2
|
||||
<n-dropdown-item name="daisy buchanan">
|
||||
Daisy Buchanan
|
||||
</n-dropdown-item>
|
||||
<n-dropdown-item>
|
||||
item3
|
||||
<n-dropdown-divider />
|
||||
<n-dropdown-item name="nick carraway">
|
||||
Nick Carraway
|
||||
</n-dropdown-item>
|
||||
<n-dropdown-submenu>
|
||||
<template v-slot:activator>
|
||||
<n-dropdown-item
|
||||
arrow
|
||||
>
|
||||
submenu
|
||||
</n-dropdown-item>
|
||||
Others
|
||||
</template>
|
||||
<n-dropdown-item>
|
||||
item4
|
||||
<n-dropdown-item name="jordan baker">
|
||||
Jordan Baker
|
||||
</n-dropdown-item>
|
||||
<n-dropdown-item>
|
||||
item5
|
||||
<n-dropdown-divider />
|
||||
<n-dropdown-item name="tom buchanan">
|
||||
Tom Buchanan
|
||||
</n-dropdown-item>
|
||||
<n-dropdown-submenu>
|
||||
<template v-slot:activator>
|
||||
<n-dropdown-item
|
||||
arrow
|
||||
>
|
||||
submenu2
|
||||
</n-dropdown-item>
|
||||
Others
|
||||
</template>
|
||||
<n-dropdown-item>
|
||||
item6
|
||||
<n-dropdown-item name="chicken">
|
||||
Chicken
|
||||
</n-dropdown-item>
|
||||
<n-dropdown-item>
|
||||
item7
|
||||
<n-dropdown-item name="beef">
|
||||
Beef
|
||||
</n-dropdown-item>
|
||||
</n-dropdown-submenu>
|
||||
</n-dropdown-submenu>
|
||||
</n-dropdown>
|
||||
```
|
||||
```js
|
||||
export default {
|
||||
methods: {
|
||||
handleSelect (name) {
|
||||
this.$NMessage.info(name)
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
@ -4,4 +4,7 @@ basic
|
||||
trigger
|
||||
placement
|
||||
cascade
|
||||
width
|
||||
size
|
||||
manual-position
|
||||
```
|
||||
@ -0,0 +1,80 @@
|
||||
# Manually Positioned
|
||||
For some special case, you may want to manually position the dropdown. For example, right click to activate dropdown in some area.
|
||||
```html
|
||||
<div style="width: 200px; height: 200px; background-color: rgba(0, 128, 0, .5);" @contextmenu="handleContextMenu">
|
||||
Right Click
|
||||
</div>
|
||||
<n-dropdown
|
||||
placement="bottom-start"
|
||||
trigger="manual"
|
||||
manually-positioned
|
||||
@select="handleSelect"
|
||||
@blur="handleBlur"
|
||||
:x="x"
|
||||
:y="y"
|
||||
v-model="showDropdown"
|
||||
>
|
||||
<n-dropdown-item name="jay gatsby">
|
||||
Jay Gatsby
|
||||
</n-dropdown-item>
|
||||
<n-dropdown-item name="daisy buchanan">
|
||||
Daisy Buchanan
|
||||
</n-dropdown-item>
|
||||
<n-dropdown-divider />
|
||||
<n-dropdown-item name="nick carraway">
|
||||
Nick Carraway
|
||||
</n-dropdown-item>
|
||||
<n-dropdown-submenu>
|
||||
<template v-slot:activator>
|
||||
Others
|
||||
</template>
|
||||
<n-dropdown-item name="jordan baker">
|
||||
Jordan Baker
|
||||
</n-dropdown-item>
|
||||
<n-dropdown-divider />
|
||||
<n-dropdown-item name="tom buchanan">
|
||||
Tom Buchanan
|
||||
</n-dropdown-item>
|
||||
<n-dropdown-submenu>
|
||||
<template v-slot:activator>
|
||||
Others
|
||||
</template>
|
||||
<n-dropdown-item name="chicken">
|
||||
Chicken
|
||||
</n-dropdown-item>
|
||||
<n-dropdown-item name="beef">
|
||||
Beef
|
||||
</n-dropdown-item>
|
||||
</n-dropdown-submenu>
|
||||
</n-dropdown-submenu>
|
||||
</n-dropdown>
|
||||
```
|
||||
```js
|
||||
export default {
|
||||
methods: {
|
||||
handleSelect (name) {
|
||||
this.showDropdown = false
|
||||
this.$NMessage.info(name)
|
||||
},
|
||||
handleBlur () {
|
||||
this.showDropdown = false
|
||||
},
|
||||
handleContextMenu (e) {
|
||||
e.preventDefault()
|
||||
this.showDropdown = false
|
||||
this.$nextTick().then(() => {
|
||||
this.showDropdown = true
|
||||
this.x = e.clientX
|
||||
this.y = e.clientY
|
||||
})
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
showDropdown: false,
|
||||
x: 0,
|
||||
y: 0
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
@ -1,15 +1,15 @@
|
||||
# Placement
|
||||
```html
|
||||
<n-dropdown placement="bottom-start">
|
||||
<n-dropdown @select="handleSelect" placement="bottom-start" :focusable="false">
|
||||
<template v-slot:activator>
|
||||
<div>menu</div>
|
||||
<n-button>Money Force Us to Work Rather Than Sleep</n-button>
|
||||
</template>
|
||||
<n-dropdown-item
|
||||
v-for="item in items"
|
||||
:key="item"
|
||||
@click="handleClick(item)"
|
||||
v-for="hotel in hotels"
|
||||
:key="hotel"
|
||||
:name="hotel.toLowerCase()"
|
||||
>
|
||||
{{ item }}
|
||||
{{ hotel }}
|
||||
</n-dropdown-item>
|
||||
</n-dropdown>
|
||||
```
|
||||
@ -17,12 +17,14 @@
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
items: ['item1longlonglong', 'item2longlonglong', 'item3longlonglong', 'item4longlonglong']
|
||||
hotels: [
|
||||
'Marina Bay Sands, Singapore', 'Brown’s Hotel, London', 'Atlantis Bahamas, Nassau', 'The Beverly Hills Hotel, Los Angeles'
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleClick (item) {
|
||||
this.$NMessage.info(item)
|
||||
handleSelect (name) {
|
||||
this.$NMessage.info(name)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
149
demo/documentation/components/dropdown/enUS/size.md
Normal file
149
demo/documentation/components/dropdown/enUS/size.md
Normal file
@ -0,0 +1,149 @@
|
||||
# Size
|
||||
```html
|
||||
<n-dropdown
|
||||
placement="bottom-start"
|
||||
trigger="click"
|
||||
size="small"
|
||||
@select="handleSelect"
|
||||
:focusable="false"
|
||||
>
|
||||
<template v-slot:activator>
|
||||
<n-button>Small Some</n-button>
|
||||
</template>
|
||||
<n-dropdown-item name="jay gatsby">
|
||||
Jay Gatsby
|
||||
</n-dropdown-item>
|
||||
<n-dropdown-item name="daisy buchanan">
|
||||
Daisy Buchanan
|
||||
</n-dropdown-item>
|
||||
<n-dropdown-divider />
|
||||
<n-dropdown-item name="nick carraway">
|
||||
Nick Carraway
|
||||
</n-dropdown-item>
|
||||
<n-dropdown-submenu>
|
||||
<template v-slot:activator>
|
||||
Others
|
||||
</template>
|
||||
<n-dropdown-item name="jordan baker">
|
||||
Jordan Baker
|
||||
</n-dropdown-item>
|
||||
<n-dropdown-divider />
|
||||
<n-dropdown-item name="tom buchanan">
|
||||
Tom Buchanan
|
||||
</n-dropdown-item>
|
||||
<n-dropdown-submenu>
|
||||
<template v-slot:activator>
|
||||
Others
|
||||
</template>
|
||||
<n-dropdown-item name="chicken">
|
||||
Chicken
|
||||
</n-dropdown-item>
|
||||
<n-dropdown-item name="beef">
|
||||
Beef
|
||||
</n-dropdown-item>
|
||||
</n-dropdown-submenu>
|
||||
</n-dropdown-submenu>
|
||||
</n-dropdown>
|
||||
<n-dropdown
|
||||
placement="bottom-start"
|
||||
trigger="click"
|
||||
size="medium"
|
||||
@select="handleSelect"
|
||||
:focusable="false"
|
||||
>
|
||||
<template v-slot:activator>
|
||||
<n-button>Medium Some</n-button>
|
||||
</template>
|
||||
<n-dropdown-item name="jay gatsby">
|
||||
Jay Gatsby
|
||||
</n-dropdown-item>
|
||||
<n-dropdown-item name="daisy buchanan">
|
||||
Daisy Buchanan
|
||||
</n-dropdown-item>
|
||||
<n-dropdown-divider />
|
||||
<n-dropdown-item name="nick carraway">
|
||||
Nick Carraway
|
||||
</n-dropdown-item>
|
||||
<n-dropdown-submenu>
|
||||
<template v-slot:activator>
|
||||
Others
|
||||
</template>
|
||||
<n-dropdown-item name="jordan baker">
|
||||
Jordan Baker
|
||||
</n-dropdown-item>
|
||||
<n-dropdown-divider />
|
||||
<n-dropdown-item name="tom buchanan">
|
||||
Tom Buchanan
|
||||
</n-dropdown-item>
|
||||
<n-dropdown-submenu>
|
||||
<template v-slot:activator>
|
||||
Others
|
||||
</template>
|
||||
<n-dropdown-item name="chicken">
|
||||
Chicken
|
||||
</n-dropdown-item>
|
||||
<n-dropdown-item name="beef">
|
||||
Beef
|
||||
</n-dropdown-item>
|
||||
</n-dropdown-submenu>
|
||||
</n-dropdown-submenu>
|
||||
</n-dropdown>
|
||||
<n-dropdown
|
||||
placement="bottom-start"
|
||||
trigger="click"
|
||||
size="large"
|
||||
:focusable="false"
|
||||
@select="handleSelect"
|
||||
>
|
||||
<template v-slot:activator>
|
||||
<n-button>Large Some</n-button>
|
||||
</template>
|
||||
<n-dropdown-item name="jay gatsby">
|
||||
Jay Gatsby
|
||||
</n-dropdown-item>
|
||||
<n-dropdown-item name="daisy buchanan">
|
||||
Daisy Buchanan
|
||||
</n-dropdown-item>
|
||||
<n-dropdown-divider />
|
||||
<n-dropdown-item name="nick carraway">
|
||||
Nick Carraway
|
||||
</n-dropdown-item>
|
||||
<n-dropdown-submenu>
|
||||
<template v-slot:activator>
|
||||
Others
|
||||
</template>
|
||||
<n-dropdown-item name="jordan baker">
|
||||
Jordan Baker
|
||||
</n-dropdown-item>
|
||||
<n-dropdown-divider />
|
||||
<n-dropdown-item name="tom buchanan">
|
||||
Tom Buchanan
|
||||
</n-dropdown-item>
|
||||
<n-dropdown-submenu>
|
||||
<template v-slot:activator>
|
||||
Others
|
||||
</template>
|
||||
<n-dropdown-item name="chicken">
|
||||
Chicken
|
||||
</n-dropdown-item>
|
||||
<n-dropdown-item name="beef">
|
||||
Beef
|
||||
</n-dropdown-item>
|
||||
</n-dropdown-submenu>
|
||||
</n-dropdown-submenu>
|
||||
</n-dropdown>
|
||||
```
|
||||
```js
|
||||
export default {
|
||||
methods: {
|
||||
handleSelect (name) {
|
||||
this.$NMessage.info(name)
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
```css
|
||||
.n-button {
|
||||
margin: 0 8px 12px 0;
|
||||
}
|
||||
```
|
||||
@ -1,44 +1,64 @@
|
||||
# Trigger
|
||||
```html
|
||||
<n-dropdown
|
||||
trigger="hover"
|
||||
style="margin-right: 16px;"
|
||||
>
|
||||
<n-dropdown @select="handleSelect" trigger="hover">
|
||||
<template v-slot:activator>
|
||||
<div>Trigger: hover</div>
|
||||
<n-button>Hover! On the Green Light!</n-button>
|
||||
</template>
|
||||
<n-dropdown-item
|
||||
v-for="item in items"
|
||||
:key="item"
|
||||
@click="handleClick(item)"
|
||||
>
|
||||
{{ item }}
|
||||
</n-dropdown-item>
|
||||
v-for="hotel in hotels"
|
||||
:key="hotel"
|
||||
:name="hotel.toLowerCase()"
|
||||
:label="hotel"
|
||||
/>
|
||||
</n-dropdown>
|
||||
<n-dropdown trigger="click">
|
||||
|
||||
<n-dropdown @select="handleSelect" trigger="click" :focusable="false">
|
||||
<template v-slot:activator>
|
||||
<div>Trigger: click</div>
|
||||
<n-button>Click! On the Green Light</n-button>
|
||||
</template>
|
||||
<n-dropdown-item
|
||||
v-for="item in items"
|
||||
:key="item"
|
||||
@click="handleClick(item)"
|
||||
>
|
||||
{{ item }}
|
||||
</n-dropdown-item>
|
||||
v-for="hotel in hotels"
|
||||
:key="hotel"
|
||||
:name="hotel.toLowerCase()"
|
||||
:label="hotel"
|
||||
/>
|
||||
</n-dropdown>
|
||||
|
||||
<n-dropdown @select="handleSelect" trigger="manual" v-model="showDropdown">
|
||||
<template v-slot:activator>
|
||||
<n-button @click="handleClick">Oh! Manually By Myself!</n-button>
|
||||
</template>
|
||||
<n-dropdown-item
|
||||
v-for="hotel in hotels"
|
||||
:key="hotel"
|
||||
:name="hotel.toLowerCase()"
|
||||
:label="hotel"
|
||||
/>
|
||||
</n-dropdown>
|
||||
```
|
||||
```js
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
items: ['item1longlonglong', 'item2longlonglong', 'item3longlonglong', 'item4longlonglong']
|
||||
hotels: [
|
||||
'Marina Bay Sands, Singapore', 'Brown’s Hotel, London', 'Atlantis Bahamas, Nassau', 'The Beverly Hills Hotel, Los Angeles'
|
||||
],
|
||||
showDropdown: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleClick (item) {
|
||||
this.$NMessage.info(item)
|
||||
handleSelect (name) {
|
||||
this.$NMessage.info(name)
|
||||
},
|
||||
handleClick () {
|
||||
this.showDropdown = !this.showDropdown
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```css
|
||||
.n-button {
|
||||
margin: 0 8px 12px 0;
|
||||
}
|
||||
```
|
||||
57
demo/documentation/components/dropdown/enUS/width.md
Normal file
57
demo/documentation/components/dropdown/enUS/width.md
Normal file
@ -0,0 +1,57 @@
|
||||
# Width
|
||||
`width`, `max-width`, `min-width`, `submenu-width`, `submenu-max-width`, `sub-min-width` can be set.
|
||||
```html
|
||||
<n-dropdown
|
||||
placement="bottom-start"
|
||||
trigger="click"
|
||||
:width="180"
|
||||
:submenu-width="180"
|
||||
@select="handleSelect"
|
||||
>
|
||||
<template v-slot:activator>
|
||||
<n-button>People and Some Food to Eat</n-button>
|
||||
</template>
|
||||
<n-dropdown-item name="jay gatsby">
|
||||
Jay Gatsby
|
||||
</n-dropdown-item>
|
||||
<n-dropdown-item name="daisy buchanan">
|
||||
Daisy Buchanan
|
||||
</n-dropdown-item>
|
||||
<n-dropdown-divider />
|
||||
<n-dropdown-item name="nick carraway">
|
||||
Nick Carraway
|
||||
</n-dropdown-item>
|
||||
<n-dropdown-submenu>
|
||||
<template v-slot:activator>
|
||||
Others
|
||||
</template>
|
||||
<n-dropdown-item name="jordan baker">
|
||||
Jordan Baker
|
||||
</n-dropdown-item>
|
||||
<n-dropdown-divider />
|
||||
<n-dropdown-item name="tom buchanan">
|
||||
Tom Buchanan
|
||||
</n-dropdown-item>
|
||||
<n-dropdown-submenu>
|
||||
<template v-slot:activator>
|
||||
Others
|
||||
</template>
|
||||
<n-dropdown-item name="chicken">
|
||||
Chicken
|
||||
</n-dropdown-item>
|
||||
<n-dropdown-item name="beef">
|
||||
Beef
|
||||
</n-dropdown-item>
|
||||
</n-dropdown-submenu>
|
||||
</n-dropdown-submenu>
|
||||
</n-dropdown>
|
||||
```
|
||||
```js
|
||||
export default {
|
||||
methods: {
|
||||
handleSelect (name) {
|
||||
this.$NMessage.info(name)
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
30
demo/documentation/components/dropdown/zhCN/basic.md
Normal file
30
demo/documentation/components/dropdown/zhCN/basic.md
Normal file
@ -0,0 +1,30 @@
|
||||
# 基础
|
||||
```html
|
||||
<n-dropdown @select="handleSelect" :focusable="false">
|
||||
<template v-slot:activator>
|
||||
<n-button>金钱所迫，起床工作</n-button>
|
||||
</template>
|
||||
<n-dropdown-item
|
||||
v-for="hotel in hotels"
|
||||
:key="hotel"
|
||||
:name="hotel.toLowerCase()"
|
||||
:label="hotel"
|
||||
/>
|
||||
</n-dropdown>
|
||||
```
|
||||
```js
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
hotels: [
|
||||
'滨海湾金沙，新加坡', '布朗酒店，伦敦', '亚特兰蒂斯巴哈马，拿骚', '比佛利山庄酒店，洛杉矶'
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleSelect (name) {
|
||||
this.$NMessage.info(name)
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
54
demo/documentation/components/dropdown/zhCN/cascade.md
Normal file
54
demo/documentation/components/dropdown/zhCN/cascade.md
Normal file
@ -0,0 +1,54 @@
|
||||
# 多级
|
||||
```html
|
||||
<n-dropdown
|
||||
placement="bottom-start"
|
||||
trigger="click"
|
||||
@select="handleSelect"
|
||||
>
|
||||
<template v-slot:activator>
|
||||
<n-button>人物和食物</n-button>
|
||||
</template>
|
||||
<n-dropdown-item name="jay gatsby">
|
||||
杰·盖茨比
|
||||
</n-dropdown-item>
|
||||
<n-dropdown-item name="daisy buchanan">
|
||||
黛西·布坎南
|
||||
</n-dropdown-item>
|
||||
<n-dropdown-divider />
|
||||
<n-dropdown-item name="nick carraway">
|
||||
尼克·卡拉威
|
||||
</n-dropdown-item>
|
||||
<n-dropdown-submenu>
|
||||
<template v-slot:activator>
|
||||
其他
|
||||
</template>
|
||||
<n-dropdown-item name="jordan baker">
|
||||
乔丹·贝克
|
||||
</n-dropdown-item>
|
||||
<n-dropdown-divider />
|
||||
<n-dropdown-item name="tom buchanan">
|
||||
汤姆·布坎南
|
||||
</n-dropdown-item>
|
||||
<n-dropdown-submenu>
|
||||
<template v-slot:activator>
|
||||
其他
|
||||
</template>
|
||||
<n-dropdown-item name="chicken">
|
||||
鸡肉
|
||||
</n-dropdown-item>
|
||||
<n-dropdown-item name="beef">
|
||||
牛肉
|
||||
</n-dropdown-item>
|
||||
</n-dropdown-submenu>
|
||||
</n-dropdown-submenu>
|
||||
</n-dropdown>
|
||||
```
|
||||
```js
|
||||
export default {
|
||||
methods: {
|
||||
handleSelect (name) {
|
||||
this.$NMessage.info(name)
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,10 @@
|
||||
# 下拉菜单
|
||||
```demo
|
||||
basic
|
||||
trigger
|
||||
placement
|
||||
cascade
|
||||
width
|
||||
size
|
||||
manual-position
|
||||
```
|
||||
@ -0,0 +1,80 @@
|
||||
# 手动定位
|
||||
在特殊情况下，你可能想手动定位下拉菜单。比如在一块区域右击以弹出下拉菜单。
|
||||
```html
|
||||
<div style="width: 200px; height: 200px; background-color: rgba(0, 128, 0, .5);" @contextmenu="handleContextMenu">
|
||||
右击
|
||||
</div>
|
||||
<n-dropdown
|
||||
placement="bottom-start"
|
||||
trigger="manual"
|
||||
manually-positioned
|
||||
@select="handleSelect"
|
||||
@blur="handleBlur"
|
||||
:x="x"
|
||||
:y="y"
|
||||
v-model="showDropdown"
|
||||
>
|
||||
<n-dropdown-item name="jay gatsby">
|
||||
杰·盖茨比
|
||||
</n-dropdown-item>
|
||||
<n-dropdown-item name="daisy buchanan">
|
||||
黛西·布坎南
|
||||
</n-dropdown-item>
|
||||
<n-dropdown-divider />
|
||||
<n-dropdown-item name="nick carraway">
|
||||
尼克·卡拉威
|
||||
</n-dropdown-item>
|
||||
<n-dropdown-submenu>
|
||||
<template v-slot:activator>
|
||||
其他
|
||||
</template>
|
||||
<n-dropdown-item name="jordan baker">
|
||||
乔丹·贝克
|
||||
</n-dropdown-item>
|
||||
<n-dropdown-divider />
|
||||
<n-dropdown-item name="tom buchanan">
|
||||
汤姆·布坎南
|
||||
</n-dropdown-item>
|
||||
<n-dropdown-submenu>
|
||||
<template v-slot:activator>
|
||||
其他
|
||||
</template>
|
||||
<n-dropdown-item name="chicken">
|
||||
鸡肉
|
||||
</n-dropdown-item>
|
||||
<n-dropdown-item name="beef">
|
||||
牛肉
|
||||
</n-dropdown-item>
|
||||
</n-dropdown-submenu>
|
||||
</n-dropdown-submenu>
|
||||
</n-dropdown>
|
||||
```
|
||||
```js
|
||||
export default {
|
||||
methods: {
|
||||
handleSelect (name) {
|
||||
this.showDropdown = false
|
||||
this.$NMessage.info(name)
|
||||
},
|
||||
handleBlur () {
|
||||
this.showDropdown = false
|
||||
},
|
||||
handleContextMenu (e) {
|
||||
e.preventDefault()
|
||||
this.showDropdown = false
|
||||
this.$nextTick().then(() => {
|
||||
this.showDropdown = true
|
||||
this.x = e.clientX
|
||||
this.y = e.clientY
|
||||
})
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
showDropdown: false,
|
||||
x: 0,
|
||||
y: 0
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
x
Reference in New Issue
Block a user