mirror of
https://github.com/ant-design/ant-design.git
synced 2025-01-18 06:03:38 +08:00
docs: Fixed typos (#2921)
This commit is contained in:
parent
5f8b176c69
commit
0d00c5fb6c
@ -23,7 +23,7 @@ const dataSource = ['12345', '23456', '34567'];
|
||||
| Property | Description | Type | Default |
|
||||
|----------------|----------------------------------|------------|--------|
|
||||
| dataSource | Data source for autocomplete | Array | |
|
||||
| value | selcted option | String/Array<String>/{key: String, label: React.Node}/Array<{key, label}> | - |
|
||||
| value | selected option | String/Array<String>/{key: String, label: React.Node}/Array<{key, label}> | - |
|
||||
| defaultValue | Initial selected option. | string/Array<String> | - |
|
||||
| allowClear | Show clear button, effective in multiple mode only. | boolean | false |
|
||||
| onChange | Called when select an option or input value change, or value of input is changed in combobox mode | function(value, label) | - |
|
||||
|
@ -16,7 +16,7 @@ If there are too many operations to display, you can wrap them in a `Dropdown`.
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
|--------------|----------------|----------|--------------|
|
||||
| trigger | the trigger mode which can excute the drop-down action | ['click'] or ['hover'] | ['hover'] |
|
||||
| trigger | the trigger mode which can execute the drop-down action | ['click'] or ['hover'] | ['hover'] |
|
||||
| overlay | the dropdown menu | [Menu](/components/menu) | - |
|
||||
| getPopupContainer | to set the container of the dropdown menu. The default is to create a `div` element in `body`, you can reset it to the scrolling area and make a relative reposition. [example](http://codepen.io/anon/pen/xVBOVQ?editors=001) | Function(triggerNode) | () => document.body |
|
||||
| visible | determine whether the dropdown menu is visible | Boolean | - |
|
||||
|
@ -11,7 +11,7 @@ title:
|
||||
|
||||
## en-US
|
||||
|
||||
Basic validatation for form.
|
||||
Basic validation for form.
|
||||
|
||||
````jsx
|
||||
import { Button, Form, Input } from 'antd';
|
||||
|
@ -15,7 +15,7 @@ title:
|
||||
|
||||
Customized validation for Password.
|
||||
|
||||
To use `this.props.form.validateFields` method, when validating first password you enter will trigger the seconcd password validation.
|
||||
To use `this.props.form.validateFields` method, when validating first password you enter will trigger the second password validation.
|
||||
|
||||
````jsx
|
||||
import { Button, Form, Input, Row, Col } from 'antd';
|
||||
|
@ -11,7 +11,7 @@ title:
|
||||
|
||||
## en-US
|
||||
|
||||
Provide validation for fllowing input filed: `Select` `Radio` `DatePicker` `InputNumber` `Cascader`. To use `validateFieldsAndScroll` with form validation, it will scroll the form to the failed input field which is not in visible area.
|
||||
Provide validation for following input filed: `Select` `Radio` `DatePicker` `InputNumber` `Cascader`. To use `validateFieldsAndScroll` with form validation, it will scroll the form to the failed input field which is not in visible area.
|
||||
|
||||
````jsx
|
||||
import { Select, Radio, Checkbox, Button, DatePicker, TimePicker, InputNumber, Form, Cascader, Icon } from 'antd';
|
||||
@ -130,7 +130,7 @@ let Demo = React.createClass({
|
||||
<Radio value="female">female</Radio>
|
||||
</RadioGroup>
|
||||
)}
|
||||
<span><Icon type="info-circle-o" /> Temporarily no ohter gender</span>
|
||||
<span><Icon type="info-circle-o" /> Temporarily no other gender</span>
|
||||
</FormItem>
|
||||
|
||||
<FormItem
|
||||
|
@ -13,11 +13,11 @@ There are many types of form items including checkbox, radio, input, select, and
|
||||
You can align the controls of a `form` using one of the following attributes:
|
||||
|
||||
- `horizontal`:to horizontally align the `label`s and controls of the fields.
|
||||
- `inline`:to render the labels and controls of the fields in one line (by setting the display property of form controls to `inline-block`).
|
||||
- `inline`:to render the labels and controls of the fields in one line (by setting the display property of form controls to `inline-block`).
|
||||
|
||||
## Form fields
|
||||
|
||||
A form consists of one or more form fields whose type includes input, textarea, checkbox, radio, select, tag, and more.
|
||||
A form consists of one or more form fields whose type includes input, textarea, checkbox, radio, select, tag, and more.
|
||||
A form field is defined using `<Form.Item />`.
|
||||
|
||||
```jsx
|
||||
@ -36,7 +36,7 @@ A form field is defined using `<Form.Item />`.
|
||||
|
||||
| Property | Description | Type | Default Value |
|
||||
|-----------|------------------------------------------|------------|---------|
|
||||
| form | Decorated by `Form.create()` will be automatically set `this.props.form` property, so just pass to form, you don't need to set it by yourself after 1.7.0. | object | n/a
|
||||
| form | Decorated by `Form.create()` will be automatically set `this.props.form` property, so just pass to form, you don't need to set it by yourself after 1.7.0. | object | n/a
|
||||
| vertical | Use vertical layout. | boolean | false |
|
||||
| horizontal | Use horizontal layout. | boolean | false |
|
||||
| inline | Use inline alignment. | boolean | false |
|
||||
@ -86,7 +86,7 @@ If you use `react@<15.3.0`, then, you can't use `getFieldDecorator` in stateless
|
||||
| Property | Description | Type | Default Value |
|
||||
|-----------|-----------------------------------------|-----|--------|
|
||||
| options.id | The unique identifier is required. | string | |
|
||||
| options.valuePropName | Props of children node, for exmaple, the prop of Switch is 'checked'. | string | 'value' |
|
||||
| options.valuePropName | Props of children node, for example, the prop of Switch is 'checked'. | string | 'value' |
|
||||
| options.initialValue | You can specify initial value, type, optional value of children node. | | n/a |
|
||||
| options.trigger | When to collect the value of children node | string | 'onChange' |
|
||||
| options.getValueFromEvent | To convert parameters of onChange to the value of control, for example, set value of DatePicker: `(date, dateString) => dateString` | function(..args) | [reference](https://github.com/react-component/form#optiongetvaluefromevent) |
|
||||
|
@ -9,7 +9,7 @@ title: 异步加载
|
||||
|
||||
## en-US
|
||||
|
||||
asnyc
|
||||
async
|
||||
|
||||
````jsx
|
||||
import { Mention } from 'antd';
|
||||
|
@ -1,8 +1,8 @@
|
||||
---
|
||||
order: 5
|
||||
title:
|
||||
title:
|
||||
zh-CN: 信息提示
|
||||
en-US: Infomation modal dialog
|
||||
en-US: Information modal dialog
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
@ -11,7 +11,7 @@ title:
|
||||
|
||||
## en-US
|
||||
|
||||
In the various types of informaion modal dialog, only one button to close dialog is provided.
|
||||
In the various types of information modal dialog, only one button to close dialog is provided.
|
||||
|
||||
````jsx
|
||||
import { Modal, Button } from 'antd';
|
||||
@ -45,7 +45,7 @@ function error() {
|
||||
|
||||
function warning() {
|
||||
Modal.warning({
|
||||
title: 'This is a warning messge',
|
||||
title: 'This is a warning message',
|
||||
content: 'some messages...some messages...',
|
||||
});
|
||||
}
|
||||
|
@ -9,9 +9,9 @@ Modal dialogs.
|
||||
## When to use
|
||||
|
||||
When requiring users to interact with application, but without jumping to a new page to interrupt
|
||||
the user's workflow, you can use `Modal` to create a new floating layer over the currtent page for user
|
||||
the user's workflow, you can use `Modal` to create a new floating layer over the current page for user
|
||||
getting feedback or information purposes.
|
||||
Additionaly, if you need show a simple confirmation dialog, you can use `ant.Modal.confirm()`,
|
||||
Additionally, if you need show a simple confirmation dialog, you can use `ant.Modal.confirm()`,
|
||||
and so on.
|
||||
|
||||
|
||||
@ -46,7 +46,7 @@ There are five ways to display the information based on the content's nature:
|
||||
- `Modal.confirm`
|
||||
|
||||
The item listd above are all functions, expecting a settings object as parameter.
|
||||
The propeties of the object are follows:
|
||||
The properties of the object are follows:
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
|------------|----------------|------------------|---------------|
|
||||
|
@ -34,7 +34,7 @@ The properties of config are as follows:
|
||||
| description | The content of notification box (required) | React.Node | - |
|
||||
| btn | Customized close button | React.Node | - |
|
||||
| icon | Customized icon | React.Node | _ |
|
||||
| key | The unique identifer of current notification | String | - |
|
||||
| key | The unique identifier of current notification | String | - |
|
||||
| onClose | Specify a function that will be called after clicking the default close button | Function | - |
|
||||
| duration | A notification box is closed after 4.5s by default. When specifying `duration` to null or 0, it will never be closed automatically | Number | 4.5 |
|
||||
|
||||
|
@ -2,7 +2,7 @@
|
||||
order: 3
|
||||
title:
|
||||
zh-CN: 按钮样式
|
||||
en-US: raido style
|
||||
en-US: radio style
|
||||
------------------
|
||||
|
||||
## zh-CN
|
||||
|
@ -9,7 +9,7 @@ Radio.
|
||||
## When to use
|
||||
|
||||
- Used to select a single state in multiple options.
|
||||
- The different between Select, Radio is visbile to user, it can facilitate users in the comparison of choice. So, when you want to use Radio, option should not be too much.
|
||||
- The different between Select, Radio is visible to user, it can facilitate users in the comparison of choice. So, when you want to use Radio, option should not be too much.
|
||||
|
||||
|
||||
## API
|
||||
|
@ -2,7 +2,7 @@
|
||||
order: 2
|
||||
title:
|
||||
zh-CN: 多选
|
||||
en-US: mutiple selection
|
||||
en-US: multiple selection
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
@ -26,7 +26,7 @@ A dropdown menu for choosing, an elegant alternative to the native select compon
|
||||
| defaultValue | Initial selected option. | string/Array<String> | - |
|
||||
| multiple | Allow multiple select. | boolean | false |
|
||||
| allowClear | Show clear button, effective in multiple mode only. | boolean | false |
|
||||
| filterOption | If true, filter options by input, if function, filter options agianst it. The function will receive two arguments, `inputValue` and `option`, if the function returns `true`, the option will be included in the filtered set; Otherwise, it will be excluded. | boolean or function(inputValue, option) | true |
|
||||
| filterOption | If true, filter options by input, if function, filter options against it. The function will receive two arguments, `inputValue` and `option`, if the function returns `true`, the option will be included in the filtered set; Otherwise, it will be excluded. | boolean or function(inputValue, option) | true |
|
||||
| tags | When tagging is enabled the user can select from pre-existing options or create a new tag by picking the first choice, which is what the user has typed into the search box so far. | boolean |false |
|
||||
| onSelect | Called when a option is selected. param is option's value and option instance. | function(value, option) | - |
|
||||
| onDeselect | Called when a option is deselected. param is option's value. only called for multiple or tags, effective in multiple or tags mode only. | function(value) | - |
|
||||
@ -41,7 +41,7 @@ A dropdown menu for choosing, an elegant alternative to the native select compon
|
||||
| size | Size of Select input. `large` `small` | String | default |
|
||||
| showSearch | Whether show search input in single mode.| boolean | false |
|
||||
| disabled | Whether disabled select | boolean | false |
|
||||
| getPopupContainer | Parent Node which the selector should be renderd to. Default to `body`. When position issues happen, try to modify it into scrollable content and position it relative.[example](http://codepen.io/anon/pen/xVBOVQ?editors=001) | Function(triggerNode) | () => document.body |
|
||||
| getPopupContainer | Parent Node which the selector should be rendered to. Default to `body`. When position issues happen, try to modify it into scrollable content and position it relative.[example](http://codepen.io/anon/pen/xVBOVQ?editors=001) | Function(triggerNode) | () => document.body |
|
||||
|
||||
### Option props
|
||||
|
||||
@ -49,7 +49,7 @@ A dropdown menu for choosing, an elegant alternative to the native select compon
|
||||
|----------|----------------|----------|--------------|
|
||||
| disabled | Disable this option | Boolean | false |
|
||||
| key | if react request you to set this property, you can set it to value of option, and then ignore value property. | String | |
|
||||
| value | default to filter with this propery | String | - |
|
||||
| value | default to filter with this property | String | - |
|
||||
|
||||
### OptGroup props
|
||||
|
||||
|
@ -1,6 +1,6 @@
|
||||
---
|
||||
order: 5
|
||||
title:
|
||||
title:
|
||||
zh-CN: 自定义提示
|
||||
en-US: Customerize tooltip
|
||||
---
|
||||
@ -11,7 +11,7 @@ title:
|
||||
|
||||
## en-US
|
||||
|
||||
Use `tipFormatter` to formart content of `Toolip`. If `tipFormatter` is null, hide it.
|
||||
Use `tipFormatter` to format content of `Toolip`. If `tipFormatter` is null, hide it.
|
||||
|
||||
````jsx
|
||||
import { Slider } from 'antd';
|
||||
|
@ -17,8 +17,8 @@ To input a value in a range.
|
||||
| range | dual thumb mode | Boolean | false
|
||||
| min | The minimum value the slider can slide to. | Number | 0
|
||||
| max | The maximum value the slider can slide to | Number | 100
|
||||
| step | The granularity the slider can step through values. Must greater than 0, and be devided by (max - min) . When `marks` no null, `step` can be `null`. | Number or null | 1
|
||||
| marks | Tick mark of Slider, type of key must be `Number`, and must in closed interva [min, max] ,each mark can declare its own style. | Object{} | Object{Number: String or React.Component} or Object{Number: { style, label}}
|
||||
| step | The granularity the slider can step through values. Must greater than 0, and be divided by (max - min) . When `marks` no null, `step` can be `null`. | Number or null | 1
|
||||
| marks | Tick mark of Slider, type of key must be `Number`, and must in closed interval [min, max] ,each mark can declare its own style. | Object{} | Object{Number: String or React.Component} or Object{Number: { style, label}}
|
||||
| dots | Whether the thumb can drag over tick only. | Boolean | false
|
||||
| value | The value of slider. When `range` is `false`, use `Number`, otherwise, use `[Number, Number]` | Number or [Number, Number] |
|
||||
| defaultValue | The default value of slider. When `range` is `false`, use `Number`, otherwise, use `[Number, Number]` | Number or [Number, Number] | 0 or [0, 0]
|
||||
|
@ -8,7 +8,7 @@ A Spin is used for displaying loading state of a page or a block.
|
||||
|
||||
## When to use
|
||||
|
||||
When partial of page is waiting for asynchronous data or during a rendering process, an appropriate loading animation can effectively alleviate users' inquietude.
|
||||
When partial of page is waiting for asynchronous data or during a rendering process, an appropriate loading animation can effectively alleviate users' inquietude.
|
||||
|
||||
|
||||
## API
|
||||
@ -16,6 +16,6 @@ When partial of page is waiting for asynchronous data or during a rendering proc
|
||||
|
||||
| Property | Type | Default | Description |
|
||||
|------------|----------------|-------------|--------------|
|
||||
| size | enum | default | Size of dot in spin component, avaliable in `small`, `default` and `large`. |
|
||||
| size | enum | default | Size of dot in spin component, available in `small`, `default` and `large`. |
|
||||
| spinning | boolean | true | Use in embedded mode, to modify loading state. |
|
||||
| tip | string | None | Customize decription content |
|
||||
| tip | string | None | Customize description content |
|
||||
|
@ -17,7 +17,7 @@ title:
|
||||
|
||||
## en-US
|
||||
|
||||
Controll filters and sorters by `fileredValue` and `sortOrder`.
|
||||
Control filters and sorters by `fileredValue` and `sortOrder`.
|
||||
|
||||
> 1. Defining `fileredValue` or `sortOrder` means that it is in the controlled mode.
|
||||
|
||||
|
@ -1,6 +1,6 @@
|
||||
---
|
||||
order: 5
|
||||
title:
|
||||
title:
|
||||
zh-CN: 迷你型
|
||||
en-US: Mini tab
|
||||
---
|
||||
@ -11,7 +11,7 @@ title:
|
||||
|
||||
## en-US
|
||||
|
||||
Small size can be uesed in Modal.
|
||||
Small size can be used in Modal.
|
||||
|
||||
````jsx
|
||||
import { Tabs } from 'antd';
|
||||
|
@ -12,7 +12,7 @@ Ant Design has 3 types Tabs for different situation.
|
||||
|
||||
- Card Tabs: for managing too many closeable views.
|
||||
|
||||
- Normall Tabs: for functional aspects of a page.
|
||||
- Normal Tabs: for functional aspects of a page.
|
||||
|
||||
- RadioButton: for secondary tabs.
|
||||
|
||||
@ -37,4 +37,4 @@ Ant Design has 3 types Tabs for different situation.
|
||||
| Property | Description | Type | Default |
|
||||
|--------------|-----------------------|----------|--------------|
|
||||
| key | TabPane's key | String | _ |
|
||||
| tab | Show text in TabPane's head | React.Element or String | _ |
|
||||
| tab | Show text in TabPane's head | React.Element or String | _ |
|
||||
|
@ -29,7 +29,7 @@ By clicking the input box, you can select a time from a popup panel.
|
||||
| format | to set the time format | string | "HH:mm:ss"、"HH:mm"、"mm:ss" |
|
||||
| disabled | determine whether the TimePicker is disabled | bool | false |
|
||||
| disabledHours | to specify the hours that cannot be selected | function() | - |
|
||||
| disabledMinutes | to specify the minites that cannot be selected | function(selectedHour) | - |
|
||||
| disabledMinutes | to specify the minutes that cannot be selected | function(selectedHour) | - |
|
||||
| disabledSeconds | to specify the seconds that cannot be selected | function(selectedHour, selectedMinute) | - |
|
||||
| hideDisabledOptions | hide the options that can not be selected | boolean | false |
|
||||
| getPopupContainer | to set the container of the floating layer, while the default is to create a div element in body | function(trigger) | - |
|
||||
|
@ -1,6 +1,6 @@
|
||||
---
|
||||
order: 1
|
||||
title:
|
||||
title:
|
||||
zh-CN: 受控操作示例
|
||||
en-US: basic controlled example
|
||||
---
|
||||
@ -57,7 +57,7 @@ const Demo = React.createClass({
|
||||
onExpand(expandedKeys) {
|
||||
console.log('onExpand', arguments);
|
||||
// if not set autoExpandParent to false, if children expanded, parent can not collapse.
|
||||
// or, you can remove all expanded chilren keys.
|
||||
// or, you can remove all expanded children keys.
|
||||
this.setState({
|
||||
expandedKeys,
|
||||
autoExpandParent: false,
|
||||
|
@ -6,7 +6,7 @@ title: Tree
|
||||
|
||||
## When to use
|
||||
|
||||
Directory, organization, biological classification, country, and etc. Almost things of the world are tree structrue. The `Tree` component is a way of representing the hierachical relationship of these things,and you also can expand, collapse, select the treeNodes of it.
|
||||
Directory, organization, biological classification, country, and etc. Almost things of the world are tree structure. The `Tree` component is a way of representing the hierarchical relationship of these things,and you also can expand, collapse, select the treeNodes of it.
|
||||
|
||||
## API
|
||||
|
||||
@ -18,7 +18,7 @@ Directory, organization, biological classification, country, and etc. Almost thi
|
||||
|checkable | Whether support checkable treeNode | bool | false |
|
||||
|defaultExpandAll | Whether default to expand all treeNodes | bool | false |
|
||||
|defaultExpandedKeys | Specify keys of default expanded treeNodes | String[] | [] |
|
||||
|expandedKeys |(controlled) Sepcifies keys of expanded treeNodes | String[] | [] |
|
||||
|expandedKeys |(controlled) Specifies keys of expanded treeNodes | String[] | [] |
|
||||
|autoExpandParent | Whether to automatically expand a parent treeNode | bool | true |
|
||||
|defaultCheckedKeys | Specifies keys of default checked treeNodes | String[] | [] |
|
||||
|checkedKeys |(controlled) Specifies keys of checked treeNodes(PS: When specifies a key of treeNode which is a parent treeNode, all children treeNodes of its will be checked; And vice versa, when specifies a key of treeNode which is a child treeNode, its parent treeNode will also be checked. When `checkable` and `checkStrictly` is true, it'a object has `checked` and `halfChecked` property, and no matter child treeNode or parent treeNode is checked, they won't impact on eachother. | String[]/{checked:Array<String>,halfChecked:Array<String>} | [] |
|
||||
@ -50,8 +50,8 @@ Directory, organization, biological classification, country, and etc. Almost thi
|
||||
|
||||
## note
|
||||
|
||||
The number of treeNodes can be very large, but when enable `checkable`,
|
||||
it will spend more computing time, so we cached some calculations(e.g. `this.treeNodesStates`),
|
||||
to avoid double computing. But, this bring some restrictions,
|
||||
**when you async load treeNodes, you should render tree like this**
|
||||
The number of treeNodes can be very large, but when enable `checkable`,
|
||||
it will spend more computing time, so we cached some calculations(e.g. `this.treeNodesStates`),
|
||||
to avoid double computing. But, this bring some restrictions,
|
||||
**when you async load treeNodes, you should render tree like this**
|
||||
`{this.state.treeData.length ? <Tree ...>{this.state.treeData.map(t => <TreeNode ... />)}</Tree> : 'loading tree'}`
|
||||
|
@ -1,7 +1,7 @@
|
||||
---
|
||||
order: 5
|
||||
hidden: true
|
||||
title:
|
||||
title:
|
||||
zh-CN: 多文件选择
|
||||
en-US: Multifile Selection
|
||||
---
|
||||
@ -25,7 +25,7 @@ const props = {
|
||||
console.log(info.file, info.fileList);
|
||||
}
|
||||
if (info.file.status === 'done') {
|
||||
message.success(`${info.file.name} upload sucessfully。`);
|
||||
message.success(`${info.file.name} upload successfully。`);
|
||||
} else if (info.file.status === 'error') {
|
||||
message.error(`${info.file.name} upload unsuccessfully。`);
|
||||
}
|
||||
|
@ -5,8 +5,8 @@ title: Contrast
|
||||
---
|
||||
|
||||
Contrast is one of the effective ways to add visual interest to your page, and to create an organizational hierarchy among different element that aid user in finding the information quickly.
|
||||
|
||||
> Note: The important rule for contrast to be effective, it must be strong. Don't be wimp.
|
||||
|
||||
> Note: The important rule for contrast to be effective, it must be strong. Don't be wimp.
|
||||
|
||||
---
|
||||
|
||||
@ -15,15 +15,15 @@ Contrast is one of the effective ways to add visual interest to your page, and t
|
||||
<img class="preview-img good" align="right" alt="good example" src="https://os.alipayobjects.com/rmsportal/RruKZUSYEwauGdF.png">
|
||||
<img class="preview-img bad" align="right" alt="bad example" src="https://os.alipayobjects.com/rmsportal/TOupLSPNQkBTmYw.png">
|
||||
|
||||
In order to help user make a quick operation (something like the form,modal), a more important operation or a operation with higher frequency would be emphasized.
|
||||
In order to help user make a quick operation (something like the form,modal), a more important operation or a operation with higher frequency would be emphasized.
|
||||
|
||||
|
||||
> Notes: ways of emphasizing are not just to intensify the key item. It could also weaken the other items.
|
||||
> Notes: ways of emphasizing are not just to intensify the key item. It could also weaken the other items.
|
||||
|
||||
|
||||
<br>
|
||||
|
||||
<img class="preview-img" align="right" alt="Example of ignoring the primary and secondary sequence" decription="Accept and Reject should use default button, for UI should not affect user's decision." src="https://os.alipayobjects.com/rmsportal/xskurfmyKPumFSv.png">
|
||||
<img class="preview-img" align="right" alt="Example of ignoring the primary and secondary sequence" description="Accept and Reject should use default button, for UI should not affect user's decision." src="https://os.alipayobjects.com/rmsportal/xskurfmyKPumFSv.png">
|
||||
|
||||
When there’s something needs users to make decision prudently, the system should remain neutral. It shouldn’t make the decision for users or lead them to make judgement.
|
||||
|
||||
@ -35,7 +35,7 @@ When there’s something needs users to make decision prudently, the system shou
|
||||
|
||||
<img class="preview-img" align="right" alt="Example of whole and part 2" src="https://os.alipayobjects.com/rmsportal/bafqoUWFgXjsuSG.png">
|
||||
|
||||
Taking advantage of changing the typesetting, the typeface and the size, we highlight the different levels and differentiate the ensemble and the part, which would make the page be more flexible and rhythmic.
|
||||
Taking advantage of changing the typesetting, the typeface and the size, we highlight the different levels and differentiate the ensemble and the part, which would make the page be more flexible and rhythmic.
|
||||
|
||||
---
|
||||
|
||||
@ -47,4 +47,4 @@ Taking advantage of changing the typesetting, the typeface and the size, we high
|
||||
|
||||
Taking advantage of changing colors and adding assistant shapes, we realize the comparison of state relation, which could help users differentiate various information better
|
||||
|
||||
The forms we usually see include 『static contrast』 and 『dynamic contrast』.
|
||||
The forms we usually see include 『static contrast』 and 『dynamic contrast』.
|
||||
|
@ -22,7 +22,7 @@ english: 对比
|
||||
|
||||
<br>
|
||||
|
||||
<img class="preview-img" align="right" alt="不区分主次的示例" decription="『通过』和『驳回』都使用次按钮,系统保持中立。" src="https://os.alipayobjects.com/rmsportal/xskurfmyKPumFSv.png">
|
||||
<img class="preview-img" align="right" alt="不区分主次的示例" description="『通过』和『驳回』都使用次按钮,系统保持中立。" src="https://os.alipayobjects.com/rmsportal/xskurfmyKPumFSv.png">
|
||||
|
||||
在一些需要用户慎重决策的场景中,系统应该保持中立,不能替用户或者诱导用户做出判断。
|
||||
|
||||
|
@ -39,7 +39,7 @@ Instead of making Contextual Tools always visible, we can show them on demand. O
|
||||
|
||||
<img class="preview-img" align="right" alt="example of Toggle-Reveal Tools" description="The table reveals an input box from the text only when the edit mode is turned on for the area." src="https://os.alipayobjects.com/rmsportal/uGWcpAFgWdynxBy.png">
|
||||
|
||||
Toggle a tool mode for an area or page when the actions are not the main flow. The tools to accomplish this are revealed on the activation of the toogle.
|
||||
Toggle a tool mode for an area or page when the actions are not the main flow. The tools to accomplish this are revealed on the activation of the toggle.
|
||||
|
||||
|
||||
<br>
|
||||
@ -67,12 +67,12 @@ Some relative knowledge of [Providing an Invitation](/docs/spec/invitation) can
|
||||
|
||||
<img class="preview-img" align="right" alt="example of hypertext hot spot" description="When hovering on the cell in which the hypertext is positioned, the mouse turns from a cursor to a hand symbol. Click it and jump to another page." src="https://os.alipayobjects.com/rmsportal/bCrBxGPJiDvkyOH.png">
|
||||
|
||||
The clickable area of hypertext is affected by the length of the stirng in a cell. The while cell can be set to a hot spot in order to be triggered easier.
|
||||
The clickable area of hypertext is affected by the length of the string in a cell. The while cell can be set to a hot spot in order to be triggered easier.
|
||||
|
||||
<br>
|
||||
|
||||
<img class="preview-img" align="right" alt="example of button hot spot" description="Move the mouse near the button and activate the hover state." src="https://os.alipayobjects.com/rmsportal/dSehXwUuXDFDhJO.png">
|
||||
|
||||
Increase the clickable hot spot to strenthen the responsiveness rather than increase the size of the button.
|
||||
Increase the clickable hot spot to strengthen the responsiveness rather than increase the size of the button.
|
||||
|
||||
>Note that it is especially suited for Mobile.
|
||||
|
@ -8,7 +8,7 @@ Invitations are powerful because they directly address discoverability and provi
|
||||
|
||||
While we can’t literally extend Newton’s law to the world of user interfaces, we certainly can apply this principle to the way we should interact with users. When users click on a button, they expect the button to depress. When they type in a field, they expect to see characters show up in the text box. When they make a mistake, they want the application to tell them where they goofed.
|
||||
|
||||
While there is a possibility of too much feedback (or, more accurately, too much of the wrong feedback—a concept we will discuss in the upcoming chapters), a system with little or no feedback feels sluggish and thickheaded.
|
||||
While there is a possibility of too much feedback (or, more accurately, too much of the wrong feedback—a concept we will discuss in the upcoming chapters), a system with little or no feedback feels sluggish and thickheaded.
|
||||
|
||||
> ** Newton’s Third Law of Motion **: For every action, there is an equal and opposite reaction, from Wikipedia.
|
||||
|
||||
@ -21,7 +21,7 @@ While there is a possibility of too much feedback (or, more accurately, too much
|
||||
|
||||
<img class="preview-img" align="right" alt="example of Uncertain Category" description="The number of categories the keyword of the user query belongs to is uncetain." src="https://os.alipayobjects.com/rmsportal/hUfCsXwnOsVlskl.png">
|
||||
|
||||
Auto Complete: As the user types input into a field, a drop-down menu of matching values is displayed.
|
||||
Auto Complete: As the user types input into a field, a drop-down menu of matching values is displayed.
|
||||
Depending on the categories of search results, it can be divided into two types, Certain Category and Uncertain Category.
|
||||
|
||||
<br>
|
||||
@ -60,7 +60,7 @@ Progressive Disclosure: When users are faced with a series of steps, it is often
|
||||
<img class="preview-img" align="right" alt="example of Loading Page" src="https://os.alipayobjects.com/rmsportal/qPWjexSmFfCiLVJ.png">
|
||||
|
||||
|
||||
Progress Indicator: Progress Indicators keep a conversation going with the user when the rest of the interface is currently unavailable. Common Progress Indicators, such as Loading Button, Loading Table, Loading List and Loading Page, can be displayed repectively according to the frequency and importance of operaction.
|
||||
Progress Indicator: Progress Indicators keep a conversation going with the user when the rest of the interface is currently unavailable. Common Progress Indicators, such as Loading Button, Loading Table, Loading List and Loading Page, can be displayed respectively according to the frequency and importance of operation.
|
||||
|
||||
<br>
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user