Inspector 属性检视面板

右侧（可左）属性编辑面板：tab 条 + 可折叠分节 + 标签/控件行。设计工具右侧栏语义（role="complementary"）——与 oas-sidebar（导航菜单）的分工：inspector 是上下文属性编辑，sidebar 是 items/选中/嵌套导航。

基础用法

容器放 slot="tabs"（tab 条）与默认插槽（分节）；oas-inspector-tabs 的 items 走 JSON 声明式通道，value 属性即状态；分节用 oas-inspector-section，属性行用 oas-inspector-row。

tab 条 + 分节 + 属性行

示例代码

tab 条（oas-inspector-tabs）

点击/方向键切换（roving tabindex + Home/End，RTL 镜像），派发 oas-change（detail { value }）；value 属性即状态（组件切换后反射，宿主可监听协调）。

tab 切换反馈

点 tab 或用方向键切换，观察 oas-change 反馈。

示例代码

分节折叠（oas-inspector-section）

collapsible 启用折叠（aria-expanded 同步），open 属性即状态（点击切换并反射），default-open 初始展开；点击派发 oas-toggle（detail { name, open }）；slot="extra" 放标题行末端操作（与折叠点击解耦）。

折叠切换反馈

点分节标题折叠/展开，观察 oas-toggle 反馈（name + open）。

示例代码

行形态：键值 / 控件 / 混合值 / 行级复位

oas-inspector-row 双形态：无默认插槽内容为键值行（value 表格数字体），有插槽内容为控件行（50/50 分栏，表单件由宿主放入）；mixed 显示多选混合态（内置文案）；reset 显示行级复位钮，点击派发 oas-row-reset。

行形态全集

示例代码

斑马底与顶对齐（striped / align-top）

striped 给行加斑马底（值走 --oas-inspector-row-striped-bg，未设时回退 --oas-color-bg-hover，主题感知）；align-top 让标签与控件顶部对齐，适配高控件行（如多行文本）。

striped + align-top

示例代码

空态（empty）

empty 布尔属性切换无选中态：默认插槽隐藏、slot="empty" 显示（缺省内置文案「未选中对象」）。

无选中空态

先在画布中选中一个图层

示例代码

密度档（density）与栏位方向（side）、RTL

density="compact" 收紧行高/间距（24px 行高档，token 通道下发子件）；side="left" 切换分隔线方向语义钩子（定位仍由宿主布局决定）；容器 dir="rtl" 下自动镜像。

default / compact / side=left 对照

示例代码

API

oas-inspector

属性

属性	说明	类型	默认值
active-tab	当前 tab（配合 oas-inspector-tabs 使用；属性即状态）	—	—
density	密度档：default（默认，行高 28px）/ compact（行高 24px、间距收窄，token 通道下发子件）；非法值回落 default 并告警一次	string	default
empty	无选中态：默认插槽隐藏、empty 插槽（缺省内置文案「未选中对象」）显示	boolean	—
label	可访问名称（缺省走 i18n「属性面板」）	string	—
side	栏位方向：right（默认）/ left（仅分隔线方向语义钩子，定位由宿主布局决定）；非法值回落 right 并告警一次	string	right

插槽

名称	说明
默认	分节 / 内容区（oas-inspector-section 等）
empty	无选中态内容（覆盖内置文案）
footer	底部区
header	顶部区
tabs	tab 条通道（oas-inspector-tabs）

CSS 变量

CSS 变量	默认值
--oas-inspector-bg	color-mix(in srgb, var(--oas-color-text-primary) 3%, var(--oas-color-bg))
--oas-inspector-gap	var(--oas-space-2)
--oas-inspector-width	280px