Skip to content

E
Element
Commit 0367dc59 authored by baiyaaaaa's avatar baiyaaaaa Committed by GitHub
Browse files
Options

Merge pull request #132 from eleme/menu-docs 

Menu docs
parents 5abde26e 5e10f129
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 437 additions and 290 deletions
examples/docs/color.md 0 → 100644
View file @ 0367dc59
<style>
.demo-color-box {
border-radius: 4px;
padding: 20px;
height: 74px;
box-sizing: border-box;
color: #fff;
font-size: 14px;
& .value {
font-size: 12px;
opacity: 0.69;
}
}
.demo-color-box-group {
.demo-color-box {
border-radius: 0;
}
.demo-color-box:first-child {
border-radius: 4px 4px 0 0;
}
.demo-color-box:last-child {
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-success {
background-color: #13CE66;
}
.bg-warning {
background-color: #f7ba2a;
}
.bg-danger {
background-color: #ff4949;
}
.bg-black {
background-color: #1f2d3d;
}
.bg-black-light {
background-color: #324057;
}
.bg-black-lighter {
background-color: #475669;
}
.bg-silver {
background-color: #8492a6;
}
.bg-silver-light {
background-color: #99a9bf;
}
.bg-silver-lighter {
background-color: #c0ccda;
}
.bg-gray {
background-color: #d3dce6;
}
.bg-gray-light {
background-color: #e5e9f2;
}
.bg-gray-lighter {
background-color: #eff2f7;
}
.bg-white-dark {
background-color: #f9fafc;
}
.color-gray {
color: #5e6d82;
}
</style>
## Color 色彩
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>
</el-row>
### 辅助色
除了主色外的场景色，需要在不同的场景中使用（例如危险色表示危险的操作）。每种颜色都有较浅和较深两种。
<el-row :gutter="12">
<el-col :span="6">
<div class="demo-color-box bg-info">Blue<div class="value">#20A0FF</div></div>
</el-col>
<el-col :span="6">
<div class="demo-color-box bg-success">Success<div class="value">#13CE66</div></div>
</el-col>
<el-col :span="6">
<div class="demo-color-box bg-warning">Warning<div class="value">#F7BA2A</div></div>
</el-col>
<el-col :span="6">
<div class="demo-color-box bg-danger">Danger<div class="value">#ff4949</div></div>
</el-col>
</el-row>
### 中性色
中性色用于文本、背景和边框颜色。通过运用不同的中性色，来表现层次结构。
<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>
</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 White<div class="value">#F9FAFC</div></div>
<div class="demo-color-box color-gray bg-white-dark">White<div class="value">#FFFFFF</div></div>
</div>
</el-col>
</el-row>
examples/docs/menu.md
View file @ 0367dc59
This diff is collapsed.
examples/docs/typography.md 0 → 100644
View file @ 0367dc59
<style>
.demo-typo-box {
height: 200px;
width: 200px;
position: relative;
border: 1px solid #eaeefb;
font-size: 40px;
color: #1f2d3d;
text-align: center;
line-height: 162px;
padding-bottom: 36px;
box-sizing: border-box;
display: inline-block;
margin-right: 17px;
.name {
position: absolute;
bottom: 0;
width: 100%;
height: 35px;
border-top: 1px solid #eaeefb;
font-size: 14px;
color: #8492a6;
line-height: 35px;
text-align: left;
text-indent: 10px;
}
}
.demo-typo-size {
.h1 {
font-size: 20px;
}
.h2 {
font-size: 18px;
}
.h3 {
font-size: 16px;
}
.text-regular {
font-size: 14px;
}
.text-small {
font-size: 13px;
}
.text-smaller {
font-size: 12px;
}
.color-dark-light {
color: #99a9bf;
}
}
.typo-PingFang {
font-family: 'PingFang SC';
}
.typo-Hiragino {
font-family: 'Hiragino Sans GB';
}
.typo-Microsoft {
font-family: 'Microsoft YaHei';
}
/* 英文 */
.typo-Helvetica-Neue {
font-family: 'Helvetica Neue';
}
.typo-Helvetica {
font-family: 'Helvetica';
}
.typo-Arial {
font-family: 'Arial';
}
</style>
## Typography 字体
我们对字体进行统一规范，力求在各个操作系统下都有最佳展示效果。
### 中文字体
<div class="demo-typo-box typo-PingFang">
和畅惠风
<div class="name">PingFang SC</div>
</div>
<div class="demo-typo-box typo-Hiragino">
和畅惠风
<div class="name">Hiragino Sans GB</div>
</div>
<div class="demo-typo-box typo-Microsoft">
和畅惠风
<div class="name">Microsoft YaHei</div>
</div>
### 英文／数字字体
<div class="demo-typo-box typo-Helvetica-neue">
RGag
<div class="name">Helvetica Neue</div>
</div>
<div class="demo-typo-box typo-Helvetica">
RGag
<div class="name">Helvetica</div>
</div>
<div class="demo-typo-box typo-Arial">
RGag
<div class="name">Arial</div>
</div>
### 字体家族 css 代码：
```css
font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
```
### 字体使用规范：
<table class="demo-typo-size">
<tbody>
<tr>
<td class="h1">主标题</td>
<td class="h1">用 Element 快速搭建页面</td>
<td class="color-dark-light">20px Extra large</td>
</tr>
<tr>
<td class="h2">标题</td>
<td class="h2">用 Element 快速搭建页面</td>
<td class="color-dark-light">18px large</td>
</tr>
<tr>
<td class="h3">小标题</td>
<td class="h3">用 Element 快速搭建页面</td>
<td class="color-dark-light">16px Medium</td>
</tr>
<tr>
<td class="text-regular">正文</td>
<td class="text-regular">用 Element 快速搭建页面</td>
<td class="color-dark-light">14px Small</td>
</tr>
<tr>
<td class="text-small">正文（小）</td>
<td class="text-small">用 Element 快速搭建页面</td>
<td class="color-dark-light">13px Extra Small</td>
</tr>
<tr>
<td class="text-smaller">辅助文字</td>
<td class="text-smaller">用 Element 快速搭建页面</td>
<td class="color-dark-light">12px Extra Extra Small</td>
</tr>
</tbody>
</table>
examples/nav.config.json
View file @ 0367dc59
...@@ -10,6 +10,18 @@ ...@@ -10,6 +10,18 @@
"title": "Layout 布局", "title": "Layout 布局",
"description": "" "description": ""
}, },
{
"path": "/color",
"name": "色彩 (color)",
"title": "Color 色彩",
"description": ""
},
{
"path": "/typography",
"name": "字体 (typography)",
"title": "Typography 字体",
"description": ""
},
{ {
"path": "/icon", "path": "/icon",
"name": "图标 (icon)", "name": "图标 (icon)",
...@@ -199,6 +211,12 @@ ...@@ -199,6 +211,12 @@
{ {
"groupName": "Nav", "groupName": "Nav",
"list": [ "list": [
{
"path": "/menu",
"name": "导航菜单 (menu)",
"title": "NavMenu 导航菜单",
"description": "富展现的标签页"
},
{ {
"path": "/tabs", "path": "/tabs",
"name": "标签页 (tabs)", "name": "标签页 (tabs)",
......
packages/theme-default/src/menu.css
View file @ 0367dc59
...@@ -4,11 +4,14 @@ ...@@ -4,11 +4,14 @@
@component-namespace el { @component-namespace el {
@b menu { @b menu {
height: 60px; height: 60px;
border-radius: 2px;
line-height: 60px; line-height: 60px;
list-style: none; list-style: none;
position: relative; position: relative;
margin: 0; margin: 0;
padding-left: 0; padding-left: 0;
background-color: #fff;
background-color: var(--menu-item-fill);
& li { & li {
list-style: none; list-style: none;
...@@ -38,6 +41,8 @@ ...@@ -38,6 +41,8 @@
} }
} }
@m dark { @m dark {
background-color: var(--dark-menu-item-fill);
& .el-menu-item, & .el-menu-item,
& .el-submenu__title { & .el-submenu__title {
color: #c0ccda; color: #c0ccda;
...@@ -81,8 +86,7 @@ ...@@ -81,8 +86,7 @@
color: var(--menu-item-color); color: var(--menu-item-color);
float: left; float: left;
height: 100%; height: 100%;
padding: 0 10px; padding: 0 20px;
margin: 0 10px;
cursor: pointer; cursor: pointer;
position: relative; position: relative;
transition: var(--md-fade-transition); transition: var(--md-fade-transition);
...@@ -133,14 +137,14 @@ ...@@ -133,14 +137,14 @@
margin: 0; margin: 0;
top: 50%; top: 50%;
right: 20px; right: 20px;
transform: rotateZ(180deg) translateY(-50%); margin-top: -8px;
transform: rotateZ(180deg);
font-size: 12px; font-size: 12px;
transition: transform .3s ease-in-out; transition: transform .3s;
transform-origin: center 0;
} }
@when opened { @when opened {
& .el-submenu__icon-arrow { & .el-submenu__icon-arrow {
transform: translateY(-50%); transform: rotateZ(0);
} }
} }
} }
......
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