Skip to content

E
Element
Commit 6c9d2c84 authored by 杨奕's avatar 杨奕 Committed by GitHub
Browse files
Options

Merge pull request #29 from csvwolf/master 

update document of basic
parents 267f3c20 f8cd9bdf
Show whitespace changes
Inline Side-by-side
Showing with 29 additions and 57 deletions
examples/docs/alert.md
View file @ 6c9d2c84
...@@ -23,7 +23,7 @@ ...@@ -23,7 +23,7 @@
### 基本用法 ### 基本用法
页面中的非浮层元素，不会自动消失 页面中的非浮层元素，不会自动消失。
::: demo Alert 组件提供四种主题，由`type`属性指定，默认值为`info`。 ::: demo Alert 组件提供四种主题，由`type`属性指定，默认值为`info`。
```html ```html
...@@ -50,7 +50,7 @@ ...@@ -50,7 +50,7 @@
### 自定义关闭按钮 ### 自定义关闭按钮
自定义关闭按钮为文字或其他符号 自定义关闭按钮为文字或其他符号。
::: demo 在 Alert 组件中，你可以设置是否可关闭，关闭按钮的文本以及关闭时的回调函数。`closable`属性决定是否可关闭，接受`boolean`，默认为`true`。你可以设置`close-text`属性来代替右侧的关闭图标，注意：`close-text`必须为文本。设置`close`事件来设置关闭时的回调。 ::: demo 在 Alert 组件中，你可以设置是否可关闭，关闭按钮的文本以及关闭时的回调函数。`closable`属性决定是否可关闭，接受`boolean`，默认为`true`。你可以设置`close-text`属性来代替右侧的关闭图标，注意：`close-text`必须为文本。设置`close`事件来设置关闭时的回调。
```html ```html
...@@ -86,7 +86,7 @@ ...@@ -86,7 +86,7 @@
### 带有 icon ### 带有 icon
表示某种状态时提升可读性 表示某种状态时提升可读性。
::: demo 通过设置`show-icon`属性来显示 Alert 的 icon，这能更有效地向用户展示你的显示意图。 ::: demo 通过设置`show-icon`属性来显示 Alert 的 icon，这能更有效地向用户展示你的显示意图。
```html ```html
...@@ -117,7 +117,7 @@ ...@@ -117,7 +117,7 @@
### 带有辅助性文字介绍 ### 带有辅助性文字介绍
包含标题和内容，解释更详细的警告 包含标题和内容，解释更详细的警告。
::: demo 除了必填的`title`属性外，你可以设置`description`属性来帮助你更好地介绍，我们称之为辅助性文字。辅助性文字只能存放单行文本，会自动换行显示。 ::: demo 除了必填的`title`属性外，你可以设置`description`属性来帮助你更好地介绍，我们称之为辅助性文字。辅助性文字只能存放单行文本，会自动换行显示。
```html ```html
......
examples/docs/button.md
View file @ 6c9d2c84
...@@ -64,7 +64,7 @@ ...@@ -64,7 +64,7 @@
</style> </style>
## Button 按钮 ## Button 按钮
常用的操作按钮 常用的操作按钮。
### 基础用法 ### 基础用法
...@@ -146,7 +146,6 @@ ...@@ -146,7 +146,6 @@
<el-button type="primary" icon="arrow-left">上一页</el-button> <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 type="primary">下一页<i class="el-icon-arrow-right el-icon-right"></i></el-button>
</el-button-group> </el-button-group>
<div></div>
<el-button-group> <el-button-group>
<el-button type="primary" icon="edit"></el-button> <el-button type="primary" icon="edit"></el-button>
<el-button type="primary" icon="share"></el-button> <el-button type="primary" icon="share"></el-button>
......
examples/docs/card.md
View file @ 6c9d2c84
...@@ -43,7 +43,7 @@ ...@@ -43,7 +43,7 @@
} }
</style> </style>
## Card 卡片 ## Card 卡片
将信息聚合在卡片容器中展示 将信息聚合在卡片容器中展示。
### 基础用法 ### 基础用法
......
examples/docs/dialog.md
View file @ 6c9d2c84
...@@ -64,7 +64,7 @@ ...@@ -64,7 +64,7 @@
} }
</style> </style>
## Dialog 对话框 ## Dialog 对话框
在保留当前页面状态的情况下，告知用户并承载相关操作 在保留当前页面状态的情况下，告知用户并承载相关操作。
### 基本用法 ### 基本用法
...@@ -85,31 +85,6 @@ Dialog 弹出一个对话框，适合需要定制性更大的场景，如果只 ...@@ -85,31 +85,6 @@ Dialog 弹出一个对话框，适合需要定制性更大的场景，如果只
``` ```
::: :::
### 设置尺寸
:::demo 提供四种尺寸：`tiny`, `small`, `large`, `full`。通过`size`属性来设置。
```html
<!-- tiny -->
<el-button type="text" @click.native="dialogTinyVisible = true">点击打开小尺寸 Dialog</el-button>
<el-dialog title="提示" v-model="dialogTinyVisible" size="tiny">
<span>这是一段内容</span>
<span slot="footer" class="dialog-footer">
<el-button @click.native="dialogTinyVisible = false">取 消</el-button>
<el-button type="primary" @click.native="dialogTinyVisible = false">确 定</el-button>
</span>
</el-dialog>
<!-- 全屏幕Dialog -->
<el-button type="text" @click.native="dialogFullVisible = true">点击打开全屏幕 Dialog</el-button>
<el-dialog title="提示" v-model="dialogFullVisible" size="full">
<img src="http://placekitten.com/1920/1280">
</el-dialog>
```
:::
### 使用 Dialog 方法打开 ### 使用 Dialog 方法打开
:::demo 使用实例`open`和`close`方法，不用显式改变`v-modal`的值。 :::demo 使用实例`open`和`close`方法，不用显式改变`v-modal`的值。
...@@ -141,7 +116,7 @@ Dialog 弹出一个对话框，适合需要定制性更大的场景，如果只 ...@@ -141,7 +116,7 @@ Dialog 弹出一个对话框，适合需要定制性更大的场景，如果只
### 自定义内容 ### 自定义内容
Dialog 组件的正文标题可以是任意的，甚至可以是表格或表单，下面是应用了 Element Table 和 Form 组件的两个样例，除此以外，它们并没有什么特殊之处。 Dialog 组件的正文标题可以是任意的，甚至可以是表格或表单，下面是应用了 Element Table 和 Form 组件的两个样例。
:::demo :::demo
```html ```html
...@@ -196,7 +171,7 @@ Dialog 组件的正文标题可以是任意的，甚至可以是表格或表单 ...@@ -196,7 +171,7 @@ Dialog 组件的正文标题可以是任意的，甚至可以是表格或表单
| footer | Dialog 按钮操作区的内容 | | footer | Dialog 按钮操作区的内容 |
### 方法 ### 方法
每个`el-dialog`实例都暴露了如下方法，用于在不显式改变`v-model`值的情况下打开 / 关闭实例： 每个 `el-dialog` 实例都暴露了如下方法，用于在不显式改变 `v-model` 值的情况下打开 / 关闭实例：
| 方法名 | 说明 | | 方法名 | 说明 |
|------|--------| |------|--------|
| open | 打开当前实例 | | open | 打开当前实例 |
......
examples/docs/icon.md
View file @ 6c9d2c84
...@@ -60,7 +60,7 @@ ...@@ -60,7 +60,7 @@
### 使用方法 ### 使用方法
直接通过设置类名为`el-icon-iconName`来使用即可。 直接通过设置类名为 `el-icon-iconName` 来使用即可。例如：
:::demo :::demo
```html ```html
...@@ -74,8 +74,6 @@ ...@@ -74,8 +74,6 @@
### 图标集合 ### 图标集合
下面是目前 Element 所有的图标集合：
<ul class="icon-list"> <ul class="icon-list">
<li v-for="name in icons"> <li v-for="name in icons">
<span> <span>
......
examples/docs/layout.md
View file @ 6c9d2c84
...@@ -29,11 +29,11 @@ ...@@ -29,11 +29,11 @@
## Layout 布局 ## Layout 布局
通过基础的 24 分栏，迅速简便地创建布局 通过基础的 24 分栏，迅速简便地创建布局。
### 基础布局 ### 基础布局
使用单一分栏创建基础的栅格布局 使用单一分栏创建基础的栅格布局。
::: demo 通过 row 和 col 组件，并通过 col 组件的 `span` 属性我们就可以自由地组合布局。 ::: demo 通过 row 和 col 组件，并通过 col 组件的 `span` 属性我们就可以自由地组合布局。
```html ```html
...@@ -68,7 +68,7 @@ ...@@ -68,7 +68,7 @@
### 分栏间隔 ### 分栏间隔
分栏之间存在间隔 分栏之间存在间隔。
::: demo Row 组件 提供 `gutter` 属性来指定每一栏之间的间隔，默认间隔为 0。 ::: demo Row 组件 提供 `gutter` 属性来指定每一栏之间的间隔，默认间隔为 0。
```html ```html
...@@ -83,7 +83,7 @@ ...@@ -83,7 +83,7 @@
### 混合布局 ### 混合布局
通过基础的 1/24 分栏任意扩展组合形成较为复杂的混合布局 通过基础的 1/24 分栏任意扩展组合形成较为复杂的混合布局。
::: demo ::: demo
```html ```html
...@@ -107,9 +107,9 @@ ...@@ -107,9 +107,9 @@
### 分栏偏移 ### 分栏偏移
分栏支持按一定的栏数进行偏移 分栏支持按一定的栏数进行偏移。
::: demo 通过制定 col 组件的 `offset` 属性可以指定分栏偏移的栏数 ::: demo 通过制定 col 组件的 `offset` 属性可以指定分栏偏移的栏数。
```html ```html
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col> <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
...@@ -129,7 +129,7 @@ ...@@ -129,7 +129,7 @@
对分栏进行灵活的对齐。 对分栏进行灵活的对齐。
::: demo 将 `type` 属性赋值为 'flex'，可以启用 flex 布局，并可通过 `justify` 属性来指定 start,center,end,space-between,space-around 其中的值来定义子元素的排版方式 ::: demo 将 `type` 属性赋值为 'flex'，可以启用 flex 布局，并可通过 `justify` 属性来指定 start, center, end, space-between, space-around 其中的值来定义子元素的排版方式。
```html ```html
<el-row type="flex" class="row-bg"> <el-row type="flex" class="row-bg">
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col> <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
......
examples/docs/loading.md
View file @ 6c9d2c84
...@@ -28,13 +28,13 @@ ...@@ -28,13 +28,13 @@
</script> </script>
## Loading 加载 ## Loading 加载
加载数据时显示动效 加载数据时显示动效。
### 区域加载 ### 区域加载
在表格等容器中加载数据时显示 在表格等容器中加载数据时显示。
:::demo 在 Loading 组件中，Element 准备了自定义命令`v-loading`，只需要绑定`Boolean`即可。默认状况下，Loading 遮罩会插入到绑定元素的子节点，通过添加 `body` 修饰符，可以使遮罩插入至 DOM 中的 body 上。 :::demo 在 Loading 组件中，Element 准备了自定义命令`v-loading`，只需要绑定`Boolean`即可。默认状况下，Loading 遮罩会插入到绑定元素的子节点，通过添加`body`修饰符，可以使遮罩插入至 DOM 中的 body 上。
```html ```html
<template> <template>
...@@ -55,9 +55,9 @@ ...@@ -55,9 +55,9 @@
### 整页加载 ### 整页加载
页面数据加载时显示 页面数据加载时显示。
:::demo 当需要全屏遮罩时，可使用 `fullscreen` 修饰符（此时遮罩会插入至 body 上） :::demo 当需要全屏遮罩时，可使用`fullscreen`修饰符（此时遮罩会插入至 body 上）
```html ```html
<template> <template>
......
examples/docs/message-box.md
View file @ 6c9d2c84
...@@ -60,7 +60,7 @@ ...@@ -60,7 +60,7 @@
### 消息提示 ### 消息提示
当用户进行操作时会被触发，该对话框中断用户操作，直到用户确认知晓后才可关闭 当用户进行操作时会被触发，该对话框中断用户操作，直到用户确认知晓后才可关闭。
:::demo 调用`$alert`方法即可打开消息提示，它模拟了系统的 `alert`，无法通过按下 ESC 或点击框外关闭。此例中接收了两个参数，`message`和`title`。值得一提的是，窗口被关闭后，它会返回一个`Promise`对象便于进行后续操作的处理。 :::demo 调用`$alert`方法即可打开消息提示，它模拟了系统的 `alert`，无法通过按下 ESC 或点击框外关闭。此例中接收了两个参数，`message`和`title`。值得一提的是，窗口被关闭后，它会返回一个`Promise`对象便于进行后续操作的处理。
```html ```html
...@@ -82,7 +82,7 @@ ...@@ -82,7 +82,7 @@
### 确认消息 ### 确认消息
提示用户确认其已经触发的动作，并询问是否进行此操作时会用到此对话框 提示用户确认其已经触发的动作，并询问是否进行此操作时会用到此对话框。
:::demo 调用`$confirm`方法即可打开消息提示，它模拟了系统的 `confirm`。Message Box 组件也拥有极高的定制性，我们可以传入`options`作为第三个参数，它是一个字面量对象。`type`字段表明消息类型，可以为`success`，`error`，`info`和`warning`，无效的设置将会被忽略。注意，第二个参数`title`必须定义为`String`类型，如果是`Object`，会被理解为`options`。在这里我们用了 Promise 来处理后续响应。 :::demo 调用`$confirm`方法即可打开消息提示，它模拟了系统的 `confirm`。Message Box 组件也拥有极高的定制性，我们可以传入`options`作为第三个参数，它是一个字面量对象。`type`字段表明消息类型，可以为`success`，`error`，`info`和`warning`，无效的设置将会被忽略。注意，第二个参数`title`必须定义为`String`类型，如果是`Object`，会被理解为`options`。在这里我们用了 Promise 来处理后续响应。
...@@ -117,7 +117,7 @@ ...@@ -117,7 +117,7 @@
### 提交内容 ### 提交内容
当用户进行操作时会被触发，中断用户操作，提示用户进行输入的对话框 当用户进行操作时会被触发，中断用户操作，提示用户进行输入的对话框。
:::demo 调用`$prompt`方法即可打开消息提示，它模拟了系统的 `prompt`。可以用`inputPattern`字段自己规定匹配模式，或者用`inputValidator`规定校验函数，可以返回`Boolean`或`String`，`Boolean`为`false`或字符串时均表示校验未通过，`String`相当于定义了`inputErrorMessage`字段。此外，可以用`inputPlaceholder`字段来定义输入框的占位符。 :::demo 调用`$prompt`方法即可打开消息提示，它模拟了系统的 `prompt`。可以用`inputPattern`字段自己规定匹配模式，或者用`inputValidator`规定校验函数，可以返回`Boolean`或`String`，`Boolean`为`false`或字符串时均表示校验未通过，`String`相当于定义了`inputErrorMessage`字段。此外，可以用`inputPlaceholder`字段来定义输入框的占位符。
...@@ -153,7 +153,7 @@ ...@@ -153,7 +153,7 @@
### 自定义 ### 自定义
可自定义配置不同内容 可自定义配置不同内容。
:::demo 以上三个方法都是对`$msgbox`方法的再包装。本例直接调用`$msgbox`方法，使用了`showCancelButton`字段，用于显示取消按钮。另外可使用`cancelButtonClass`为其添加自定义样式，使用`cancelButtonText`来自定义按钮文本。Confirm 按钮也具有相同的字段，在文末的字段说明中有完整的字段列表。 :::demo 以上三个方法都是对`$msgbox`方法的再包装。本例直接调用`$msgbox`方法，使用了`showCancelButton`字段，用于显示取消按钮。另外可使用`cancelButtonClass`为其添加自定义样式，使用`cancelButtonText`来自定义按钮文本。Confirm 按钮也具有相同的字段，在文末的字段说明中有完整的字段列表。
......
examples/docs/message.md
View file @ 6c9d2c84
...@@ -70,7 +70,7 @@ ...@@ -70,7 +70,7 @@
## Message 消息提示 ## Message 消息提示
反馈提示，比 Notification 更为小巧 反馈提示，比 Notification 更为小巧。
### 基础用法 ### 基础用法
...@@ -136,7 +136,7 @@ Message 提供了四种类型：`success`，`info`，`warning`，`error`，由 ...@@ -136,7 +136,7 @@ Message 提供了四种类型：`success`，`info`，`warning`，`error`，由
### 可关闭 ### 可关闭
可以设置为手动关闭的 Message 可以设置为手动关闭的 Message。
:::demo 默认的 Message 是不可以被人工关闭的，如果需要可手动关闭的 Message，可以使用`showClose`字段。此外，和 Notification 一样，Message 拥有可控的`duration`，设置`0`为不会被自动关闭，默认为 3000 毫秒。 :::demo 默认的 Message 是不可以被人工关闭的，如果需要可手动关闭的 Message，可以使用`showClose`字段。此外，和 Notification 一样，Message 拥有可控的`duration`，设置`0`为不会被自动关闭，默认为 3000 毫秒。
```html ```html
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment