mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2025-01-30 12:52:43 +08:00
doc: size on data input components
This commit is contained in:
07akioni
parent
622fd5d5ad
commit
07659bbbb2
@ -18,7 +18,7 @@ As is.
|
||||
Dark theme included. Theme can be changed seamlessly.
|
||||
> When you find that the UI drafts are already in dark mode, you can't start with light theme. But if you start to build a dark mode UI, sooner or later you have to build a light themed UI. As a result, Naive UI has both of them.
|
||||
### Batteries Included
|
||||
More than 60+ components. Utils for building themed components are provided.
|
||||
More than 60 components. Utils for building themed components are provided.
|
||||
|
||||
## License
|
||||
Naive UI is licensed under the [MIT license](https://opensource.org/licenses/MIT).
|
||||
|
||||
@ -18,7 +18,7 @@ after-select
|
||||
|-|-|-|-|
|
||||
|size|`'small' \| 'medium' \| 'large'`|`'medium'`||
|
||||
|value|`string`|`null`||
|
||||
|options|`Array`|`[]`||
|
||||
|options|`Array<AutoCompleteOption \| AutoCompleteOptionGroup>`|`[]`||
|
||||
|placeholder|`string`|`null`||
|
||||
|blur-after-select|`boolean`|`false`||
|
||||
|clear-after-select|`boolean`|`false`||
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
# Size
|
||||
# 尺寸
|
||||
```html
|
||||
<n-auto-complete :options="options" v-model="value" placeholder="Email" size="small" />
|
||||
<n-auto-complete :options="options" v-model="value" placeholder="Email" size="medium" />
|
||||
<n-auto-complete :options="options" v-model="value" placeholder="Email" size="large" />
|
||||
<n-auto-complete :options="options" v-model="value" placeholder="邮箱" size="small" />
|
||||
<n-auto-complete :options="options" v-model="value" placeholder="邮箱" size="medium" />
|
||||
<n-auto-complete :options="options" v-model="value" placeholder="邮箱" size="large" />
|
||||
```
|
||||
```js
|
||||
export default {
|
||||
|
||||
@ -18,7 +18,7 @@ debug
|
||||
### Button Props
|
||||
|Name|Type|Default|Description|
|
||||
|-|-|-|-|
|
||||
|size|`'small' \| 'medium' \| 'large'`|`'medium'`||
|
||||
|size|`'tiny' \| 'small' \| 'medium' \| 'large'`|`'medium'`||
|
||||
|type|`'default' \| 'primary' \| 'success' \| 'info' \| 'warning' \| 'error'`|`'default'`||
|
||||
|text|`boolean`|`false`||
|
||||
|block|`boolean`|`false`||
|
||||
|
||||
@ -18,7 +18,7 @@ debug
|
||||
### Button Props
|
||||
|名称|类型|默认值|说明|
|
||||
|-|-|-|-|
|
||||
|size|`'small' \| 'medium' \| 'large'`|`'medium'`||
|
||||
|size|`'tiny' \| 'small' \| 'medium' \| 'large'`|`'medium'`||
|
||||
|type|`'default' \| 'primary' \| 'success' \| 'info' \| 'warning' \| 'error'`|`'default'`||
|
||||
|text|`boolean`|`false`||
|
||||
|block|`boolean`|`false`||
|
||||
|
||||
@ -3,21 +3,21 @@
|
||||
```html
|
||||
<n-cascader
|
||||
v-model="value"
|
||||
placeholder="Please Select Something"
|
||||
placeholder="请选些什么"
|
||||
:options="options"
|
||||
:leaf-only="false"
|
||||
size="small"
|
||||
/>
|
||||
<n-cascader
|
||||
v-model="value"
|
||||
placeholder="Please Select Something"
|
||||
placeholder="请选些什么"
|
||||
:options="options"
|
||||
:leaf-only="false"
|
||||
size="medium"
|
||||
/>
|
||||
<n-cascader
|
||||
v-model="value"
|
||||
placeholder="Please Select Something"
|
||||
placeholder="请选些什么"
|
||||
:options="options"
|
||||
:leaf-only="false"
|
||||
size="large"
|
||||
|
||||
@ -45,6 +45,7 @@ ajaxUsage
|
||||
|row-key|`(rowData: object) => number \| string`|`null`|Generate the key of the row by row data (if you don't want to set the key)|
|
||||
|bordered|`boolean`|`true`||
|
||||
|single-line|`boolean`|`true`||
|
||||
|size|`'small' \| 'medium' \| 'large'`|`'medium'`||
|
||||
|
||||
## Methods
|
||||
These methods can help you control table in an uncontrolled manner. However, it's not recommended to use them to implement some async operations. If async operations is needed, use table in a **controlled** manner.
|
||||
|
||||
@ -45,6 +45,7 @@ ajaxUsage
|
||||
|row-key|`(rowData: object) => number \| string`|`null`|通过行数据创建行的 key（如果你不想给每一行加上 key）|
|
||||
|bordered|`boolean`|`true`||
|
||||
|single-line|`boolean`|`true`||
|
||||
|size|`'small' \| 'medium' \| 'large'`|`'medium'`||
|
||||
|
||||
## Methods
|
||||
这些方法可以帮助你在非受控的状态下改变表格，但是，并不推荐在异步的状况下使用这些方法。如果需要异步操作，最好用**受控**的方式使用表格。
|
||||
|
||||
@ -28,7 +28,7 @@ format
|
||||
|clearable|`boolean`|`false`||
|
||||
|disabled|`boolean`|`false`||
|
||||
|type|`'date' \| 'datetime' \| 'daterange' \|'datetimerange'`|`'date`||
|
||||
|
||||
|size|`'small' \| 'medium' \| 'large'`|`'medium'`||
|
||||
|
||||
### Date Type Props
|
||||
|Name|Type|Default|Description|
|
||||
|
||||
@ -28,6 +28,7 @@ format
|
||||
|clearable|`boolean`|`false`||
|
||||
|disabled|`boolean`|`false`||
|
||||
|type|`'date' \| 'datetime' \| 'daterange' \|'datetimerange'`|`'date`||
|
||||
|size|`'small' \| 'medium' \| 'large'`|`'medium'`||
|
||||
|
||||
|
||||
### Date 类型的 Props
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
# 尺寸
|
||||
Date Picker 有 `small`、`medium` 和 `large` 尺寸。
|
||||
有 `small`、`medium` 和 `large` 尺寸。
|
||||
```html
|
||||
<n-date-picker
|
||||
v-model="timestamp"
|
||||
|
||||
@ -2,31 +2,7 @@
|
||||
Sometimes a radio button group looks more elegant.
|
||||
```html
|
||||
<div style="margin-bottom: 12px;">
|
||||
<n-radio-group v-model="value" name="radiobuttongroup">
|
||||
<n-radio-button
|
||||
v-for="song in songs"
|
||||
:key="song.value"
|
||||
:value="song.value"
|
||||
:disabled="(song.label === 'Live Forever' && disabled1 || song.label === 'Shakermaker' && disabled2)"
|
||||
>
|
||||
{{ song.label }}
|
||||
</n-radio-button>
|
||||
</n-radio-group>
|
||||
</div>
|
||||
<div style="margin-bottom: 12px;">
|
||||
<n-radio-group v-model="value" name="radiobuttongroup" size="medium">
|
||||
<n-radio-button
|
||||
v-for="song in songs"
|
||||
:key="song.value"
|
||||
:value="song.value"
|
||||
:disabled="(song.label === 'Live Forever' && disabled1 || song.label === 'Shakermaker' && disabled2)"
|
||||
>
|
||||
{{ song.label }}
|
||||
</n-radio-button>
|
||||
</n-radio-group>
|
||||
</div>
|
||||
<div style="margin-bottom: 12px;">
|
||||
<n-radio-group v-model="value" name="radiobuttongroup" size="large">
|
||||
<n-radio-group v-model="value" name="radiobuttongroup1">
|
||||
<n-radio-button
|
||||
v-for="song in songs"
|
||||
:key="song.value"
|
||||
|
||||
@ -6,6 +6,7 @@ When I was young, I was fond of listening to the radio, such as FM 106.8 or FM 9
|
||||
basic
|
||||
group
|
||||
button-group
|
||||
size
|
||||
```
|
||||
## V-model
|
||||
### Radio V-model
|
||||
@ -42,6 +43,7 @@ button-group
|
||||
|size|`'small' \| 'medium' \| 'large'`|`small`||
|
||||
|value|`string \| number \| boolean`|`null`||
|
||||
|disabled|`boolean`|`false`||
|
||||
|size|`'small' \| 'medium' \| 'large'`|`'small'`||
|
||||
|
||||
## Events
|
||||
### Radio, Radio Button Events
|
||||
|
||||
75
demo/documentation/components/radio/enUS/size.md
Normal file
75
demo/documentation/components/radio/enUS/size.md
Normal file
@ -0,0 +1,75 @@
|
||||
# Size
|
||||
Choose whatever you want.
|
||||
```html
|
||||
<div style="margin-bottom: 12px;">
|
||||
<n-radio-group v-model="value" name="radiobuttongroup2" size="medium">
|
||||
<n-radio-button
|
||||
v-for="song in songs"
|
||||
:key="song.value"
|
||||
:value="song.value"
|
||||
:disabled="(song.label === 'Live Forever' && disabled1 || song.label === 'Shakermaker' && disabled2)"
|
||||
>
|
||||
{{ song.label }}
|
||||
</n-radio-button>
|
||||
</n-radio-group>
|
||||
</div>
|
||||
<div style="margin-bottom: 12px;">
|
||||
<n-radio-group v-model="value" name="radiobuttongroup3" size="large">
|
||||
<n-radio-button
|
||||
v-for="song in songs"
|
||||
:key="song.value"
|
||||
:value="song.value"
|
||||
:disabled="(song.label === 'Live Forever' && disabled1 || song.label === 'Shakermaker' && disabled2)"
|
||||
>
|
||||
{{ song.label }}
|
||||
</n-radio-button>
|
||||
</n-radio-group>
|
||||
</div>
|
||||
<n-checkbox
|
||||
v-model="disabled2"
|
||||
style="margin-right: 12px;"
|
||||
>
|
||||
禁用 Shakemaker
|
||||
</n-checkbox>
|
||||
<n-checkbox
|
||||
v-model="disabled1"
|
||||
>
|
||||
禁用 Live Forever
|
||||
</n-checkbox>
|
||||
```
|
||||
```js
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
value: null,
|
||||
disabled2: false,
|
||||
disabled1: false,
|
||||
songs: [
|
||||
{
|
||||
value: 'Rock\'n\'Roll Star',
|
||||
label: 'Rock\'n\'Roll Star'
|
||||
},
|
||||
{
|
||||
value: 'Shakermaker',
|
||||
label: 'Shakermaker'
|
||||
},
|
||||
{
|
||||
value: 'Live Forever',
|
||||
label: 'Live Forever'
|
||||
},
|
||||
{
|
||||
value: 'Up in the Sky',
|
||||
label: 'Up in the Sky'
|
||||
},
|
||||
{
|
||||
value: '...',
|
||||
label: '...'
|
||||
}
|
||||
].map(s => {
|
||||
s.value = s.value.toLowerCase()
|
||||
return s
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
@ -13,30 +13,6 @@
|
||||
</n-radio-button>
|
||||
</n-radio-group>
|
||||
</div>
|
||||
<div style="margin-bottom: 12px;">
|
||||
<n-radio-group v-model="value" name="radiobuttongroup" size="medium">
|
||||
<n-radio-button
|
||||
v-for="song in songs"
|
||||
:key="song.value"
|
||||
:value="song.value"
|
||||
:disabled="(song.label === 'Live Forever' && disabled1 || song.label === 'Shakermaker' && disabled2)"
|
||||
>
|
||||
{{ song.label }}
|
||||
</n-radio-button>
|
||||
</n-radio-group>
|
||||
</div>
|
||||
<div style="margin-bottom: 12px;">
|
||||
<n-radio-group v-model="value" name="radiobuttongroup" size="large">
|
||||
<n-radio-button
|
||||
v-for="song in songs"
|
||||
:key="song.value"
|
||||
:value="song.value"
|
||||
:disabled="(song.label === 'Live Forever' && disabled1 || song.label === 'Shakermaker' && disabled2)"
|
||||
>
|
||||
{{ song.label }}
|
||||
</n-radio-button>
|
||||
</n-radio-group>
|
||||
</div>
|
||||
<n-checkbox
|
||||
v-model="disabled2"
|
||||
style="margin-right: 12px;"
|
||||
|
||||
@ -6,6 +6,7 @@
|
||||
basic
|
||||
group
|
||||
button-group
|
||||
size
|
||||
```
|
||||
## V-model
|
||||
### Radio V-model
|
||||
@ -34,6 +35,7 @@ button-group
|
||||
|checked-value|`string \| number \| boolean`|`null`||
|
||||
|value|`string \| number \| boolean`|`null`||
|
||||
|disabled|`boolean`|`false`||
|
||||
|size|`'small' \| 'medium' \| 'large'`|`'small'`||
|
||||
|
||||
### Radio Group Props
|
||||
|名称|类型|默认值|说明|
|
||||
|
||||
75
demo/documentation/components/radio/zhCN/size.md
Normal file
75
demo/documentation/components/radio/zhCN/size.md
Normal file
@ -0,0 +1,75 @@
|
||||
# 尺寸
|
||||
任君挑选。
|
||||
```html
|
||||
<div style="margin-bottom: 12px;">
|
||||
<n-radio-group v-model="value" name="radiobuttongroup2" size="medium">
|
||||
<n-radio-button
|
||||
v-for="song in songs"
|
||||
:key="song.value"
|
||||
:value="song.value"
|
||||
:disabled="(song.label === 'Live Forever' && disabled1 || song.label === 'Shakermaker' && disabled2)"
|
||||
>
|
||||
{{ song.label }}
|
||||
</n-radio-button>
|
||||
</n-radio-group>
|
||||
</div>
|
||||
<div style="margin-bottom: 12px;">
|
||||
<n-radio-group v-model="value" name="radiobuttongroup3" size="large">
|
||||
<n-radio-button
|
||||
v-for="song in songs"
|
||||
:key="song.value"
|
||||
:value="song.value"
|
||||
:disabled="(song.label === 'Live Forever' && disabled1 || song.label === 'Shakermaker' && disabled2)"
|
||||
>
|
||||
{{ song.label }}
|
||||
</n-radio-button>
|
||||
</n-radio-group>
|
||||
</div>
|
||||
<n-checkbox
|
||||
v-model="disabled2"
|
||||
style="margin-right: 12px;"
|
||||
>
|
||||
禁用 Shakemaker
|
||||
</n-checkbox>
|
||||
<n-checkbox
|
||||
v-model="disabled1"
|
||||
>
|
||||
禁用 Live Forever
|
||||
</n-checkbox>
|
||||
```
|
||||
```js
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
value: null,
|
||||
disabled2: false,
|
||||
disabled1: false,
|
||||
songs: [
|
||||
{
|
||||
value: 'Rock\'n\'Roll Star',
|
||||
label: 'Rock\'n\'Roll Star'
|
||||
},
|
||||
{
|
||||
value: 'Shakermaker',
|
||||
label: 'Shakermaker'
|
||||
},
|
||||
{
|
||||
value: 'Live Forever',
|
||||
label: 'Live Forever'
|
||||
},
|
||||
{
|
||||
value: 'Up in the Sky',
|
||||
label: 'Up in the Sky'
|
||||
},
|
||||
{
|
||||
value: '...',
|
||||
label: '...'
|
||||
}
|
||||
].map(s => {
|
||||
s.value = s.value.toLowerCase()
|
||||
return s
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
@ -21,6 +21,7 @@ format
|
||||
|is-hour-disabled|`(hour: number) => boolean`|`() => false`||
|
||||
|is-minute-disabled|`(minute: number, hour: number) => boolean`|`() => false`||
|
||||
|is-second-disabled|`(second: number, minute: number, hour: number) => boolean`|`() => false`||
|
||||
|size|`'small' \| 'medium' \| 'large'`|`'medium'`||
|
||||
|
||||
## Events
|
||||
|Name|Parameters|Description|
|
||||
|
||||
@ -22,6 +22,7 @@ format
|
||||
|is-hour-disabled|`(hour: number) => boolean`|`() => false`||
|
||||
|is-minute-disabled|`(minute: number, hour: number) => boolean`|`() => false`||
|
||||
|is-second-disabled|`(second: number, minute: number, hour: number) => boolean`|`() => false`||
|
||||
|size|`'small' \| 'medium' \| 'large'`|`'medium'`||
|
||||
|
||||
## Events
|
||||
|名称|参数|说明|
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
# 尺寸
|
||||
Time Picker 可以是 `small`、`medium` 或 `large` 尺寸。
|
||||
可以是 `small`、`medium` 或 `large` 尺寸。
|
||||
```html
|
||||
<n-time-picker
|
||||
v-model="timestamp"
|
||||
|
||||
@ -5,6 +5,7 @@ Left, right, left, right... As a boring guy, I can play it all day.
|
||||
```demo
|
||||
basic
|
||||
large-data
|
||||
size
|
||||
filterable
|
||||
```
|
||||
## V-model
|
||||
@ -25,6 +26,8 @@ filterable
|
||||
|source-filter-placeholder|`string`|`null`||
|
||||
|target-filter-placeholder|`string`|`null`||
|
||||
|filter|`(pattern: string, option: TransferOption, from: 'source' \| 'target') => boolean`|A basic label string match function||
|
||||
|size|`'small' \| 'medium' \| 'large'`|`'medium'`||
|
||||
|
||||
|
||||
### TransferOption Type
|
||||
|Property|Type|Description|
|
||||
|
||||
43
demo/documentation/components/transfer/enUS/size.md
Normal file
43
demo/documentation/components/transfer/enUS/size.md
Normal file
@ -0,0 +1,43 @@
|
||||
# Size
|
||||
They doesn't look harmonious.
|
||||
```html
|
||||
<n-transfer
|
||||
ref="transfer"
|
||||
v-model="value"
|
||||
:options="options"
|
||||
size="small"
|
||||
/>
|
||||
<n-transfer
|
||||
ref="transfer"
|
||||
v-model="value"
|
||||
:options="options"
|
||||
size="large"
|
||||
/>
|
||||
```
|
||||
```js
|
||||
function createOptions () {
|
||||
return Array.apply(null, { length: 20 }).map((v, i) => ({
|
||||
label: 'Option' + i,
|
||||
value: i,
|
||||
disabled: i % 5 === 0
|
||||
}))
|
||||
}
|
||||
|
||||
function createValues () {
|
||||
return Array.apply(null, { length: 5 }).map((v, i) => i)
|
||||
}
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
options: createOptions(),
|
||||
value: createValues()
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
```css
|
||||
.n-transfer {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
```
|
||||
@ -5,6 +5,7 @@
|
||||
```demo
|
||||
basic
|
||||
large-data
|
||||
size
|
||||
filterable
|
||||
```
|
||||
## V-model
|
||||
@ -25,6 +26,8 @@ filterable
|
||||
|source-filter-placeholder|`string`|`null`||
|
||||
|target-filter-placeholder|`string`|`null`||
|
||||
|filter|`(pattern: string, option: TransferOption, from: 'source' \| 'target') => boolean`|一个简单的标签字符串匹配函数||
|
||||
|size|`'small' \| 'medium' \| 'large'`|`'medium'`||
|
||||
|
||||
|
||||
### TransferOption Type
|
||||
|属性|类型|说明|
|
||||
|
||||
43
demo/documentation/components/transfer/zhCN/size.md
Normal file
43
demo/documentation/components/transfer/zhCN/size.md
Normal file
@ -0,0 +1,43 @@
|
||||
# 尺寸
|
||||
太小太大好像都不怎么好看。
|
||||
```html
|
||||
<n-transfer
|
||||
ref="transfer"
|
||||
v-model="value"
|
||||
:options="options"
|
||||
size="small"
|
||||
/>
|
||||
<n-transfer
|
||||
ref="transfer"
|
||||
v-model="value"
|
||||
:options="options"
|
||||
size="large"
|
||||
/>
|
||||
```
|
||||
```js
|
||||
function createOptions () {
|
||||
return Array.apply(null, { length: 20 }).map((v, i) => ({
|
||||
label: 'Option' + i,
|
||||
value: i,
|
||||
disabled: i % 5 === 0
|
||||
}))
|
||||
}
|
||||
|
||||
function createValues () {
|
||||
return Array.apply(null, { length: 5 }).map((v, i) => i)
|
||||
}
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
options: createOptions(),
|
||||
value: createValues()
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
```css
|
||||
.n-transfer {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
```
|
||||
@ -419,7 +419,7 @@ export default {
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
options (newOptions) {
|
||||
options () {
|
||||
this.initialized = false
|
||||
const valueSet = this.valueSet
|
||||
this.memorizedSourceOptions = this.options.filter(option => !valueSet.has(option.value))
|
||||
@ -622,7 +622,7 @@ export default {
|
||||
const sourceLightBar = this.$refs.sourceLightBar
|
||||
if (!sourceLightBar) return
|
||||
if (this.virtualScroll) {
|
||||
sourceLightBar.updateLightBarTop(true, () => index * itemSize)
|
||||
sourceLightBar.updateLightBarTop(true, () => index * this.itemSize)
|
||||
} else {
|
||||
sourceLightBar.updateLightBarTop(e.target)
|
||||
}
|
||||
@ -630,7 +630,7 @@ export default {
|
||||
handleTargetOptionMouseEnter: debounce(function (e, index) {
|
||||
const targetLightBar = this.$refs.targetLightBar
|
||||
if (this.virtualScroll) {
|
||||
targetLightBar.updateLightBarTop(true, () => index * itemSize)
|
||||
targetLightBar.updateLightBarTop(true, () => index * this.itemSize)
|
||||
} else {
|
||||
targetLightBar.updateLightBarTop(e.target)
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user