Style Gallery.
Layout레시피

Command Surface

Compose a tool-heavy shell with stable command and content regions.

GitHub에서 원문 보기 ↗새 탭
원문 가이드 ENGLISH

DOM And Source Order

Place primary commands before secondary command groups when they operate on the same surface. Keep command labels and controlled regions connected by accessible names or headings.

Scroll Ownership

The shell body owns content scrolling. Command rows should wrap when possible; use reel only when horizontal scanning is part of the interaction model.

Accessibility Checklist

  • Source order: Put primary commands before secondary commands and before the content region they affect when the command is the task entry point.
  • Focus expectation: Keyboard focus must reach every command, preserve visible focus, and return to the edited or inspected content after command execution when appropriate.
  • Scroll expectation: Keep fixed command regions outside the body scroll container; if command groups overflow horizontally, provide a named scroll model and keyboard path.
  • Semantic risk: Icon-only or compact commands need accessible names, state, and grouping before layout classes compress them.
  • Cognitive risk: Tool-heavy surfaces increase recognition and mode burden; keep command grouping stable and avoid moving commands between breakpoints without a documented overflow model.
  • Verification method: Pair automated accessible-name checks with manual keyboard traversal, focus-return, and mode-state review; reserve debt for commands that intentionally require later assistive-technology testing.

Responsive Behavior

At narrow widths, command groups should wrap into stable rows or move into a declared overflow region. Do not let command text resize the shell.

Constraints And Change Points

Set explicit gaps for command groups and explicit shell height when the body scrolls internally. Keep fixed command regions outside the body scroll container.

When Not To Use

Do not use this recipe for a simple content page with one or two actions. A cluster inside normal document flow is enough.

IA Navigation

Parent: Layout Recipes. Next: Quality Gates for claim checks, or Layout Pattern Catalog when replacing a primitive.

Layout 전체 ↗