github
/
element
mirror of https://github.com/ElemeFE/element
1
0
Fork 0
Code Issues Releases Wiki Activity

update color docs (#7256) 

* update color docs

* fix button test
pull/7269/head
杨奕 2017-09-28 02:28:12 -05:00 committed by Black Wayne
parent 8774311c76
commit b578670168
9 changed files with 104 additions and 162 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
examples/app.vue
View File

@ -110,7 +110,7 @@
margin-top: 20px; margin-top: 20px;
code { code {
background-color: rgba(#fff, .7); background-color: rgba(255, 255, 255, .7);
color: #445368; color: #445368;
} }
} }
@ -143,7 +143,7 @@
} }
code { code {
background-color: rgba(#fff, .7); background-color: rgba(255, 255, 255, .7);
color: #445368; color: #445368;
} }
} }

18
examples/docs/en-US/button.md
View File

@ -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. :::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 ```html
<el-button type="primary" icon="edit"></el-button> <el-button type="primary" icon="el-icon-edit"></el-button>
<el-button type="primary" icon="share"></el-button> <el-button type="primary" icon="el-icon-share"></el-button>
<el-button type="primary" icon="delete"></el-button> <el-button type="primary" icon="el-icon-delete"></el-button>
<el-button type="primary" icon="search">Search</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> <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 ```html
<el-button-group> <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 type="primary">Next Page<i class="el-icon-arrow-right el-icon-right"></i></el-button>
</el-button-group> </el-button-group>
<el-button-group> <el-button-group>
<el-button type="primary" icon="edit"></el-button> <el-button type="primary" icon="el-icon-edit"></el-button>
<el-button type="primary" icon="share"></el-button> <el-button type="primary" icon="el-icon-share"></el-button>
<el-button type="primary" icon="delete"></el-button> <el-button type="primary" icon="el-icon-delete"></el-button>
</el-button-group> </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 | | round | determine whether it's a round button | boolean | — | false |
| loading | determine whether it's loading | boolean | — | false | | loading | determine whether it's loading | boolean | — | false |
| disabled | disable the button | 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 | | autofocus | same as native button's `autofocus` | boolean | — | false |
| native-type | same as native button's `type` | string | button / submit / reset | button | | native-type | same as native button's `type` | string | button / submit / reset | button |

105
examples/docs/en-US/color.md
View File

@ -24,15 +24,8 @@
border-radius: 0 0 4px 4px; border-radius: 0 0 4px 4px;
} }
} }
.bg-blue-light { .bg-blue {
background-color: #58b7ff; background-color: #1989fa;
}
.bg-blue,
.bg-info {
background-color: #20a0ff;
}
.bg-blue-dark {
background-color: #1d8ce0;
} }
.bg-success { .bg-success {
@ -44,43 +37,38 @@
.bg-danger { .bg-danger {
background-color: #ff4949; background-color: #ff4949;
} }
.bg-info {
.bg-black { background-color: #878D99;
background-color: #1f2d3d;
}
.bg-black-light {
background-color: #324057;
}
.bg-black-lighter {
background-color: #475669;
} }
.bg-silver { .bg-text-primary {
background-color: #8492a6; background-color: #2d2f33;
} }
.bg-silver-light { .bg-text-regular {
background-color: #99a9bf; background-color: #5a5e66;
} }
.bg-silver-lighter { .bg-text-secondary {
background-color: #c0ccda; background-color: #878d99;
}
.bg-text-placeholder {
background-color: #b4bccc;
} }
.bg-gray { .bg-border-base {
background-color: #d3dce6; background-color: #d8dce6;
} }
.bg-gray-light { .bg-border-light {
background-color: #e5e9f2; background-color: #dfe4ed;
} }
.bg-gray-lighter { .bg-border-lighter {
background-color: #eff2f7; background-color: #e6ebf5;
}
.bg-border-extra-light {
background-color: #edf2fc;
} }
.bg-white-dark { [class*=" bg-border-"] {
background-color: #f9fafc; color: #5a5e66;
}
.color-gray {
color: #5e6d82;
} }
</style> </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. The main color of Element is bright and friendly blue.
<el-row :gutter="12"> <el-row :gutter="12">
<el-col :span="8"> <el-col :span="6">
<div class="demo-color-box bg-blue-light">Light Blue<div class="value">#58B7FF</div></div> <div class="demo-color-box bg-blue">Blue<div class="value">#1989FA</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> </el-col>
</el-row> </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-row :gutter="12">
<el-col :span="6"> <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>
<el-col :span="6"> <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>
<el-col :span="6"> <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>
<el-col :span="6"> <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-col>
</el-row> </el-row>
@ -129,29 +111,18 @@ Neutral colors are for text, background and border colors. You can use different
<el-row :gutter="12"> <el-row :gutter="12">
<el-col :span="6"> <el-col :span="6">
<div class="demo-color-box-group"> <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-text-primary">Primary Text<div class="value">#2D2F33</div></div>
<div class="demo-color-box bg-black-light">Light Black<div class="value">#324057</div></div> <div class="demo-color-box bg-text-regular">Regular Text<div class="value">#5A5E66</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-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> </div>
</el-col> </el-col>
<el-col :span="6"> <el-col :span="6">
<div class="demo-color-box-group"> <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-border-base">Base Border<div class="value">#D8DCE6</div></div>
<div class="demo-color-box bg-silver-light">Light Silver<div class="value">#99A9BF</div></div> <div class="demo-color-box bg-border-light">Light Border<div class="value">#DFE4ED</div></div>
<div class="demo-color-box bg-silver-lighter">Extra Light Silver<div class="value">#C0CCDA</div></div> <div class="demo-color-box bg-border-lighter">Lighter Border<div class="value">#E6EBF5</div></div>
</div> <div class="demo-color-box bg-border-extra-light">Extra Light Border<div class="value">#EDF2FC</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> </div>
</el-col> </el-col>
</el-row> </el-row>

2
examples/docs/en-US/icon.md
View File

@ -22,7 +22,7 @@
margin: 0 20px; margin: 0 20px;
} }
.icon-list { .page-component .content > ul.icon-list {
overflow: hidden; overflow: hidden;
list-style: none; list-style: none;
padding: 0; padding: 0;

18
examples/docs/zh-CN/button.md
View File

@ -104,10 +104,10 @@
:::demo 设置`icon`属性即可，icon 的列表可以参考 Element 的 icon 组件，也可以设置在文字右边的 icon ，只要使用`i`标签即可，可以使用自定义图标。 :::demo 设置`icon`属性即可，icon 的列表可以参考 Element 的 icon 组件，也可以设置在文字右边的 icon ，只要使用`i`标签即可，可以使用自定义图标。
```html ```html
<el-button type="primary" icon="edit"></el-button> <el-button type="primary" icon="el-icon-edit"></el-button>
<el-button type="primary" icon="share"></el-button> <el-button type="primary" icon="el-icon-share"></el-button>
<el-button type="primary" icon="delete"></el-button> <el-button type="primary" icon="el-icon-delete"></el-button>
<el-button type="primary" icon="search">搜索</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> <el-button type="primary">上传<i class="el-icon-upload el-icon--right"></i></el-button>
``` ```
::: :::
@ -120,13 +120,13 @@
```html ```html
<el-button-group> <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 type="primary">下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button>
</el-button-group> </el-button-group>
<el-button-group> <el-button-group>
<el-button type="primary" icon="edit"></el-button> <el-button type="primary" icon="el-icon-edit"></el-button>
<el-button type="primary" icon="share"></el-button> <el-button type="primary" icon="el-icon-share"></el-button>
<el-button type="primary" icon="delete"></el-button> <el-button type="primary" icon="el-icon-delete"></el-button>
</el-button-group> </el-button-group>
``` ```
::: :::
@ -173,6 +173,6 @@ Button 组件提供除了默认值以外的三种尺寸，可以在不同场景
| round | 是否圆形按钮 | boolean | — | false | | round | 是否圆形按钮 | boolean | — | false |
| loading | 是否加载中状态 | boolean | — | false | | loading | 是否加载中状态 | boolean | — | false |
| disabled | 是否禁用状态 | boolean | — | false | | disabled | 是否禁用状态 | boolean | — | false |
| icon | 图标，已有的图标库中的图标名 | string | — | — | | icon | 图标类名 | string | — | — |
| autofocus | 是否默认聚焦 | boolean | — | false | | autofocus | 是否默认聚焦 | boolean | — | false |
| native-type | 原生 type 属性 | string | button / submit / reset | button | | native-type | 原生 type 属性 | string | button / submit / reset | button |

113
examples/docs/zh-CN/color.md
View File

@ -24,63 +24,51 @@
border-radius: 0 0 4px 4px; border-radius: 0 0 4px 4px;
} }
} }
.bg-blue-light { .bg-blue {
background-color: #58b7ff; background-color: #1989fa;
}
.bg-blue,
.bg-info {
background-color: #20a0ff;
}
.bg-blue-dark {
background-color: #1d8ce0;
} }
.bg-success { .bg-success {
background-color: #13CE66; background-color: #67C23A;
} }
.bg-warning { .bg-warning {
background-color: #f7ba2a; background-color: #EB9E05;
} }
.bg-danger { .bg-danger {
background-color: #ff4949; background-color: #FA5555;
}
.bg-info {
background-color: #878D99;
} }
.bg-black { .bg-text-primary {
background-color: #1f2d3d; background-color: #2d2f33;
} }
.bg-black-light { .bg-text-regular {
background-color: #324057; background-color: #5a5e66;
} }
.bg-black-lighter { .bg-text-secondary {
background-color: #475669; background-color: #878d99;
}
.bg-text-placeholder {
background-color: #b4bccc;
} }
.bg-silver { .bg-border-base {
background-color: #8492a6; background-color: #d8dce6;
} }
.bg-silver-light { .bg-border-light {
background-color: #99a9bf; background-color: #dfe4ed;
} }
.bg-silver-lighter { .bg-border-lighter {
background-color: #c0ccda; background-color: #e6ebf5;
}
.bg-border-extra-light {
background-color: #edf2fc;
} }
.bg-gray { [class*=" bg-border-"] {
background-color: #d3dce6; color: #5a5e66;
}
.bg-gray-light {
background-color: #e5e9f2;
}
.bg-gray-lighter {
background-color: #eff2f7;
}
.bg-white-dark {
background-color: #f9fafc;
}
.color-gray {
color: #5e6d82;
} }
</style> </style>
@ -93,14 +81,8 @@ Element 为了避免视觉传达差异，使用一套特定的调色板来规定
Element 主要品牌颜色是鲜艳、友好的蓝色。 Element 主要品牌颜色是鲜艳、友好的蓝色。
<el-row :gutter="12"> <el-row :gutter="12">
<el-col :span="8"> <el-col :span="6">
<div class="demo-color-box bg-blue-light">Light Blue<div class="value">#58B7FF</div></div> <div class="demo-color-box bg-blue">Blue<div class="value">#1989FA</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> </el-col>
</el-row> </el-row>
@ -110,16 +92,16 @@ Element 主要品牌颜色是鲜艳、友好的蓝色。
<el-row :gutter="12"> <el-row :gutter="12">
<el-col :span="6"> <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>
<el-col :span="6"> <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>
<el-col :span="6"> <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>
<el-col :span="6"> <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-col>
</el-row> </el-row>
@ -130,29 +112,18 @@ Element 主要品牌颜色是鲜艳、友好的蓝色。
<el-row :gutter="12"> <el-row :gutter="12">
<el-col :span="6"> <el-col :span="6">
<div class="demo-color-box-group"> <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-text-primary">主要文字<div class="value">#2D2F33</div></div>
<div class="demo-color-box bg-black-light">Light Black<div class="value">#324057</div></div> <div class="demo-color-box bg-text-regular">常规文字<div class="value">#5A5E66</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-secondary">次要文字<div class="value">#878D99</div></div>
<div class="demo-color-box bg-text-placeholder">占位文字<div class="value">#B4BCCC</div></div>
</div> </div>
</el-col> </el-col>
<el-col :span="6"> <el-col :span="6">
<div class="demo-color-box-group"> <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-border-base">一级边框<div class="value">#D8DCE6</div></div>
<div class="demo-color-box bg-silver-light">Light Silver<div class="value">#99A9BF</div></div> <div class="demo-color-box bg-border-light">二级边框<div class="value">#DFE4ED</div></div>
<div class="demo-color-box bg-silver-lighter">Extra Light Silver<div class="value">#C0CCDA</div></div> <div class="demo-color-box bg-border-lighter">三级边框<div class="value">#E6EBF5</div></div>
</div> <div class="demo-color-box bg-border-extra-light">四级边框<div class="value">#EDF2FC</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> </div>
</el-col> </el-col>
</el-row> </el-row>

2
examples/docs/zh-CN/icon.md
View File

@ -21,7 +21,7 @@
margin: 0 20px; margin: 0 20px;
} }
.icon-list { .page-component .content > ul.icon-list {
overflow: hidden; overflow: hidden;
list-style: none; list-style: none;
padding: 0; padding: 0;

2
packages/button/src/button.vue
View File

@ -16,7 +16,7 @@
]" ]"
> >
<i class="el-icon-loading" v-if="loading" @click="handleInnerClick"></i> <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> <span v-if="$slots.default" @click="handleInnerClick"><slot></slot></span>
</button> </button>
</template> </template>

2
test/unit/specs/button.spec.js
View File

@ -16,7 +16,7 @@ describe('Button', () => {
}); });
it('icon', () => { it('icon', () => {
vm = createTest(Button, { vm = createTest(Button, {
icon: 'search' icon: 'el-icon-search'
}, true); }, true);
let buttonElm = vm.$el; let buttonElm = vm.$el;
expect(buttonElm.querySelector('.el-icon-search')).to.be.ok; expect(buttonElm.querySelector('.el-icon-search')).to.be.ok;