You can think of a component as a menu. There are rows and columns in this menu, and each column has cells set up in a 12-grid method. Every cell in a column can be a different type of element, like a radio button, text field, card, etc. Before moving on to the next steps, you must make sure that your component is designed correctly.
Attributes of Component Cells
Each cell in the component grid has its own set of properties that determine how it works and how it looks. Some of these qualities are:
- Type: This tells you what kind of element is in the cell, like a choice button, text field, or card.
- Content: This is the information that the cell will show.
- Grid Span: This value tells you how many of the 12 grids the cell will take up, which changes its width.
- Style: This part has features like color, font, and background that make sure the cell fits in with the rest of the design.
- Interaction: Tells the cell what to do when the user clicks or selects something.
Viewpoint of the User
From the user's point of view, a component cell is an easy-to-understand and blend-in part of the layout. Users deal with these cells based on what kind they are and what they're used for. As an example:
- Radio Button: This lets users choose a choice from a group.
- Text Field: This is where users can enter information or read text.
- Card: Users can see a summary of information with a unified layout that may include text and pictures.
componentCellsetComponentcomponentPushEvent