mirror of https://github.com/ElemeFE/element
baiyaaaaa
GitHub
commit
8c99215785
|
|
@ -3,7 +3,7 @@
|
|||
|
||||
### 基础使用
|
||||
|
||||
Breadcrumb，面包屑导航，用于提供给用户一个回溯到首页的路径，最后一级即为当前位置。
|
||||
适用广泛的基础用法。
|
||||
|
||||
:::demo 在`el-breadcrumb`中使用`el-breadcrumb-item`标签表示从首页开始的每一级。Element 提供了一个`separator`属性，在`el-breadcrumb`标签中设置它来决定分隔符，它只能是字符串，默认为斜杠`/`。
|
||||
|
||||
|
|
|
|||
|
|
@ -16,6 +16,9 @@
|
|||
</script>
|
||||
<style>
|
||||
.demo-box.demo-button {
|
||||
.el-row {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.el-button + .el-button {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
|
@ -34,41 +37,103 @@
|
|||
|
||||
### 基础用法
|
||||
|
||||
基础的按钮用法。
|
||||
|
||||
:::demo Button 组件默认提供7种主题，由`type`属性来定义，默认为`default`。
|
||||
|
||||
```html
|
||||
<el-button>Default</el-button>
|
||||
<el-button type="primary">primary</el-button>
|
||||
<el-button type="success">success</el-button>
|
||||
<el-button type="warning">warning</el-button>
|
||||
<el-button type="danger">danger</el-button>
|
||||
<el-button type="info">info</el-button>
|
||||
<el-button type="text">text button</el-button>
|
||||
<el-button>默认按钮</el-button>
|
||||
<el-button type="primary">主要按钮</el-button>
|
||||
<el-button type="text">文字按钮</el-button>
|
||||
```
|
||||
:::
|
||||
|
||||
### 禁用状态
|
||||
|
||||
按钮不可用状态。
|
||||
|
||||
:::demo 你可以使用`disabled`属性来定义按钮是否可用，它接受一个`Boolean`值。
|
||||
|
||||
```html
|
||||
<el-button :disabled="true">disabled</el-button>
|
||||
<el-button :plain="true" :disabled="true">主要按钮</el-button>
|
||||
<el-button type="primary" :disabled="true">主要按钮</el-button>
|
||||
<el-button type="text" :disabled="true">文字按钮</el-button>
|
||||
```
|
||||
:::
|
||||
|
||||
### Plain Button
|
||||
默认的`Default`主题，我们称之为朴素按钮(Plain Button)，你可以 hover 在样例上进行预览。
|
||||
### 有颜色倾向
|
||||
|
||||
不同的颜色倾向代表不同的提示
|
||||
|
||||
:::demo 朴素按钮同样设置了不同的`type`属性对应的样式（可选值同上），默认为`info`。设置`plain`属性，它接受一个`Boolean`。注意，在该情况下，`type`虽然可以为`text`，但是是没有意义的，会显示为`text button`的样式。
|
||||
|
||||
```html
|
||||
<el-button :plain="true">Default</el-button>
|
||||
<el-button :plain="true" type="success">success</el-button>
|
||||
<el-button :plain="true" type="warning">warning</el-button>
|
||||
<el-button :plain="true" type="danger">danger</el-button>
|
||||
<el-button :plain="true" :disabled="true">disabled</el-button>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-button type="success">成功按钮</el-button>
|
||||
<el-button type="warning">警告按钮</el-button>
|
||||
<el-button type="danger">危险按钮</el-button>
|
||||
<el-button type="info">信息按钮</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-button :plain="true" type="success">成功按钮</el-button>
|
||||
<el-button :plain="true" type="warning">警告按钮</el-button>
|
||||
<el-button :plain="true" type="danger">危险按钮</el-button>
|
||||
<el-button :plain="true" type="info">信息按钮</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
```
|
||||
:::
|
||||
|
||||
### 尺寸
|
||||
### 图标按钮
|
||||
|
||||
带图标的按钮可增强辨识度(有文字)或节省空间(无文字)。
|
||||
|
||||
:::demo 设置`icon`属性即可，icon 的列表可以参考 Element 的 icon 组件，也可以设置在文字右边的 icon ，只要使用`i`标签即可，可以使用自定义图标。
|
||||
|
||||
```html
|
||||
<el-button type="primary" icon="edit"></el-button>
|
||||
<el-button type="primary" icon="share"></el-button>
|
||||
<el-button type="primary" icon="delete"></el-button>
|
||||
<el-button type="primary" icon="search">Search</el-button>
|
||||
<el-button type="primary">Upload<i class="el-icon-upload el-icon-right"></i></el-button>
|
||||
```
|
||||
:::
|
||||
|
||||
### 按钮组
|
||||
|
||||
以按钮组的方式出现，常用于多项类似操作。
|
||||
|
||||
:::demo 使用`<el-button-group>`标签来嵌套你的按钮。
|
||||
|
||||
```html
|
||||
<el-button-group>
|
||||
<el-button type="primary" icon="arrow-left">上一页</el-button>
|
||||
<el-button type="primary">下一页<i class="el-icon-arrow-right el-icon-right"></i></el-button>
|
||||
</el-button-group>
|
||||
<div></div>
|
||||
<el-button-group>
|
||||
<el-button type="primary" icon="edit"></el-button>
|
||||
<el-button type="primary" icon="share"></el-button>
|
||||
<el-button type="primary" icon="delete"></el-button>
|
||||
</el-button-group>
|
||||
```
|
||||
:::
|
||||
|
||||
### 加载中
|
||||
|
||||
点击按钮后进行数据加载操作，在按钮上显示加载状态。
|
||||
|
||||
:::demo 要设置为 loading 状态，只要设置`loading`属性为`true`即可。
|
||||
|
||||
```html
|
||||
<el-button type="primary" :loading="true">Button</el-button>
|
||||
```
|
||||
:::
|
||||
|
||||
### 不同尺寸
|
||||
|
||||
Button 组件提供除了默认值以外的三种尺寸，可以在不同场景下选择合适的按钮尺寸。
|
||||
|
||||
|
|
@ -82,54 +147,6 @@ Button 组件提供除了默认值以外的三种尺寸，可以在不同场景
|
|||
```
|
||||
:::
|
||||
|
||||
### Loading
|
||||
|
||||
可以方便的处理 loading 状态，点击下面的按钮预览效果。
|
||||
|
||||
:::demo 要设置为 loading 状态，只要设置`loading`属性为`true`即可。
|
||||
|
||||
```html
|
||||
<el-button type="primary" :loading="true">Button</el-button>
|
||||
|
||||
<el-button type="primary" :loading="isLoading" @click.native="isLoading = true">Button</el-button>
|
||||
<el-button type="primary" icon="search" :loading="isLoading2" @click.native="isLoading2 = true">Button</el-button>
|
||||
```
|
||||
:::
|
||||
|
||||
### 图标按钮
|
||||
|
||||
带图标的按钮可增强辨识度(有文字)或节省空间(无文字)。
|
||||
|
||||
:::demo 设置`icon`属性即可，icon 的列表可以参考 Element 的 icon 组件，也可以设置在文字右边的 icon ，只要使用`i`标签即可，可以使用自定义图标。
|
||||
|
||||
```html
|
||||
<el-button type="primary" icon="edit"></el-button>
|
||||
<el-button type="primary" icon="search">Search</el-button>
|
||||
<el-button type="primary">Upload<i class="el-icon-upload el-icon-right"></i></el-button>
|
||||
```
|
||||
:::
|
||||
|
||||
### 按钮组
|
||||
|
||||
如果你需要多个并列的按钮，按钮组可以帮你轻松的实现它。
|
||||
|
||||
:::demo 使用`<el-button-group>`标签来嵌套你的按钮。
|
||||
|
||||
```html
|
||||
<el-button-group>
|
||||
<el-button>Button</el-button>
|
||||
<el-button>Button</el-button>
|
||||
<el-button>Button</el-button>
|
||||
</el-button-group>
|
||||
<div></div>
|
||||
<el-button-group>
|
||||
<el-button type="primary" icon="edit"></el-button>
|
||||
<el-button type="primary" icon="share"></el-button>
|
||||
<el-button type="primary" icon="delete"></el-button>
|
||||
</el-button-group>
|
||||
```
|
||||
:::
|
||||
|
||||
### Attributes
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------- |---------- |------------- |-------- |
|
||||
|
|
|
|||
|
|
@ -48,7 +48,7 @@
|
|||
### 基础用法
|
||||
|
||||
|
||||
下面是一个带有标题、内容和操作（按钮）的 Card 组件示例，需要注意的是，部分样式需要你自己填入。
|
||||
包含标题，内容和操作。
|
||||
|
||||
:::demo Card 组件包括`header`和`body`部分，`header`部分需要有显式具名 slot 分发，同时也是可选的。
|
||||
```html
|
||||
|
|
@ -79,9 +79,8 @@
|
|||
:::
|
||||
|
||||
### 进阶使用
|
||||
可以让你的卡片极大程度的被个性化，为更丰富的内容展示服务。
|
||||
|
||||
下例是一个带图片的示例，能帮助你更好地理解`body-style`配合分发内容自定义样式的强大：
|
||||
可配置定义更丰富的内容展示。
|
||||
|
||||
:::demo 配置`body-style`属性来自定义`body`部分的`style`，我们还使用了布局组件。
|
||||
```html
|
||||
|
|
|
|||
|
|
@ -5,6 +5,8 @@
|
|||
checkList: ['选中且禁用','复选框 A'],
|
||||
// checkList2: ['复选框 A'],
|
||||
checked: true,
|
||||
checked1: false,
|
||||
checked2: true,
|
||||
name: 'Jonny',
|
||||
a: 'Jonny',
|
||||
b: 'Lara'
|
||||
|
|
@ -30,6 +32,8 @@
|
|||
|
||||
### 基础用法
|
||||
|
||||
适用广泛的基础用法。
|
||||
|
||||
:::demo 在`el-checkbox`元素中定义`v-model`绑定变量，单一的`checkbox`中，默认绑定变量的值会是`Boolean`，选中为`true`。
|
||||
|
||||
```html
|
||||
|
|
@ -48,6 +52,30 @@
|
|||
```
|
||||
:::
|
||||
|
||||
## 禁用状态
|
||||
|
||||
多选框不可用状态。
|
||||
|
||||
::: demo 设置`disabled`属性即可。
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-checkbox class="checkbox" v-model="checked1" disabled>备选项</el-checkbox>
|
||||
<el-checkbox class="checkbox" v-model="checked2" disabled>备选项</el-checkbox>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
checked1: false,
|
||||
checked2: true
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### 多选框组
|
||||
|
||||
:::demo `checkbox-group`元素能把多个 checkbox 管理为一组，只需要在 Group 中使用`v-model`绑定`Array`类型的变量即可，`label`属性除了改变 checkbox 按钮后的介绍外，同时也是该 checkbox 对应的值，`label`与数组中的元素值相对应，如果存在指定的值则为选中状态，否则为不选中。
|
||||
|
|
|
|||
Loading…
Reference in New Issue