Skip to content

E
Element
Commit b5786701 authored by 杨奕's avatar 杨奕 Committed by Black Wayne
Browse files
Options

update color docs (#7256) 

* update color docs

* fix button test
parent 8774311c
Hide whitespace changes
Inline Side-by-side
Showing with 101 additions and 159 deletions
examples/app.vue
View file @ b5786701
......@@ -110,7 +110,7 @@
margin-top: 20px;
code {
background-color: rgba(#fff, .7);
background-color: rgba(255, 255, 255, .7);
color: #445368;
}
}
......@@ -143,7 +143,7 @@
}
code {
background-color: rgba(#fff, .7);
background-color: rgba(255, 255, 255, .7);
color: #445368;
}
}
......
examples/docs/en-US/button.md
View file @ b5786701
......@@ -103,10 +103,10 @@ Use icons to add more meaning to Button. You can use icon alone to save some spa
:::demo Use the `icon` attribute to add icon. You can find the icon list in Element icon component. Adding icons to the right side of the text is achievable with an `<i>` tag. Custom icons can be used as well.
```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" icon="el-icon-edit"></el-button>
<el-button type="primary" icon="el-icon-share"></el-button>
<el-button type="primary" icon="el-icon-delete"></el-button>
<el-button type="primary" icon="el-icon-search">Search</el-button>
<el-button type="primary">Upload<i class="el-icon-upload el-icon-right"></i></el-button>
```
:::
......@@ -119,13 +119,13 @@ Displayed as a button group, can be used to group a series of similar operations
```html
<el-button-group>
<el-button type="primary" icon="arrow-left">Previous Page</el-button>
<el-button type="primary" icon="el-icon-arrow-left">Previous Page</el-button>
<el-button type="primary">Next Page<i class="el-icon-arrow-right el-icon-right"></i></el-button>
</el-button-group>
<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 type="primary" icon="el-icon-edit"></el-button>
<el-button type="primary" icon="el-icon-share"></el-button>
<el-button type="primary" icon="el-icon-delete"></el-button>
</el-button-group>
```
:::
......@@ -172,6 +172,6 @@ Besides default size, Button component provides three additional sizes for you t
| round | determine whether it's a round button | boolean | — | false |
| loading | determine whether it's loading | boolean | — | false |
| disabled | disable the button | boolean | — | false |
| icon | button icon, accepts an icon name of Element icon component | string | — | — |
| icon | icon class name | string | — | — |
| autofocus | same as native button's `autofocus` | boolean | — | false |
| native-type | same as native button's `type` | string | button / submit / reset | button |
\ No newline at end of file
examples/docs/en-US/color.md
View file @ b5786701
......@@ -24,15 +24,8 @@
border-radius: 0 0 4px 4px;
}
}
.bg-blue-light {
background-color: #58b7ff;
}
.bg-blue,
.bg-info {
background-color: #20a0ff;
}
.bg-blue-dark {
background-color: #1d8ce0;
.bg-blue {
background-color: #1989fa;
}
.bg-success {
......@@ -44,43 +37,38 @@
.bg-danger {
background-color: #ff4949;
}
.bg-black {
background-color: #1f2d3d;
}
.bg-black-light {
background-color: #324057;
}
.bg-black-lighter {
background-color: #475669;
.bg-info {
background-color: #878D99;
}
.bg-silver {
background-color: #8492a6;
.bg-text-primary {
background-color: #2d2f33;
}
.bg-text-regular {
background-color: #5a5e66;
}
.bg-silver-light {
background-color: #99a9bf;
.bg-text-secondary {
background-color: #878d99;
}
.bg-silver-lighter {
background-color: #c0ccda;
.bg-text-placeholder {
background-color: #b4bccc;
}
.bg-gray {
background-color: #d3dce6;
.bg-border-base {
background-color: #d8dce6;
}
.bg-gray-light {
background-color: #e5e9f2;
.bg-border-light {
background-color: #dfe4ed;
}
.bg-gray-lighter {
background-color: #eff2f7;
.bg-border-lighter {
background-color: #e6ebf5;
}
.bg-white-dark {
background-color: #f9fafc;
.bg-border-extra-light {
background-color: #edf2fc;
}
.color-gray {
color: #5e6d82;
[class*=" bg-border-"] {
color: #5a5e66;
}
</style>
......@@ -92,14 +80,8 @@ Element uses a specific set of palettes to specify colors to provide a consisten
The main color of Element is bright and friendly blue.
<el-row :gutter="12">
<el-col :span="8">
<div class="demo-color-box bg-blue-light">Light Blue<div class="value">#58B7FF</div></div>
</el-col>
<el-col :span="8">
<div class="demo-color-box bg-blue">Blue<div class="value">#20A0FF</div></div>
</el-col>
<el-col :span="8">
<div class="demo-color-box bg-blue-dark">Dark Blue<div class="value">#1D8CE0</div></div>
<el-col :span="6">
<div class="demo-color-box bg-blue">Blue<div class="value">#1989FA</div></div>
</el-col>
</el-row>
......@@ -109,16 +91,16 @@ Besides the main color, you need to use different scene colors in different scen
<el-row :gutter="12">
<el-col :span="6">
<div class="demo-color-box bg-info">Blue<div class="value">#20A0FF</div></div>
<div class="demo-color-box bg-success">Success<div class="value">#67C23A</div></div>
</el-col>
<el-col :span="6">
<div class="demo-color-box bg-success">Success<div class="value">#13CE66</div></div>
<div class="demo-color-box bg-warning">Warning<div class="value">#EB9E05</div></div>
</el-col>
<el-col :span="6">
<div class="demo-color-box bg-warning">Warning<div class="value">#F7BA2A</div></div>
<div class="demo-color-box bg-danger">Danger<div class="value">#FA5555</div></div>
</el-col>
<el-col :span="6">
<div class="demo-color-box bg-danger">Danger<div class="value">#FF4949</div></div>
<div class="demo-color-box bg-info">Info<div class="value">#878D99</div></div>
</el-col>
</el-row>
......@@ -129,29 +111,18 @@ Neutral colors are for text, background and border colors. You can use different
<el-row :gutter="12">
<el-col :span="6">
<div class="demo-color-box-group">
<div class="demo-color-box bg-black">Black<div class="value">#1F2D3D</div></div>
<div class="demo-color-box bg-black-light">Light Black<div class="value">#324057</div></div>
<div class="demo-color-box bg-black-lighter">Extra Light Black<div class="value">#475669</div></div>
<div class="demo-color-box bg-text-primary">Primary Text<div class="value">#2D2F33</div></div>
<div class="demo-color-box bg-text-regular">Regular Text<div class="value">#5A5E66</div></div>
<div class="demo-color-box bg-text-secondary">Secondary Text<div class="value">#878D99</div></div>
<div class="demo-color-box bg-text-placeholder">Placeholder Text<div class="value">#B4BCCC</div></div>
</div>
</el-col>
<el-col :span="6">
<div class="demo-color-box-group">
<div class="demo-color-box bg-silver">Silver<div class="value">#8492A6</div></div>
<div class="demo-color-box bg-silver-light">Light Silver<div class="value">#99A9BF</div></div>
<div class="demo-color-box bg-silver-lighter">Extra Light Silver<div class="value">#C0CCDA</div></div>
</div>
</el-col>
<el-col :span="6">
<div class="demo-color-box-group">
<div class="demo-color-box color-gray bg-gray">Gray<div class="value">#D3DCE6</div></div>
<div class="demo-color-box color-gray bg-gray-light">Light Gray<div class="value">#E5E9F2</div></div>
<div class="demo-color-box color-gray bg-gray-lighter">Extra Light Gray<div class="value">#EFF2F7</div></div>
</div>
</el-col>
<el-col :span="6">
<div class="demo-color-box-group" style="border: 1px solid #e0e6ed;border-radius: 4px;">
<div class="demo-color-box color-gray bg-white-dark">Dark White<div class="value">#F9FAFC</div></div>
<div class="demo-color-box color-gray bg-white">White<div class="value">#FFFFFF</div></div>
<div class="demo-color-box bg-border-base">Base Border<div class="value">#D8DCE6</div></div>
<div class="demo-color-box bg-border-light">Light Border<div class="value">#DFE4ED</div></div>
<div class="demo-color-box bg-border-lighter">Lighter Border<div class="value">#E6EBF5</div></div>
<div class="demo-color-box bg-border-extra-light">Extra Light Border<div class="value">#EDF2FC</div></div>
</div>
</el-col>
</el-row>
\ No newline at end of file
examples/docs/en-US/icon.md
View file @ b5786701
......@@ -22,7 +22,7 @@
margin: 0 20px;
}
.icon-list {
.page-component .content > ul.icon-list {
overflow: hidden;
list-style: none;
padding: 0;
......
examples/docs/zh-CN/button.md
View file @ b5786701
......@@ -104,10 +104,10 @@
:::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">搜索</el-button>
<el-button type="primary" icon="el-icon-edit"></el-button>
<el-button type="primary" icon="el-icon-share"></el-button>
<el-button type="primary" icon="el-icon-delete"></el-button>
<el-button type="primary" icon="el-icon-search">搜索</el-button>
<el-button type="primary">上传<i class="el-icon-upload el-icon--right"></i></el-button>
```
:::
......@@ -120,13 +120,13 @@
```html
<el-button-group>
<el-button type="primary" icon="arrow-left">上一页</el-button>
<el-button type="primary" icon="el-icon-arrow-left">上一页</el-button>
<el-button type="primary">下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button>
</el-button-group>
<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 type="primary" icon="el-icon-edit"></el-button>
<el-button type="primary" icon="el-icon-share"></el-button>
<el-button type="primary" icon="el-icon-delete"></el-button>
</el-button-group>
```
:::
......@@ -173,6 +173,6 @@ Button 组件提供除了默认值以外的三种尺寸，可以在不同场景
| round | 是否圆形按钮 | boolean | — | false |
| loading | 是否加载中状态 | boolean | — | false |
| disabled | 是否禁用状态 | boolean | — | false |
| icon | 图标，已有的图标库中的图标名 | string | — | — |
| icon | 图标类名 | string | — | — |
| autofocus | 是否默认聚焦 | boolean | — | false |
| native-type | 原生 type 属性 | string | button / submit / reset | button |
examples/docs/zh-CN/color.md
View file @ b5786701
......@@ -24,63 +24,51 @@
border-radius: 0 0 4px 4px;
}
}
.bg-blue-light {
background-color: #58b7ff;
}
.bg-blue,
.bg-info {
background-color: #20a0ff;
}
.bg-blue-dark {
background-color: #1d8ce0;
.bg-blue {
background-color: #1989fa;
}
.bg-success {
background-color: #13CE66;
background-color: #67C23A;
}
.bg-warning {
background-color: #f7ba2a;
background-color: #EB9E05;
}
.bg-danger {
background-color: #ff4949;
}
.bg-black {
background-color: #1f2d3d;
background-color: #FA5555;
}
.bg-black-light {
background-color: #324057;
}
.bg-black-lighter {
background-color: #475669;
.bg-info {
background-color: #878D99;
}
.bg-silver {
background-color: #8492a6;
.bg-text-primary {
background-color: #2d2f33;
}
.bg-text-regular {
background-color: #5a5e66;
}
.bg-silver-light {
background-color: #99a9bf;
.bg-text-secondary {
background-color: #878d99;
}
.bg-silver-lighter {
background-color: #c0ccda;
.bg-text-placeholder {
background-color: #b4bccc;
}
.bg-gray {
background-color: #d3dce6;
.bg-border-base {
background-color: #d8dce6;
}
.bg-gray-light {
background-color: #e5e9f2;
.bg-border-light {
background-color: #dfe4ed;
}
.bg-gray-lighter {
background-color: #eff2f7;
.bg-border-lighter {
background-color: #e6ebf5;
}
.bg-white-dark {
background-color: #f9fafc;
.bg-border-extra-light {
background-color: #edf2fc;
}
.color-gray {
color: #5e6d82;
[class*=" bg-border-"] {
color: #5a5e66;
}
</style>
......@@ -93,14 +81,8 @@ Element 为了避免视觉传达差异，使用一套特定的调色板来规定
Element 主要品牌颜色是鲜艳、友好的蓝色。
<el-row :gutter="12">
<el-col :span="8">
<div class="demo-color-box bg-blue-light">Light Blue<div class="value">#58B7FF</div></div>
</el-col>
<el-col :span="8">
<div class="demo-color-box bg-blue">Blue<div class="value">#20A0FF</div></div>
</el-col>
<el-col :span="8">
<div class="demo-color-box bg-blue-dark">Dark Blue<div class="value">#1D8CE0</div></div>
<el-col :span="6">
<div class="demo-color-box bg-blue">Blue<div class="value">#1989FA</div></div>
</el-col>
</el-row>
......@@ -110,16 +92,16 @@ Element 主要品牌颜色是鲜艳、友好的蓝色。
<el-row :gutter="12">
<el-col :span="6">
<div class="demo-color-box bg-info">Blue<div class="value">#20A0FF</div></div>
<div class="demo-color-box bg-success">Success<div class="value">#67C23A</div></div>
</el-col>
<el-col :span="6">
<div class="demo-color-box bg-success">Success<div class="value">#13CE66</div></div>
<div class="demo-color-box bg-warning">Warning<div class="value">#EB9E05</div></div>
</el-col>
<el-col :span="6">
<div class="demo-color-box bg-warning">Warning<div class="value">#F7BA2A</div></div>
<div class="demo-color-box bg-danger">Danger<div class="value">#FA5555</div></div>
</el-col>
<el-col :span="6">
<div class="demo-color-box bg-danger">Danger<div class="value">#FF4949</div></div>
<div class="demo-color-box bg-info">Info<div class="value">#878D99</div></div>
</el-col>
</el-row>
......@@ -130,29 +112,18 @@ Element 主要品牌颜色是鲜艳、友好的蓝色。
<el-row :gutter="12">
<el-col :span="6">
<div class="demo-color-box-group">
<div class="demo-color-box bg-black">Black<div class="value">#1F2D3D</div></div>
<div class="demo-color-box bg-black-light">Light Black<div class="value">#324057</div></div>
<div class="demo-color-box bg-black-lighter">Extra Light Black<div class="value">#475669</div></div>
<div class="demo-color-box bg-text-primary">主要文字<div class="value">#2D2F33</div></div>
<div class="demo-color-box bg-text-regular">常规文字<div class="value">#5A5E66</div></div>
<div class="demo-color-box bg-text-secondary">次要文字<div class="value">#878D99</div></div>
<div class="demo-color-box bg-text-placeholder">占位文字<div class="value">#B4BCCC</div></div>
</div>
</el-col>
<el-col :span="6">
<div class="demo-color-box-group">
<div class="demo-color-box bg-silver">Silver<div class="value">#8492A6</div></div>
<div class="demo-color-box bg-silver-light">Light Silver<div class="value">#99A9BF</div></div>
<div class="demo-color-box bg-silver-lighter">Extra Light Silver<div class="value">#C0CCDA</div></div>
</div>
</el-col>
<el-col :span="6">
<div class="demo-color-box-group">
<div class="demo-color-box color-gray bg-gray">Gray<div class="value">#D3DCE6</div></div>
<div class="demo-color-box color-gray bg-gray-light">Light Gray<div class="value">#E5E9F2</div></div>
<div class="demo-color-box color-gray bg-gray-lighter">Extra Light Gray<div class="value">#EFF2F7</div></div>
</div>
</el-col>
<el-col :span="6">
<div class="demo-color-box-group" style="border: 1px solid #e0e6ed;border-radius: 4px;">
<div class="demo-color-box color-gray bg-white-dark">Dark White<div class="value">#F9FAFC</div></div>
<div class="demo-color-box color-gray bg-white">White<div class="value">#FFFFFF</div></div>
<div class="demo-color-box bg-border-base">一级边框<div class="value">#D8DCE6</div></div>
<div class="demo-color-box bg-border-light">二级边框<div class="value">#DFE4ED</div></div>
<div class="demo-color-box bg-border-lighter">三级边框<div class="value">#E6EBF5</div></div>
<div class="demo-color-box bg-border-extra-light">四级边框<div class="value">#EDF2FC</div></div>
</div>
</el-col>
</el-row>
examples/docs/zh-CN/icon.md
View file @ b5786701
......@@ -21,7 +21,7 @@
margin: 0 20px;
}
.icon-list {
.page-component .content > ul.icon-list {
overflow: hidden;
list-style: none;
padding: 0;
......
packages/button/src/button.vue
View file @ b5786701
......@@ -16,7 +16,7 @@
]"
>
<i class="el-icon-loading" v-if="loading" @click="handleInnerClick"></i>
<i :class="'el-icon-' + icon" v-if="icon && !loading" @click="handleInnerClick"></i>
<i :class="icon" v-if="icon && !loading" @click="handleInnerClick"></i>
<span v-if="$slots.default" @click="handleInnerClick"><slot></slot></span>
</button>
</template>
......
test/unit/specs/button.spec.js
View file @ b5786701
......@@ -16,7 +16,7 @@ describe('Button', () => {
});
it('icon', () => {
vm = createTest(Button, {
icon: 'search'
icon: 'el-icon-search'
}, true);
let buttonElm = vm.$el;
expect(buttonElm.querySelector('.el-icon-search')).to.be.ok;
......
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