Drawer

<afp-drawer>

experimental

This component uses the light DOM, so its markup and styles are part of the regular document flow.

A drawer component that slides in from the edge of the screen to display contextual content like filters, settings, or details without leaving the current page context.

Drawer Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusamus aliquam asperiores atque aut, doloremque ea, eligendi fugit in minima non obcaecati odio perspiciatis porro quia, quis quod saepe! Vitae.

Drawer

<afp-drawer id="basicDrawer">
  <div slot="header">Drawer Title</div>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusamus aliquam asperiores atque aut, doloremque ea, eligendi fugit in minima non obcaecati odio perspiciatis porro quia, quis quod saepe! Vitae.</p>
  <div slot="footer">
    <afp-button data-drawer="close">Close</afp-button>
  </div>
</afp-drawer>

<afp-button onclick="basicDrawer.show()">Drawer</afp-button>

<afp-drawer [id]="'basicDrawer'">
  <div slot="header">Drawer Title</div>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusamus aliquam asperiores atque aut, doloremque ea, eligendi fugit in minima non obcaecati odio perspiciatis porro quia, quis quod saepe! Vitae.</p>
  <div slot="footer">
    <afp-button [data-drawer]="'close'">Close</afp-button>
  </div>
</afp-drawer>

<afp-button [onclick]="'basicDrawer.show()'">Drawer</afp-button>

<AfpDrawer id="basicDrawer">
  <div slot="header">Drawer Title</div>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusamus aliquam asperiores atque aut, doloremque ea, eligendi fugit in minima non obcaecati odio perspiciatis porro quia, quis quod saepe! Vitae.</p>
  <div slot="footer">
    <AfpButton data-drawer="close">Close</AfpButton>
  </div>
</AfpDrawer>

<AfpButton onclick="basicDrawer.show()">Drawer</AfpButton>

<AfpDrawer :id="'basicDrawer'">
  <div slot="header">Drawer Title</div>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusamus aliquam asperiores atque aut, doloremque ea, eligendi fugit in minima non obcaecati odio perspiciatis porro quia, quis quod saepe! Vitae.</p>
  <div slot="footer">
    <AfpButton :data-drawer="'close'">Close</AfpButton>
  </div>
</AfpDrawer>

<AfpButton :onclick="'basicDrawer.show()'">Drawer</AfpButton>

Examples #

Placement #

Use the placement attribute to define which edge of the screen the drawer slides in from. Supports left, right (default), top, and bottom.

Right Drawer

This drawer slides in from the right side of the screen.

Left Drawer

This drawer slides in from the left side of the screen.

Top Drawer

This drawer slides in from the top of the screen.

Bottom Drawer

This drawer slides in from the bottom of the screen.

Right

Left

Top

Bottom

<afp-drawer id="drawerRight" placement="right">
  <div slot="header">Right Drawer</div>
  <p>This drawer slides in from the right side of the screen.</p>
  <div slot="footer">
    <afp-button data-drawer="close">Close</afp-button>
  </div>
</afp-drawer>

<afp-drawer id="drawerLeft" placement="left">
  <div slot="header">Left Drawer</div>
  <p>This drawer slides in from the left side of the screen.</p>
  <div slot="footer">
    <afp-button data-drawer="close">Close</afp-button>
  </div>
</afp-drawer>

<afp-drawer id="drawerTop" placement="top">
  <div slot="header">Top Drawer</div>
  <p>This drawer slides in from the top of the screen.</p>
  <div slot="footer">
    <afp-button data-drawer="close">Close</afp-button>
  </div>
</afp-drawer>

<afp-drawer id="drawerBottom" placement="bottom">
  <div slot="header">Bottom Drawer</div>
  <p>This drawer slides in from the bottom of the screen.</p>
  <div slot="footer">
    <afp-button data-drawer="close">Close</afp-button>
  </div>
</afp-drawer>

<div class="afp-cluster">
  <afp-button onclick="drawerRight.show()"> Right</afp-button>
  <afp-button onclick="drawerLeft.show()">Left</afp-button>
  <afp-button onclick="drawerTop.show()">Top</afp-button>
  <afp-button onclick="drawerBottom.show()">Bottom</afp-button>
</div>

<afp-drawer [id]="'drawerRight'" [placement]="'right'">
  <div slot="header">Right Drawer</div>
  <p>This drawer slides in from the right side of the screen.</p>
  <div slot="footer">
    <afp-button [data-drawer]="'close'">Close</afp-button>
  </div>
</afp-drawer>

<afp-drawer [id]="'drawerLeft'" [placement]="'left'">
  <div slot="header">Left Drawer</div>
  <p>This drawer slides in from the left side of the screen.</p>
  <div slot="footer">
    <afp-button [data-drawer]="'close'">Close</afp-button>
  </div>
</afp-drawer>

<afp-drawer [id]="'drawerTop'" [placement]="'top'">
  <div slot="header">Top Drawer</div>
  <p>This drawer slides in from the top of the screen.</p>
  <div slot="footer">
    <afp-button [data-drawer]="'close'">Close</afp-button>
  </div>
</afp-drawer>

<afp-drawer [id]="'drawerBottom'" [placement]="'bottom'">
  <div slot="header">Bottom Drawer</div>
  <p>This drawer slides in from the bottom of the screen.</p>
  <div slot="footer">
    <afp-button [data-drawer]="'close'">Close</afp-button>
  </div>
</afp-drawer>

<div class="afp-cluster">
  <afp-button [onclick]="'drawerRight.show()'"> Right</afp-button>
  <afp-button [onclick]="'drawerLeft.show()'">Left</afp-button>
  <afp-button [onclick]="'drawerTop.show()'">Top</afp-button>
  <afp-button [onclick]="'drawerBottom.show()'">Bottom</afp-button>
</div>

<AfpDrawer id="drawerRight" placement="right">
  <div slot="header">Right Drawer</div>
  <p>This drawer slides in from the right side of the screen.</p>
  <div slot="footer">
    <AfpButton data-drawer="close">Close</AfpButton>
  </div>
</AfpDrawer>

<AfpDrawer id="drawerLeft" placement="left">
  <div slot="header">Left Drawer</div>
  <p>This drawer slides in from the left side of the screen.</p>
  <div slot="footer">
    <AfpButton data-drawer="close">Close</AfpButton>
  </div>
</AfpDrawer>

<AfpDrawer id="drawerTop" placement="top">
  <div slot="header">Top Drawer</div>
  <p>This drawer slides in from the top of the screen.</p>
  <div slot="footer">
    <AfpButton data-drawer="close">Close</AfpButton>
  </div>
</AfpDrawer>

<AfpDrawer id="drawerBottom" placement="bottom">
  <div slot="header">Bottom Drawer</div>
  <p>This drawer slides in from the bottom of the screen.</p>
  <div slot="footer">
    <AfpButton data-drawer="close">Close</AfpButton>
  </div>
</AfpDrawer>

<div class="afp-cluster">
  <AfpButton onclick="drawerRight.show()"> Right</AfpButton>
  <AfpButton onclick="drawerLeft.show()">Left</AfpButton>
  <AfpButton onclick="drawerTop.show()">Top</AfpButton>
  <AfpButton onclick="drawerBottom.show()">Bottom</AfpButton>
</div>

<AfpDrawer :id="'drawerRight'" :placement="'right'">
  <div slot="header">Right Drawer</div>
  <p>This drawer slides in from the right side of the screen.</p>
  <div slot="footer">
    <AfpButton :data-drawer="'close'">Close</AfpButton>
  </div>
</AfpDrawer>

<AfpDrawer :id="'drawerLeft'" :placement="'left'">
  <div slot="header">Left Drawer</div>
  <p>This drawer slides in from the left side of the screen.</p>
  <div slot="footer">
    <AfpButton :data-drawer="'close'">Close</AfpButton>
  </div>
</AfpDrawer>

<AfpDrawer :id="'drawerTop'" :placement="'top'">
  <div slot="header">Top Drawer</div>
  <p>This drawer slides in from the top of the screen.</p>
  <div slot="footer">
    <AfpButton :data-drawer="'close'">Close</AfpButton>
  </div>
</AfpDrawer>

<AfpDrawer :id="'drawerBottom'" :placement="'bottom'">
  <div slot="header">Bottom Drawer</div>
  <p>This drawer slides in from the bottom of the screen.</p>
  <div slot="footer">
    <AfpButton :data-drawer="'close'">Close</AfpButton>
  </div>
</AfpDrawer>

<div class="afp-cluster">
  <AfpButton :onclick="'drawerRight.show()'"> Right</AfpButton>
  <AfpButton :onclick="'drawerLeft.show()'">Left</AfpButton>
  <AfpButton :onclick="'drawerTop.show()'">Top</AfpButton>
  <AfpButton :onclick="'drawerBottom.show()'">Bottom</AfpButton>
</div>

Filter Example #

A practical example of using a drawer for filters.

Filter

All

Active

Inactive

Show archived

Reset

Apply

Open Filters

<afp-drawer id="filterDrawer" placement="right">
  <div slot="header">Filter</div>
  <div class="afp-stack afp-gap-m">
    <afp-input label="Search" placeholder="Search..."></afp-input>
    <afp-select label="Category">
      <afp-option value="all">All</afp-option>
      <afp-option value="active">Active</afp-option>
      <afp-option value="inactive">Inactive</afp-option>
    </afp-select>
    <afp-checkbox>Show archived</afp-checkbox>
  </div>
  <div slot="footer" class="afp-cluster afp-gap-s">
    <afp-button appearance="filled" data-drawer="close">Reset</afp-button>
    <afp-button data-drawer="close">Apply</afp-button>
  </div>
</afp-drawer>

<afp-button onclick="filterDrawer.show()">
  <afp-icon name="filter"></afp-icon>
  Open Filters
</afp-button>

<afp-drawer [id]="'filterDrawer'" [placement]="'right'">
  <div slot="header">Filter</div>
  <div class="afp-stack afp-gap-m">
    <afp-input [label]="'Search'" [placeholder]="'Search...'"></afp-input>
    <afp-select [label]="'Category'">
      <afp-option [value]="'all'">All</afp-option>
      <afp-option [value]="'active'">Active</afp-option>
      <afp-option [value]="'inactive'">Inactive</afp-option>
    </afp-select>
    <afp-checkbox>Show archived</afp-checkbox>
  </div>
  <div slot="footer" class="afp-cluster afp-gap-s">
    <afp-button [appearance]="'filled'" [data-drawer]="'close'">Reset</afp-button>
    <afp-button [data-drawer]="'close'">Apply</afp-button>
  </div>
</afp-drawer>

<afp-button [onclick]="'filterDrawer.show()'">
  <afp-icon [name]="'filter'"></afp-icon>
  Open Filters
</afp-button>

<AfpDrawer id="filterDrawer" placement="right">
  <div slot="header">Filter</div>
  <div class="afp-stack afp-gap-m">
    <AfpInput label="Search" placeholder="Search..."></AfpInput>
    <AfpSelect label="Category">
      <AfpOption value="all">All</AfpOption>
      <AfpOption value="active">Active</AfpOption>
      <AfpOption value="inactive">Inactive</AfpOption>
    </AfpSelect>
    <AfpCheckbox>Show archived</AfpCheckbox>
  </div>
  <div slot="footer" class="afp-cluster afp-gap-s">
    <AfpButton appearance="filled" data-drawer="close">Reset</AfpButton>
    <AfpButton data-drawer="close">Apply</AfpButton>
  </div>
</AfpDrawer>

<AfpButton onclick="filterDrawer.show()">
  <AfpIcon name="filter"></AfpIcon>
  Open Filters
</AfpButton>

<AfpDrawer :id="'filterDrawer'" :placement="'right'">
  <div slot="header">Filter</div>
  <div class="afp-stack afp-gap-m">
    <AfpInput :label="'Search'" :placeholder="'Search...'"></AfpInput>
    <AfpSelect :label="'Category'">
      <AfpOption :value="'all'">All</AfpOption>
      <AfpOption :value="'active'">Active</AfpOption>
      <AfpOption :value="'inactive'">Inactive</AfpOption>
    </AfpSelect>
    <AfpCheckbox>Show archived</AfpCheckbox>
  </div>
  <div slot="footer" class="afp-cluster afp-gap-s">
    <AfpButton :appearance="'filled'" :data-drawer="'close'">Reset</AfpButton>
    <AfpButton :data-drawer="'close'">Apply</AfpButton>
  </div>
</AfpDrawer>

<AfpButton :onclick="'filterDrawer.show()'">
  <AfpIcon :name="'filter'"></AfpIcon>
  Open Filters
</AfpButton>

Without Header #

Use the noHeader (noheader) attribute to create a drawer without the header section.

This drawer has no header. The content starts immediately.

Without Header

<afp-drawer id="drawerNoHeader" noheader>
  <p>This drawer has no header. The content starts immediately.</p>
  <div slot="footer">
    <afp-button data-drawer="close">Close</afp-button>
  </div>
</afp-drawer>

<afp-button onclick="drawerNoHeader.show()">Without Header</afp-button>

<afp-drawer [id]="'drawerNoHeader'" noheader>
  <p>This drawer has no header. The content starts immediately.</p>
  <div slot="footer">
    <afp-button [data-drawer]="'close'">Close</afp-button>
  </div>
</afp-drawer>

<afp-button [onclick]="'drawerNoHeader.show()'">Without Header</afp-button>

<AfpDrawer id="drawerNoHeader" noheader>
  <p>This drawer has no header. The content starts immediately.</p>
  <div slot="footer">
    <AfpButton data-drawer="close">Close</AfpButton>
  </div>
</AfpDrawer>

<AfpButton onclick="drawerNoHeader.show()">Without Header</AfpButton>

<AfpDrawer :id="'drawerNoHeader'" noheader>
  <p>This drawer has no header. The content starts immediately.</p>
  <div slot="footer">
    <AfpButton :data-drawer="'close'">Close</AfpButton>
  </div>
</AfpDrawer>

<AfpButton :onclick="'drawerNoHeader.show()'">Without Header</AfpButton>

Use the noFooter (nofooter) attribute to create a drawer without the footer section.

Without Footer

This drawer has no footer section.

Without Footer

<afp-drawer id="drawerNoFooter" nofooter closeable>
  <div slot="header">Without Footer</div>
  <p>This drawer has no footer section.</p>
</afp-drawer>

<afp-button onclick="drawerNoFooter.show()">Without Footer</afp-button>

<afp-drawer [id]="'drawerNoFooter'" nofooter closeable>
  <div slot="header">Without Footer</div>
  <p>This drawer has no footer section.</p>
</afp-drawer>

<afp-button [onclick]="'drawerNoFooter.show()'">Without Footer</afp-button>

<AfpDrawer id="drawerNoFooter" nofooter closeable>
  <div slot="header">Without Footer</div>
  <p>This drawer has no footer section.</p>
</AfpDrawer>

<AfpButton onclick="drawerNoFooter.show()">Without Footer</AfpButton>

<AfpDrawer :id="'drawerNoFooter'" nofooter closeable>
  <div slot="header">Without Footer</div>
  <p>This drawer has no footer section.</p>
</AfpDrawer>

<AfpButton :onclick="'drawerNoFooter.show()'">Without Footer</AfpButton>

Without Backdrop #

Use the noBackdrop attribute to show the drawer without an overlay backdrop.

No Backdrop

This drawer has no backdrop overlay, allowing interaction with the page behind.

Without Backdrop

<afp-drawer id="drawerNoBackdrop" noBackdrop>
  <div slot="header">No Backdrop</div>
  <p>This drawer has no backdrop overlay, allowing interaction with the page behind.</p>
  <div slot="footer">
    <afp-button data-drawer="close">Close</afp-button>
  </div>
</afp-drawer>

<afp-button onclick="drawerNoBackdrop.show()">Without Backdrop</afp-button>

<afp-drawer [id]="'drawerNoBackdrop'" noBackdrop>
  <div slot="header">No Backdrop</div>
  <p>This drawer has no backdrop overlay, allowing interaction with the page behind.</p>
  <div slot="footer">
    <afp-button [data-drawer]="'close'">Close</afp-button>
  </div>
</afp-drawer>

<afp-button [onclick]="'drawerNoBackdrop.show()'">Without Backdrop</afp-button>

<AfpDrawer id="drawerNoBackdrop" noBackdrop>
  <div slot="header">No Backdrop</div>
  <p>This drawer has no backdrop overlay, allowing interaction with the page behind.</p>
  <div slot="footer">
    <AfpButton data-drawer="close">Close</AfpButton>
  </div>
</AfpDrawer>

<AfpButton onclick="drawerNoBackdrop.show()">Without Backdrop</AfpButton>

<AfpDrawer :id="'drawerNoBackdrop'" noBackdrop>
  <div slot="header">No Backdrop</div>
  <p>This drawer has no backdrop overlay, allowing interaction with the page behind.</p>
  <div slot="footer">
    <AfpButton :data-drawer="'close'">Close</AfpButton>
  </div>
</AfpDrawer>

<AfpButton :onclick="'drawerNoBackdrop.show()'">Without Backdrop</AfpButton>

Closeable #

Set closeable to true to allow closing via ESC key or backdrop click. By default, the drawer can only be closed using the close button.

Closeable Drawer

This drawer can be closed by pressing ESC or clicking the backdrop.

Cancel

Confirm

Closeable Drawer

<afp-drawer id="drawerCloseable" closeable>
  <div slot="header">Closeable Drawer</div>
  <p>This drawer can be closed by pressing ESC or clicking the backdrop.</p>
  <div slot="footer" class="afp-cluster afp-gap-s">
    <afp-button appearance="filled" onclick="drawerCloseable.hide()">Cancel</afp-button>
    <afp-button onclick="drawerCloseable.hide()">Confirm</afp-button>
  </div>
</afp-drawer>

<afp-button onclick="drawerCloseable.show()">Closeable Drawer</afp-button>

<afp-drawer [id]="'drawerCloseable'" closeable>
  <div slot="header">Closeable Drawer</div>
  <p>This drawer can be closed by pressing ESC or clicking the backdrop.</p>
  <div slot="footer" class="afp-cluster afp-gap-s">
    <afp-button [appearance]="'filled'" [onclick]="'drawerCloseable.hide()'">Cancel</afp-button>
    <afp-button [onclick]="'drawerCloseable.hide()'">Confirm</afp-button>
  </div>
</afp-drawer>

<afp-button [onclick]="'drawerCloseable.show()'">Closeable Drawer</afp-button>

<AfpDrawer id="drawerCloseable" closeable>
  <div slot="header">Closeable Drawer</div>
  <p>This drawer can be closed by pressing ESC or clicking the backdrop.</p>
  <div slot="footer" class="afp-cluster afp-gap-s">
    <AfpButton appearance="filled" onclick="drawerCloseable.hide()">Cancel</AfpButton>
    <AfpButton onclick="drawerCloseable.hide()">Confirm</AfpButton>
  </div>
</AfpDrawer>

<AfpButton onclick="drawerCloseable.show()">Closeable Drawer</AfpButton>

<AfpDrawer :id="'drawerCloseable'" closeable>
  <div slot="header">Closeable Drawer</div>
  <p>This drawer can be closed by pressing ESC or clicking the backdrop.</p>
  <div slot="footer" class="afp-cluster afp-gap-s">
    <AfpButton :appearance="'filled'" :onclick="'drawerCloseable.hide()'">Cancel</AfpButton>
    <AfpButton :onclick="'drawerCloseable.hide()'">Confirm</AfpButton>
  </div>
</AfpDrawer>

<AfpButton :onclick="'drawerCloseable.show()'">Closeable Drawer</AfpButton>

Custom Size #

Use the --afp-drawer-size CSS custom property to customize the drawer width (for left/right) or height (for top/bottom).

Custom Size

This drawer has a custom width of 30rem.

Custom Size (30rem)

<afp-drawer id="drawerCustomSize" style="--afp-drawer-size: 30rem;">
  <div slot="header">Custom Size</div>
  <p>This drawer has a custom width of 30rem.</p>
  <div slot="footer">
    <afp-button data-drawer="close">Close</afp-button>
  </div>
</afp-drawer>

<afp-button onclick="drawerCustomSize.show()">Custom Size (30rem)</afp-button>

<afp-drawer [id]="'drawerCustomSize'" [style]="'--afp-drawer-size: 30rem;'">
  <div slot="header">Custom Size</div>
  <p>This drawer has a custom width of 30rem.</p>
  <div slot="footer">
    <afp-button [data-drawer]="'close'">Close</afp-button>
  </div>
</afp-drawer>

<afp-button [onclick]="'drawerCustomSize.show()'">Custom Size (30rem)</afp-button>

<AfpDrawer id="drawerCustomSize" style="--afp-drawer-size: 30rem;">
  <div slot="header">Custom Size</div>
  <p>This drawer has a custom width of 30rem.</p>
  <div slot="footer">
    <AfpButton data-drawer="close">Close</AfpButton>
  </div>
</AfpDrawer>

<AfpButton onclick="drawerCustomSize.show()">Custom Size (30rem)</AfpButton>

<AfpDrawer :id="'drawerCustomSize'" :style="'--afp-drawer-size: 30rem;'">
  <div slot="header">Custom Size</div>
  <p>This drawer has a custom width of 30rem.</p>
  <div slot="footer">
    <AfpButton :data-drawer="'close'">Close</AfpButton>
  </div>
</AfpDrawer>

<AfpButton :onclick="'drawerCustomSize.show()'">Custom Size (30rem)</AfpButton>

Custom Animation Duration #

Use the duration attribute to customize the animation duration in milliseconds.

Slow Animation

This drawer has a slower animation (500ms).

Slow Animation

<afp-drawer id="drawerSlowAnim" duration="500">
  <div slot="header">Slow Animation</div>
  <p>This drawer has a slower animation (500ms).</p>
  <div slot="footer">
    <afp-button data-drawer="close">Close</afp-button>
  </div>
</afp-drawer>

<afp-button onclick="drawerSlowAnim.show()">Slow Animation</afp-button>

<afp-drawer [id]="'drawerSlowAnim'" [duration]=500>
  <div slot="header">Slow Animation</div>
  <p>This drawer has a slower animation (500ms).</p>
  <div slot="footer">
    <afp-button [data-drawer]="'close'">Close</afp-button>
  </div>
</afp-drawer>

<afp-button [onclick]="'drawerSlowAnim.show()'">Slow Animation</afp-button>

<AfpDrawer id="drawerSlowAnim" duration="500">
  <div slot="header">Slow Animation</div>
  <p>This drawer has a slower animation (500ms).</p>
  <div slot="footer">
    <AfpButton data-drawer="close">Close</AfpButton>
  </div>
</AfpDrawer>

<AfpButton onclick="drawerSlowAnim.show()">Slow Animation</AfpButton>

<AfpDrawer :id="'drawerSlowAnim'" :duration=500>
  <div slot="header">Slow Animation</div>
  <p>This drawer has a slower animation (500ms).</p>
  <div slot="footer">
    <AfpButton :data-drawer="'close'">Close</AfpButton>
  </div>
</AfpDrawer>

<AfpButton :onclick="'drawerSlowAnim.show()'">Slow Animation</AfpButton>

Scrollable Content #

The drawer content area automatically becomes scrollable when content exceeds the available height.

Scrollable Content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit.

Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit.

Scrollable Content

<afp-drawer id="drawerScrollable">
  <div slot="header">Scrollable Content</div>
  <div class="afp-stack afp-gap-m">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
    <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
    <p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit.</p>
    <p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit.</p>
  </div>
  <div slot="footer">
    <afp-button data-drawer="close">Close</afp-button>
  </div>
</afp-drawer>

<afp-button onclick="drawerScrollable.show()">Scrollable Content</afp-button>

<afp-drawer [id]="'drawerScrollable'">
  <div slot="header">Scrollable Content</div>
  <div class="afp-stack afp-gap-m">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
    <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
    <p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit.</p>
    <p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit.</p>
  </div>
  <div slot="footer">
    <afp-button [data-drawer]="'close'">Close</afp-button>
  </div>
</afp-drawer>

<afp-button [onclick]="'drawerScrollable.show()'">Scrollable Content</afp-button>

<AfpDrawer id="drawerScrollable">
  <div slot="header">Scrollable Content</div>
  <div class="afp-stack afp-gap-m">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
    <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
    <p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit.</p>
    <p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit.</p>
  </div>
  <div slot="footer">
    <AfpButton data-drawer="close">Close</AfpButton>
  </div>
</AfpDrawer>

<AfpButton onclick="drawerScrollable.show()">Scrollable Content</AfpButton>

<AfpDrawer :id="'drawerScrollable'">
  <div slot="header">Scrollable Content</div>
  <div class="afp-stack afp-gap-m">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
    <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
    <p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit.</p>
    <p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit.</p>
  </div>
  <div slot="footer">
    <AfpButton :data-drawer="'close'">Close</AfpButton>
  </div>
</AfpDrawer>

<AfpButton :onclick="'drawerScrollable.show()'">Scrollable Content</AfpButton>

Properties

Learn more about properties.

Name Description Reflects

open

Whether the drawer is open.

Type boolean

Default false

placement

The placement of the drawer. Determines which edge of the screen the drawer slides in from.

Type

AfpPlacement

Name	Description
`TOP`	Top placement.
`RIGHT`	Right placement.
`BOTTOM`	Bottom placement.
`LEFT`	Left placement.
`TOP_START`	Top-start placement.
`TOP_END`	Top-end placement.
`RIGHT_START`	Right-start placement.
`RIGHT_END`	Right-end placement.
`BOTTOM_START`	Bottom-start placement.
`BOTTOM_END`	Bottom-end placement.
`LEFT_START`	Left-start placement.
`LEFT_END`	Left-end placement.

AfpPlacement

Default AfpPlacement.RIGHT

closeable

Allows closing by ESC key or clicking on the backdrop. When false (default), the drawer can only be closed using the close button. When true, clicking the backdrop or pressing ESC will also close the drawer.

Type boolean

Default false

noHeader
noheader

Hides the header section.

Type boolean

Default false

noFooter
nofooter

Hides the footer section.

Type boolean

Default false

noBackdrop
nobackdrop

Whether the drawer has an overlay backdrop. When false, the drawer opens without a backdrop overlay.

Type boolean

Default false

duration

Animation duration in milliseconds for show/hide transitions.

Type number

Default 200

label

The label for the drawer, used for accessibility.

Type string

Default ''

Methods

Learn more about using methods.

Name	Description	Arguments
`show`	Programmatically open the drawer.	-
`hide`	Programmatically close the drawer.	-

Events

Learn more about events.

Name	Return	Description
`afp-show`	`void`	Emitted when the drawer begins to open.
`afp-after-show`	`void`	Emitted after the drawer has fully opened and transitions are complete.
`afp-hide`	`void`	Emitted when the drawer begins to close.
`afp-after-hide`	`void`	Emitted after the drawer has fully closed and transitions are complete.

Slots

Learn more about slots.

Name	Description
`default`	The default slot for the drawer's main content.
`header`	Optional slot for the drawer header content.
`footer`	Optional slot for the drawer footer content.
`close-icon`	Slot to customize the close button icon.

CSS Parts

Learn more about CSS Parts.

Name	Description	Selector
`base`	The drawer's base wrapper (the `<dialog>` element).	`::part(base)`
`wrapper`	The content wrapper inside the drawer.	`::part(wrapper)`
`header`	The header section of the drawer.	`::part(header)`
`header-title`	The title section within the header.	`::part(header-title)`
`close-button`	The close button in the header.	`::part(close-button)`
`content`	The main content section of the drawer.	`::part(content)`
`footer`	The footer section of the drawer.	`::part(footer)`
`backdrop`	The backdrop overlay behind the drawer.	`::part(backdrop)`

CSS Custom Properties

Name	Description	Default
`--afp-drawer-size`	The width (for left/right) or height (for top/bottom) of the drawer.	`20rem`
`--afp-drawer-close-icon-size`	The size of the close icon.	`--afp-font-size-m`

Dependencies

The component automatically brings in the listed items, including any nested dependencies that may exist.

afp-button

afp-icon

Importing

Using the bundle is the recommended method to include components. If you’d rather handle imports manually, you can use the code examples below.

import '@afp-design-system/core/dist/components/drawer/drawer.js';

Drawer

Examples #

Placement #

Filter Example #

Without Header #

Without Footer #

Without Backdrop #

Closeable #

Custom Size #

Custom Animation Duration #

Scrollable Content #

Properties

Methods

Events

Slots

CSS Parts

CSS Custom Properties

Dependencies

Importing