mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-14 08:09:13 +08:00
cbcfd38ca7
* build: try to use dumi as doc tool
* docs: migrate demo structure to dumi way
* refactor: use type export & import
* docs: migrate demo previewer to dumi
* docs: create empty layout & components
* docs: apply custom rehype plugin
* docs: create empty extra pages
* docs: Add Banner component
* chore: move theme tsconfig.json
* docs: home page init
* docs: migrate header (#37896)
* docs: header
* docs: update
* docs: home init
* clean up
* test: fix site lint
* chore: tsc ignore demo
* chore: dumi demo migrate script
* chore: cards
* docs: home layout
* docs: Update locale logic
* docs: fix getLink logic
* chore: fix ci (#37899)
* chore: fix ci
* ci: remove check-ts-demo
* ci: preview build
* test: ignore demo.tsx
* chore: update script
* test: update snapshot
* test: update node and image test
* chore: add .surgeignore
* docs: layout providers (#37908)
* docs: add components sidebar (#37923)
* docs: sidebar
* docs: update docs title
* docs: update design doc
* chore: code clean
* docs: handle changelog page
* docs: add title
* docs: add subtitle
* docs: active header nav
* chore: code clean
* docs: overview
* chore: code clean
* docs: update intl (#37918)
* docs: update intl
* chore: code clean
* docs: update favicons
* chore: update testPathIgnorePatterns
* chore: code clean
* chore: code clean
* chore: copy 404.html (#37996)
* docs: Home page theme picker
* chore: Update migrate script
* docs: home page update
* docs: theme editor style
* docs: theme lang
* chore: update migrate.js
* docs: fix demo (#38094)
* chore: update migrate.js
* docs: update md
* docs: update demo
* test: fix snapshot
* chore: move debug to code attr in migrate script
* chore: update md
Co-authored-by: PeachScript <scdzwyxst@gmail.com>
* feat: overview page
* feat: Migrate `404` page (#38118)
* feat: migrate IconSearch component (#37916)
* feat<site/IconSearch>: copy IconDisplay from site to .dumi
* feat<site/IconSearch>: change docs of icon
* feat<site/IconSearch>: tweak
* feat<site/IconSearch>: use useIntl instead of injectIntl
* feat<site/IconSearch>: fix ts type error
* feat<site/IconSearch>: use intl.formatMessage to render text
* docs: Adjust home btn sizw
* docs: Update doc
* feat: v5 site overview page (#38131)
* feat: site
* fix: fix
* feat: v5 site overview page
* fix: fix path
* fix: fix
* fix: fix
* docs: fix margin logic
* feat: v5 site change-log page (#38137)
* feat: v5 site change-log page (#38162)
* docs: site redirect to home pag
* docs: theme picker
* docs: use react-intl from dumi (#38183)
* docs: Theme Picker
* docs: update dumi config
* docs: home back fix
* docs: picker colorful
* docs: locale of it
* docs: update components desc
* docs: site of links
* docs: update components list
* docs: update desc
* feat: Migrate `DemoWrapper` component (#38166)
* feat: Migrate `DemoWrapper` component
* feat: remove invalid comments and add comment for `key` prop
* docs: FloatButton pure panel
* chore: update demo
* chore: update dumi config
* Revert "chore: update demo"
This reverts commit 028265d3ba.
* chore: test logic adjust to support cnpm modules
* chore: add locale alias
* docs: /index to /
* docs: add locale redirect head script
* chore: adjust compact
* docs: fix missing token
* feat: compact switch
* chore: code clean
* docs: update home
* docs: fix radius token
* docs: hash of it
* chore: adjust home page
* docs: Add background map
* docs: site theme bac logic
* docs: avatar
* docs: update logo color
* docs: home banner
* docs: adjust tour size
* docs: purepanl update
* docs: transfooter
* docs: update banner gif
* docs: content (#38361)
* docs: title & EditButton
* docs: content
* chore: fix toc
* docs: resource page
* docs: transform resource data from hast
* docs: filename & Resource Card
* chore: enable prerender
* chore: remove less
* docs: toc style
* chore: fix lint
* docs: fix Layout page
* docs: fix CP page
* chore: update demos
* docs: workaround for export dynamic html
* chore: enable demo eslint
* docs: table style
* fix: header shadow
* chore: update snapshot
* fix: toc style
* docs: add title
* docs: Adjust site
* feat: helmet
* docs: site css
* fix: description
* feat: toc debug
* docs: update config-provider
* feat: use colorPanel
* fix: colorPanel value
* feat: anchor ink ball style
* feat: apply theme editor
* fix: code block style
* chore: update demo
* chore: fix lint
* chore: code clean
* chore: update snapshot
* feat: ts2js
* chore: description
* docs: site ready for ssr
includes:
- move client render logic to useEffect in site theme
- extract antd cssinjs to a single css file like bisheng
- workaround to support react@18 pipeableStream for emotion
* chore: bump testing lib
* docs: font size of title
* chore: remove react-sortable-hoc
* chore: update snapshot
* chore: update script
Co-authored-by: PeachScript <scdzwyxst@gmail.com>
Co-authored-by: MadCcc <1075746765@qq.com>
Co-authored-by: zqran <uuxnet@gmail.com>
Co-authored-by: TrickyPi <530257315@qq.com>
Co-authored-by: lijianan <574980606@qq.com>
54 lines
3.0 KiB
Markdown
54 lines
3.0 KiB
Markdown
---
|
||
group: Design Patterns
|
||
type: Principles
|
||
order: 5
|
||
title: Make it Direct
|
||
---
|
||
|
||
As Alan Cooper states：「Where there is output, let there be input」. This is the principle of direct manipulation. eg：Instead of editing content on a separate page, do it directly in context.
|
||
|
||
---
|
||
|
||
## In-Page Editing
|
||
|
||
<img class="preview-img" align="right" alt="Example of click to edit" description="Status 1: Common browsing mode, do not distinguish between editable and non-editable lines；<br>Status 2: On mouse hover, the background is backlit with yellow. A tool tip invites the user to 'Click to edit'；<br>Status 3: Once the user clicks on the title, the form elements 「Input box」, 「OK」 and 「Cancel」 appear, and the cursor is positioned in the 「input box」." src="https://gw.alipayobjects.com/zos/rmsportal/EXKwsvUkIUNkHBSsOlRi.png">
|
||
|
||
Single-Field Inline Edit
|
||
|
||
If 「readability」 is more important than 「editability」, 「click to edit」 can be used.
|
||
|
||
<br>
|
||
|
||
<img class="preview-img" align="right" alt="Example of Text link/Icon Edit" description="Status 1: Text link/icon appears near the editable line.；<br>Status 2: Once the mouse clicks 「edit」,the form elements 「Input box」, 「Ok」 and 「Cancel」 appear, and the cursor is positioned in the 「input box」.
|
||
" src="https://gw.alipayobjects.com/zos/rmsportal/qiAYBQKcQnmavxHzkeaK.png">
|
||
|
||
If the priority is given to 「readability」 and the 「editability」 of operation lines need to be highlighted at the same time, 「text link/icon edit」can be used.
|
||
|
||
<br>
|
||
|
||
<img class="preview-img" align="right" alt="Example of Multi-Field Inline Edit" description="Edit mode without destroying integrity can enlarge the space in order to put down the 「Input box」 and other form elements. Besides, when switching the edit mode in the Table, it is necessary to ensure that each column does not beat." src="https://gw.alipayobjects.com/zos/rmsportal/ukbXcTHrgPmTfHmCassD.png">
|
||
|
||
Multi-Field Inline Edit
|
||
|
||
> Note：In「Multi-Field Inline Edit」, there are huge different between the content and required field, So it is more needed to use the [「Explain What Just Happened」](../docs/spec/transition#解释刚刚发生了什么) in 「Use Transition」to eliminate this visual effects.
|
||
|
||
<br>
|
||
|
||
---
|
||
|
||
## Drag and Drop
|
||
|
||
<img class="preview-img" align="right" alt="Example of Drag and Drop List" description="Status 1: On mouse hover,a removable 「icon」 appears.；<br>Status 2： When hovering over the 「icon」, the pointer changes into a 「hand」, click-and-drag operation can be used；<br>Status 3：Drag target to the placeable block. When blue stroke appears, inform user that object can be placed in the block." src="https://gw.alipayobjects.com/zos/rmsportal/xZWSNecZhGXaAVluxOAK.png">
|
||
|
||
Drag and Drop List
|
||
|
||
Drag and Drop can only limited in one dimension（upper/down or left/right）
|
||
|
||
<br>
|
||
|
||
<img class="preview-img" align="right" alt="Example of Drag and Drop picture/file" src="https://gw.alipayobjects.com/zos/rmsportal/wuAOmxmpXkcZlHzTbIvY.png">
|
||
|
||
Drag and Drop picture/file
|
||
|
||
<br>
|