Master–Detail

Capability tags describe this specimen only; verify the implementation again in a real product.

{
  "states": [
    "unselected",
    "selected"
  ],
  "a11y": [
    "List items use named buttons",
    "Detail updates do not steal focus"
  ],
  "motion": "No animation required"
}

{
  "id": "master-detail",
  "type": "layout",
  "name": {
    "zh": "主从布局",
    "en": "Master–Detail"
  },
  "aliases": [
    "List Detail",
    "列表详情",
    "列表与详情"
  ],
  "granularity": "page",
  "intents": [
    "browse-detail",
    "organize-content"
  ],
  "tags": [
    "list",
    "detail",
    "split view",
    "navigation",
    "browsing"
  ],
  "definition": "Keep a selectable list of items available while showing the details of the current selection.",
  "boundary": "Columns alone do not make a master-detail layout. The defining relationship is that selecting an item updates its details.",
  "signature": [
    "An explicit current selection",
    "A linked list and detail view",
    "A way back on narrow screens"
  ],
  "when": [
    "People repeatedly inspect individual items in detail",
    "The list context should remain available"
  ],
  "when_not": [
    "People need to compare many fields across several items simultaneously",
    "Squeezing two unreadable columns onto a narrow screen"
  ],
  "tradeoff": "Browsing stays continuous, but narrow spaces may require navigation between list and detail views.",
  "comparison": {
    "focus": "Inspecting items one at a time",
    "mechanism": "Selection drives the detail view",
    "cost": "Requires selection state and a narrow-screen return path"
  },
  "sources": [
    {
      "id": "apple-split",
      "title": "Apple HIG · Split views",
      "url": "https://developer.apple.com/design/human-interface-guidelines/split-views",
      "claim": "A selection in the primary pane can drive secondary content; compact environments require adaptation.",
      "checkedAt": "2026-09-15",
      "archive": {
        "lookupUrl": "https://web.archive.org/web/20260915*/https://developer.apple.com/design/human-interface-guidelines/split-views",
        "status": "available",
        "checkedAt": "2026-09-15T16:49:14.303Z",
        "jobId": "spn2-84fca51c124f03df7c3e2575ea70e1b5032b0347",
        "url": "https://web.archive.org/web/20260915165049/https://developer.apple.com/design/human-interface-guidelines/split-views",
        "timestamp": "20260915165049"
      }
    }
  ],
  "relations": [
    {
      "target": "bento",
      "kind": "alternative",
      "condition": "Choosing the main browsing structure",
      "reason": "Master-detail favors individual inspection; Bento favors an overview.",
      "basis": "editorial"
    },
    {
      "target": "inline-edit",
      "kind": "composes_with",
      "condition": "Editing a short field in the detail view",
      "reason": "Editing can retain the current browsing context.",
      "basis": "editorial"
    }
  ],
  "rules": [
    {
      "when": "An item is selected in the list",
      "instruction": "Keep the selection visible and update the corresponding details.",
      "strength": "must",
      "basis": "editorial"
    },
    {
      "when": "Space is insufficient",
      "instruction": "Provide a complete, reversible path from the list to an item and back.",
      "strength": "must",
      "basis": "editorial"
    }
  ],
  "behavior": {
    "states": [
      "unselected",
      "selected"
    ],
    "a11y": [
      "List items use named buttons",
      "Detail updates do not steal focus"
    ],
    "motion": "No animation required"
  },
  "demo": "master-detail",
  "version": "0.1.0",
  "editorialStatus": "sample-reviewed",
  "requirements": [],
  "demoCapabilities": [
    "keyboard",
    "reduced_motion"
  ],
  "implementationNote": "Capability tags describe this specimen only; verify the implementation again in a real product.",
  "searchTerms": [
    "列表",
    "详情",
    "分栏",
    "导航",
    "查阅"
  ]
}