ant-design/f793f00b-async.2eea3952.js

(("undefined"!=typeof globalThis?globalThis:self).makoChunk_antd=("undefined"!=typeof globalThis?globalThis:self).makoChunk_antd||[]).push([["f793f00b"],{d46e414b:function(e,a,s){"use strict";s.d(a,"__esModule",{value:!0}),s.d(a,"texts",{enumerable:!0,get:function(){return n;}}),s("1e266275");let n=[{value:"A form page is a type of page used for information addition and entry. It ensures that users enter information according to requirements and submit it for system use or guide users in application settings.",paraId:0},{value:"Help users clearly understand the current page tasks, quickly find and locate modification targets, easily and accurately understand the meaning and effects of form items, while simplifying the filling process, ensuring that users can complete tasks accurately, easily, and quickly.",paraId:1,tocIndex:0},{value:"\n  ",paraId:2},{value:"\n    ",paraId:2},{value:"\n    ",paraId:2},{value:"\n      ",paraId:2},{value:"\n      ",paraId:2},{value:"Use reasonable information organization and form components to enable users to quickly complete form page tasks.",paraId:3,tocIndex:2},{value:"\n    ",paraId:2},{value:"\n  ",paraId:2},{value:"\n  ",paraId:2},{value:"\n    ",paraId:2},{value:"\n    ",paraId:2},{value:"\n      ",paraId:2},{value:"\n      ",paraId:2},{value:"1. Quickly locate important information and target options;",paraId:2},{value:"\n      ",paraId:2},{value:"2. Titles, options, and prompts accurately convey meanings;",paraId:2},{value:"\n      ",paraId:2},{value:"3. Allow users to perceive the cause and effect of different operations and respond promptly with relevant feedback.",paraId:2},{value:"\n    ",paraId:2},{value:"\n  ",paraId:2},{value:"\n  ",paraId:2},{value:"\n    ",paraId:2},{value:"\n    ",paraId:2},{value:"\n      ",paraId:2},{value:"\n      ",paraId:2},{value:"Reasonable mechanisms to ensure the consequences of operations, such as providing distributed or instant save mechanisms for complex forms; offering regret and quick fix functions like return, reset, cancel, clear, and undo for different scenario tasks.",paraId:4,tocIndex:4},{value:"\n    ",paraId:2},{value:"\n  ",paraId:2},{value:"When organizing and presenting form items on the form page, pay attention to concise expression, efficiency, and accuracy to avoid increasing the cost of user input.",paraId:5,tocIndex:5},{value:"Do not use different components or presentation forms for the same type of content in a form page, as it increases the user's comprehension cost.",paraId:6},{value:"The titles and prompts of form items should not use incomprehensible words or be too long, causing high comprehension costs. If uncommon words are unavoidable, use auxiliary elements like help descriptions.",paraId:7},{value:'Avoid filling hints with redundant correct statements, e.g., an input hint for a form item called "Name" is "Please enter your name."',paraId:8},{value:"Form page templates focus on the experience of submitting a single form. According to the task complexity, four layout solutions are provided:",paraId:9,tocIndex:6},{value:"Normal Layout",paraId:10,tocIndex:6},{value:"Task Decomposition and Arrangement",paraId:10,tocIndex:6},{value:"Specific Scenarios",paraId:10,tocIndex:6},{value:"Lay out all the information that needs to be filled in. Suitable for forms with few content items that cannot be grouped by relevance.",paraId:11,tocIndex:7},{value:"When to Use",paraId:12},{value:"When a simple and quick task needs to be completed, e.g., creating with minimal information input.",paraId:13},{value:"Decompose large, complex tasks into multiple parts and group them by relevance to reduce user input burden. Although each part is handled individually, they are ultimately submitted together. Suitable for large, complex forms. Proper task segmentation can reduce user error rates.",paraId:14,tocIndex:9},{value:"When to Use",paraId:15},{value:"Organize the information users need to fill and confirm in a linear process, using step bars to inform users of the complete process and progress. Often, users are asked to confirm the information again before the final submission, and clear feedback is provided at the end of the process. Suitable for tasks with clear linear logic.",paraId:16},{value:"When to Use",paraId:17},{value:"When the form page requires a lot of content to be filled in a single task, and different content can be classified and summarized.",paraId:18},{value:"When to Use",paraId:19,tocIndex:12},{value:"Dynamic Increase/Decrease: Recommended when the number of form items \u22643, and each input box does not require a separate title.",paraId:20},{value:"Editable Table: Recommended when the number of form items is between 2 and 5, so each row of content can be fully displayed.",paraId:21},{value:"Collapsible Panel Editing: Recommended when the number of form items is between 6 and 8.",paraId:22},{value:"Drawer Editing: Recommended when the number of form items is >8.",paraId:23},{value:"Rule Tree: Applied in rule editing scenarios.",paraId:24},{value:"Suitable for pages that need to add one or more objects, and each object requires multiple groups of data to be added or edited.",paraId:25},{value:"When to Use",paraId:26},{value:"Personal profiles, application configuration, and other settings pages are infrequently used. Generally, users will not frequently modify them after operation.",paraId:27},{value:"Usage Suggestions",paraId:28},{value:"Choose one setting mode per page:",paraId:29},{value:"Instant Effect Mode: Changes take effect immediately when users modify options;",paraId:30},{value:"Submission Effect Mode: Use submission effect mode when there are interdependencies among settings items.",paraId:30},{value:"Determine whether to group according to the number of settings items:",paraId:31},{value:"Number <7, grouping is not recommended;",paraId:32},{value:"Number 7~15, grouping is recommended;",paraId:32},{value:"Number >15, tab grouping is recommended.",paraId:32},{value:"Template - Login",paraId:2},{value:"Ant Design standard login template",paraId:33},{value:"Template - Register",paraId:2},{value:"Ant Design standard registration template",paraId:34},{value:"The core of a form page consists of form items. It is recommended to familiarize yourself with the ",paraId:35,tocIndex:18},{value:"basic rules of forms",paraId:36,tocIndex:18},{value:" before designing;",paraId:35,tocIndex:18},{value:"Organize the information types involved in the user's current information entry tasks, and determine the components to be used according to the ",paraId:35,tocIndex:18},{value:"Ant Design data entry rules",paraId:37,tocIndex:18},{value:".",paraId:35,tocIndex:18},{value:"In a single form page, reasonable layout should be made according to the amount of content to balance page display and user efficiency. Form page layout can be divided into four gradients from simple to complex, and each gradient is compatible with the previous layout method.",paraId:38,tocIndex:19},{value:"Arrange all the information to be filled out from top to bottom in a single column within one area, guiding users to read vertically. According to ",paraId:39},{value:"research",paraId:39},{value:", this is the most efficient layout method for task completion.",paraId:39},{value:"When space is limited, form items with shorter widths and relevant content can be grouped into one line, suggesting grouping.",paraId:40},{value:"When there is a lot of content in one area that can be categorized, in-area grouping can be achieved by distinguishing titles.",paraId:41},{value:"When there is a lot of content on a page (usually more than two screens) that can be categorized, card grouping can be used to carry it. Each card needs to include a large title.",paraId:42},{value:"The determination of which layout method to use is similar to the ",paraId:43},{value:"Detail Page",paraId:44},{value:", and should be sorted out from the two dimensions of information complexity and relevance. Then choose the appropriate template to quickly build the page.",paraId:43},{value:"Form",paraId:45,tocIndex:26},{value:"Steps",paraId:46,tocIndex:26},{value:"Label Placement in Forms",paraId:47,tocIndex:27}];},f793f00b:function(e,a,s){"use strict";s.d(a,"__esModule",{value:!0}),s.d(a,"default",{enumerable:!0,get:function(){return u;}});var n=s("777fffbe"),t=s("f19d2b93"),i=n._(s("75f4da45")),r=n._(s("97c488ea")),d=n._(s("c96b0d01")),l=s("5b220c3d"),o=s("9c86e52a"),c=s("d46e414b"),u=function(){return(0,t.jsx)(o.DumiPage,{children:(0,t.jsx)(l.Suspense,{fallback:(0,t.jsx)(d.default,{}),children:(0,t.jsxs)(t.Fragment,{children:[(0,t.jsxs)("div",{className:"markdown",children:[(0,t.jsx)("p",{children:c.texts[0].value}),(0,t.jsxs)("h2",{id:"design-goals",children:[(0,t.jsx)(r.default,{"aria-hidden":"true",tabIndex:"-1",href:"#design-goals",sourceType:"a",children:(0,t.jsx)("span",{className:"icon icon-link"})}),"Design Goals"]}),(0,t.jsx)("p",{children:c.texts[1].value}),(0,t.jsxs)("h2",{id:"design-principles",children:[(0,t.jsx)(r.default,{"aria-hidden":"true",tabIndex:"-1",href:"#design-principles",sourceType:"a",children:(0,t.jsx)("span",{className:"icon icon-link"})}),"Design Principles"]}),(0,t.jsxs)("div",{className:"design-inline-cards",children:[c.texts[2].value,(0,t.jsxs)("div",{children:[c.texts[3].value,(0,t.jsx)("img",{src:"https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*4IjJTbMSsmEAAAAAAAAAAABkARQnAQ"}),c.texts[4].value,(0,t.jsxs)("div",{children:[c.texts[5].value,(0,t.jsxs)("h4",{id:"efficient",children:[(0,t.jsx)(r.default,{"aria-hidden":"true",tabIndex:"-1",href:"#efficient",sourceType:"a",children:(0,t.jsx)("span",{className:"icon icon-link"})}),"Efficient"]}),c.texts[6].value,(0,t.jsx)("p",{children:c.texts[7].value}),c.texts[8].value]}),c.texts[9].value]}),c.texts[10].value,(0,t.jsxs)("div",{children:[c.texts[11].value,(0,t.jsx)("img",{src:"https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*lEtuTZi2GvIAAAAAAAAAAABkARQnAQ"}),c.texts[12].value,(0,t.jsxs)("div",{children:[c.texts[13].value,(0,t.jsxs)("h4",{id:"clear",children:[(0,t.jsx)(r.default,{"aria-hidden":"true",tabIndex:"-1",href:"#clear",sourceType:"a",children:(0,t.jsx)("span",{className:"icon icon-link"})}),"Clear"]}),c.texts[14].value,(0,t.jsx)("div",{children:c.texts[15].value}),c.texts[16].value,(0,t.jsx)("div",{children:c.texts[17].value}),c.texts[18].value,(0,t.jsx)("div",{children:c.texts[19].value}),c.texts[20].value]}),c.texts[21].value]}),c.texts[22].value,(0,t.jsxs)("div",{children:[c.texts[23].value,(0,t.jsx)("img",{src:"https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*R9PIRbGpFfYAAAAAAAAAAABkARQnAQ"}),c.texts[24].value,(0,t.jsxs)("div",{children:[c.texts[25].value,(0,t.jsxs)("h4",{id:"security",children:[(0,t.jsx)(r.default,{"aria-hidden":"true",tabIndex:"-1",href:"#security",sourceType:"a",children:(0,t.jsx)("span",{className:"icon icon-link"})}),"Security"]}),c.texts[26].value,(0,t.jsx)("p",{children:c.texts[27].value}),c.texts[28].value]}),c.texts[29].value]})]}),(0,t.jsxs)("h3",{id:"do--dont",children:[(0,t.jsx)(r.default,{"aria-hidden":"true",tabIndex:"-1",href:"#do--dont",sourceType:"a",children:(0,t.jsx)("span",{className:"icon icon-link"})}),"Do & Don\u2019t"]}),(0,t.jsx)("p",{children:c.texts[30].value})]}),(0,t.jsx)(i.default,{children:(0,t.jsx)("img",{className:"preview-img no-padding bad",src:"https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*k9DyRYLzjcoAAAAAAAAAAABkARQnAQ",alt:"Incorrect Example"})}),(0,t.jsxs)("div",{className:"markdown",children:[(0,t.jsx)("p",{children:c.texts[31].value}),(0,t.jsx)("br",{})]}),(0,t.jsxs)(i.default,{children:[(0,t.jsx)("img",{className:"preview-img no-padding good",src:"https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*A0EBQ6eAkiwAAAAAAAAAAABkARQnAQ",alt:"Correct Example"}),(0,t.jsx)("img",{className:"preview-img no-padding bad",src:"https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*V56PRpofMRUAAAAAAAAAAABkARQnAQ",alt:"Incorrect Example"})]}),(0,t.jsxs)("div",{className:"markdown",children:[(0,t.jsx)("p",{children:c.texts[32].value}),(0,t.jsx)("br",{})]}),(0,t.jsx)(i.default,{children:(0,t.jsx)("img",{className:"preview-img no-padding bad",src:"https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*EC9uR6LiI0IAAAAAAAAAAABkARQnAQ",alt:"Incorrect Example"})}),(0,t.jsxs)("div",{className:"markdown",children:[(0,t.jsx)("p",{children:c.texts[33].value}),(0,t.jsx)("br",{}),(0,t.jsxs)("h2",{id:"how-to-design",children:[(0,t.jsx)(r.default,{"aria-hidden":"true",tabIndex:"-1",href:"#how-to-design",sourceType:"a",children:(0,t.jsx)("span",{className:"icon icon-link"})}),"How to Design"]}),(0,t.jsx)("p",{children:c.texts[34].value}),(0,t.jsxs)("ul",{children:[(0,t.jsx)("li",{children:c.texts[35].value}),(0,t.jsx)("li",{children:c.texts[36].value}),(0,t.jsx)("li",{children:c.texts[37].value})]}),(0,t.jsxs)("h3",{id:"normal-layout",children:[(0,t.jsx)(r.default,{"aria-hidden":"true",tabIndex:"-1",href:"#normal-layout",sourceType:"a",children:(0,t.jsx)("span",{className:"icon icon-link"})}),"Normal Layout"]}),(0,t.jsx)("p",{children:c.texts[38].value}),(0,t.jsxs)("h4",{id:"template---basic-form",children:[(0,t.jsx)(r.default,{"aria-hidden":"true",tabIndex:"-1",href:"#template---basic-form",sourceType:"a",children:(0,t.jsx)("span",{className:"icon icon-link"})}),"Template - Basic Form"]})]}),(0,t.jsx)(i.default,{children:(0,t.jsx)("img",{className:"preview-img no-padding",src:"https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*c7b6TpKWl-cAAAAAAAAAAABkARQnAQ"})}),(0,t.jsxs)("div",{className:"markdown",children:[(0,t.jsx)("p",{children:(0,t.jsx)("strong",{children:c.texts[39].value})}),(0,t.jsx)("p",{children:c.texts[40].value}),(0,t.jsxs)("h3",{id:"task-decomposition-and-arrangement",children:[(0,t.jsx)(r.default,{"aria-hidden":"true",tabIndex:"-1",href:"#task-decomposition-and-arrangement",sourceType:"a",children:(0,t.jsx)("span",{className:"icon icon-link"})}),"Task Decomposition and Arrangement"]}),(0,t.jsx)("p",{children:c.texts[41].value}),(0,t.jsxs)("h4",{id:"template---basic-step-form",children:[(0,t.jsx)(r.default,{"aria-hidden":"true",tabIndex:"-1",href:"#template---basic-step-form",sourceType:"a",children:(0,t.jsx)("span",{className:"icon icon-link"})}),"Template - Basic Step Form"]})]}),(0,t.jsx)(i.default,{children:(0,t.jsx)("img",{className:"preview-img no-padding",src:"https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*E8wRRpLbdyoAAAAAAAAAAABkARQnAQ"})}),(0,t.jsxs)("div",{className:"markdown",children:[(0,t.jsx)("p",{children:(0,t.jsx)("strong",{children:c.texts[42].value})}),(0,t.jsx)("p",{children:c.texts[43].value}),(0,t.jsxs)("h4",{id:"template---grouped-form",children:[(0,t.jsx)(r.default,{"aria-hidden":"true",tabIndex:"-1",href:"#template---grouped-form",sourceType:"a",children:(0,t.jsx)("span",{className:"icon icon-link"})}),"Template - Grouped Form"]})]}),(0,t.jsx)(i.default,{children:(0,t.jsx)("img",{className:"preview-img no-padding",src:"https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*k6kGSLGZsT0AAAAAAAAAAABkARQnAQ"})}),(0,t.jsxs)("div",{className:"markdown",children:[(0,t.jsx)("p",{children:(0,t.jsx)("strong",{children:c.texts[44].value})}),(0,t.jsx)("p",{children:c.texts[45].value}),(0,t.jsxs)("h4",{id:"template---editable-list-in-development",children:[(0,t.jsx)(r.default,{"aria-hidden":"true",tabIndex:"-1",href:"#template---editable-list-in-development",sourceType:"a",children:(0,t.jsx)("span",{className:"icon icon-link"})}),"Template - Editable List (In Development)"]}),(0,t.jsx)("p",{children:(0,t.jsx)("strong",{children:c.texts[46].value})})]}),(0,t.jsx)(i.default,{children:(0,t.jsx)("img",{className:"preview-img no-padding",src:"https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*NLEeSLhLA3EAAAAAAAAAAABkARQnAQ"})}),(0,t.jsxs)("div",{className:"markdown",children:[(0,t.jsx)("p",{children:c.texts[47].value}),(0,t.jsx)("br",{})]}),(0,t.jsx)(i.default,{children:(0,t.jsx)("img",{className:"preview-img no-padding",src:"https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*PvoTSbqKywEAAAAAAAAAAABkARQnAQ"})}),(0,t.jsxs)("div",{className:"markdown",children:[(0,t.jsx)("p",{children:c.texts[48].value}),(0,t.jsx)("br",{})]}),(0,t.jsx)(i.default,{children:(0,t.jsx)("img",{className:"preview-img no-padding",src:"https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*DWlCQazb-HQAAAAAAAAAAABkARQnAQ"})}),(0,t.jsxs)("div",{className:"markdown",children:[(0,t.jsx)("p",{children:c.texts[49].value}),(0,t.jsx)("br",{})]}),(0,t.jsx)(i.default,{children:(0,t.jsx)("img",{className:"preview-img no-padding",src:"https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*ttDGTLid8M4AAAAAAAAAAABkARQnAQ"})}),(0,t.jsxs)("div",{className:"markdown",children:[(0,t.jsx)("p",{children:c.texts[50].value}),(0,t.jsx)("br",{})]}),(0,t.jsx)(i.default,{children:(0,t.jsx)("img",{className:"preview-img no-padding",src:"https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*p_wLTJEYOBgAAAAAAAAAAABkARQnAQ"})}),(0,t.jsxs)("div",{className:"markdown",children:[(0,t.jsx)("p",{children:c.texts[51].value}),(0,t.jsx)("p",{children:c.texts[52].value}),(0,t.jsxs)("h3",{id:"specific-scenario-templates",children:[(0,t.jsx)(r.default,{"aria-hidden":"true",tabIndex:"-1",href:"#specific-scenario-templates",sourceType:"a",children:(0,t.jsx)("span",{className:"icon icon-link"})}),"Specific Scenario Templates"]}),(0,t.jsxs)("h4",{id:"template---settings",children:[(0,t.jsx)(r.default,{"aria-hidden":"true",tabIndex:"-1",href:"#template---settings",sourceType:"a",children:(0,t.jsx)("span",{className:"icon icon-link"})}),"Template - Settings"]})]}),(0,t.jsx)(i.default,{children:(0,t.jsx)("img",{className:"preview-img no-padding",src:"https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*n9zkSKrDU8MAAAAAAAAAAABkARQnAQ"})}),(0,t.jsxs)("div",{className:"markdown",children:[(0,t.jsx)("p",{children:(0,t.jsx)("strong",{children:c.texts[53].value})}),(0,t.jsx)("p",{children:c.texts[54].value}),(0,t.jsx)("p",{children:(0,t.jsx)("strong",{children:c.texts[55].value})}),(0,t.jsx)("p",{children:c.texts[56].value}),(0,t.jsx)("blockquote",{children:(0,t.jsxs)("ul",{children:[(0,t.jsx)("li",{children:c.texts[57].value}),(0,t.jsx)("li",{children:c.texts[58].value})]})}),(0,t.jsx)("p",{children:c.texts[59].value}),(0,t.jsx)("blockquote",{children:(0,t.jsxs)("ul",{children:[(0,t.jsx)("li",{children:c.texts[60].value}),(0,t.jsx)("li",{children:c.texts[61].value}),(0,t.jsx)("li",{children:c.texts[62].value})]})}),(0,t.jsxs)("h4",{id:"template---login",children:[(0,t.jsx)(r.default,{"aria-hidden":"true",tabIndex:"-1",href:"#template---login",sourceType:"a",children:(0,t.jsx)("span",{className:"icon icon-link"})}),(0,t.jsx)(r.default,{href:"https://preview.pro.ant.design/user/login",sourceType:"a",children:c.texts[63].value})]})]}),(0,t.jsx)(i.default,{children:(0,t.jsx)("img",{className:"preview-img no-padding",src:"https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*ba6DR5U23nAAAAAAAAAAAABkARQnAQ"})}),(0,t.jsxs)("div",{className:"markdown",children:[(0,t.jsx)("p",{children:c.texts[64].value}),(0,t.jsxs)("h4",{id:"template---register",children:[(0,t.jsx)(r.default,{"aria-hidden":"true",tabIndex:"-1",href:"#template---register",sourceType:"a",children:(0,t.jsx)("span",{className:"icon icon-link"})}),(0,t.jsx)(r.default,{href:"https://preview.pro.ant.design/user/register",sourceType:"a",children:c.texts[65].value})]})]}),(0,t.jsx)(i.default,{children:(0,t.jsx)("img",{className:"preview-img no-padding",src:"https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*6U_gQ6MbrSYAAAAAAAAAAABkARQnAQ"})}),(0,t.jsxs)("div",{className:"markdown",children:[(0,t.jsx)("p",{children:c.texts[66].value}),(0,t.jsxs)("h2",{id:"design-suggestions",children:[(0,t.jsx)(r.default,{"aria-hidden":"true",tabIndex:"-1",href:"#design-suggestions",sourceType:"a",children:(0,t.jsx)("span",{className:"icon icon-link"})}),"Design Suggestions"]}),(0,t.jsxs)("h3",{id:"preparation",children:[(0,t.jsx)(r.default,{"aria-hidden":"true",tabIndex:"-1",href:"#preparation",sourceType:"a",children:(0,t.jsx)("span",{className:"icon icon-link"})}),"Preparation"]}),(0,t.jsxs)("ul",{children:[(0,t.jsxs)("li",{children:[c.texts[67].value,(0,t.jsx)(r.default,{to:"/components/form/",sourceType:"Link",children:c.texts[68].value}),c.texts[69].value]}),(0,t.jsxs)("li",{children:[c.texts[70].value,(0,t.jsx)(r.default,{to:"/docs/spec/data-entry/",sourceType:"Link",children:c.texts[71].value}),c.texts[72].value]})]}),(0,t.jsxs)("h3",{id:"layout-methods",children:[(0,t.jsx)(r.default,{"aria-hidden":"true",tabIndex:"-1",href:"#layout-methods",sourceType:"a",children:(0,t.jsx)("span",{className:"icon icon-link"})}),"Layout Methods"]}),(0,t.jsx)("p",{children:c.texts[73].value}),(0,t.jsxs)("h4",{id:"basic-layout",children:[(0,t.jsx)(r.default,{"aria-hidden":"true",tabIndex:"-1",href:"#basic-layout",sourceType:"a",children:(0,t.jsx)("span",{className:"icon icon-link"})}),"Basic Layout"]})]}),(0,t.jsx)(i.default,{children:(0,t.jsx)("img",{className:"preview-img no-padding",src:"https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*lacoSZduvVQAAAAAAAAAAABkARQnAQ"})}),(0,t.jsxs)("div",{className:"markdown",children:[(0,t.jsxs)("p",{children:[c.texts[74].value,(0,t.jsx)(r.default,{href:"https://www.uxmatters.com/mt/archives/2006/07/label-placement-in-forms.php",sourceType:"a",children:c.texts[75].value}),c.texts[76].value]}),(0,t.jsxs)("h4",{id:"weak-grouping",children:[(0,t.jsx)(r.default,{"aria-hidden":"true",tabIndex:"-1",href:"#weak-grouping",sourceType:"a",children:(0,t.jsx)("span",{className:"icon icon-link"})}),"Weak Grouping"]})]}),(0,t.jsx)(i.default,{children:(0,t.jsx)("img",{className:"preview-img no-padding",src:"https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*E7YuRo094e0AAAAAAAAAAABkARQnAQ"})}),(0,t.jsx)(i.default,{children:(0,t.jsx)("img",{className:"preview-img no-padding bad",src:"https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*Nd_nQLmFQQwAAAAAAAAAAABkARQnAQ",alt:"Incorrect Example",description:"To avoid confusion with the reading order of weakly grouped layouts, multiple column forms are prohibited within one area."})}),(0,t.jsxs)("div",{className:"markdown",children:[(0,t.jsx)("p",{children:c.texts[77].value}),(0,t.jsxs)("h4",{id:"in-area-grouping",children:[(0,t.jsx)(r.default,{"aria-hidden":"true",tabIndex:"-1",href:"#in-area-grouping",sourceType:"a",children:(0,t.jsx)("span",{className:"icon icon-link"})}),"In-Area Grouping"]})]}),(0,t.jsx)(i.default,{children:(0,t.jsx)("img",{className:"preview-img no-padding",src:"https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*eU8dRZUTEM8AAAAAAAAAAABkARQnAQ"})}),(0,t.jsxs)("div",{className:"markdown",children:[(0,t.jsx)("p",{children:c.texts[78].value}),(0,t.jsxs)("h4",{id:"card-grouping",children:[(0,t.jsx)(r.default,{"aria-hidden":"true",tabIndex:"-1",href:"#card-grouping",sourceType:"a",children:(0,t.jsx)("span",{className:"icon icon-link"})}),"Card Grouping"]})]}),(0,t.jsx)(i.default,{children:(0,t.jsx)("img",{className:"preview-img no-padding",src:"https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*VPEZRLBm1zwAAAAAAAAAAABkARQnAQ"})}),(0,t.jsxs)("div",{className:"markdown",children:[(0,t.jsx)("p",{children:c.texts[79].value}),(0,t.jsxs)("h4",{id:"determine-layout-method",children:[(0,t.jsx)(r.default,{"aria-hidden":"true",tabIndex:"-1",href:"#determine-layout-method",sourceType:"a",children:(0,t.jsx)("span",{className:"icon icon-link"})}),"Determine Layout Method"]})]}),(0,t.jsx)(i.default,{children:(0,t.jsx)("img",{className:"preview-img no-padding",src:"https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*DoKmSYGaYtYAAAAAAAAAAABkARQnAQ"})}),(0,t.jsxs)("div",{className:"markdown",children:[(0,t.jsxs)("p",{children:[c.texts[80].value,(0,t.jsx)(r.default,{to:"/docs/spec/detail-page#%E8%AE%BE%E8%AE%A1%E5%BB%BA%E8%AE%AE",sourceType:"Link",children:c.texts[81].value}),c.texts[82].value]}),(0,t.jsx)("br",{}),(0,t.jsxs)("h2",{id:"further-reading",children:[(0,t.jsx)(r.default,{"aria-hidden":"true",tabIndex:"-1",href:"#further-reading",sourceType:"a",children:(0,t.jsx)("span",{className:"icon icon-link"})}),"Further Reading"]}),(0,t.jsxs)("h3",{id:"which-modules-or-components-to-use",children:[(0,t.jsx)(r.default,{"aria-hidden":"true",tabIndex:"-1",href:"#which-modules-or-components-to-use",sourceType:"a",children:(0,t.jsx)("span",{className:"icon icon-link"})}),"Which Modules or Components to Use"]}),(0,t.jsxs)("ul",{children:[(0,t.jsx)("li",{children:(0,t.jsx)(r.default,{to:"/components/form-cn#header",sourceType:"Link",children:c.texts[83].value})}),(0,t.jsx)("li",{children:(0,t.jsx)(r.default,{to:"/components/steps-cn#header",sourceType:"Link",children:c.texts[84].value})})]}),(0,t.jsxs)("h3",{id:"external-reference",children:[(0,t.jsx)(r.default,{"aria-hidden":"true",tabIndex:"-1",href:"#external-reference",sourceType:"a",children:(0,t.jsx)("span",{className:"icon icon-link"})}),"External Reference"]}),(0,t.jsx)("ul",{children:(0,t.jsx)("li",{children:(0,t.jsx)(r.default,{href:"https://www.uxmatters.com/mt/archives/2006/07/label-placement-in-forms.php",sourceType:"a",children:c.texts[85].value})})})]})]})})});};}}]);