Page History
...
- Drive presentation by setting
state: expandedwhen data indicates details should be visible (e.g., initially show details for the most relevant card). - Use
state: disabledto reflect data-guarded conditions where the card should be visible but non-interactive until ready.
...
Dos &
...
Don’ts
| Do | Don’t | Article setting(s) |
|---|---|---|
| Write a short, specific title that names the card’s content. | Use vague titles or full sentences that wrap. | title |
| Use the subtitle for secondary qualifiers (e.g., status or brief context). | Repeat the title in the subtitle or add unrelated info. | subtitle |
| Mark the selected card as active for clear emphasis. | Indicate selection with content changes alone. | state: active |
| Disable cards that users shouldn’t interact with yet. | Leave non-functional cards appearing interactive. | state: disabled |
| Expand a card to show extended details when they’re needed. | Stuff all details into the collapsed view. | state: expanded |
| Combine expanded + active when the open card is also the current focus. | Toggle conflicting states unpredictably across cards. | state: expanded, state: active |
| Trigger logic on data changes instead of relying on silent updates. | Leave changes unhandled so the UI drifts out of sync. | event: On Change, add event action |
| Name the component clearly for maintainers. | Keep the default, non-descriptive component name. | component name |
...
