For AI agents: the complete documentation index is available at https://a3s-lab.github.io/UI/en/llms.txt, the full documentation bundle is available at https://a3s-lab.github.io/UI/en/llms-full.txt, and this page is available as Markdown at https://a3s-lab.github.io/UI/en/components/task-pane.md.
A3S UI
  • English
  • next

      • Task Pane

      A Task Pane hosts contextual properties, comments, navigation, and assistant workflows beside the active editor.

      Live previewHTML · CSS · JavaScript

      Editor canvas

      Usage

      <div class="relative"><!-- establishes the overlay containing block -->
<aside class="task-pane" data-responsive="overlay">
  <header>
    <h2>Properties</h2>
    ...
  </header>
  <section>...</section>
  <footer>...</footer>
</aside>
</div>

      Parameters

      ParameterRequiredPurpose
      Semantic headerRecommendedTitle and close or overflow actions
      Semantic sectionYesScrollable pane content
      Semantic footerOptionalPersistent actions
      data-responsive="overlay"OptionalShares workspace width above 56.25rem, overlays below it, and fills the host below 32.5rem
      --task-pane-widthOptionalPane width, default clamp(20rem, 28vw, 23.75rem)
      --task-pane-min-widthOptionalMinimum shared-layout width, default 18.75rem
      --task-pane-overlay-widthOptionalOverlay width, default 23.75rem
      --task-pane-overlay-z-indexOptionalOverlay stacking level, default 20

      States and variants

      The host application owns whether the pane is mounted or placed in a Split Pane. Add data-responsive="overlay" when the Office behavior is desired: the pane shares workspace width above 900 pixels, overlays at the inline end below 900 pixels, and becomes workspace-wide below 520 pixels. Its host must establish a positioning context, normally with position: relative.

      Accessibility

      Use <aside> when the pane is complementary to the editor and give its heading a stable accessible name. Return focus to the control that opened the pane when it closes.