提交 5a388216 编写于 作者: 然则

up select style

......@@ -10,7 +10,8 @@
## 特性
- 丰富实用的 React UI 组件。
- 丰富实用的 UI 组件。
- 基于 React 的组件化开发模式。
- 基于 webpack 的调试构建方案,支持 ES6。
- 背靠 npm 生态圈。
- 提炼于企业级金融产品的交互语言和视觉体系,使用 Sketch3 设计。
......@@ -24,6 +25,11 @@
- [React 模块](http://react-component.github.io/)
## 如何贡献
我们欢迎任何形式的贡献,有任何建议或意见您可以进行 [Pull Request](https://github.com/ant-design/ant-design/pulls),或者给我们[提问](https://github.com/ant-design/ant-design/issues)
## 开发说明
#### 本地调试
......
......@@ -23,7 +23,7 @@ var menu = <Menu>
React.render(
<Dropdown overlay={menu}>
<button className="ant-btn ant-btn-default">
某按钮 <i className="anticon anticon-caret-down"></i>
某按钮 <i className="anticon anticon-down"></i>
</button>
</Dropdown>
, document.getElementById('components-dropdown-demo-basic'));
......
......@@ -22,7 +22,7 @@ var menu = <Menu onClick={onClick}>
React.render(
<Dropdown overlay={menu}>
<button className="ant-btn ant-btn-default">
鼠标移入,点击菜单 <i className="anticon anticon-caret-down"></i>
鼠标移入,点击菜单 <i className="anticon anticon-down"></i>
</button>
</Dropdown>
, document.getElementById('components-dropdown-demo-event'));
......
......@@ -24,7 +24,7 @@ var menu = <Menu>
React.render(
<Dropdown overlay={menu}>
<button className="ant-btn ant-btn-default">
鼠标移入 <i className="anticon anticon-caret-down"></i>
鼠标移入 <i className="anticon anticon-down"></i>
</button>
</Dropdown>
, document.getElementById('components-dropdown-demo-item'));
......
......@@ -24,12 +24,12 @@ var menu = <Menu>
React.render(<div>
<Dropdown overlay={menu} trigger="click">
<button className="ant-btn ant-btn-primary">
点击触发 <i className="anticon anticon-caret-down"></i>
点击触发 <i className="anticon anticon-down"></i>
</button>
</Dropdown>
<Dropdown overlay={menu}>
<button className="ant-btn ant-btn-default">
鼠标移入 <i className="anticon anticon-caret-down"></i>
鼠标移入 <i className="anticon anticon-down"></i>
</button>
</Dropdown>
</div>, document.getElementById('components-dropdown-demo-trigger'));
......
......@@ -2,9 +2,9 @@
- order: 1
从堆叠到水平排列
从堆叠到水平排列
使用单一的一组 `.col-*` 栅格类,就可以创建一个基本的栅格系统,所有列(column)必须放在 `.row`
使用单一的一组 `.col-*` 栅格类,就可以创建一个基本的栅格系统,所有列(column)必须放在 `.row`
---
......
......@@ -2,7 +2,7 @@
- order: 5
Flex 子元素垂直对齐
Flex 子元素垂直对齐
---
......
......@@ -2,7 +2,7 @@
- order: 6
通过 Flex 布局的 Order 来改变元素的排序
通过 Flex 布局的 Order 来改变元素的排序
---
......
......@@ -2,7 +2,7 @@
- order: 4
Flex 布局基础
Flex 布局基础
使用 `row-flex` 定义 `flex` 布局,其子元素根据不同的值 `start`,`center`,`end`,`space-between`,`space-around`,分别定义其在父节点里面的排版方式。
......
......@@ -2,7 +2,7 @@
- order: 2
列偏移
列偏移
使用 `.col-offset-*` 类可以将列向右侧偏。例如,`.col-offset-4` 类将 `.col-md-4` 元素向右侧偏移了4个列(column)的宽度。
......
......@@ -2,7 +2,7 @@
- order: 3
列排序
列排序
通过使用 `.col-push-*``.col-pull-*` 类就可以很容易的改变列(column)的顺序。
......
......@@ -57,9 +57,9 @@
</div>
</div>
考虑到 Ant Design 面临的业务多数的情况下需要在设计区域内解决大量信息收纳的问题,因此在 12 栅格系统的基础上,我们将整个设计区域建议按照 24 等分的原则划分。
在多数业务情况下,Ant Design需要在设计区域内解决大量信息收纳的问题,因此在12栅格系统的基础上,我们将整个设计建议区域按照24等分的原则进行划分。
划分之后的信息区块我们称之为“盒子”。建议横向排列的盒子数量最多四个,最少一个。“盒子”在整个屏幕上占比见上图。设计部分急于盒子的单位定制盒子内部的排版规则以保证在视觉层面的舒适感。
划分之后的信息区块我们称之为“盒子”。建议横向排列的盒子数量最多四个,最少一个。“盒子”在整个屏幕上占比见上图。设计部分基于盒子的单位定制盒子内部的排版规则,以保证视觉层面的舒适感。
## 概述
......@@ -74,7 +74,7 @@
我们的栅格化系统支持 Flex 布局,允许子元素在父节点内的水平对齐方式 - 居左、居中、居右、等宽排列、分散排列。子元素与子元素之间,支持顶部对齐、垂直居中对齐、底部对齐的方式。同时,支持使用 order 来定义元素的排列顺序。
Flex 布局是基于24栅格来定义每一个“盒子”的宽度,但排版则不拘泥于栅格。
Flex 布局是基于 24 栅格来定义每一个“盒子”的宽度,但排版则不拘泥于栅格。
<style>
.row {
......
......@@ -69,9 +69,9 @@ var Line = React.createClass({
var Circle = React.createClass({
getDefaultProps: function () {
return {
width: 126,
width: 132,
percent: 0,
strokeWidth: 4,
strokeWidth: 6,
status: 'normal' // exception
};
},
......@@ -91,7 +91,7 @@ var Circle = React.createClass({
'height': this.props.width
};
var wrapStyle = {
'font-size': this.props.width * 0.2
'font-size': this.props.width * 0.16 + 6
};
var textStyle = {
'color': statusColorMap[this.props.status]
......
# combobox
# suggest
- order: 1
- order: 3
功能基本与 suggest 类似。(Google的搜索提示)
类似 Google 搜索提示的功能。
---
......
......@@ -7,8 +7,29 @@
下一个设计&前端框架。
---
这是蚂蚁金服体验技术部推出的一套全新的企业级前端开发框架。
![](https://t.alipayobjects.com/images/rmsweb/T11aVgXc4eXXXXXXXX.svg)
## 特性
- 丰富实用的 React UI 组件。
- 基于 React 的组件化开发模式。
- 基于 webpack 的调试构建方案,支持 ES6。
- 背靠 npm 生态圈。
- 提炼于企业级金融产品的交互语言和视觉体系,使用 Sketch3 设计。
## 链接
- [首页](http://ant.design/)
- [文档](http://ant.design/docs/introduce)
- [组件](http://ant.design/components/)
- [React 模块](http://react-component.github.io/)
## 如何贡献
## 谁在使用
我们欢迎任何形式的贡献,有任何建议或意见您可以进行 [Pull Request](https://github.com/ant-design/ant-design/pulls),或者给我们[提问](https://github.com/ant-design/ant-design/issues)
{% extends "layout.html" %}
{% block styles %}
<link href="http://fonts.useso.com/css?family=Raleway:600,500,400,300" rel="stylesheet" type="text/css">
{% endblock %}
{% block bodyAttribute %}class="index-page"{% endblock %}
{% block content %}
......
......@@ -12,7 +12,6 @@
<link rel="stylesheet" href="/static/normalize.css">
{% block styles %}{% endblock %}
<link rel="stylesheet" href="/static/style.css">
<!--<link href="http://fonts.useso.com/css?family=Raleway:600,500,400,300" rel="stylesheet" type="text/css">-->
<link rel="stylesheet" href="/static/tomorrow.css">
<script src="https://a.alipayobjects.com/jquery/jquery/1.11.1/jquery.js"></script>
<!-- react -->
......
......@@ -553,6 +553,14 @@ footer ul li > a {
margin: 1.8em 0 1em 0;
}
.markdown hr {
border-radius: 10px;
height: 3px;
border: 0;
background: #eee;
margin: 20px 0;
}
.markdown p,
.markdown pre {
margin: 1.2em 0;
......
......@@ -39,7 +39,9 @@
width: 100%;
text-align: center;
line-height: 1;
top: 38%;
font-weight: bold;
top: 50%;
transform: translateY(-50%);
left: 0;
.anticon {
......
......@@ -140,6 +140,10 @@
color: #333;
}
}
.@{selectPrefixCls}-search__field {
margin-top: 7px;
}
}
&-search--inline {
......@@ -206,8 +210,8 @@
}
.@{selectPrefixCls}-selection {
//border-bottom-left-radius: 0;
//border-bottom-right-radius: 0;
border-color: #23c0fa;
box-shadow: 0 0 3px #23c0fa;
}
}
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册