mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-27 20:49:53 +08:00
Merge remote-tracking branch 'origin/master'
This commit is contained in:
夏奈
commit
0e28e52af4
22
README.md
22
README.md
@ -4,6 +4,28 @@
|
||||
|
||||
---
|
||||
|
||||
这是蚂蚁金服体验技术部推出的一套全新的企业级前端开发框架。
|
||||
|
||||
|
||||
|
||||
## 特性
|
||||
|
||||
- 丰富实用的 React UI 组件。
|
||||
- 基于 webpack 的调试构建方案，支持 ES6。
|
||||
- 背靠 npm 生态圈。
|
||||
- 提炼于企业级金融产品的交互语言和视觉体系，使用 Sketch3 设计。
|
||||
|
||||
|
||||
## 链接
|
||||
|
||||
- [首页](http://ant.design/)
|
||||
- [文档](http://ant.design/docs/introduce)
|
||||
- [组件](http://ant.design/components/)
|
||||
- [React 模块](http://react-component.github.io/)
|
||||
|
||||
|
||||
## 开发说明
|
||||
|
||||
#### 本地调试
|
||||
|
||||
```bash
|
||||
|
||||
@ -3,13 +3,15 @@
|
||||
- category: CSS
|
||||
- chinese: 按钮
|
||||
- order: 2
|
||||
- sketch: button.sketch
|
||||
|
||||
---
|
||||
|
||||
鲜嫩多汁的按钮。
|
||||
|
||||
## 何时使用
|
||||
|
||||
如果你想为 `<a>` `<button>` 或 `<input>` 元素添加按钮类（button class）时，那你就愉快得使用吧。
|
||||
标记了一个（或一组）操作命令，引导用户点击。
|
||||
|
||||
|
||||
## 如何使用
|
||||
|
||||
@ -21,9 +23,9 @@
|
||||
```
|
||||
.ant-btn
|
||||
↓
|
||||
.ant-btn-primary | .ant-btn-ghost
|
||||
.ant-btn-primary | .ant-btn-ghost
|
||||
↓
|
||||
.ant-btn-circle | .ant-btn-circle-outline
|
||||
.ant-btn-circle | .ant-btn-circle-outline
|
||||
↓
|
||||
.ant-btn-lg | .ant-btn-sm
|
||||
```
|
||||
|
||||
@ -6,7 +6,11 @@
|
||||
|
||||
---
|
||||
|
||||
点击标准输入框，弹出日期选择面板，选择日期和时间，支持键盘操作。
|
||||
逝者如斯夫，不舍昼夜。
|
||||
|
||||
## 何时使用
|
||||
|
||||
当用户需要输入一个日期/时间，可以点击标准输入框，弹出日期面板进行选择。支持键盘操作。
|
||||
|
||||
```html
|
||||
<Datepicker value="2015-01-01" />
|
||||
|
||||
@ -6,9 +6,11 @@
|
||||
|
||||
---
|
||||
|
||||
向下弹出的列表。
|
||||
|
||||
## 何时使用
|
||||
|
||||
点击或移入触点，会出现一个下拉菜单。可在列表中进行选择，并执行相应的命令。
|
||||
当页面元素过多时，用此组件可以收纳元素。点击或移入触点，会出现一个下拉菜单。可在列表中进行选择，并执行相应的命令。
|
||||
|
||||
## API
|
||||
|
||||
|
||||
@ -15,25 +15,12 @@ function handleChange(value) {
|
||||
console.log('selected ' + value);
|
||||
}
|
||||
|
||||
|
||||
var c1 = (
|
||||
<div>
|
||||
<div style={{width: 300}}>
|
||||
<Select value="lucy" style={{width:250}} onChange={handleChange}>
|
||||
<Option value="jack">
|
||||
<b style={{
|
||||
color: 'red'
|
||||
}}>jack</b>
|
||||
</Option>
|
||||
<Option value="lucy">lucy</Option>
|
||||
<Option value="disabled" disabled>disabled</Option>
|
||||
<Option value="yiminghe">yiminghe</Option>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
React.render(
|
||||
c1
|
||||
<Select value="lucy" style={{width:250}} onChange={handleChange}>
|
||||
<Option value="jack">jack</Option>
|
||||
<Option value="lucy">lucy</Option>
|
||||
<Option value="disabled" disabled>disabled</Option>
|
||||
<Option value="yiminghe">yiminghe</Option>
|
||||
</Select>
|
||||
, document.getElementById('components-select-demo-basic'));
|
||||
````
|
||||
|
||||
@ -11,25 +11,12 @@ combobox
|
||||
var Select = antd.Select;
|
||||
var Option = Select.Option;
|
||||
|
||||
var style = {
|
||||
color: 'red'
|
||||
};
|
||||
var c3 = (
|
||||
<div>
|
||||
<div style={{width: 300}}>
|
||||
<Select combobox>
|
||||
<Option value="jack">
|
||||
<b style={style}>jack</b>
|
||||
</Option>
|
||||
<Option value="lucy" >lucy</Option>
|
||||
<Option value="disabled" disabled>disabled</Option>
|
||||
<Option value="yiminghe">yiminghe</Option>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
React.render(
|
||||
c3
|
||||
<Select combobox>
|
||||
<Option value="jack">jack</Option>
|
||||
<Option value="lucy">lucy</Option>
|
||||
<Option value="disabled" disabled>disabled</Option>
|
||||
<Option value="yiminghe">yiminghe</Option>
|
||||
</Select>
|
||||
, document.getElementById('components-select-demo-combobox'));
|
||||
````
|
||||
|
||||
@ -20,22 +20,9 @@ function handleChange(value) {
|
||||
console.log('selected ' + value);
|
||||
}
|
||||
|
||||
var style = '.rc-select-menu {max-height:200px;overflow:auto;}';
|
||||
|
||||
var c2 = (
|
||||
<div>
|
||||
<div style={{width: 300}}>
|
||||
<style>
|
||||
{style}
|
||||
</style>
|
||||
<Select multiple value={['name2', 'name3']} onChange={handleChange}>
|
||||
{children}
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
React.render(
|
||||
c2
|
||||
<Select multiple value={['name2', 'name3']} onChange={handleChange}>
|
||||
{children}
|
||||
</Select>
|
||||
, document.getElementById('components-select-demo-multiple'));
|
||||
````
|
||||
|
||||
@ -20,22 +20,9 @@ function handleChange(value) {
|
||||
console.log('selected ' + value);
|
||||
}
|
||||
|
||||
var style = '.rc-select-menu {max-height:200px;overflow:auto;}';
|
||||
|
||||
var c2 = (
|
||||
<div>
|
||||
<div style={{width: 300}}>
|
||||
<style>
|
||||
{style}
|
||||
</style>
|
||||
<Select tags value={['name2', 'name3']} onChange={handleChange}>
|
||||
{children}
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
React.render(
|
||||
c2
|
||||
<Select tags value={['name2', 'name3']} onChange={handleChange}>
|
||||
{children}
|
||||
</Select>
|
||||
, document.getElementById('components-select-demo-tags'));
|
||||
````
|
||||
|
||||
@ -1,12 +1,16 @@
|
||||
# Select
|
||||
|
||||
- category: Components
|
||||
- chinese: 选择框
|
||||
- chinese: 选择器
|
||||
- order: 3
|
||||
|
||||
---
|
||||
|
||||
类似 select2 的选择器
|
||||
类似 Select2 的选择器。
|
||||
|
||||
## 何时使用
|
||||
|
||||
弹出一个下拉菜单给用户选择操作，用于代替原生的选择器，或者需要一个更优雅的多选器时。
|
||||
|
||||
```html
|
||||
<Select>
|
||||
|
||||
@ -8,6 +8,11 @@
|
||||
|
||||
选项卡切换组件。
|
||||
|
||||
## 何时使用
|
||||
|
||||
提供平级的区域将大块内容进行收纳和展现，保持界面整洁。
|
||||
|
||||
|
||||
## API
|
||||
|
||||
### Tab
|
||||
|
||||
@ -12,6 +12,3 @@
|
||||
|
||||
|
||||
## 谁在使用
|
||||
|
||||
|
||||
## Roadmap
|
||||
|
||||
@ -14,6 +14,7 @@
|
||||
position: relative;
|
||||
vertical-align: middle;
|
||||
color: #666;
|
||||
font-size: @font-size-base;
|
||||
|
||||
ul, li {
|
||||
margin: 0;
|
||||
@ -197,6 +198,8 @@
|
||||
padding-left: 0; // Override default ul/ol
|
||||
list-style: none;
|
||||
z-index: 9999;
|
||||
max-height: 250px;
|
||||
overflow: auto;
|
||||
|
||||
> li {
|
||||
margin: 0;
|
||||
@ -236,4 +239,4 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -7,7 +7,6 @@
|
||||
.@{prefixClass} {
|
||||
outline: none;
|
||||
box-sizing: border-box;
|
||||
border-bottom: 2px solid #f3f3f3;
|
||||
position: relative;
|
||||
|
||||
&-ink-bar {
|
||||
@ -16,8 +15,7 @@
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
box-sizing: border-box;
|
||||
height: 4px;
|
||||
margin-top: -3px;
|
||||
height: 2px;
|
||||
background-color: #3fc7fa;
|
||||
transform: scaleX(1);
|
||||
transform-origin: 0 0;
|
||||
@ -36,12 +34,12 @@
|
||||
line-height: 1.5;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
white-space: nowrap;
|
||||
padding-left: 32px;
|
||||
padding-right: 32px;
|
||||
border-bottom: 2px solid #f3f3f3;
|
||||
border-bottom: 1px solid #f3f3f3;
|
||||
margin-bottom: 15px;
|
||||
.clearfix;
|
||||
}
|
||||
|
||||
&-tab-prev, &-tab-next {
|
||||
@ -51,11 +49,12 @@
|
||||
margin-right: -2px;
|
||||
width: 32px;
|
||||
height: 100%;
|
||||
line-height: 36px;
|
||||
line-height: 32px;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
|
||||
&-icon {
|
||||
position: relative;
|
||||
@ -67,14 +66,11 @@
|
||||
vertical-align: baseline;
|
||||
text-align: center;
|
||||
text-transform: none;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-webkit-text-stroke-width: 0;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
font-family: sans-serif;
|
||||
|
||||
&:before {
|
||||
display: block;
|
||||
font-family: "iconfont" !important;
|
||||
font-family: "anticon" !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -83,7 +79,7 @@
|
||||
right: 2px;
|
||||
|
||||
&-icon:before {
|
||||
content: "\e651";
|
||||
content: "\e611";
|
||||
}
|
||||
}
|
||||
|
||||
@ -92,28 +88,29 @@
|
||||
transform: rotate(180deg);
|
||||
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
|
||||
&-icon:before {
|
||||
content: "\e651";
|
||||
content: "\e611";
|
||||
}
|
||||
}
|
||||
|
||||
&-nav-wrap {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
margin-bottom: -1px;
|
||||
}
|
||||
|
||||
&-nav-scroll {
|
||||
width:99999px;
|
||||
width: 99999px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
&-nav {
|
||||
height: 36px;
|
||||
box-sizing: border-box;
|
||||
padding-left: 0;
|
||||
transition: left 0.5s @easing-in-out;
|
||||
position: relative;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
display: inline-block;
|
||||
float: left;
|
||||
|
||||
&:before, &:after {
|
||||
display: table;
|
||||
@ -128,7 +125,7 @@
|
||||
|
||||
> a, > a:hover, > a:focus {
|
||||
color: #3fc7fa;
|
||||
cursor: default;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
@ -145,17 +142,15 @@
|
||||
.@{prefixClass}-tab {
|
||||
float: left;
|
||||
height: 100%;
|
||||
padding: 10px 20px;
|
||||
margin-right: 30px;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
display: block;
|
||||
|
||||
> a {
|
||||
padding: 8px 25px;
|
||||
transition: color 0.3s @easing-in-out;
|
||||
margin-bottom: 4px;
|
||||
font-weight: 500;
|
||||
display: inline-block;
|
||||
display: block;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
@ -177,12 +172,10 @@
|
||||
&-content {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
&-slide-horizontal-backward-enter {
|
||||
transform: translateX(-100%);
|
||||
|
||||
}
|
||||
|
||||
&-slide-horizontal-backward-enter&-slide-horizontal-backward-enter-active {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user