mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-29 05:29:37 +08:00
afc163
commit
9192bcbedc
@ -81,4 +81,24 @@ InstantClickChangeFns.push(function () {
|
||||
, document.getElementById('versions-select'));
|
||||
});
|
||||
|
||||
window.BrowserDemo = React.createClass({
|
||||
render() {
|
||||
return (
|
||||
<article className="window-frame focus">
|
||||
<header className="top-bar">
|
||||
<div className="controls">
|
||||
<div className="control close"></div>
|
||||
<div className="control minify"></div>
|
||||
<div className="control expand"></div>
|
||||
</div>
|
||||
<input className="address-bar" defaultValue="http://www.example.com" />
|
||||
</header>
|
||||
<section className="window-content">
|
||||
{this.props.children}
|
||||
</section>
|
||||
</article>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
module.exports = antd;
|
||||
|
||||
@ -2003,3 +2003,102 @@ a.entry-link:hover .anticon-smile {
|
||||
position: relative;
|
||||
top: -2px;
|
||||
}
|
||||
|
||||
.window-frame {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #ccc;
|
||||
background-color: #fff;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.window-frame .top-bar {
|
||||
background: #DCD9DC;
|
||||
background-image: -webkit-linear-gradient(#F6F6F6, #dadada);
|
||||
background-image: linear-gradient(#F6F6F6, #dadada);
|
||||
min-height: 2rem;
|
||||
border-radius: 0.35rem 0.35rem 0 0;
|
||||
padding: 0.41528rem 0.83056rem;
|
||||
border-bottom: 1px solid transparent;
|
||||
border-bottom-color: #ccc;
|
||||
color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.window-frame .top-bar .address-bar {
|
||||
border-radius: 0.245rem;
|
||||
border: 1px solid rgba(0, 0, 0, 0.3);
|
||||
color: black;
|
||||
box-shadow: 0 0.5px 0 0 rgba(255, 255, 255, 0.75), inset 0 1px 1px rgba(0, 0, 0, 0.15);
|
||||
display: inline-block;
|
||||
padding: 0 0.5em 0 1em;
|
||||
font-size: 0.75rem;
|
||||
line-height: 2;
|
||||
background: white;
|
||||
width: 60%;
|
||||
margin-left: 15%;
|
||||
}
|
||||
|
||||
.window-frame .top-bar .controls {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
position: relative;
|
||||
padding-top: 0.2em;
|
||||
}
|
||||
.window-frame .top-bar .controls > * {
|
||||
position: relative;
|
||||
vertical-align: middle;
|
||||
line-height: 1;
|
||||
display: inline-block;
|
||||
margin-right: 0.41528rem;
|
||||
-webkit-transition: 0.1s linear;
|
||||
transition: 0.1s linear;
|
||||
}
|
||||
.window-frame .top-bar .control {
|
||||
width: 0.83056rem;
|
||||
height: 0.83056rem;
|
||||
background: #DCD9DC;
|
||||
border-radius: 0.83056rem;
|
||||
border: 1px solid rgba(0, 0, 0, 0.08);
|
||||
cursor: pointer;
|
||||
}
|
||||
.window-frame .top-bar .control:hover {
|
||||
background: #b0adb0;
|
||||
}
|
||||
.window-frame .top-bar .control:before,
|
||||
.window-frame .top-bar .control:after {
|
||||
line-height: 0.5;
|
||||
color: black;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
vertical-align: middle;
|
||||
line-height: 0.5;
|
||||
}
|
||||
.window-frame .top-bar .control.close {
|
||||
background: #FC625C;
|
||||
}
|
||||
.window-frame .top-bar .control.minify {
|
||||
background: #FDC041;
|
||||
}
|
||||
.window-frame .top-bar .control.expand {
|
||||
background: #35CD4B;
|
||||
}
|
||||
.window-frame .window-content {
|
||||
padding: 0;
|
||||
line-height: 1.5;
|
||||
overflow: auto;
|
||||
height: 440px;
|
||||
position: relative;
|
||||
border-radius: 0 0 5px 5px;
|
||||
background: #f4f4f4;
|
||||
}
|
||||
.window-frame .status-bar {
|
||||
height: 2rem;
|
||||
border-radius: 0 0 0.35rem 0.35rem;
|
||||
display: none;
|
||||
}
|
||||
|
||||
@ -14,9 +14,7 @@
|
||||
</h1>
|
||||
{{ post.html|add_anchor }}
|
||||
</article>
|
||||
{%- if post.meta.template === 'component' %}
|
||||
{%- include "demos.html" %}
|
||||
{%- endif %}
|
||||
<div class="api-container markdown"></div>
|
||||
</section>
|
||||
{% endblock %}
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
{%- set items = resource.pages|find_demo_in_component(post.meta.directory) %}
|
||||
{%- if items.length > 0 %}
|
||||
<h2 class="component-demos">
|
||||
组件演示
|
||||
代码演示
|
||||
<i class="anticon anticon-appstore icon-all" title="展开全部代码"></i>
|
||||
{%- if post.meta.sketch %}
|
||||
<a class="sketch-link" href="{{ post.meta.sketch }}" target="_blank">
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
# 色彩
|
||||
|
||||
- category: 风格
|
||||
- category: 基础
|
||||
- order: 2
|
||||
|
||||
---
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
# 字体
|
||||
|
||||
- category: 风格
|
||||
- category: 基础
|
||||
- order: 0
|
||||
|
||||
---
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
# Ant Design
|
||||
|
||||
- category: top
|
||||
- category: 0
|
||||
- order: 0
|
||||
|
||||
---
|
||||
|
||||
125
spec/layout/demo/aside.md
Normal file
125
spec/layout/demo/aside.md
Normal file
@ -0,0 +1,125 @@
|
||||
# 侧边导航
|
||||
|
||||
- order: 2
|
||||
|
||||
顶级导航在侧边栏。
|
||||
|
||||
侧边导航在页面布局上采用的是左右的结构，一般主导航放置于页面的左侧固定位置，辅助菜单放置于工作区顶部。内容根据浏览器终端进行自适应，能提高横向空间的使用率，但是整个页面排版不稳定。侧边导航的模式层级扩展性强，一、二、三级导航项目可以更为顺畅且具关联性的被展示，同时侧边导航可以固定，使得用户在操作和浏览中可以快速的定位和切换当前位置，有很高的操作效率。但这类导航横向页面内容的空间会被牺牲一部份。
|
||||
|
||||
---
|
||||
|
||||
````jsx
|
||||
import { Menu, Breadcrumb, Icon } from 'antd';
|
||||
const SubMenu = Menu.SubMenu;
|
||||
|
||||
ReactDOM.render(
|
||||
<BrowserDemo>
|
||||
<div className="ant-layout-aside">
|
||||
<aside className="ant-layout-sider">
|
||||
<div className="ant-layout-logo"></div>
|
||||
<Menu mode="inline" theme="dark"
|
||||
defaultSelectedKeys={['1']} defaultOpenKeys={['sub1']}>
|
||||
<SubMenu key="sub1" title={<span><Icon type="user" />导航一</span>}>
|
||||
<Menu.Item key="1">选项1</Menu.Item>
|
||||
<Menu.Item key="2">选项2</Menu.Item>
|
||||
<Menu.Item key="3">选项3</Menu.Item>
|
||||
<Menu.Item key="4">选项4</Menu.Item>
|
||||
</SubMenu>
|
||||
<SubMenu key="sub2" title={<span><Icon type="laptop" />导航二</span>}>
|
||||
<Menu.Item key="5">选项5</Menu.Item>
|
||||
<Menu.Item key="6">选项6</Menu.Item>
|
||||
<Menu.Item key="7">选项7</Menu.Item>
|
||||
<Menu.Item key="8">选项8</Menu.Item>
|
||||
</SubMenu>
|
||||
<SubMenu key="sub3" title={<span><Icon type="notification" />导航三</span>}>
|
||||
<Menu.Item key="9">选项9</Menu.Item>
|
||||
<Menu.Item key="10">选项10</Menu.Item>
|
||||
<Menu.Item key="11">选项11</Menu.Item>
|
||||
<Menu.Item key="12">选项12</Menu.Item>
|
||||
</SubMenu>
|
||||
</Menu>
|
||||
</aside>
|
||||
<div className="ant-layout-main">
|
||||
<div className="ant-layout-header"></div>
|
||||
<div className="ant-layout-breadcrumb">
|
||||
<Breadcrumb>
|
||||
<Breadcrumb.Item>首页</Breadcrumb.Item>
|
||||
<Breadcrumb.Item>应用列表</Breadcrumb.Item>
|
||||
<Breadcrumb.Item>某应用</Breadcrumb.Item>
|
||||
</Breadcrumb>
|
||||
</div>
|
||||
<div className="ant-layout-container">
|
||||
<div className="ant-layout-content">
|
||||
<div style={{ height: 590 }}></div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="ant-layout-footer">
|
||||
Ant Design 版权所有 © 2015 由蚂蚁金服体验技术部支持
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</BrowserDemo>
|
||||
, document.getElementById('spec-layout-demo-aside'));
|
||||
````
|
||||
|
||||
````css
|
||||
.ant-layout-aside {
|
||||
position: relative;
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
.ant-layout-aside .ant-layout-logo {
|
||||
width: 150px;
|
||||
height: 32px;
|
||||
background: #333;
|
||||
border-radius: 6px;
|
||||
margin: 16px 24px 16px 28px;
|
||||
}
|
||||
|
||||
.ant-layout-aside .ant-layout-sider {
|
||||
width: 224px;
|
||||
background: #404040;
|
||||
position: absolute;
|
||||
overflow: auto;
|
||||
padding-bottom: 24px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.ant-layout-aside .ant-layout-sider > .ant-menu {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.ant-layout-aside .ant-layout-header {
|
||||
background: #fff;
|
||||
height: 64px;
|
||||
border-bottom: 1px solid #e9e9e9;
|
||||
}
|
||||
|
||||
.ant-layout-aside .ant-layout-breadcrumb {
|
||||
margin: 7px 0 -17px 24px;
|
||||
}
|
||||
|
||||
.ant-layout-aside .ant-layout-main {
|
||||
margin-left: 224px;
|
||||
}
|
||||
|
||||
.ant-layout-aside .ant-layout-container {
|
||||
margin: 24px 16px;
|
||||
}
|
||||
|
||||
.ant-layout-aside .ant-layout-content {
|
||||
background: #fff;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.ant-layout-aside .ant-layout-footer {
|
||||
height; 64px;
|
||||
line-height: 64px;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
background: #fff;
|
||||
border-top: 1px solid #e9e9e9;
|
||||
width: 100%;
|
||||
}
|
||||
````
|
||||
139
spec/layout/demo/top-aside.md
Normal file
139
spec/layout/demo/top-aside.md
Normal file
@ -0,0 +1,139 @@
|
||||
# 顶部导航 + 侧边栏
|
||||
|
||||
- order: 1
|
||||
|
||||
顶级导航在头部，次级导航在侧边栏。
|
||||
|
||||
---
|
||||
|
||||
````jsx
|
||||
import { Menu, Breadcrumb, Icon } from 'antd';
|
||||
const SubMenu = Menu.SubMenu;
|
||||
|
||||
ReactDOM.render(
|
||||
<BrowserDemo>
|
||||
<div className="ant-layout-topaside">
|
||||
<div className="ant-layout-header">
|
||||
<div className="ant-layout-wrapper">
|
||||
<div className="ant-layout-logo"></div>
|
||||
<Menu theme="dark" mode="horizontal"
|
||||
defaultSelectedKeys={['2']} style={{lineHeight: '64px'}}>
|
||||
<Menu.Item key="1">导航一</Menu.Item>
|
||||
<Menu.Item key="2">导航二</Menu.Item>
|
||||
<Menu.Item key="3">导航三</Menu.Item>
|
||||
</Menu>
|
||||
</div>
|
||||
</div>
|
||||
<div className="ant-layout-subheader">
|
||||
<div className="ant-layout-wrapper">
|
||||
<Menu mode="horizontal"
|
||||
defaultSelectedKeys={['1']} style={{marginLeft: 124}}>
|
||||
<Menu.Item key="1">二级导航</Menu.Item>
|
||||
<Menu.Item key="2">二级导航</Menu.Item>
|
||||
<Menu.Item key="3">二级导航</Menu.Item>
|
||||
</Menu>
|
||||
</div>
|
||||
</div>
|
||||
<div className="ant-layout-wrapper">
|
||||
<div className="ant-layout-breadcrumb">
|
||||
<Breadcrumb>
|
||||
<Breadcrumb.Item>首页</Breadcrumb.Item>
|
||||
<Breadcrumb.Item>应用列表</Breadcrumb.Item>
|
||||
<Breadcrumb.Item>某应用</Breadcrumb.Item>
|
||||
</Breadcrumb>
|
||||
</div>
|
||||
<div className="ant-layout-container">
|
||||
<aside className="ant-layout-sider">
|
||||
<Menu mode="inline" defaultSelectedKeys={['1']} defaultOpenKeys={['sub1']}>
|
||||
<SubMenu key="sub1" title={<span><Icon type="user" />导航一</span>}>
|
||||
<Menu.Item key="1">选项1</Menu.Item>
|
||||
<Menu.Item key="2">选项2</Menu.Item>
|
||||
<Menu.Item key="3">选项3</Menu.Item>
|
||||
<Menu.Item key="4">选项4</Menu.Item>
|
||||
</SubMenu>
|
||||
<SubMenu key="sub2" title={<span><Icon type="laptop" />导航二</span>}>
|
||||
<Menu.Item key="5">选项5</Menu.Item>
|
||||
<Menu.Item key="6">选项6</Menu.Item>
|
||||
<Menu.Item key="7">选项7</Menu.Item>
|
||||
<Menu.Item key="8">选项8</Menu.Item>
|
||||
</SubMenu>
|
||||
<SubMenu key="sub3" title={<span><Icon type="notification" />导航三</span>}>
|
||||
<Menu.Item key="9">选项9</Menu.Item>
|
||||
<Menu.Item key="10">选项10</Menu.Item>
|
||||
<Menu.Item key="11">选项11</Menu.Item>
|
||||
<Menu.Item key="12">选项12</Menu.Item>
|
||||
</SubMenu>
|
||||
</Menu>
|
||||
</aside>
|
||||
<div className="ant-layout-content">
|
||||
<div style={{ height: 240 }}></div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="ant-layout-footer">
|
||||
Ant Design 版权所有 © 2015 由蚂蚁金服体验技术部支持
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</BrowserDemo>
|
||||
, document.getElementById('spec-layout-demo-top-aside'));
|
||||
````
|
||||
|
||||
````css
|
||||
.ant-layout-topaside {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.ant-layout-topaside .ant-layout-wrapper {
|
||||
padding: 0 50px;
|
||||
}
|
||||
|
||||
.ant-layout-topaside .ant-layout-header {
|
||||
background: #404040;
|
||||
height: 64px;
|
||||
}
|
||||
|
||||
.ant-layout-topaside .ant-layout-logo {
|
||||
width: 120px;
|
||||
height: 32px;
|
||||
background: #333;
|
||||
border-radius: 6px;
|
||||
margin: 16px 28px 16px 0;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.ant-layout-topaside .ant-layout-subheader {
|
||||
height: 48px;
|
||||
border-bottom: 1px solid #e9e9e9;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.ant-layout-topaside .ant-layout-breadcrumb {
|
||||
margin: 7px 0 -17px 24px;
|
||||
}
|
||||
|
||||
.ant-layout-topaside .ant-layout-container {
|
||||
background: #fff;
|
||||
margin: 24px 0 0;
|
||||
position: relative;
|
||||
padding: 24px 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.ant-layout-topaside .ant-layout-sider {
|
||||
width: 224px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.ant-layout-topaside .ant-layout-content {
|
||||
border-left: 1px solid #e9e9e9;
|
||||
margin-left: 223px;
|
||||
}
|
||||
|
||||
.ant-layout-topaside .ant-layout-footer {
|
||||
height; 64px;
|
||||
line-height: 64px;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
}
|
||||
````
|
||||
108
spec/layout/demo/top.md
Normal file
108
spec/layout/demo/top.md
Normal file
@ -0,0 +1,108 @@
|
||||
# 顶部导航
|
||||
|
||||
- order: 0
|
||||
|
||||
一二级导航都在顶部。
|
||||
|
||||
顶部导航在页面布局上采用的是上下的结构，一般主导航放置于页面的顶端，从左自右依次为：logo、一级导航项、辅助菜单（用户、设置、通知等）。通常将内容放在固定尺寸（例如：1200px）内，整个页面排版稳定，不受用户终端显示器影响；上下级的结构符合用户上下浏览的习惯，也是较为经典的网站导航模式。页面上下切分的方式提高了主工作区域的信息展示效率，但在纵向空间上会有一些牺牲。此外，由于导航栏水平空间的限制，不适合那些一级导航项很多的信息结构。
|
||||
|
||||
> `<BrowserDemo />` 做演示用，无须复制。
|
||||
|
||||
---
|
||||
|
||||
````jsx
|
||||
import { Menu, Breadcrumb } from 'antd';
|
||||
|
||||
ReactDOM.render(
|
||||
<BrowserDemo>
|
||||
<div className="ant-layout-top">
|
||||
<div className="ant-layout-header">
|
||||
<div className="ant-layout-wrapper">
|
||||
<div className="ant-layout-logo"></div>
|
||||
<Menu theme="dark" mode="horizontal"
|
||||
defaultSelectedKeys={['2']} style={{lineHeight: '64px'}}>
|
||||
<Menu.Item key="1">导航一</Menu.Item>
|
||||
<Menu.Item key="2">导航二</Menu.Item>
|
||||
<Menu.Item key="3">导航三</Menu.Item>
|
||||
</Menu>
|
||||
</div>
|
||||
</div>
|
||||
<div className="ant-layout-subheader">
|
||||
<div className="ant-layout-wrapper">
|
||||
<Menu mode="horizontal"
|
||||
defaultSelectedKeys={['1']} style={{marginLeft: 124}}>
|
||||
<Menu.Item key="1">二级导航</Menu.Item>
|
||||
<Menu.Item key="2">二级导航</Menu.Item>
|
||||
<Menu.Item key="3">二级导航</Menu.Item>
|
||||
</Menu>
|
||||
</div>
|
||||
</div>
|
||||
<div className="ant-layout-wrapper">
|
||||
<div className="ant-layout-breadcrumb">
|
||||
<Breadcrumb>
|
||||
<Breadcrumb.Item>首页</Breadcrumb.Item>
|
||||
<Breadcrumb.Item>应用列表</Breadcrumb.Item>
|
||||
<Breadcrumb.Item>某应用</Breadcrumb.Item>
|
||||
</Breadcrumb>
|
||||
</div>
|
||||
<div className="ant-layout-container">
|
||||
<div style={{ height: 240 }}></div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="ant-layout-footer">
|
||||
Ant Design 版权所有 © 2015 由蚂蚁金服体验技术部支持
|
||||
</div>
|
||||
</div>
|
||||
</BrowserDemo>
|
||||
, document.getElementById('spec-layout-demo-top'));
|
||||
````
|
||||
|
||||
````css
|
||||
.ant-layout-top {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.ant-layout-top .ant-layout-wrapper {
|
||||
padding: 0 50px;
|
||||
}
|
||||
|
||||
.ant-layout-top .ant-layout-header {
|
||||
background: #404040;
|
||||
height: 64px;
|
||||
}
|
||||
|
||||
.ant-layout-top .ant-layout-logo {
|
||||
width: 120px;
|
||||
height: 32px;
|
||||
background: #333;
|
||||
border-radius: 6px;
|
||||
margin: 16px 28px 16px 0;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.ant-layout-top .ant-layout-subheader {
|
||||
height: 48px;
|
||||
border-bottom: 1px solid #e9e9e9;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.ant-layout-top .ant-layout-breadcrumb {
|
||||
margin: 7px 0 -17px 24px;
|
||||
}
|
||||
|
||||
.ant-layout-top .ant-layout-container {
|
||||
background: #fff;
|
||||
margin: 24px 0 0;
|
||||
position: relative;
|
||||
padding-top: 24px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.ant-layout-top .ant-layout-footer {
|
||||
height; 64px;
|
||||
line-height: 64px;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
}
|
||||
````
|
||||
47
spec/layout/index.md
Normal file
47
spec/layout/index.md
Normal file
@ -0,0 +1,47 @@
|
||||
# 常用布局
|
||||
|
||||
- template: component
|
||||
- category: 基础
|
||||
- order: 4
|
||||
- cols: 1
|
||||
|
||||
---
|
||||
|
||||
布局和导航是一个页面的重要构成模式之一，是展开交互设计最早阶段需要确定下来的东西。
|
||||
|
||||
Ant Design 的布局和导航设计规范如下：
|
||||
|
||||
### 尺寸规则
|
||||
|
||||
一级导航项偏左靠近 logo 放置，辅助菜单偏右放置。
|
||||
|
||||
- 顶部导航（大部分系统）：一级导航高度 `64px`，二级导航 `48px`。
|
||||
- 顶部导航（展示类页面）：一级导航高度 `80px`,二级导航 `56px`。
|
||||
- 顶部导航高度的范围计算公式为：`48+8n`。
|
||||
- 侧边导航宽度的范围计算公式：`200+8n`。
|
||||
|
||||
### 交互原则
|
||||
|
||||
- 一级导航和末级的导航需要在可视化的层面被强调出来；
|
||||
- 当前项应该在呈现上优先级最高；
|
||||
- 当导航收起的时候，当前项的样式自动赋予给它的上一个层级；
|
||||
- 左侧导航栏的收放交互同时支持手风琴和全展开的样式，根据业务的要求进行适当的选择。
|
||||
|
||||
### 视觉原则
|
||||
|
||||
导航样式上需要根据信息层级合理的选择样式：
|
||||
|
||||
- 大色块强调
|
||||
建议用于底色为深色系时，当前页面父级的导航项。
|
||||
|
||||
- 高亮火柴棍
|
||||
当导航栏底色为浅色系时使用，可用于当前页面对应导航项、建议尽量在导航路径的最终项使用。
|
||||
|
||||
- 字体高亮变色
|
||||
从可视化层面，字体高亮的视觉强化力度低于大色块，通常在当前项的上一级使用。
|
||||
|
||||
- 字体放大
|
||||
`12px`、`14px`字体是导航栏的字体标准，字体的选择规律也应当考虑导航项的等级相应的做合理的使用。14 号字体在使用的时候只可用在一、二级导航中。
|
||||
|
||||
|
||||
Ant Design 使用两种常见的布局形式：顶部导航布局和侧边导航布局，以下收集了使用 Ant Design 设计的中后台产品的基本布局。
|
||||
@ -1,6 +1,6 @@
|
||||
# 排版
|
||||
|
||||
- category: 风格
|
||||
- category: 基础
|
||||
- order: 1
|
||||
|
||||
---
|
||||
|
||||
@ -10,7 +10,7 @@
|
||||
box-shadow: @overlay-shadow;
|
||||
color: @text-color;
|
||||
background: #fff;
|
||||
line-height: 50px;
|
||||
line-height: 46px;
|
||||
|
||||
&-hidden {
|
||||
display: none;
|
||||
@ -25,7 +25,7 @@
|
||||
color: #999;
|
||||
line-height: 1.5;
|
||||
padding: 8px 10px;
|
||||
border-bottom: 1px solid #dedede;
|
||||
border-bottom: 1px solid #e9e9e9;
|
||||
}
|
||||
|
||||
&-item,
|
||||
@ -41,6 +41,11 @@
|
||||
background-color: tint(@primary-color, 90%);
|
||||
}
|
||||
|
||||
&-horizontal &-item,
|
||||
&-horizontal &-submenu {
|
||||
margin-top: -1px;
|
||||
}
|
||||
|
||||
&-horizontal > &-item-active,
|
||||
&-horizontal > &-submenu &-submenu-title:hover {
|
||||
background-color: transparent;
|
||||
@ -156,16 +161,15 @@
|
||||
&-submenu-title {
|
||||
.anticon {
|
||||
width: 14px;
|
||||
margin-right: 8px;
|
||||
margin-right: 9px;
|
||||
top: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
&-horizontal {
|
||||
border: none;
|
||||
border-bottom: 1px solid #d9d9d9;
|
||||
border-bottom: 1px solid #e9e9e9;
|
||||
box-shadow: none;
|
||||
padding-left: 20px;
|
||||
z-index: 0;
|
||||
|
||||
> .@{menu-prefix-cls}-item,
|
||||
@ -211,7 +215,7 @@
|
||||
|
||||
&-vertical, &-inline {
|
||||
& > .@{menu-prefix-cls}-item, & > .@{menu-prefix-cls}-submenu > .@{menu-prefix-cls}-submenu-title {
|
||||
padding: 0 20px;
|
||||
padding: 0px 16px 0 28px;
|
||||
font-size: 12px;
|
||||
line-height: 42px;
|
||||
height: 42px;
|
||||
@ -264,7 +268,7 @@
|
||||
|
||||
&-dark&-horizontal > &-item,
|
||||
&-dark&-horizontal > &-submenu {
|
||||
border-bottom: 2px solid transparent;
|
||||
border-bottom: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user