For AI agents: the complete documentation index is available at https://a3s-lab.github.io/UI/v0.2.0/llms.txt, the full documentation bundle is available at https://a3s-lab.github.io/UI/v0.2.0/llms-full.txt, and this page is available as Markdown at https://a3s-lab.github.io/UI/v0.2.0/components/task-pane.md.
  • 简体中文
  • v0.2.0
  • 任务窗格

    任务窗格在当前编辑器旁承载上下文属性、评论、导航与智能助手工作流。

    Live previewHTML · CSS · JavaScript

    编辑器画布

    Usage

    <div class="relative"><!-- 建立覆盖定位上下文 -->
    <aside class="task-pane" data-responsive="overlay">
      <header>
        <h2>属性</h2>
        ...
      </header>
      <section>...</section>
      <footer>...</footer>
    </aside>
    </div>

    Parameters

    参数必填用途
    语义化 header推荐标题、关闭或更多操作
    语义化 section可滚动的窗格内容
    语义化 footer持续显示的操作
    data-responsive="overlay"高于 56.25rem 共享工作区宽度,低于该值时覆盖,低于 32.5rem 时占满宿主
    --task-pane-width窗格宽度,默认 clamp(20rem, 28vw, 23.75rem)
    --task-pane-min-width共享布局的最小宽度,默认 18.75rem
    --task-pane-overlay-width覆盖层宽度,默认 23.75rem
    --task-pane-overlay-z-index覆盖层层级,默认 20

    States and variants

    宿主应用负责决定窗格是挂载还是放入 Split Pane。需要 Office 响应式行为时添加 data-responsive="overlay":900 像素以上与工作区共享宽度,900 像素以下在行内末端覆盖,520 像素以下占满工作区。宿主必须建立定位上下文,通常使用 position: relative

    Accessibility

    窗格作为编辑器补充内容时使用 <aside>,并通过标题提供稳定名称。关闭后应把焦点返回打开窗格的控件。