ant-design/docs/spec/direct.zh-CN.md
二货机器人 abf215a982
docs: Update 4.0 site (#20290)
* init recommend block

* init design pages

* home frames

* add background banner

* hello, Hitu makes the animation

* add media query

* add images

* update types

* add declare

* preload support

* update ignore

* additional ignore site Home lint

* update ignore

* add hover effect

* adjust alt of bannber

* adjust lang & card shadow

* fix typo

* adjust desc

* hitu in english

* article add link

* Certainty is hitu

* Meaning Hitu

* Growth with Hitu

* Natural Hitu

* slow down of Natural

* adjust speed of icons

* New Meaning animation

* adjust animation duration

* update card link

* update link

* values doc

* replace images

* faster Growth

* update values

* fix lint

* all slow down

* adjust padding

* update icons

* adjust margin

* update images

* adjust montion

* adjust by designer

* update pages

* update design prod

* update articles

* update site style

* update doc

* update images

* update style

* lint fix

* adjust liner color

* github text color update

* adjust margin of title

* mobile design

* update design sub card

* update style

* less lint

* update images

* design card auto height

* update img

* update logo transition

* adjust card style

* adjust style to fix 184

* adjust nav style

* category it

* slow down of logo

* update style

* hide video link

* hitu article

* use img of hitu

* update docs

* style lint

* update Hitu layout doc

* update images

* speed up logo

* update link

* clean up

* clean up

* update doc

* adjust doc

* update images
2019-12-26 15:27:52 +08:00

2.8 KiB
Raw Blame History

category type order title
设计模式 原则 5 直截了当

正如 Alan Cooper 所言『需要在哪里输出就要允许在哪里输入』。这就是直接操作的原理。eg不要为了编辑内容而打开另一个页面应该直接在上下文中实现编辑。


页内编辑

单击编辑示例

单字段行内编辑

当『易读性』远比『易编辑性』重要时,可以使用『单击编辑』。


文字链/图标编辑示例

当『易读性』为主,同时又要突出操作行的『易编辑性』时,可使用『文字链/图标编辑』。


多字段行内编辑示例

多字段行内编辑

注:在『多字段行内编辑』的情况下,显示的内容和编辑时所需的字段会存在比较大的差异,所以更需要『巧用过渡』原则中的『解释刚刚发生了什么』来消除这种视觉影响。



利用拖放

拖放列表示例

拖放列表

只能限制在一个维度(上/下或者左/右)进行拖放。


拖放图片/文件示例

拖放图片/文件