mirror of
https://github.com/ant-design/ant-design.git
synced 2025-01-24 02:20:01 +08:00
Merge remote-tracking branch 'ant-design/master'
This commit is contained in:
liekkas
commit
b1379dc7c3
@ -12,9 +12,6 @@
|
||||
&-selection {
|
||||
border: 0;
|
||||
box-shadow: none;
|
||||
&--single {
|
||||
height: 100%;
|
||||
}
|
||||
&__rendered {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
@ -27,6 +24,12 @@
|
||||
}
|
||||
}
|
||||
|
||||
&-allow-clear {
|
||||
.@{select-prefix-cls}-selection:hover .@{select-prefix-cls}-selection__rendered {
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.@{input-prefix-cls} {
|
||||
.input();
|
||||
background: transparent;
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
import React from 'react';
|
||||
import classNames from 'classnames';
|
||||
import { findDOMNode } from 'react-dom';
|
||||
import Icon from '../icon';
|
||||
import omit from 'omit.js';
|
||||
|
||||
@ -119,7 +118,6 @@ export default class Button extends React.Component<ButtonProps, any> {
|
||||
|
||||
// Handle auto focus when click button in Chrome
|
||||
handleMouseUp = (e) => {
|
||||
(findDOMNode(this) as HTMLElement).blur();
|
||||
if (this.props.onMouseUp) {
|
||||
this.props.onMouseUp(e);
|
||||
}
|
||||
|
||||
@ -36,7 +36,7 @@ const menu = (
|
||||
|
||||
ReactDOM.render(
|
||||
<div>
|
||||
<Dropdown.Button onClick={handleButtonClick} overlay={menu} placement="bottomLeft">
|
||||
<Dropdown.Button onClick={handleButtonClick} overlay={menu}>
|
||||
Dropdown
|
||||
</Dropdown.Button>
|
||||
<Dropdown.Button
|
||||
|
||||
@ -23,15 +23,7 @@ export interface DropdownButtonProps {
|
||||
|
||||
export default class DropdownButton extends React.Component<DropdownButtonProps, any> {
|
||||
static defaultProps = {
|
||||
align: {
|
||||
points: ['tr', 'br'],
|
||||
overlay: {
|
||||
adjustX: 1,
|
||||
adjustY: 1,
|
||||
},
|
||||
offset: [0, 4],
|
||||
targetOffset: [0, 0],
|
||||
},
|
||||
placement: 'bottomRight',
|
||||
type: 'default',
|
||||
prefixCls: 'ant-dropdown-button',
|
||||
};
|
||||
|
||||
@ -937,6 +937,7 @@ exports[`renders ./components/form/demo/normal-login.md correctly 1`] = `
|
||||
</label>
|
||||
<a
|
||||
class="login-form-forgot"
|
||||
href=""
|
||||
>
|
||||
Forgot password
|
||||
</a>
|
||||
@ -949,7 +950,9 @@ exports[`renders ./components/form/demo/normal-login.md correctly 1`] = `
|
||||
</span>
|
||||
</button>
|
||||
Or
|
||||
<a>
|
||||
<a
|
||||
href=""
|
||||
>
|
||||
register now!
|
||||
</a>
|
||||
</div>
|
||||
@ -1289,7 +1292,9 @@ exports[`renders ./components/form/demo/register.md correctly 1`] = `
|
||||
</span>
|
||||
<span>
|
||||
I have read the
|
||||
<a>
|
||||
<a
|
||||
href=""
|
||||
>
|
||||
agreement
|
||||
</a>
|
||||
</span>
|
||||
|
||||
@ -51,11 +51,11 @@ class NormalLoginForm extends React.Component {
|
||||
})(
|
||||
<Checkbox>Remember me</Checkbox>
|
||||
)}
|
||||
<a className="login-form-forgot">Forgot password</a>
|
||||
<a className="login-form-forgot" href="">Forgot password</a>
|
||||
<Button type="primary" htmlType="submit" className="login-form-button">
|
||||
Log in
|
||||
</Button>
|
||||
Or <a>register now!</a>
|
||||
Or <a href="">register now!</a>
|
||||
</FormItem>
|
||||
</Form>
|
||||
);
|
||||
|
||||
@ -212,7 +212,7 @@ class RegistrationForm extends React.Component {
|
||||
{getFieldDecorator('agreement', {
|
||||
valuePropName: 'checked',
|
||||
})(
|
||||
<Checkbox>I have read the <a>agreement</a></Checkbox>
|
||||
<Checkbox>I have read the <a href="">agreement</a></Checkbox>
|
||||
)}
|
||||
</FormItem>
|
||||
<FormItem {...tailFormItemLayout}>
|
||||
|
||||
@ -18,7 +18,8 @@ class ModalTester extends React.Component {
|
||||
}
|
||||
render() {
|
||||
return (
|
||||
<div ref={this.saveContainer}>
|
||||
<div>
|
||||
<div ref={this.saveContainer} />
|
||||
<Modal
|
||||
{...this.props}
|
||||
visible={this.state.visible}
|
||||
|
||||
@ -3,61 +3,63 @@
|
||||
exports[`Modal render correctly 1`] = `
|
||||
<div>
|
||||
<div>
|
||||
<div
|
||||
class="ant-modal-mask fade-appear"
|
||||
/>
|
||||
<div
|
||||
class="ant-modal-wrap "
|
||||
role="dialog"
|
||||
tabindex="-1"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
class="ant-modal zoom-appear"
|
||||
role="document"
|
||||
style="width: 520px;"
|
||||
class="ant-modal-mask fade-appear"
|
||||
/>
|
||||
<div
|
||||
class="ant-modal-wrap "
|
||||
role="dialog"
|
||||
tabindex="-1"
|
||||
>
|
||||
<div
|
||||
class="ant-modal-content"
|
||||
class="ant-modal zoom-appear"
|
||||
role="document"
|
||||
style="width: 520px;"
|
||||
>
|
||||
<button
|
||||
aria-label="Close"
|
||||
class="ant-modal-close"
|
||||
>
|
||||
<span
|
||||
class="ant-modal-close-x"
|
||||
/>
|
||||
</button>
|
||||
<div
|
||||
class="ant-modal-body"
|
||||
>
|
||||
Here is content of Modal
|
||||
</div>
|
||||
<div
|
||||
class="ant-modal-footer"
|
||||
class="ant-modal-content"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-lg"
|
||||
type="button"
|
||||
aria-label="Close"
|
||||
class="ant-modal-close"
|
||||
>
|
||||
<span>
|
||||
取 消
|
||||
</span>
|
||||
<span
|
||||
class="ant-modal-close-x"
|
||||
/>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-primary ant-btn-lg"
|
||||
type="button"
|
||||
<div
|
||||
class="ant-modal-body"
|
||||
>
|
||||
<span>
|
||||
确 定
|
||||
</span>
|
||||
</button>
|
||||
Here is content of Modal
|
||||
</div>
|
||||
<div
|
||||
class="ant-modal-footer"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-lg"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
取 消
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-primary ant-btn-lg"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
确 定
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
style="width: 0px; height: 0px; overflow: hidden;"
|
||||
tabindex="0"
|
||||
>
|
||||
sentinel
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
style="width: 0px; height: 0px; overflow: hidden;"
|
||||
tabindex="0"
|
||||
>
|
||||
sentinel
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -68,41 +70,43 @@ exports[`Modal render correctly 1`] = `
|
||||
exports[`Modal render without footer 1`] = `
|
||||
<div>
|
||||
<div>
|
||||
<div
|
||||
class="ant-modal-mask fade-appear"
|
||||
/>
|
||||
<div
|
||||
class="ant-modal-wrap "
|
||||
role="dialog"
|
||||
tabindex="-1"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
class="ant-modal zoom-appear"
|
||||
role="document"
|
||||
style="width: 520px;"
|
||||
class="ant-modal-mask fade-appear"
|
||||
/>
|
||||
<div
|
||||
class="ant-modal-wrap "
|
||||
role="dialog"
|
||||
tabindex="-1"
|
||||
>
|
||||
<div
|
||||
class="ant-modal-content"
|
||||
class="ant-modal zoom-appear"
|
||||
role="document"
|
||||
style="width: 520px;"
|
||||
>
|
||||
<button
|
||||
aria-label="Close"
|
||||
class="ant-modal-close"
|
||||
>
|
||||
<span
|
||||
class="ant-modal-close-x"
|
||||
/>
|
||||
</button>
|
||||
<div
|
||||
class="ant-modal-body"
|
||||
class="ant-modal-content"
|
||||
>
|
||||
Here is content of Modal
|
||||
<button
|
||||
aria-label="Close"
|
||||
class="ant-modal-close"
|
||||
>
|
||||
<span
|
||||
class="ant-modal-close-x"
|
||||
/>
|
||||
</button>
|
||||
<div
|
||||
class="ant-modal-body"
|
||||
>
|
||||
Here is content of Modal
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
style="width: 0px; height: 0px; overflow: hidden;"
|
||||
tabindex="0"
|
||||
>
|
||||
sentinel
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
style="width: 0px; height: 0px; overflow: hidden;"
|
||||
tabindex="0"
|
||||
>
|
||||
sentinel
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -134,7 +134,7 @@
|
||||
.iconfont-size-under-12px(8px);
|
||||
display: block;
|
||||
height: 26px;
|
||||
line-height: 26px;
|
||||
line-height: 27px;
|
||||
font-family: "anticon";
|
||||
text-align: center;
|
||||
}
|
||||
@ -152,7 +152,6 @@
|
||||
&-prev {
|
||||
a {
|
||||
&:after {
|
||||
margin-top: -.5px;
|
||||
content: "\e620";
|
||||
display: block;
|
||||
}
|
||||
|
||||
@ -493,7 +493,7 @@ exports[`renders ./components/radio/demo/radiogroup-more.md correctly 1`] = `
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/radio/demo/radiogroup-optional.md correctly 1`] = `
|
||||
exports[`renders ./components/radio/demo/radiogroup-options.md correctly 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="ant-radio-group"
|
||||
|
||||
@ -7,11 +7,15 @@ title:
|
||||
|
||||
## zh-CN
|
||||
|
||||
通过配置参数来控制渲染单选框。
|
||||
通过配置 `options` 参数来渲染单选框。
|
||||
|
||||
> `2.9.0` 之后支持。
|
||||
|
||||
## en-US
|
||||
|
||||
Render radios by configuring parameters.
|
||||
Render radios by configuring `options`.
|
||||
|
||||
> support after `2.9.0`.
|
||||
|
||||
```jsx
|
||||
import { Radio } from 'antd';
|
||||
@ -65,4 +69,4 @@ class App extends React.Component {
|
||||
}
|
||||
|
||||
ReactDOM.render(<App />, mountNode);
|
||||
```
|
||||
```
|
||||
@ -137,8 +137,14 @@ exports[`renders ./components/steps/demo/customized-progress-dot.md correctly 1`
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-steps-item ant-steps-item-last ant-steps-status-wait"
|
||||
class="ant-steps-item ant-steps-status-wait"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-tail"
|
||||
style="padding-right:0;"
|
||||
>
|
||||
<i />
|
||||
</div>
|
||||
<div
|
||||
class="ant-steps-step"
|
||||
>
|
||||
@ -261,8 +267,14 @@ exports[`renders ./components/steps/demo/error.md correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-steps-item ant-steps-item-last ant-steps-status-wait"
|
||||
class="ant-steps-item ant-steps-status-wait"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-tail"
|
||||
style="padding-right:0;"
|
||||
>
|
||||
<i />
|
||||
</div>
|
||||
<div
|
||||
class="ant-steps-step"
|
||||
>
|
||||
@ -420,8 +432,14 @@ exports[`renders ./components/steps/demo/icon.md correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-steps-item ant-steps-item-last ant-steps-status-wait ant-steps-custom"
|
||||
class="ant-steps-item ant-steps-status-wait ant-steps-custom"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-tail"
|
||||
style="padding-right:0;"
|
||||
>
|
||||
<i />
|
||||
</div>
|
||||
<div
|
||||
class="ant-steps-step"
|
||||
>
|
||||
@ -547,8 +565,14 @@ exports[`renders ./components/steps/demo/progress-dot.md correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-steps-item ant-steps-item-last ant-steps-status-wait"
|
||||
class="ant-steps-item ant-steps-status-wait"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-tail"
|
||||
style="padding-right:0;"
|
||||
>
|
||||
<i />
|
||||
</div>
|
||||
<div
|
||||
class="ant-steps-step"
|
||||
>
|
||||
@ -673,8 +697,14 @@ exports[`renders ./components/steps/demo/simple.md correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-steps-item ant-steps-item-last ant-steps-status-wait"
|
||||
class="ant-steps-item ant-steps-status-wait"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-tail"
|
||||
style="padding-right:0;"
|
||||
>
|
||||
<i />
|
||||
</div>
|
||||
<div
|
||||
class="ant-steps-step"
|
||||
>
|
||||
@ -787,8 +817,14 @@ exports[`renders ./components/steps/demo/small-size.md correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-steps-item ant-steps-item-last ant-steps-status-wait"
|
||||
class="ant-steps-item ant-steps-status-wait"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-tail"
|
||||
style="padding-right:0;"
|
||||
>
|
||||
<i />
|
||||
</div>
|
||||
<div
|
||||
class="ant-steps-step"
|
||||
>
|
||||
@ -899,8 +935,14 @@ exports[`renders ./components/steps/demo/step-next.md correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-steps-item ant-steps-item-last ant-steps-status-wait"
|
||||
class="ant-steps-item ant-steps-status-wait"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-tail"
|
||||
style="padding-right:0;"
|
||||
>
|
||||
<i />
|
||||
</div>
|
||||
<div
|
||||
class="ant-steps-step"
|
||||
>
|
||||
@ -1034,8 +1076,14 @@ exports[`renders ./components/steps/demo/vertical.md correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-steps-item ant-steps-item-last ant-steps-status-wait"
|
||||
class="ant-steps-item ant-steps-status-wait"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-tail"
|
||||
style="padding-right:0;"
|
||||
>
|
||||
<i />
|
||||
</div>
|
||||
<div
|
||||
class="ant-steps-step"
|
||||
>
|
||||
@ -1156,8 +1204,14 @@ exports[`renders ./components/steps/demo/vertical-small.md correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-steps-item ant-steps-item-last ant-steps-status-wait"
|
||||
class="ant-steps-item ant-steps-status-wait"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-tail"
|
||||
style="padding-right:0;"
|
||||
>
|
||||
<i />
|
||||
</div>
|
||||
<div
|
||||
class="ant-steps-step"
|
||||
>
|
||||
|
||||
@ -6,6 +6,7 @@
|
||||
@process-title-color: @text-color;
|
||||
@process-description-color: @process-title-color;
|
||||
@process-tail-color: @border-color-split;
|
||||
@process-icon-text-color: #fff;
|
||||
@wait-icon-color: @disabled-color;
|
||||
@wait-title-color: @text-color-secondary;
|
||||
@wait-description-color: @wait-title-color;
|
||||
@ -18,6 +19,7 @@
|
||||
@error-title-color: @error-color;
|
||||
@error-description-color: @error-color;
|
||||
@error-tail-color: @error-color;
|
||||
@steps-background: @component-background;
|
||||
|
||||
@steps-icon-size: 26px;
|
||||
@steps-small-icon-size: 18px;
|
||||
@ -37,7 +39,7 @@
|
||||
&.@{steps-prefix-cls}-status-wait {
|
||||
.@{steps-prefix-cls}-head-inner {
|
||||
border-color: @wait-icon-color;
|
||||
background-color: @component-background;
|
||||
background-color: @steps-background;
|
||||
> .@{steps-prefix-cls}-icon {
|
||||
color: @wait-icon-color;
|
||||
.@{steps-prefix-cls}-icon-dot {
|
||||
@ -60,7 +62,7 @@
|
||||
border-color: @process-icon-color;
|
||||
background-color: @process-icon-color;
|
||||
> .@{steps-prefix-cls}-icon {
|
||||
color: @component-background;
|
||||
color: @process-icon-text-color;
|
||||
.@{steps-prefix-cls}-icon-dot {
|
||||
background: @process-icon-color;
|
||||
}
|
||||
@ -79,7 +81,7 @@
|
||||
&.@{steps-prefix-cls}-status-finish {
|
||||
.@{steps-prefix-cls}-head-inner {
|
||||
border-color: @finish-icon-color;
|
||||
background-color: @component-background;
|
||||
background-color: @steps-background;
|
||||
> .@{steps-prefix-cls}-icon {
|
||||
color: @finish-icon-color;
|
||||
.@{steps-prefix-cls}-icon-dot {
|
||||
@ -106,7 +108,7 @@
|
||||
&.@{steps-prefix-cls}-status-error {
|
||||
.@{steps-prefix-cls}-head-inner {
|
||||
border-color: @error-icon-color;
|
||||
background-color: @component-background;
|
||||
background-color: @steps-background;
|
||||
> .@{steps-prefix-cls}-icon {
|
||||
color: @error-icon-color;
|
||||
.@{steps-prefix-cls}-icon-dot {
|
||||
@ -159,7 +161,7 @@
|
||||
vertical-align: top;
|
||||
}
|
||||
.@{steps-prefix-cls}-head {
|
||||
background: @component-background;
|
||||
background: @steps-background;
|
||||
}
|
||||
|
||||
.@{steps-prefix-cls}-head-inner {
|
||||
@ -195,18 +197,21 @@
|
||||
margin-bottom: 4px;
|
||||
color: @text-color;
|
||||
font-weight: bold;
|
||||
background: @component-background;
|
||||
background-color: @steps-background;
|
||||
display: inline-block;
|
||||
padding-right: 10px;
|
||||
> a:first-child:last-child {
|
||||
color: @text-color;
|
||||
}
|
||||
}
|
||||
.@{steps-prefix-cls}-item-last {
|
||||
.@{steps-prefix-cls}-item:last-child {
|
||||
.@{steps-prefix-cls}-title {
|
||||
padding-right: 0;
|
||||
width: 100%;
|
||||
}
|
||||
.@{steps-prefix-cls}-tail {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.@{steps-prefix-cls}-description {
|
||||
font-size: @font-size-base;
|
||||
|
||||
@ -61,6 +61,11 @@ a {
|
||||
cursor: pointer;
|
||||
transition: color .3s ease;
|
||||
|
||||
&:focus {
|
||||
text-decoration: underline;
|
||||
text-decoration-skip: ink;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: @link-hover-color;
|
||||
}
|
||||
|
||||
@ -60,6 +60,6 @@ ReactDOM.render(
|
||||
````css
|
||||
th.column-money,
|
||||
td.column-money {
|
||||
text-align: right;
|
||||
text-align: right!important;
|
||||
}
|
||||
````
|
||||
|
||||
@ -17,8 +17,8 @@ export interface TabsProps {
|
||||
hideAdd?: boolean;
|
||||
onChange?: (activeKey: string) => void;
|
||||
onTabClick?: Function;
|
||||
onPrevClick?: (e) => void;
|
||||
onNextClick?: (e) => void;
|
||||
onPrevClick?: React.MouseEventHandler<any>;
|
||||
onNextClick?: React.MouseEventHandler<any>;
|
||||
tabBarExtraContent?: React.ReactNode | null;
|
||||
tabBarStyle?: React.CSSProperties;
|
||||
type?: TabsType;
|
||||
|
||||
85
docs/spec/colors.en-US.md
Normal file
85
docs/spec/colors.en-US.md
Normal file
@ -0,0 +1,85 @@
|
||||
---
|
||||
order: 3
|
||||
title: Colors
|
||||
---
|
||||
|
||||
Not only is color an effective way to create brand recognition, but it also plays an important role in conveying information, providing interactive feedback, and bringing attention to a particular element. Ant Design makes using color simple and practical through an emphasis on efficiency, clarity, and user experience. Please note the following three points when choosing colors:
|
||||
|
||||
- Color usage and positioning should respect cognitive psychology (stay user-focused)
|
||||
- Visual hierarchy should be clear-cut, and color should establish visual continuity
|
||||
- Color usage should be in compliance with the [WCAG 2.0 standards](https://www.w3.org/WAI/WCAG20/glance/ "Web Content Accessibility Guidelines") by using sufficient contrast to ensure accessibility
|
||||
|
||||
---
|
||||
|
||||
## Ant Design's Color Palettes
|
||||
|
||||
Ant Design's color palettes consist of 10 shallow-to-deep color swatches, and default palettes are defined for certain hues. Users can select a swatch from the color scheme using keywords. In theory, all colors used in the design should be taken from a color palette.
|
||||
|
||||
After careful tuning by designers and programmers, our [palette generation algorithm](https://github.com/ant-design/ant-design/blob/734beb84ffc3f0469fbae1566aa8450f966cb261/components/style/color/colorPalette.less) uses a combination of color plus Bezier curves and different rotation angles for cold and warm colors to generate new palettes (replacing our original tint / shade color system). This algorithm can be used to generate new palettes based on an input color that you specify.
|
||||
|
||||
Ant Design's default theme consists of eight basic colors, each of which is derived from the above algorithm.
|
||||
|
||||
> Note: In these shallow-to-deep palettes, the 6th color cell [generally satisfies WCAG 2.0](https://leaverou.github.io/contrast-ratio/)'s 4.5:1 minimum contrast ratio (AA level), and is used as the default for the palette.
|
||||
|
||||
`````__react
|
||||
import ColorPalettes from '../../site/theme/template/Color/ColorPalettes';
|
||||
|
||||
ReactDOM.render(<ColorPalettes />, mountNode);
|
||||
`````
|
||||
|
||||
In order to provide contrast against different background shades, we chose `White #FFFFFF` and `Black #000000` with varying transparency to distinguish foreground text. For details, please see [font color](/docs/spec/font#font-color).
|
||||
|
||||
### Palette Generation Tool
|
||||
|
||||
If the above palettes do not meet your needs, you can choose a main color below, and Ant Design's color generation algorithm will generate a palette for you.
|
||||
|
||||
`````__react
|
||||
import ColorPaletteTool from '../../site/theme/template/Color/ColorPaletteTool';
|
||||
|
||||
ReactDOM.render(<ColorPaletteTool />, mountNode);
|
||||
`````
|
||||
|
||||
---
|
||||
|
||||
## Color application
|
||||
|
||||
### Brand color application
|
||||
|
||||
<img class="preview-img no-padding" align="right" src="https://zos.alipayobjects.com/rmsportal/lVKfKMuLmaTlnTDitPEJ.png" alt="Ant Design's commonly used brand color values">
|
||||
|
||||
The brand color is one of the most intuitive visual elements used that is used to embody product characteristics and communicate ideas. When selecting colors, it is important to understand how the brand color is used in the user interface. Taking the default styles of an Ant Design web component as an example, the brand color is mainly reflected in key actions and when highlighting important information.
|
||||
|
||||
> Note: Images and logos can not automatically adhere to the color palette, but should be compatible.
|
||||
|
||||
### Neutral color application
|
||||
|
||||
<img class="preview-img no-padding" align="right" src="https://zos.alipayobjects.com/rmsportal/AmXwsVOWrLxDfwLNlyvL.png" alt="Ant Design's neutral color values">
|
||||
|
||||
Gray as a neutral color is used extensively in Ant Design's web design, and its use facilitates the targeting and functional guidance of key content. This color is mainly seen in the navigation frame, backgrounds, secondary operations, and so on.
|
||||
|
||||
### Functional color application
|
||||
|
||||
<img class="preview-img no-padding" align="right" src="https://zos.alipayobjects.com/rmsportal/mewwdThVwyTQzpZQtYXw.png" alt="Ant Design's functional color card">
|
||||
|
||||
Functional colors are colors that are used to convey state. These are mainly used in notifications, form validations, status messages, etc. Green indicates success, yellow indicates alerts / warnings, red indicates errors, gray indicates skipped / disabled.
|
||||
|
||||
### Visual hierarchy
|
||||
|
||||
<img class="preview-img no-padding good" align="right" src="https://zos.alipayobjects.com/rmsportal/ADUfVlZwjziJRUQSMbMt.png" alt="Good example" description="Guide the user's line of sight through brand color">
|
||||
|
||||
Use the brand color to convey important information or to highlight important actions while surrounding it with large areas of neutral color. This allows users to focus more on the task itself, improving efficiency.
|
||||
|
||||
<br />
|
||||
|
||||
<img class="preview-img no-padding bad" align="right" src="https://zos.alipayobjects.com/rmsportal/RmSDSeAAYphuiDFszIMa.png" alt="Bad example" description="Avoid using too many colors or colors in large areas">
|
||||
|
||||
> Note: We suggest using no more than three colors in the user interface (except for within data charts and graphic illustrations)
|
||||
|
||||
### Color contrast
|
||||
|
||||
<img class="preview-img no-padding good" align="right" src="https://zos.alipayobjects.com/rmsportal/jeyvhMIQgoPUotNerRGy.png" alt="Good example">
|
||||
<img class="preview-img no-padding bad" align="right" src="https://zos.alipayobjects.com/rmsportal/ppdlrVnFCsYVicjDrnzi.png" alt="Bad example" description="When the contrast is less than 3:1, it becomes difficult to read">
|
||||
|
||||
Ant Design's color palette conforms to the WCAG 2.0 standard. The foreground and background colors should always meet the minimum standard of a 3:1 contrast ratio.
|
||||
|
||||
- [Contrast ratio tool](https://leaverou.github.io/contrast-ratio/#%23454545-on-%23fff)
|
||||
@ -1,8 +1,6 @@
|
||||
---
|
||||
order: 3
|
||||
title:
|
||||
zh-CN: 色彩
|
||||
en-US: Colors
|
||||
title: 色彩
|
||||
---
|
||||
|
||||
设计中对色彩的运用不仅应考虑品牌的识别性，还需达到信息传递、操作指引、交互反馈，或是强化和凸显某一个元素的目的。基于操作系统更注重高效、清晰等特点，Ant Design 的用色上更偏向简洁实用一些。在选择色彩时有以下三个注意点：
|
||||
@ -60,7 +60,7 @@
|
||||
"rc-rate": "~2.1.0",
|
||||
"rc-select": "~6.8.0",
|
||||
"rc-slider": "~6.3.0",
|
||||
"rc-steps": "~2.4.0",
|
||||
"rc-steps": "~2.5.0",
|
||||
"rc-switch": "~1.4.2",
|
||||
"rc-table": "~5.2.13",
|
||||
"rc-tabs": "~7.3.0",
|
||||
|
||||
@ -20,6 +20,10 @@ body {
|
||||
|
||||
a {
|
||||
transition: color .3s ease;
|
||||
&:focus {
|
||||
text-decoration: underline;
|
||||
text-decoration-skip: ink;
|
||||
}
|
||||
}
|
||||
|
||||
.main-wrapper {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user