From fecc5ac17ab0178316143826318fa4a4dc2c1ed7 Mon Sep 17 00:00:00 2001 From: SkyAo Date: Tue, 6 Sep 2016 17:26:04 +0800 Subject: [PATCH] update icon/input-number/pagination/button/dropdown docs --- examples/docs/button.md | 51 +++++++-- examples/docs/dropdown.md | 67 ++++++++--- examples/docs/icon.md | 10 +- examples/docs/input-number.md | 15 --- examples/docs/pagination.md | 202 ++++++++++++++++++++++------------ 5 files changed, 231 insertions(+), 114 deletions(-) diff --git a/examples/docs/button.md b/examples/docs/button.md index eecf85a1..ab268ba3 100644 --- a/examples/docs/button.md +++ b/examples/docs/button.md @@ -11,6 +11,13 @@ console.log(event); alert('button clicked!'); } + }, + mounted() { + this.$nextTick(() => { + let demos = document.querySelectorAll('.source'); + let thirdDemo = demos[2]; + thirdDemo.classList.add('intro-block'); + }); } } @@ -30,6 +37,30 @@ } } } + + .demo-button .intro-block { + padding: 0; + } + + .demo-button .intro-block .block { + padding: 30px 24px; + overflow: hidden; + border-bottom: solid 1px #EFF2F6; + &:last-child { + border-bottom: none; + } + } + + .demo-button .intro-block .demonstration { + font-size: 14px; + color: #8492a6; + line-height: 44px; + } + + .demo-button .intro-block .wrapper { + float: right; + margin-right: 20px; + } ## Button 按钮 @@ -68,22 +99,24 @@ :::demo 朴素按钮同样设置了不同的`type`属性对应的样式（可选值同上），默认为`info`。设置`plain`属性，它接受一个`Boolean`。注意，在该情况下，`type`虽然可以为`text`，但是是没有意义的，会显示为`text button`的样式。 ```html - - +
+ 默认显示颜色 + 成功按钮 警告按钮 危险按钮 信息按钮 - - - - + +
+
+ hover 显示颜色 + 成功按钮 警告按钮 危险按钮 信息按钮 - - + +
``` ::: @@ -141,7 +174,7 @@ Button 组件提供除了默认值以外的三种尺寸，可以在不同场景 ```html large -Default +default small mini ``` diff --git a/examples/docs/dropdown.md b/examples/docs/dropdown.md index 7d483a5e..8b72673d 100644 --- a/examples/docs/dropdown.md +++ b/examples/docs/dropdown.md @@ -11,6 +11,24 @@ } } } + + .demo-dropdown .block { + display: inline-block; + padding: 30px 0; + text-align: center; + border-right: solid 1px #EFF2F6; + flex: 1; + &:last-child { + border-right: none; + } + } + + .demo-dropdown .demonstration { + display: block; + color: #8492a6; + font-size: 14px; + margin-bottom: 20px; + } @@ -33,11 +59,12 @@ :::demo 通过`text`属性来设置按钮文字。默认条件下，他由一个主要按钮和一个下拉按钮组成，`el-dropdown`中的主要按钮同样可以设置点击事件，只要使用`mainclick`事件即可。默认情况下，下拉按钮只要`hover`即可，无需点击也会显示下拉菜单。 ```html - - 选项一 - 选项二 - 选项三 - 选项四 + + 黄金糕 + 狮子头 + 螺蛳粉 + 双皮奶 + 蚵仔煎 ``` ::: @@ -71,18 +98,24 @@ :::demo 在`trigger`属性设置为`click`即可。 ```html - - 选项一 - 选项二 - 选项三 - 选项四 - - - 选项一 - 选项二 - 选项三 - 选项四 - +
+ hover 激活 + + 选项一 + 选项二 + 选项三 + 选项四 + +
+
+ click 激活 + + 选项一 + 选项二 + 选项三 + 选项四 + +
``` ::: diff --git a/examples/docs/icon.md b/examples/docs/icon.md index 08611c1c..58938066 100644 --- a/examples/docs/icon.md +++ b/examples/docs/icon.md @@ -10,6 +10,12 @@ }