mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2025-01-24 12:45:18 +08:00
refactor: button demos
This commit is contained in:
07akioni
parent
1f40e47843
commit
d13b549358
15
demo/components/buttonDemo/enUS/ghost.md
Normal file
15
demo/components/buttonDemo/enUS/ghost.md
Normal file
@ -0,0 +1,15 @@
|
||||
# Ghost
|
||||
Ghost button has transparent background.
|
||||
```html
|
||||
<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 type="warning" ghost>Warning</n-button>
|
||||
<n-button type="error" ghost disabled>Error</n-button>
|
||||
```
|
||||
```css
|
||||
.n-button {
|
||||
margin: 0 8px 8px 0;
|
||||
}
|
||||
```
|
||||
16
demo/components/buttonDemo/enUS/index.md
Normal file
16
demo/components/buttonDemo/enUS/index.md
Normal file
@ -0,0 +1,16 @@
|
||||
# Button
|
||||
Button is used to trigger some actions.
|
||||
## Demos
|
||||
```demo
|
||||
basic
|
||||
disabled
|
||||
icon
|
||||
events
|
||||
shape
|
||||
ghost
|
||||
loading
|
||||
debug
|
||||
```
|
||||
## API
|
||||
|Property|Description|Type|Default|Version|
|
||||
|-|-|-|-|-|
|
||||
12
demo/components/buttonDemo/enUS/shape.md
Normal file
12
demo/components/buttonDemo/enUS/shape.md
Normal file
@ -0,0 +1,12 @@
|
||||
# Shape
|
||||
Button has different shapes.
|
||||
```html
|
||||
<n-button circle icon="md-save" />
|
||||
<n-button type="primary" round>Primary</n-button>
|
||||
<n-button type="info">Info</n-button>
|
||||
```
|
||||
```css
|
||||
.n-button {
|
||||
margin: 0 8px 8px 0;
|
||||
}
|
||||
```
|
||||
@ -1,48 +1,18 @@
|
||||
<template>
|
||||
<div style="padding: 24px 56px;">
|
||||
<n-row style="margin-bottom: 16px;">
|
||||
<n-gradient-text :font-size="20">
|
||||
Button
|
||||
</n-gradient-text>
|
||||
</n-row>
|
||||
<n-row :gutter="16">
|
||||
<n-col span="12">
|
||||
<basic />
|
||||
<icon />
|
||||
<disabled />
|
||||
<events />
|
||||
<loading />
|
||||
</n-col>
|
||||
<n-col span="12">
|
||||
<debug />
|
||||
</n-col>
|
||||
</n-row>
|
||||
</div>
|
||||
<documentation-wrapper>
|
||||
<en-us />
|
||||
<zh-cn />
|
||||
</documentation-wrapper>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
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'
|
||||
import zhCN from './zhCN/index.md'
|
||||
import enUS from './enUS/index.md'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
loading,
|
||||
disabled,
|
||||
icon,
|
||||
events,
|
||||
debug,
|
||||
basic
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
'en-us': enUS,
|
||||
'zh-cn': zhCN
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
15
demo/components/buttonDemo/zhCN/basic.md
Normal file
15
demo/components/buttonDemo/zhCN/basic.md
Normal file
@ -0,0 +1,15 @@
|
||||
# 基础
|
||||
按钮的 `type` 分为 `default`、`primary`、`info`、`success`、`warning` 和 `error`。
|
||||
```html
|
||||
<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: 0 8px 8px 0;
|
||||
}
|
||||
```
|
||||
376
demo/components/buttonDemo/zhCN/debug.md
Normal file
376
demo/components/buttonDemo/zhCN/debug.md
Normal file
@ -0,0 +1,376 @@
|
||||
# Debug
|
||||
列出所有的按钮用来 debug。
|
||||
```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;
|
||||
}
|
||||
}
|
||||
```
|
||||
33
demo/components/buttonDemo/zhCN/disabled.md
Normal file
33
demo/components/buttonDemo/zhCN/disabled.md
Normal file
@ -0,0 +1,33 @@
|
||||
# 禁用
|
||||
按钮可以被禁用
|
||||
```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;
|
||||
}
|
||||
```
|
||||
21
demo/components/buttonDemo/zhCN/events.md
Normal file
21
demo/components/buttonDemo/zhCN/events.md
Normal file
@ -0,0 +1,21 @@
|
||||
# 事件
|
||||
处理按钮的事件。
|
||||
```html
|
||||
<n-button @click="handleClick">
|
||||
Click Me
|
||||
</n-button>
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleClick () {
|
||||
this.$NMessage.info('Button Clicked')
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
15
demo/components/buttonDemo/zhCN/ghost.md
Normal file
15
demo/components/buttonDemo/zhCN/ghost.md
Normal file
@ -0,0 +1,15 @@
|
||||
# 透明背景
|
||||
`Ghost` 按钮有透明的背景。
|
||||
```html
|
||||
<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 type="warning" ghost>Warning</n-button>
|
||||
<n-button type="error" ghost disabled>Error</n-button>
|
||||
```
|
||||
```css
|
||||
.n-button {
|
||||
margin: 0 8px 8px 0;
|
||||
}
|
||||
```
|
||||
11
demo/components/buttonDemo/zhCN/icon.md
Normal file
11
demo/components/buttonDemo/zhCN/icon.md
Normal file
@ -0,0 +1,11 @@
|
||||
# 图标
|
||||
在按钮上使用图标
|
||||
```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;
|
||||
}
|
||||
```
|
||||
17
demo/components/buttonDemo/zhCN/index.md
Normal file
17
demo/components/buttonDemo/zhCN/index.md
Normal file
@ -0,0 +1,17 @@
|
||||
# 按钮
|
||||
按钮用来触发一些操作
|
||||
## 演示
|
||||
```demo
|
||||
basic
|
||||
disabled
|
||||
icon
|
||||
events
|
||||
shape
|
||||
ghost
|
||||
loading
|
||||
debug
|
||||
```
|
||||
## API
|
||||
|属性|说明|类型|默认值|版本|
|
||||
|-|-|-|-|-|
|
||||
|type|按钮类型|string|`'default'`||
|
||||
57
demo/components/buttonDemo/zhCN/loading.md
Normal file
57
demo/components/buttonDemo/zhCN/loading.md
Normal file
@ -0,0 +1,57 @@
|
||||
# 加载中
|
||||
按钮有加载状态
|
||||
```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;
|
||||
}
|
||||
```
|
||||
12
demo/components/buttonDemo/zhCN/shape.md
Normal file
12
demo/components/buttonDemo/zhCN/shape.md
Normal file
@ -0,0 +1,12 @@
|
||||
# 形状
|
||||
按钮拥有不同的形状
|
||||
```html
|
||||
<n-button circle icon="md-save" />
|
||||
<n-button type="primary" round>Primary</n-button>
|
||||
<n-button type="info">Info</n-button>
|
||||
```
|
||||
```css
|
||||
.n-button {
|
||||
margin: 0 8px 8px 0;
|
||||
}
|
||||
```
|
||||
Loading…
Reference in New Issue
Block a user