mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2025-01-18 12:34:25 +08:00
doc: some fix
This commit is contained in:
parent
cbf0a76c1f
commit
0aa5a38440
@ -137,7 +137,7 @@ export default {
|
||||
name: 'Data Input Components',
|
||||
childItems: [
|
||||
{
|
||||
name: 'Auto Complete (in progress)',
|
||||
name: 'Auto Complete',
|
||||
path: `/${this.lang}/${this.theme}` + '/n-auto-complete'
|
||||
},
|
||||
{
|
||||
|
@ -1,4 +1,4 @@
|
||||
# After Select
|
||||
# Actions After Select
|
||||
```html
|
||||
<n-auto-complete
|
||||
:options="options"
|
||||
|
@ -1,4 +1,4 @@
|
||||
# Custom Input
|
||||
# Custom Input Element
|
||||
```html
|
||||
<n-auto-complete :options="options" v-model="value">
|
||||
<template v-slot:activator="{ handleInput, handleBlur, handleFocus, value }">
|
||||
|
@ -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
|
||||
|
@ -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,8 +1,27 @@
|
||||
# 图标
|
||||
在按钮上使用图标。
|
||||
```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 {
|
||||
|
@ -2,18 +2,22 @@
|
||||
按钮有加载状态。
|
||||
```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
|
||||
|
@ -55,7 +55,7 @@ import asthemecontext from '../../../mixins/asthemecontext'
|
||||
import clickoutside from '../../../directives/clickoutside'
|
||||
import withapp from '../../../mixins/withapp'
|
||||
import themeable from '../../../mixins/themeable'
|
||||
// import asformitem from '../../../mixins/asformitem'
|
||||
import asformitem from '../../../mixins/asformitem'
|
||||
|
||||
import {
|
||||
NBaseSelectMenu,
|
||||
@ -76,11 +76,12 @@ export default {
|
||||
},
|
||||
mixins: [
|
||||
withapp,
|
||||
asthemecontext,
|
||||
themeable,
|
||||
asthemecontext,
|
||||
detachable,
|
||||
zindexable,
|
||||
placeable
|
||||
placeable,
|
||||
asformitem()
|
||||
],
|
||||
props: {
|
||||
placeholder: {
|
||||
|
Loading…
Reference in New Issue
Block a user