mirror/naive-ui
2
0
Fork 0
mirror of https://github.com/tusen-ai/naive-ui.git synced 2025-02-17 13:20:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

doc(button): refactor button doc

Browse Source
This commit is contained in:
07akioni 2019-09-20 00:27:06 +08:00
parent 3f04716e84
commit 72587f7622
14 changed files with 523 additions and 732 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

379
demo/components/buttonDemo/basic.md
View File

@ -1,376 +1,15 @@
# Debug
All buttons are here.
# Basic
There are `default`, `primary`, `info`, `success`, `warning` and `error` type of button
```html
<div class="debug-zone"
n-light-theme-background-color-hint="#ececec"
n-default-theme-background-color-hint="transparent"
>
<n-button
type="default"
icon="md-save"
round
>
Default
</n-button>
<n-button
type="primary"
icon="md-save"
disabled
>
Primary
</n-button>
<n-button
type="info"
icon="md-save"
icon-position="right"
>
Info
</n-button>
<n-button
type="warning"
icon="md-save"
>
Warning
</n-button>
<n-button
type="success"
icon="md-save"
>
Success
</n-button>
<n-button
type="error"
icon="md-save"
>
Error
</n-button>
<n-button
type="default"
icon="md-save"
ghost
>
Default
</n-button>
<n-button
type="primary"
icon="md-save"
ghost
round
>
Primary
</n-button>
<n-button
type="info"
icon="md-save"
ghost
disabled
>
Info
</n-button>
<n-button
type="warning"
icon="md-save"
ghost
icon-position="right"
>
Warning
</n-button>
<n-button
type="success"
icon="md-save"
ghost
>
Success
</n-button>
<n-button
type="error"
icon="md-save"
ghost
>
Error
</n-button>
<n-button
type="default"
icon="md-save"
loading
>
Default
</n-button>
<n-button
type="primary"
icon="md-save"
loading
>
Primary
</n-button>
<n-button
type="info"
icon="md-save"
loading
round
>
Info
</n-button>
<n-button
type="warning"
icon="md-save"
loading
disabled
>
Warning
</n-button>
<n-button
type="success"
icon="md-save"
loading
icon-position="right"
>
Success
</n-button>
<n-button
type="error"
icon="md-save"
loading
>
Error
</n-button>
<n-button
type="default"
icon="md-save"
ghost
loading
>
Default
</n-button>
<n-button
type="primary"
icon="md-save"
ghost
loading
>
Primary
</n-button>
<n-button
type="info"
icon="md-save"
ghost
loading
>
Info
</n-button>
<n-button
type="warning"
icon="md-save"
ghost
loading
round
>
Warning
</n-button>
<n-button
type="success"
icon="md-save"
ghost
loading
disabled
>
Success
</n-button>
<n-button
type="error"
icon="md-save"
ghost
loading
icon-position="right"
>
Error
</n-button>
<n-button
type="default"
icon="md-save"
round
block
>
Default
</n-button>
<n-button
type="primary"
icon="md-save"
disabled
block
size="small"
>
Primary
</n-button>
<n-button
type="info"
icon="md-save"
icon-position="right"
block
size="large"
>
Info
</n-button>
<n-button
type="warning"
icon="md-save"
block
ghost
>
Warning
</n-button>
<n-button
type="success"
icon="md-save"
block
loading
>
Success
</n-button>
<n-button
type="error"
icon="md-save"
block
>
Error
</n-button>
<n-button
type="primary"
icon="md-save"
disabled
circle
size="small"
>
Primary
</n-button>
<n-button
type="info"
icon="md-save"
icon-position="right"
circle
size="large"
>
Info
</n-button>
<n-button
type="warning"
icon="md-save"
circle
ghost
>
Warning
</n-button>
<n-button
type="success"
icon="md-save"
circle
loading
>
Success
</n-button>
<n-button
type="error"
icon="md-save"
circle
>
Error
</n-button>
<n-button
type="error"
icon="md-save"
>
Error
</n-button>
<n-button
type="error"
icon="md-save"
size="large"
/>
<n-button
type="error"
round
icon="md-save"
size="large"
/>
<n-button-group>
<n-button
type="default"
icon="md-save"
round
>
Default
</n-button>
<n-button
type="primary"
icon="md-save"
disabled
>
Primary
</n-button>
<n-button
type="info"
icon="md-save"
icon-position="right"
>
Info
</n-button>
<n-button
type="warning"
icon="md-save"
>
Warning
</n-button>
</n-button-group>
<n-button-group vertical>
<n-button
type="default"
icon="md-save"
round
>
Default
</n-button>
<n-button
type="primary"
icon="md-save"
disabled
>
Primary
</n-button>
<n-button
type="info"
icon="md-save"
icon-position="right"
>
Info
</n-button>
<n-button
type="warning"
icon="md-save"
>
Warning
</n-button>
</n-button-group>
</div>
```
```js
export default {
}
<n-button>Default</n-button>
<n-button type="primary">Primary</n-button>
<n-button type="info">Info</n-button>
<n-button type="success">Success</n-button>
<n-button type="warning">Warning</n-button>
<n-button type="error">Error</n-button>
```
```css
.n-button {
margin-right: 12px;
margin-bottom: 8px;
}
.debug-zone {
border-radius: 4px;
background-color: transparent;
transition: background-color .3s ease-in-out;
}
.n-light-theme {
.debug-zone {
border-radius: 4px;
background-color: #ececec;
}
margin: 0 8px 8px 0;
}
```

51
demo/components/buttonDemo/basicUsage.demo.vue
View File

@ -1,51 +0,0 @@
<template>
<div class="n-doc-section">
<div class="n-doc-section__header">
Basic Usage
</div>
<div
class="n-doc-section__view"
style="flex-wrap: nowrap;"
>
<!--EXAMPLE_START-->
<n-button size="small">
small size
</n-button>
<n-button>
regular size
</n-button>
<n-button size="large">
large size
</n-button>
<n-button
size="small"
round
>
small size
</n-button>
<n-button round>
regular size
</n-button>
<n-button
size="large"
round
>
large size
</n-button>
<!--EXAMPLE_END-->
</div>
<pre class="n-doc-section__inspect">Inspect some value here</pre>
<n-doc-source-block>
<!--SOURCE-->
</n-doc-source-block>
</div>
</template>
<script>
export default {
data () {
return {
}
}
}
</script>

376
demo/components/buttonDemo/debug.md Normal file
View File

@ -0,0 +1,376 @@
# Debug
List all buttons here for debug usage.
```html
<div class="debug-zone"
n-light-theme-background-color-hint="#ececec"
n-default-theme-background-color-hint="transparent"
>
<n-button
type="default"
icon="md-save"
round
>
Default
</n-button>
<n-button
type="primary"
icon="md-save"
disabled
>
Primary
</n-button>
<n-button
type="info"
icon="md-save"
icon-position="right"
>
Info
</n-button>
<n-button
type="warning"
icon="md-save"
>
Warning
</n-button>
<n-button
type="success"
icon="md-save"
>
Success
</n-button>
<n-button
type="error"
icon="md-save"
>
Error
</n-button>
<n-button
type="default"
icon="md-save"
ghost
>
Default
</n-button>
<n-button
type="primary"
icon="md-save"
ghost
round
>
Primary
</n-button>
<n-button
type="info"
icon="md-save"
ghost
disabled
>
Info
</n-button>
<n-button
type="warning"
icon="md-save"
ghost
icon-position="right"
>
Warning
</n-button>
<n-button
type="success"
icon="md-save"
ghost
>
Success
</n-button>
<n-button
type="error"
icon="md-save"
ghost
>
Error
</n-button>
<n-button
type="default"
icon="md-save"
loading
>
Default
</n-button>
<n-button
type="primary"
icon="md-save"
loading
>
Primary
</n-button>
<n-button
type="info"
icon="md-save"
loading
round
>
Info
</n-button>
<n-button
type="warning"
icon="md-save"
loading
disabled
>
Warning
</n-button>
<n-button
type="success"
icon="md-save"
loading
icon-position="right"
>
Success
</n-button>
<n-button
type="error"
icon="md-save"
loading
>
Error
</n-button>
<n-button
type="default"
icon="md-save"
ghost
loading
>
Default
</n-button>
<n-button
type="primary"
icon="md-save"
ghost
loading
>
Primary
</n-button>
<n-button
type="info"
icon="md-save"
ghost
loading
>
Info
</n-button>
<n-button
type="warning"
icon="md-save"
ghost
loading
round
>
Warning
</n-button>
<n-button
type="success"
icon="md-save"
ghost
loading
disabled
>
Success
</n-button>
<n-button
type="error"
icon="md-save"
ghost
loading
icon-position="right"
>
Error
</n-button>
<n-button
type="default"
icon="md-save"
round
block
>
Default
</n-button>
<n-button
type="primary"
icon="md-save"
disabled
block
size="small"
>
Primary
</n-button>
<n-button
type="info"
icon="md-save"
icon-position="right"
block
size="large"
>
Info
</n-button>
<n-button
type="warning"
icon="md-save"
block
ghost
>
Warning
</n-button>
<n-button
type="success"
icon="md-save"
block
loading
>
Success
</n-button>
<n-button
type="error"
icon="md-save"
block
>
Error
</n-button>
<n-button
type="primary"
icon="md-save"
disabled
circle
size="small"
>
Primary
</n-button>
<n-button
type="info"
icon="md-save"
icon-position="right"
circle
size="large"
>
Info
</n-button>
<n-button
type="warning"
icon="md-save"
circle
ghost
>
Warning
</n-button>
<n-button
type="success"
icon="md-save"
circle
loading
>
Success
</n-button>
<n-button
type="error"
icon="md-save"
circle
>
Error
</n-button>
<n-button
type="error"
icon="md-save"
>
Error
</n-button>
<n-button
type="error"
icon="md-save"
size="large"
/>
<n-button
type="error"
round
icon="md-save"
size="large"
/>
<n-button-group>
<n-button
type="default"
icon="md-save"
round
>
Default
</n-button>
<n-button
type="primary"
icon="md-save"
disabled
>
Primary
</n-button>
<n-button
type="info"
icon="md-save"
icon-position="right"
>
Info
</n-button>
<n-button
type="warning"
icon="md-save"
>
Warning
</n-button>
</n-button-group>
<n-button-group vertical>
<n-button
type="default"
icon="md-save"
round
>
Default
</n-button>
<n-button
type="primary"
icon="md-save"
disabled
>
Primary
</n-button>
<n-button
type="info"
icon="md-save"
icon-position="right"
>
Info
</n-button>
<n-button
type="warning"
icon="md-save"
>
Warning
</n-button>
</n-button-group>
</div>
```
```js
export default {
}
```
```css
.n-button {
margin-right: 12px;
margin-bottom: 8px;
}
.debug-zone {
border-radius: 4px;
background-color: transparent;
transition: background-color .3s ease-in-out;
}
.n-light-theme {
.debug-zone {
border-radius: 4px;
background-color: #ececec;
}
}
```

62
demo/components/buttonDemo/disabled.demo.vue
View File

@ -1,62 +0,0 @@
<template>
<div class="n-doc-section">
<div class="n-doc-section__header">
Disabled
</div>
<div
class="n-doc-section__view"
style="flex-wrap: nowrap;"
>
<!--EXAMPLE_START-->
<n-button
size="small"
disabled
>
small size
</n-button>
<n-button disabled>
regular size
</n-button>
<n-button
size="large"
disabled
>
large size
</n-button>
<n-button
size="small"
disabled
type="primary"
>
small size
</n-button>
<n-button
disabled
type="primary"
>
regular size
</n-button>
<n-button
size="large"
disabled
type="primary"
>
large size
</n-button>
<!--EXAMPLE_END-->
</div>
<pre class="n-doc-section__inspect">Inspect some value here</pre>
<n-doc-source-block>
<!--SOURCE-->
</n-doc-source-block>
</div>
</template>
<script>
export default {
data () {
return {
}
}
}
</script>

33
demo/components/buttonDemo/disabled.md Normal file
View File

@ -0,0 +1,33 @@
# Disabled
Button can be disabled
```html
<n-button
size="small"
disabled
>
Disabled
</n-button>
<n-button
disabled
type="primary"
>
Disabled
</n-button>
<n-button
disabled
round
type="primary"
>
regular size
</n-button>
<n-button
disabled
circle
icon="md-save"
/>
```
```css
.n-button {
margin: 0 8px 8px 0;
}
```

35
demo/components/buttonDemo/events.demo.vue
View File

@ -1,35 +0,0 @@
<template>
<div class="n-doc-section">
<div class="n-doc-section__header">
Events
</div>
<div
class="n-doc-section__view"
style="flex-wrap: nowrap;"
>
<!--EXAMPLE_START-->
<n-button @click="handleClick">
Click Me
</n-button>
<!--EXAMPLE_END-->
</div>
<pre class="n-doc-section__inspect">Inspect some value here</pre>
<n-doc-source-block>
<!--SOURCE-->
</n-doc-source-block>
</div>
</template>
<script>
export default {
data () {
return {
}
},
methods: {
handleClick () {
this.$NMessage.info('Button Clicked')
}
}
}
</script>

21
demo/components/buttonDemo/events.md Normal file
View File

@ -0,0 +1,21 @@
# Events
Listening events on button.
```html
<n-button @click="handleClick">
Click Me
</n-button>
```
```js
export default {
data () {
return {
}
},
methods: {
handleClick () {
this.$NMessage.info('Button Clicked')
}
}
}
```

65
demo/components/buttonDemo/icon.demo.vue
View File

@ -1,65 +0,0 @@
<template>
<div class="n-doc-section">
<div class="n-doc-section__header">
Icon
</div>
<div
class="n-doc-section__view"
>
<!--EXAMPLE_START-->
<n-button
round
size="small"
icon="md-save"
>
Save as Template
</n-button>
<n-button
round
icon="md-save"
icon-position="right"
>
Save as Template
</n-button>
<n-button
size="large"
icon="md-save"
round
>
Save as Template
</n-button>
<n-button
size="small"
icon="md-save"
>
Save as Template
</n-button>
<n-button
icon="md-save"
icon-position="right"
>
Save as Template
</n-button>
<n-button
size="large"
icon="md-save"
>
Save as Template
</n-button>
<!--EXAMPLE_END-->
</div>
<pre class="n-doc-section__inspect">Inspect some value here</pre>
<n-doc-source-block>
<!--SOURCE-->
</n-doc-source-block>
</div>
</template>
<script>
export default {
data () {
return {
}
}
}
</script>

11
demo/components/buttonDemo/icon.md Normal file
View File

@ -0,0 +1,11 @@
# Icon
Using icon in button
```html
<n-button icon="md-save">Save</n-button>
<n-button icon="md-save" icon-position="right">Save</n-button>
```
```css
.n-button {
margin: 0 8px 8px 0;
}
```

19
demo/components/buttonDemo/index.vue
View File

@ -9,34 +9,31 @@
</n-gradient-text>
</div>
<div class="n-doc-body">
<basic />
<icon />
<basic-usage />
<disabled />
<type />
<events />
<loading />
<basic />
<debug />
</div>
</div>
</template>
<script>
import loading from './loading.demo.vue'
import basicUsage from './basicUsage.demo.vue'
import disabled from './disabled.demo.vue'
import type from './type.demo.vue'
import icon from './icon.demo.vue'
import events from './events.demo.vue'
import loading from './loading.md'
import disabled from './disabled.md'
import events from './events.md'
import debug from './debug.md'
import basic from './basic.md'
import icon from './icon.md'
export default {
components: {
loading,
basicUsage,
disabled,
type,
icon,
events,
debug,
basic
},
data () {

64
demo/components/buttonDemo/loading.demo.vue
View File

@ -1,64 +0,0 @@
<template>
<div class="n-doc-section">
<div class="n-doc-section__header">
Loading
</div>
<div
class="n-doc-section__view"
>
<!--EXAMPLE_START-->
<n-button
icon="md-save"
:loading="loading"
@click="loading = !loading"
>
Loading
</n-button>
<n-button
icon="md-save"
:loading="loading"
icon-position="right"
@click="loading = !loading"
>
Loading
</n-button>
<n-button
:loading="loading"
size="small"
@click="loading = !loading"
>
Loading
</n-button>
<n-button
:loading="loading"
size="large"
@click="loading = !loading"
>
Loading
</n-button>
<n-button
:loading="loading"
type="primary"
size="large"
round
@click="loading = !loading"
>
Loading
</n-button>
<!--EXAMPLE_END-->
</div>
<n-doc-source-block>
<!--SOURCE-->
</n-doc-source-block>
</div>
</template>
<script>
export default {
data () {
return {
loading: false
}
}
}
</script>

57
demo/components/buttonDemo/loading.md Normal file
View File

@ -0,0 +1,57 @@
# Loading
Button has loading status.
```html
<n-button
icon="md-save"
:loading="loading"
@click="loading = !loading"
>
Loading
</n-button>
<n-button
icon="md-save"
:loading="loading"
icon-position="right"
@click="loading = !loading"
>
Loading
</n-button>
<n-button
:loading="loading"
size="small"
@click="loading = !loading"
>
Loading
</n-button>
<n-button
:loading="loading"
size="large"
@click="loading = !loading"
>
Loading
</n-button>
<n-button
:loading="loading"
type="primary"
size="large"
round
@click="loading = !loading"
>
Loading
</n-button>
```
```js
export default {
data () {
return {
loading: false
}
}
}
```
```css
.n-button {
margin: 0 8px 8px 0;
}
```

44
demo/components/buttonDemo/type.demo.vue
View File

@ -1,44 +0,0 @@
<template>
<div class="n-doc-section">
<div class="n-doc-section__header">
Type
</div>
<div
class="n-doc-section__view"
style="flex-wrap: nowrap;"
>
<!--EXAMPLE_START-->
<n-button
size="small"
type="primary"
>
small size
</n-button>
<n-button
type="primary"
>
regular size
</n-button>
<n-button
size="large"
type="primary"
>
large size
</n-button>
<!--EXAMPLE_END-->
</div>
<pre class="n-doc-section__inspect">Inspect some value here</pre>
<n-doc-source-block>
<!--SOURCE-->
</n-doc-source-block>
</div>
</template>
<script>
export default {
data () {
return {
}
}
}
</script>

38
marked/basic.md
View File

@ -1,32 +1,10 @@
# Type
There are `primary` button, `default` button, `success` button, `info` button, `warning` button and `error` button.
# Basic
There are `default`, `primary`, `info`, `success`, `warning` and `error` type of button
```html
<n-button
size="small"
type="primary"
>
small size
</n-button>
<n-button
type="primary"
>
regular size
</n-button>
<n-button
size="large"
type="primary"
>
large size
</n-button>
```
```js
export default {
}
```
```css
.n-button {
margin-right: 12px;
margin-bottom: 8px;
}
<n-button>Default</n-button>
<n-button type="primary">Primary</n-button>
<n-button type="info">Info</n-button>
<n-button type="success">Success</n-button>
<n-button type="warning">Warning</n-button>
<n-button type="Error">Error</n-button>
```