You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1 lines
12 KiB
1 lines
12 KiB
"use strict";(self.webpackChunkantd=self.webpackChunkantd||[]).push([[8769],{367156:function(A,s,e){e.r(s);var r=e(502143),m=e(968521),u=e(720719),c=e(28840),Z=e(759907),g=e(828089),p=e(825673),h=e(902068),b=e(574399),v=e(863942),E=e(316073),D=e(24628),w=e(719260),T=e(956140),P=e(127179),k=e(905388),x=e(40428),i=e(606965),B=e(268696),f=e(587302),a=e(424128),y=e(249706),I=e(795127),N=e(116846),O=e(212039),R=e(73024),M=e(553913),o=e(606641),_=e(667294),t=e(370917);function l(){var d=(0,o.eL)(),n=d.texts;return(0,t.tZ)(o.dY,null,(0,t.tZ)(_.Fragment,null,(0,t.tZ)("div",{className:"markdown"},(0,t.tZ)("h2",{id:"design-principal"},(0,t.tZ)(a.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#design-principal",sourceType:"a"},(0,t.tZ)("span",{className:"icon icon-link"})),"Design Principal"),(0,t.tZ)("ul",null,(0,t.tZ)("li",null,n[0].value),(0,t.tZ)("li",null,n[1].value)),(0,t.tZ)("h2",{id:"types"},(0,t.tZ)(a.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#types",sourceType:"a"},(0,t.tZ)("span",{className:"icon icon-link"})),"Types"),(0,t.tZ)("h3",{id:"common-button-types"},(0,t.tZ)(a.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#common-button-types",sourceType:"a"},(0,t.tZ)("span",{className:"icon icon-link"})),"Common Button Types"),(0,t.tZ)("div",null,n[2].value,(0,t.tZ)("img",{alt:"buttons",src:"https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*wsXrT7yQH2MAAAAAAAAAAABkARQnAQ"})),(0,t.tZ)("h4",{id:"-default-button"},(0,t.tZ)(a.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#-default-button",sourceType:"a"},(0,t.tZ)("span",{className:"icon icon-link"})),"\u2460 Default Button"),(0,t.tZ)("p",null,n[3].value),(0,t.tZ)("h4",{id:"-primary-button"},(0,t.tZ)(a.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#-primary-button",sourceType:"a"},(0,t.tZ)("span",{className:"icon icon-link"})),"\u2461 Primary Button"),(0,t.tZ)("p",null,n[4].value),(0,t.tZ)("h4",{id:"-text-button"},(0,t.tZ)(a.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#-text-button",sourceType:"a"},(0,t.tZ)("span",{className:"icon icon-link"})),"\u2462 Text Button"),(0,t.tZ)("p",null,n[5].value),(0,t.tZ)("h4",{id:"-icon-button"},(0,t.tZ)(a.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#-icon-button",sourceType:"a"},(0,t.tZ)("span",{className:"icon icon-link"})),"\u2463 Icon Button"),(0,t.tZ)("p",null,n[6].value),(0,t.tZ)("ul",null,(0,t.tZ)("li",null,n[7].value),(0,t.tZ)("li",null,n[8].value)),(0,t.tZ)("h4",{id:"-text-button-with-icon"},(0,t.tZ)(a.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#-text-button-with-icon",sourceType:"a"},(0,t.tZ)("span",{className:"icon icon-link"})),"\u2464 Text Button with Icon"),(0,t.tZ)("p",null,n[9].value),(0,t.tZ)("h3",{id:"emphasis"},(0,t.tZ)(a.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#emphasis",sourceType:"a"},(0,t.tZ)("span",{className:"icon icon-link"})),"Emphasis")),(0,t.tZ)(i.Z,null,(0,t.tZ)("img",{className:"preview-img no-padding",src:"https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*guusTZ6ZPxkAAAAAAAAAAABkARQnAQ"})),(0,t.tZ)("div",{className:"markdown"},(0,t.tZ)("p",null,n[10].value,(0,t.tZ)("strong",null,n[11].value),n[12].value),(0,t.tZ)("h3",{id:"do--dont"},(0,t.tZ)(a.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#do--dont",sourceType:"a"},(0,t.tZ)("span",{className:"icon icon-link"})),"Do & Don't")),(0,t.tZ)(i.Z,null,(0,t.tZ)("img",{className:"preview-img no-padding bad",src:"https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*di8jS5EWYSIAAAAAAAAAAABkARQnAQ",alt:"Don't",description:"Don't put more than 1 primary button in the same group."}),(0,t.tZ)("img",{className:"preview-img no-padding good",src:"https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*3WUkT5pD1SUAAAAAAAAAAABkARQnAQ",alt:"Do",description:"1. Emphasize on the primary action. <br/>2. If there is no primary action, then default buttons is the safest choice."})),(0,t.tZ)(i.Z,null,(0,t.tZ)("img",{className:"preview-img no-padding bad",src:"https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*zBtTRq2xbTYAAAAAAAAAAABkARQnAQ",alt:"Don't",description:"Put 2 icons in the same button."}),(0,t.tZ)("img",{className:"preview-img no-padding good",src:"https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*EpwSTpaGPBgAAAAAAAAAAABkARQnAQ",alt:"Do",description:"1. Should place the buttons in the order of importance. <br/>2. The less important actions should be place on right or at bottom."}),(0,t.tZ)("img",{className:"preview-img no-padding good",src:"https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*3WUkT5pD1SUAAAAAAAAAAABkARQnAQ",alt:"Do",description:"1. Emphasize on the primary action. <br/>2. If there is no primary action, then default buttons is the safest choice."})),(0,t.tZ)("div",{className:"markdown"},(0,t.tZ)("h3",{id:"special-button-types"},(0,t.tZ)(a.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#special-button-types",sourceType:"a"},(0,t.tZ)("span",{className:"icon icon-link"})),"Special Button Types"),(0,t.tZ)("h4",{id:"dashed-button"},(0,t.tZ)(a.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#dashed-button",sourceType:"a"},(0,t.tZ)("span",{className:"icon icon-link"})),"Dashed Button")),(0,t.tZ)(i.Z,null,(0,t.tZ)("img",{className:"preview-img no-padding",src:"https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*gPmNQ6_YCcoAAAAAAAAAAABkARQnAQ"})),(0,t.tZ)("div",{className:"markdown"},(0,t.tZ)("p",null,n[13].value),(0,t.tZ)("h4",{id:"danger-button"},(0,t.tZ)(a.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#danger-button",sourceType:"a"},(0,t.tZ)("span",{className:"icon icon-link"})),"Danger Button")),(0,t.tZ)(i.Z,null,(0,t.tZ)("img",{className:"preview-img no-padding",src:"https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*OvNaQJrmqVMAAAAAAAAAAABkARQnAQ"})),(0,t.tZ)(i.Z,null,(0,t.tZ)("img",{className:"preview-img no-padding good",src:"https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*ujcXTqJ_IwwAAAAAAAAAAABkARQnAQ",alt:"Do",description:"If user's intention is to delete, use danger button to warn this action has risks."})),(0,t.tZ)(i.Z,null,(0,t.tZ)("img",{className:"preview-img no-padding good",src:"https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*o7EySrBPX9oAAAAAAAAAAABkARQnAQ",alt:"Do",description:"When system does not recommend the deletion action, we could set 'Cancel' as the primary action."})),(0,t.tZ)("div",{className:"markdown"},(0,t.tZ)("p",null,n[14].value),(0,t.tZ)("h4",{id:"ghost-button"},(0,t.tZ)(a.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#ghost-button",sourceType:"a"},(0,t.tZ)("span",{className:"icon icon-link"})),"Ghost Button"),(0,t.tZ)("p",null,n[15].value)),(0,t.tZ)(i.Z,null,(0,t.tZ)("img",{className:"preview-img no-padding",src:"https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*-wORTrNJ6YUAAAAAAAAAAABkARQnAQ"})),(0,t.tZ)("div",{className:"markdown"},(0,t.tZ)("h4",{id:"call-to-action"},(0,t.tZ)(a.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#call-to-action",sourceType:"a"},(0,t.tZ)("span",{className:"icon icon-link"})),"Call to Action")),(0,t.tZ)(i.Z,null,(0,t.tZ)("img",{className:"preview-img no-padding",src:"https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*32zdRqTjDhYAAAAAAAAAAABkARQnAQ"})),(0,t.tZ)("div",{className:"markdown"},(0,t.tZ)("p",null,n[16].value),(0,t.tZ)("h2",{id:"placement"},(0,t.tZ)(a.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#placement",sourceType:"a"},(0,t.tZ)("span",{className:"icon icon-link"})),"Placement")),(0,t.tZ)(i.Z,null,(0,t.tZ)("img",{className:"preview-img no-padding",src:"https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*B8D0RJnirLkAAAAAAAAAAABkARQnAQ"})),(0,t.tZ)("div",{className:"markdown"},(0,t.tZ)("p",null,n[17].value),(0,t.tZ)("h3",{id:"how-to-decide-button-placement"},(0,t.tZ)(a.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#how-to-decide-button-placement",sourceType:"a"},(0,t.tZ)("span",{className:"icon icon-link"})),"How to Decide Button Placement?"),(0,t.tZ)("h4",{id:"pagecardsection-presents-a-subject-where-it-could-be-broken-into-3-areas"},(0,t.tZ)(a.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#pagecardsection-presents-a-subject-where-it-could-be-broken-into-3-areas",sourceType:"a"},(0,t.tZ)("span",{className:"icon icon-link"})),"Page/Card/Section presents a subject, where it could be broken into 3 areas:")),(0,t.tZ)(i.Z,null,(0,t.tZ)("img",{className:"preview-img no-padding",src:"https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*iVZpRpdN_2AAAAAAAAAAAABkARQnAQ"})),(0,t.tZ)("div",{className:"markdown"},(0,t.tZ)("ul",null,(0,t.tZ)("li",null,n[18].value),(0,t.tZ)("li",null,n[19].value),(0,t.tZ)("li",null,n[20].value)),(0,t.tZ)("p",null,n[21].value),(0,t.tZ)("h3",{id:"when-to-put-buttons-in-the-footer"},(0,t.tZ)(a.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#when-to-put-buttons-in-the-footer",sourceType:"a"},(0,t.tZ)("span",{className:"icon icon-link"})),"When to Put Buttons in the Footer?")),(0,t.tZ)(i.Z,null,(0,t.tZ)("img",{className:"preview-img no-padding",src:"https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*KGGWQLCBfm0AAAAAAAAAAABkARQnAQ"})),(0,t.tZ)("div",{className:"markdown"},(0,t.tZ)("ul",null,(0,t.tZ)("li",null,n[22].value),(0,t.tZ)("li",null,n[23].value)),(0,t.tZ)("p",null,n[24].value),(0,t.tZ)("h2",{id:"ordering"},(0,t.tZ)(a.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#ordering",sourceType:"a"},(0,t.tZ)("span",{className:"icon icon-link"})),"Ordering"),(0,t.tZ)("h3",{id:"button-ordering"},(0,t.tZ)(a.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#button-ordering",sourceType:"a"},(0,t.tZ)("span",{className:"icon icon-link"})),"Button Ordering")),(0,t.tZ)(i.Z,null,(0,t.tZ)("img",{className:"preview-img no-padding",src:"https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*NcPDQI3IX8YAAAAAAAAAAABkARQnAQ"})),(0,t.tZ)("div",{className:"markdown"},(0,t.tZ)("p",null,n[25].value),(0,t.tZ)("p",null,(0,t.tZ)("strong",null,n[26].value)),(0,t.tZ)("ul",null,(0,t.tZ)("li",null,n[27].value,(0,t.tZ)("strong",null,n[28].value)),(0,t.tZ)("li",null,n[29].value)),(0,t.tZ)("h3",{id:"button-group"},(0,t.tZ)(a.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#button-group",sourceType:"a"},(0,t.tZ)("span",{className:"icon icon-link"})),"Button Group")),(0,t.tZ)(i.Z,null,(0,t.tZ)("img",{className:"preview-img no-padding good",src:"https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*tK-AQaE5h1YAAAAAAAAAAABkARQnAQ",alt:"Do"}),(0,t.tZ)("img",{className:"preview-img no-padding bad",src:"https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*_gU7ToHiZz4AAAAAAAAAAABkARQnAQ",alt:"Don't",description:"When button group has no space in between, it is easy to confuse it with Toggle Button."})),(0,t.tZ)("div",{className:"markdown"},(0,t.tZ)("p",null,n[30].value),(0,t.tZ)("h3",{id:"grouping-buttons"},(0,t.tZ)(a.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#grouping-buttons",sourceType:"a"},(0,t.tZ)("span",{className:"icon icon-link"})),"Grouping Buttons"),(0,t.tZ)("p",null,n[31].value)),(0,t.tZ)(i.Z,null,(0,t.tZ)("img",{className:"preview-img no-padding",src:"https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*x7YsTafH5osAAAAAAAAAAABkARQnAQ"})),(0,t.tZ)("div",{className:"markdown"},(0,t.tZ)("p",null,(0,t.tZ)("strong",null,n[32].value)),(0,t.tZ)("br",null)),(0,t.tZ)(i.Z,null,(0,t.tZ)("img",{className:"preview-img no-padding good",src:"https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*Qn-mQKxaQ5kAAAAAAAAAAABkARQnAQ",alt:"Do"}),(0,t.tZ)("img",{className:"preview-img no-padding bad",src:"https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*3bUZRbPiVBEAAAAAAAAAAABkARQnAQ",alt:"Don't",description:"If buttons are in the same group, no need to add dividers between them."})),(0,t.tZ)("div",{className:"markdown"},(0,t.tZ)("p",null,(0,t.tZ)("strong",null,n[33].value),n[34].value),(0,t.tZ)("h2",{id:"label"},(0,t.tZ)(a.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#label",sourceType:"a"},(0,t.tZ)("span",{className:"icon icon-link"})),"Label")),(0,t.tZ)(i.Z,null,(0,t.tZ)("img",{className:"preview-img no-padding good",src:"https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*33KsR66zTY8AAAAAAAAAAABkARQnAQ",alt:"Do"})),(0,t.tZ)(i.Z,null,(0,t.tZ)("img",{className:"preview-img no-padding bad",src:"https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*238RTb4kaPwAAAAAAAAAAABkARQnAQ",alt:"Don't",description:"Should use verb"})),(0,t.tZ)("div",{className:"markdown"},(0,t.tZ)("p",null,n[35].value),(0,t.tZ)("ul",null,(0,t.tZ)("li",null,n[36].value),(0,t.tZ)("li",null,n[37].value)),(0,t.tZ)("p",null,n[38].value),(0,t.tZ)("ul",null,(0,t.tZ)("li",null,(0,t.tZ)("p",null,n[39].value),(0,t.tZ)("blockquote",null,(0,t.tZ)("p",null,n[40].value))),(0,t.tZ)("li",null,(0,t.tZ)("p",null,n[41].value),(0,t.tZ)("blockquote",null,(0,t.tZ)("p",null,n[42].value)))))))}s.default=l}}]);
|
|
|