reopt designreopt design
DocsExploreToolsPricingBuilder
시작하기
개요
시작하기
Mission
핵심 개념
핵심 개념
Recipes
Adapters
구축·운영
Agent Contract
Builder Rollout
Builder Manager
Rollout Playbook
컴포넌트 · Workspaces
ShellPage
ListWorkspace
DetailWorkspace
EditorWorkspace
DashboardWorkspace
LandingWorkspace
컴포넌트 · Layout
ShellProvider
ShellAppShell
ShellLandingPage
ShellFullscreenToolSurface
컴포넌트 · Navigation
ShellCollapsibleNav
ShellNavItem
ShellNavGroup
ShellNavAccordion
컴포넌트 · Panels
ShellResizableLayout
ShellResizeHandle
ShellBottomBar
ShellFlyoutAside
ShellHeaderStackProvider
컴포넌트 · Helpers
ShellSection
ShellStateBoundary
ShellSpacing
ShellPolicyToggler
컴포넌트 · Adapters
ShellDataGridAdapter
ShellEditorAdapter
Oopt-shell
reopt designreopt design

AI 시대를 위한 디자인 시스템

  • 문서
  • 가격
  • 릴리즈 노트
  • GitHub
  • 서비스 약관
  • 개인정보처리방침

© 2026 reopt-ai. All rights reserved.

ShellPolicyToggler

harness-helper

정책 토글러. density, contentWidth, motionPolicy, navigationMode를 UI로 전환합니다.

100%

variant="panel"

Policy Controls

Density
Content Width
Motion
Navigation

variant="compact"

{
  "density": "comfortable",
  "contentWidth": "wide",
  "motionPolicy": "reduced",
  "navigationMode": "sidebar"
}

ShellPolicyToggler Props

Prop타입기본값설명
policy*ResolvedShellPolicy—현재 정책 상태
onPolicyChange*(patch: Partial<ShellPolicy>) => void—정책 변경 핸들러
controlsControlKey[]—표시할 컨트롤 목록 (기본 ["density","contentWidth","motionPolicy","navigationMode"])
variant"compact" | "panel"—레이아웃 변형 (기본 panel)

Import

tsx
import { ShellPolicyToggler } from "@reopt-ai/opt-shell";
PreviousShellSpacing문서
ShellSpacing 페이지로 이동
NextShellDataGridAdapter문서