CSS: wrapper ​

body[class~="instui-display-flex"] — 앱 셸 행: 사이드 내비게이션, 헤더가 있는 컨테이너 및 선택적 패널.

✅ Wrapper를 사용해야 할 때:

  • 일관된 레이아웃 셸이 필요한 전체 Canvas 제품 페이지를 구성할 때

  • 페이지가 기본 네비게이션 앵커로 GlobalNav를 사용할 때

  • 페이지에 ContentTabList, TrailingContentArea 또는 UtilityPanel과 같은 사이드 패널이 필요할 때

  • 전체 페이지에 걸쳐 일관된 컨테이너 패딩과 콘텐츠 최대 너비가 필요할 때 🚫 Wrapper를 사용하지 말아야 할 때:

  • Modal, Tray 또는 Drawer를 구성할 때 — 이들은 자체 레이아웃 컨테이너를 가짐

  • 페이지의 하위 섹션만 래핑할 때 — Wrapper는 전체 페이지를 포함하며 부분 영역이 아님

접근성 ​

  • 주요 콘텐츠 영역을 <main> 랜드마크로 매핑하고 스킵 내비게이션 링크를 제공하여 키보드 사용자가 GlobalNav를 건너뛸 수 있게 할 것
  • ContentTabList에 role="navigation"과 "Page navigation" 같은 구별되는 aria-label을 부여하여 GlobalNav의 랜드마크와 분리할 것
  • TrailingContentArea에 role="complementary"와 "학생 세부 정보"처럼 콘텐츠를 반영하는 설명적 aria-label을 부여할 것
  • 각 UtilityPanel에 "AI assistant", "Notifications", "Filters"처럼 구별되는 aria-label을 부여할 것
  • UtilityPanel이 열릴 때 포커스를 패널로 이동시키고 닫힐 때 패널을 연 트리거로 포커스를 반환할 것

사용법 ​

css
@import "@pantoken/plugin-layouts/layouts.css";

구조 ​

text
body[class~="instui-display-flex"]
  side-nav-bar (component)
  .container
    modal.header (component)
      .top
        breadcrumb (component)
        .utilities (0..1)
          button + button (component, 1..n)
      .info
        .title
        .description (0..1)
      ‹content: header› (0..1)
      .actions (0..1)
        button + button (component, 1..n)
      tabs (component, 0..1)
        tabs (component)
      .filters (0..1)
        ‹content: filters›
    drawer-layout.content (component)
      list + card (component, 0..1)
      slot[name="content"].main
      slot[name="trailing"].trailing + card (component, 0..1)
  tabs.panel (component)
    card | agent-shell (component, 0..1)
flowchart TD n0["body[class~=&quot;instui-display-flex&quot;]"]:::cssdoc-root n1(["side-nav-bar"]):::cssdoc-component n2(".container"):::cssdoc-part n3(["modal.header"]):::cssdoc-component n4(".top"):::cssdoc-part n5(["breadcrumb"]):::cssdoc-component n6(".utilities"):::cssdoc-part n7(["button + button"]):::cssdoc-component n8(".info"):::cssdoc-part n9(".title"):::cssdoc-part n10(".description"):::cssdoc-part n11[/"‹content: header›"/]:::cssdoc-slot n12(".actions"):::cssdoc-part n13(["button + button"]):::cssdoc-component n14(["tabs"]):::cssdoc-component n15(["tabs"]):::cssdoc-component n16(".filters"):::cssdoc-part n17[/"‹content: filters›"/]:::cssdoc-slot n18(["drawer-layout.content"]):::cssdoc-component n19([".list + card"]):::cssdoc-component n20("slot[name=&quot;content&quot;].main"):::cssdoc-part n21(["slot[name=&quot;trailing&quot;].trailing + card"]):::cssdoc-component n22(["tabs.panel"]):::cssdoc-component n23(["card | agent-shell"]):::cssdoc-component n0 --> n1 n4 --> n5 n6 -->|1..n| n7 n4 -.->|0..1| n6 n3 --> n4 n8 --> n9 n8 -.->|0..1| n10 n3 --> n8 n3 -.->|0..1| n11 n12 -->|1..n| n13 n3 -.->|0..1| n12 n14 --> n15 n3 -.->|0..1| n14 n16 --> n17 n3 -.->|0..1| n16 n2 --> n3 n18 -.->|0..1| n19 n18 --> n20 n18 -.->|0..1| n21 n2 --> n18 n0 --> n2 n22 -.->|0..1| n23 n0 --> n22 click n1 "/api/css/side-nav-bar.md" click n3 "/api/css/modal.header.md" click n5 "/api/css/breadcrumb.md" click n7 "/api/css/button.md" click n13 "/api/css/button.md" click n14 "/api/css/tabs.md" click n15 "/api/css/tabs.md" click n18 "/api/css/drawer-layout.content.md" click n19 "/api/css/card.md" click n21 "/api/css/card.md" click n22 "/api/css/tabs.panel.md" classDef cssdoc-root stroke-width:1px; classDef cssdoc-part stroke-width:1px; classDef cssdoc-slot stroke-width:1px; classDef cssdoc-component stroke-width:1px;

슬롯 ​

슬롯설명
content페이지의 주요 콘텐츠.
filters헤더 내부의 선택적 필터 콘텐츠.
header페이지 설명 아래의 선택적 헤더 슬롯.
panel유틸리티 패널 콘텐츠.
trailing후행 보조 콘텐츠.

부분 ​

부분설명
.actions상단 행 끝의 선택적 헤더 버튼들.
.container헤더와 콘텐츠를 포함하는 메인 페이지 컬럼.
.content컨테이너 컬럼 내부의 주요 콘텐츠 영역.
.description제목 아래의 선택적 페이지 설명.
.filters헤더 내부의 선택적 필터 영역.
.header컨테이너 컬럼 내부의 헤더 영역.
.info페이지 제목과 선택적 설명을 담는 컨테이너.
.list콘텐츠 내부의 선택적 네비게이션 컬럼.
.main콘텐츠 내부의 메인 콘텐츠 컬럼.
.panel페이지 오른쪽에 열리는 유틸리티 패널 영역.
.tabs콘텐츠 행 시작에 있는 선택적 네비게이션 탭.
.title상단 행 아래의 페이지 제목.
.top브레드크럼과 유틸리티를 포함한 그리드 행.
.trailing콘텐츠 내부의 선택적 보조 컬럼.
.utilities상단 행 끝의 유틸리티 액션들.

상태 ​

상태설명
:optional—

사용된 토큰 ​

Token타입값
--instui-background-color-page——

하위 컴포넌트 ​

관련 항목 ​