doc: some fix

This commit is contained in:
07akioni 2019-12-04 18:17:25 +08:00
parent cbf0a76c1f
commit 0aa5a38440
9 changed files with 236 additions and 68 deletions

View File

@ -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'
},
{

View File

@ -1,4 +1,4 @@
# After Select
# Actions After Select
```html
<n-auto-complete
:options="options"

View File

@ -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 }">

View File

@ -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

View File

@ -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;

View File

@ -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;

View File

@ -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 {

View File

@ -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

View File

@ -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: {