mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2025-01-18 12:34:25 +08:00
docs: related to space align
This commit is contained in:
07akioni
parent
5cdd4c42e1
commit
0663e7be1c
@ -1,7 +1,7 @@
|
||||
# Size
|
||||
Card has `small`, `medium`, `large`, `huge` sizes.
|
||||
```html
|
||||
<n-space vertical align="stretch">
|
||||
<n-space vertical>
|
||||
<n-card title="Small Card" size="small">
|
||||
Card Content
|
||||
</n-card>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
# 尺寸
|
||||
卡片有 `small`、`medium`、`large`、`huge` 尺寸。
|
||||
```html
|
||||
<n-space vertical align="stretch">
|
||||
<n-space vertical>
|
||||
<n-card title="小卡片" size="small">
|
||||
卡片内容
|
||||
</n-card>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
# Multiple (Async)
|
||||
```html
|
||||
<n-space vertical align="stretch">
|
||||
<n-space vertical>
|
||||
<n-space>
|
||||
<n-space><n-switch v-model:value="leafOnly" />Leaf Only</n-space>
|
||||
<n-space><n-switch v-model:value="cascade" />Cascade</n-space>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
# Multiple
|
||||
```html
|
||||
<n-space vertical align="stretch">
|
||||
<n-space vertical>
|
||||
<n-space>
|
||||
<n-space><n-switch v-model:value="leafOnly" />Leaf Only</n-space>
|
||||
<n-space><n-switch v-model:value="cascade" />Cascade</n-space>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
# Single (Async)
|
||||
```html
|
||||
<n-space vertical align="stretch">
|
||||
<n-space vertical>
|
||||
<n-space>
|
||||
<n-space><n-switch v-model:value="leafOnly" />Leaf Only</n-space>
|
||||
<n-space><n-switch v-model:value="cascade" />Cascade</n-space>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
# Single
|
||||
```html
|
||||
<n-space vertical align="stretch">
|
||||
<n-space vertical>
|
||||
<n-space>
|
||||
<n-space><n-switch v-model:value="leafOnly" />Leaf Only</n-space>
|
||||
<n-space><n-switch v-model:value="cascade" />Cascade</n-space>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
# 多项（异步）
|
||||
```html
|
||||
<n-space vertical align="stretch">
|
||||
<n-space vertical>
|
||||
<n-space>
|
||||
<n-space><n-switch v-model:value="leafOnly" />Leaf Only</n-space>
|
||||
<n-space><n-switch v-model:value="cascade" />Cascade</n-space>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
# 多项
|
||||
```html
|
||||
<n-space vertical align="stretch">
|
||||
<n-space vertical>
|
||||
<n-space>
|
||||
<n-space><n-switch v-model:value="leafOnly" />Leaf Only</n-space>
|
||||
<n-space><n-switch v-model:value="cascade" />Cascade</n-space>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
# 单项（异步）
|
||||
```html
|
||||
<n-space vertical align="stretch">
|
||||
<n-space vertical>
|
||||
<n-space>
|
||||
<n-space><n-switch v-model:value="leafOnly" />Leaf Only</n-space>
|
||||
<n-space><n-switch v-model:value="cascade" />Cascade</n-space>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
# 单选
|
||||
```html
|
||||
<n-space vertical align="stretch">
|
||||
<n-space vertical>
|
||||
<n-space>
|
||||
<n-space><n-switch v-model:value="leafOnly" />Leaf Only</n-space>
|
||||
<n-space><n-switch v-model:value="cascade" />Cascade</n-space>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
# Theme Environments
|
||||
Get current theme environment.
|
||||
```html
|
||||
<n-space vertical align="stretch">
|
||||
<n-space vertical>
|
||||
<n-space>
|
||||
<n-button @click="theme = 'dark'">Dark Theme</n-button>
|
||||
<n-button @click="theme = 'light'">Light Theme</n-button>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
# 主题环境
|
||||
获得当前主题环境值。
|
||||
```html
|
||||
<n-space vertical align="stretch">
|
||||
<n-space vertical>
|
||||
<n-space>
|
||||
<n-button @click="theme = 'dark'">深色主题</n-button>
|
||||
<n-button @click="theme = 'light'">浅色主题</n-button>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
# Language
|
||||
```html
|
||||
<n-space vertical align="stretch">
|
||||
<n-space vertical>
|
||||
<n-space>
|
||||
<n-button @click="lang = 'en-US'">en-us</n-button>
|
||||
<n-button @click="lang = 'zh-CN'">zh-cn</n-button>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
# No Wrapper DOM
|
||||
If you don't need wrapper DOM, set `abstract` on it. (Note, in this case it can only take one child node.)
|
||||
```html
|
||||
<n-space vertical align="stretch">
|
||||
<n-space vertical>
|
||||
<n-space>
|
||||
<n-button @click="theme = 'dark'">Dark Theme</n-button>
|
||||
<n-button @click="theme = 'light'">Light Theme</n-button>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
# 语言
|
||||
```html
|
||||
<n-space vertical align="stretch">
|
||||
<n-space vertical>
|
||||
<n-space>
|
||||
<n-button @click="lang = 'en-US'">English</n-button>
|
||||
<n-button @click="lang = 'zh-CN'">中文</n-button>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
# 不需要包裹 DOM
|
||||
如果不需要包裹 DOM，设置 `abstract`。(注意，这种情况下只接受一个子节点)
|
||||
```html
|
||||
<n-space vertical align="stretch">
|
||||
<n-space vertical>
|
||||
<n-space>
|
||||
<n-button @click="theme = 'dark'">深色主题</n-button>
|
||||
<n-button @click="theme = 'light'">浅色主题</n-button>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
# Dialog
|
||||
Before taking action, please confirm.
|
||||
|
||||
<n-space vertical align="stretch">
|
||||
<n-space vertical>
|
||||
<n-alert title="Prerequisite" type="warning">
|
||||
If you want use dialog, you need to wrap the component where you call related methods inside <n-text code>n-dialog-provider</n-text> and inject <n-text code>dialog</n-text>.
|
||||
</n-alert>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
# 对话框 Dialog
|
||||
执行之前，请确认。
|
||||
|
||||
<n-space vertical align="stretch">
|
||||
<n-space vertical>
|
||||
<n-alert title="使用前提" type="warning">
|
||||
如果你想使用对话框，你需要把调用其方法的组件放在 <n-text code>n-dialog-provider</n-text> 内部并且注入 <n-text code>dialog</n-text>。
|
||||
</n-alert>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
# Min and Max
|
||||
You can set min & max of it.
|
||||
```html
|
||||
<n-space vertical align="stretch">
|
||||
<n-space vertical>
|
||||
<n-input-number
|
||||
v-model:value="value"
|
||||
placeholder="Min"
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
# Size
|
||||
`small`, `medium`, `large`.
|
||||
```html
|
||||
<n-space vertical align="stretch">
|
||||
<n-space vertical>
|
||||
<n-input-number
|
||||
v-model:value="value"
|
||||
size="small"
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
# 最小值 & 最大值
|
||||
你可以设定最小值和最大值。
|
||||
```html
|
||||
<n-space vertical align="stretch">
|
||||
<n-space vertical>
|
||||
<n-input-number
|
||||
v-model:value="value"
|
||||
placeholder="最小值"
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
# 尺寸
|
||||
`small`、`medium`、`large`。
|
||||
```html
|
||||
<n-space vertical align="stretch">
|
||||
<n-space vertical>
|
||||
<n-input-number
|
||||
v-model:value="value"
|
||||
size="small"
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
# Autosize
|
||||
Make textarea autosizable.
|
||||
```html
|
||||
<n-space vertical align="stretch">
|
||||
<n-space vertical>
|
||||
<n-input
|
||||
v-model:value="value"
|
||||
placeholder="Autosizable"
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
# Basic
|
||||
Basic usage of input.
|
||||
```html
|
||||
<n-space vertical align="stretch">
|
||||
<n-space vertical>
|
||||
<n-input v-model:value="value" type="input" placeholder="Basic Input"/>
|
||||
<n-input v-model:value="value" type="textarea" placeholder="Basic Textarea"/>
|
||||
</n-space>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
# Clearable
|
||||
Make input clearable when value is set.
|
||||
```html
|
||||
<n-space vertical align="stretch">
|
||||
<n-space vertical>
|
||||
<n-input
|
||||
v-model:value="value"
|
||||
type="input"
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
# Disabled
|
||||
Input can be disabled.
|
||||
```html
|
||||
<n-space vertical align="stretch">
|
||||
<n-space vertical>
|
||||
<n-input
|
||||
v-model:value="value"
|
||||
type="input"
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
# Event
|
||||
```html
|
||||
<n-space vertical align="stretch">
|
||||
<n-space vertical>
|
||||
<n-input
|
||||
v-model:value="value"
|
||||
@blur="handleBlur"
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
# Prefix & Suffix
|
||||
Fill content in prefix or suffix of the input.
|
||||
```html
|
||||
<n-space vertical align="stretch">
|
||||
<n-space vertical>
|
||||
<n-input v-model:value="value" placeholder="Search">
|
||||
<template v-slot:prefix>
|
||||
<n-icon>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
# Input Group
|
||||
```html
|
||||
<n-space vertical align="stretch">
|
||||
<n-space vertical>
|
||||
<n-input-group>
|
||||
<n-input :style="{ width: '33%' }" v-model:value="value1" />
|
||||
<n-input-number :style="{ width: '33%' }" v-model:value="value2" />
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
If you want to activate input by pressing enter after focused, use `passively-activated`. (Use tab key to focus on the inputs)
|
||||
|
||||
```html
|
||||
<n-space vertical align="stretch">
|
||||
<n-space vertical>
|
||||
<n-input
|
||||
v-model:value="value"
|
||||
@blur="handleBlur"
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
# Round corner
|
||||
Input can have round corner.
|
||||
```html
|
||||
<n-space vertical align="stretch">
|
||||
<n-space vertical>
|
||||
<n-input v-model:value="value" size="small" round placeholder="Small"/>
|
||||
<n-input v-model:value="value" round placeholder="Medium"/>
|
||||
<n-input v-model:value="value" size="large" round placeholder="Large"/>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
# Size
|
||||
```html
|
||||
<n-space vertical align="stretch">
|
||||
<n-space vertical>
|
||||
<n-input v-model:value="value" type="input" size="small" placeholder="Small Input"/>
|
||||
<n-input v-model:value="value" type="input" placeholder="Medium Input"/>
|
||||
<n-input v-model:value="value" type="input" size="large" placeholder="Large Input"/>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
# 自动调整尺寸
|
||||
Textarea 自动调整尺寸。
|
||||
```html
|
||||
<n-space vertical align="stretch">
|
||||
<n-space vertical>
|
||||
<n-input
|
||||
v-model:value="value"
|
||||
placeholder="自动调整尺寸"
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
# 基础用法
|
||||
文本输入的基础用法。
|
||||
```html
|
||||
<n-space vertical align="stretch">
|
||||
<n-space vertical>
|
||||
<n-input v-model:value="value" type="input" placeholder="基本的 Input"/>
|
||||
<n-input v-model:value="value" type="textarea" placeholder="基本的 Textarea"/>
|
||||
</n-space>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
# 可清除
|
||||
让输入值可以清除（当有值的时候）。
|
||||
```html
|
||||
<n-space vertical align="stretch">
|
||||
<n-space vertical>
|
||||
<n-input
|
||||
v-model:value="value"
|
||||
type="input"
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
# 禁用
|
||||
文本输入可以被禁用。
|
||||
```html
|
||||
<n-space vertical align="stretch">
|
||||
<n-space vertical>
|
||||
<n-input
|
||||
v-model:value="value"
|
||||
type="input"
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
# 事件
|
||||
```html
|
||||
<n-space vertical align="stretch">
|
||||
<n-space vertical>
|
||||
<n-input
|
||||
v-model:value="value"
|
||||
@blur="handleBlur"
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
# 前缀 & 后缀
|
||||
在前缀后缀添加内容。
|
||||
```html
|
||||
<n-space vertical align="stretch">
|
||||
<n-space vertical>
|
||||
<n-input v-model:value="value" placeholder="搜索">
|
||||
<template v-slot:prefix>
|
||||
<n-icon>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
# 输入组
|
||||
```html
|
||||
<n-space vertical align="stretch">
|
||||
<n-space vertical>
|
||||
<n-input-group>
|
||||
<n-input :style="{ width: '33%' }" v-model:value="value1" />
|
||||
<n-input-number :style="{ width: '33%' }" v-model:value="value2" />
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
如果需要在 focus 之后使用回车键来激活输入，可以设定 `passively-activated`。 (使用 tab 键来聚焦这些输入)
|
||||
|
||||
```html
|
||||
<n-space vertical align="stretch">
|
||||
<n-space vertical>
|
||||
<n-input
|
||||
v-model:value="value"
|
||||
@blur="handleBlur"
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
# 圆角
|
||||
文本输入可以是圆角的。
|
||||
```html
|
||||
<n-space vertical align="stretch">
|
||||
<n-space vertical>
|
||||
<n-input v-model:value="value" size="small" round placeholder="小"/>
|
||||
<n-input v-model:value="value" round placeholder="中"/>
|
||||
<n-input v-model:value="value" size="large" round placeholder="大"/>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
# 尺寸
|
||||
```html
|
||||
<n-space vertical align="stretch">
|
||||
<n-space vertical>
|
||||
<n-input v-model:value="value" type="input" size="small" placeholder="小"/>
|
||||
<n-input v-model:value="value" type="input" placeholder="中"/>
|
||||
<n-input v-model:value="value" type="input" size="large" placeholder="大"/>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
# Loading Bar
|
||||
A kind of good placebo for anxiety.
|
||||
|
||||
<n-space vertical align="stretch">
|
||||
<n-space vertical>
|
||||
<n-alert title="Prerequisite" type="warning">
|
||||
If you want use loading bar, you need to wrap the component where you call related methods inside <n-text code>n-loading-bar-provider</n-text> and inject <n-text code>loadingBar</n-text>.
|
||||
</n-alert>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
# 加载条 Loading Bar
|
||||
焦虑的安慰剂，疗效尚可。
|
||||
|
||||
<n-space vertical align="stretch">
|
||||
<n-space vertical>
|
||||
<n-alert title="使用前提" type="warning">
|
||||
如果你想使用加载条，你需要把调用其方法的组件放在 <n-text code>n-loading-bar-provider</n-text> 内部并且注入 <n-text code>loadingBar</n-text>。
|
||||
</n-alert>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
# Collapsed Menu
|
||||
Use collapsable vertical menu with layout sider. Use `collapsed` to control collapse status of menu. You must set `collapsed-width` to make it collapse in a right manner. There are still some other collapse related props you can modify: `icon-size`, `collapsed-icon-size`, `popover-body-style`. For details see API table at the bottom of the page.
|
||||
```html
|
||||
<n-space vertical align="stretch">
|
||||
<n-space vertical>
|
||||
<n-switch v-model:value="collapsed" />
|
||||
<n-layout>
|
||||
<n-layout-sider
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
# 压缩菜单
|
||||
可以让垂直菜单随着边栏压缩。使用 `collapsed` 属性控制菜单状态。必需设定 `collapsed-width` 来确保菜单正常显示。除此之外还有一些其他和压缩有关的属性：`icon-size`、`collapsed-icon-size`、`popover-body-style`。详细信息参考页面底下的 API 文档。
|
||||
```html
|
||||
<n-space vertical align="stretch">
|
||||
<n-space vertical>
|
||||
<n-switch v-model:value="collapsed" />
|
||||
<n-layout>
|
||||
<n-layout-sider
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
# Message
|
||||
Oracle from the top(always) of the browser.
|
||||
|
||||
<n-space vertical align="stretch">
|
||||
<n-space vertical>
|
||||
<n-alert title="Prerequisite" type="warning">
|
||||
If you want use message, you need to wrap the component where you call related methods inside <n-text code>n-message-provider</n-text> and inject <n-text code>message</n-text>.
|
||||
</n-alert>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
# 信息 Message
|
||||
（一般是）从浏览器顶部降下来的神谕。
|
||||
|
||||
<n-space vertical align="stretch">
|
||||
<n-space vertical>
|
||||
<n-alert title="使用前提" type="warning">
|
||||
如果你想使用信息，你需要把调用其方法的组件放在 <n-text code>n-message-provider</n-text> 内部并且注入 <n-text code>message</n-text>。
|
||||
</n-alert>
|
||||
|
||||
@ -3,7 +3,7 @@ If something is to be telled to somebody.
|
||||
|
||||
Notification component is always with low piority so I can make a lot of useless animations on it.
|
||||
|
||||
<n-space vertical align="stretch">
|
||||
<n-space vertical>
|
||||
<n-alert title="Prerequisite" type="warning">
|
||||
If you want use notification, you need to wrap the component where you call related methods inside <n-text code>n-nofitication-provider</n-text> and inject <n-text code>nofitication</n-text>.
|
||||
</n-alert>
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
|
||||
像是通知组件这种东西优先级不那么高，所以我可以弄一堆没什么用的动画上去。
|
||||
|
||||
<n-space vertical align="stretch">
|
||||
<n-space vertical>
|
||||
<n-alert title="使用前提" type="warning">
|
||||
如果你想使用通知，你需要把调用其方法的组件放在 <n-text code>n-nofitication-provider</n-text> 内部并且注入 <n-text code>nofitication</n-text>。
|
||||
</n-alert>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
# Basic
|
||||
```html
|
||||
<n-space vertical align="stretch">
|
||||
<n-space vertical>
|
||||
<n-slider
|
||||
v-model:value="value"
|
||||
:step="10"
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
# Mark
|
||||
```html
|
||||
<n-space vertical align="stretch">
|
||||
<n-space vertical>
|
||||
<n-slider
|
||||
v-model:value="value"
|
||||
range
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
# Range
|
||||
```html
|
||||
<n-space vertical align="stretch">
|
||||
<n-space vertical>
|
||||
<n-slider
|
||||
v-model:value="value"
|
||||
range
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
# 基础用法
|
||||
```html
|
||||
<n-space vertical align="stretch">
|
||||
<n-space vertical>
|
||||
<n-slider
|
||||
v-model:value="value"
|
||||
:step="10"
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
# 标记
|
||||
```html
|
||||
<n-space vertical align="stretch">
|
||||
<n-space vertical>
|
||||
<n-slider
|
||||
v-model:value="value"
|
||||
range
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
# 范围
|
||||
```html
|
||||
<n-space vertical align="stretch">
|
||||
<n-space vertical>
|
||||
<n-slider
|
||||
v-model:value="value"
|
||||
range
|
||||
|
||||
@ -9,7 +9,7 @@ from-end
|
||||
## Props
|
||||
|Name|Type|Default|Description|
|
||||
|-|-|-|-|
|
||||
|align|`'start' \| 'end' \| 'center' \| 'baseline' \| 'stretch'`|`'start'`||
|
||||
|align|`'start' \| 'end' \| 'center' \| 'baseline' \| 'stretch'`|`undefined`||
|
||||
|inline|`boolean`|`false`||
|
||||
|item-style|`string \| object`|`undefined`||
|
||||
|theme|`'light' \| 'dark' \| string`|`undefined`||
|
||||
|
||||
@ -9,7 +9,7 @@ from-end
|
||||
## Props
|
||||
|名称|类型|默认值|说明|
|
||||
|-|-|-|-|
|
||||
|align|`'start' \| 'end' \| 'center' \| 'baseline' \| 'stretch'`|`'start'`||
|
||||
|align|`'start' \| 'end' \| 'center' \| 'baseline' \| 'stretch'`|`undefined`||
|
||||
|inline|`boolean`|`false`||
|
||||
|item-style|`string \| object`|`undefined`||
|
||||
|theme|`'light' \| 'dark' \| string`|`undefined`||
|
||||
|
||||
@ -29,8 +29,7 @@ export default {
|
||||
'baseline',
|
||||
'start',
|
||||
'end',
|
||||
'center',
|
||||
'normal'
|
||||
'center'
|
||||
].includes(value)
|
||||
},
|
||||
default: 'normal'
|
||||
|
||||
Loading…
Reference in New Issue
Block a user