Skip to main content

Drawer

The TkDrawer is a container component displayed as an overlay. It supports various features such as different header and footer types, multiple variants, and flexible positioning, making it suitable for a wide range of use cases.

import { TkDrawer } from '@takeoff-ui/react'

Basic​

Demonstrates how to open and close the dialog with simple content.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas!

View Code
<TkButton label="Open Drawer" onTkClick={handleClick} />
<TkDrawer
 header="Header Text"
 open={showDrawer}
 onTkDrawerClose={() => setShowDrawer(false)}
>
  <div slot="content">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque
      quas!
    </p>
  </div>
</TkDrawer>

Position​

Illustrates how to position the TkDialog component on different sides of the screen. Easily set the dialog to appear from the left, right, top, or bottom, allowing for versatile UI layouts.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas!

View Code
<TkButton icon="keyboard_arrow_down" onTkClick={() => handleClick("top")} />
<TkButton icon="keyboard_arrow_left" onTkClick={() => handleClick("right")} />
<TkButton icon="keyboard_arrow_up" onTkClick={() => handleClick("bottom")} />
<TkButton icon="keyboard_arrow_right" onTkClick={() => handleClick("left")} />
<TkDrawer
  header="Header Text"
  open={showDrawer}
  position={position}
  onTkDrawerClose={() => setShowDrawer(false)}
>
  <div slot="content">
    <span>Content Slot</span>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque
        quas!
      </p>
  </div>
</TkDrawer>

Demonstrates the flexibility of the TkDrawer component's footer section. You can choose between having no footer or a footer with action buttons with footer slot.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas!

View Code
<TkButton label="Open Drawer" onTkClick={() => setShowDrawer(true)} />
<TkDrawer
    header="Drawer with Footer"
    open={showDrawer}
    onTkDrawerClose={() => setShowDrawer(false)}
>
    <div slot="content">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque
            quas!
        </p>
    </div>
    <div slot="footer">
        <TkButton label="Cancel" variant="neutral" onTkClick={() => setShowDrawer(false)} type="text" />
        <TkButton label="Confirm" variant="primary" />
    </div>
</TkDrawer>

Templating​

Demonstrates how to create a fully custom TkDrawer using container slot. This allows for more complex drawer content tailored to specific application needs.

Notification
14 april 2024
Header Text

Lorem Ipsum dolor sit amet consiquences.

View Code
<TkButton label="Open Custom Drawer" onTkClick={() => setShowDrawer(true)} />
  <TkDrawer
      open={showDrawer}
      header="Settings"
      onTkDrawerClose={() => setShowDrawer(false)}
  >
      <div slot="container">
          <div className="notification-panel-header">
              <span className="header-title">Notification</span>
              <div className="header-actions">
                  <TkButton variant="neutral" icon="more_vert" size="small" type="text"></TkButton>
                  <TkButton variant="neutral" icon="close" size="small" type="text" onTkClick={() => setShowDrawer(false)}></TkButton>
              </div>
          </div>
          <TkTabs
              orientation="horizontal"
              size="base"
              tab-style="basic"
              variant="primary"
              is-closable="false"
              default-active-index="0"
              is-extendable="false"
          >
              <TkTabsItem slot="tab-content-0" label="All" badgeLabel="01" badged>
                  <div className="notification-container">
                      <div className="notification-content">
                          <div className="message-container">
                              <div className="message-header">
                                  <div className="message-header-start">
                                      <div className="message-date">14 april 2024</div>
                                      <div className="message-title">Header Text</div>
                                  </div>
                                  <div className="message-header-end">
                                      <TkBadge label="New" variant="info" type="filledlight"></TkBadge>
                                  </div>
                              </div>
                              <p className="message-text">
                                  Lorem Ipsum dolor sit amet consiquences.
                              </p>
                          </div>
                          <div className="message-action">
                              <TkButton variant="info" label="Action" type="text"></TkButton>
                          </div>
                      </div>
                      <div className="notification-end">
                          <TkButton variant="neutral" size="small" icon="more_vert" type="text"></TkButton>
                      </div>
                  </div>
              </TkTabsItem>
              <TkTabsItem label="New" badgeLabel="03" badged></TkTabsItem>
              <TkTabsItem label="Unreaded" badgeLabel="03" badged></TkTabsItem>
          </TkTabs>
      </div>
  </TkDrawer>

Customize Container Styling​

Demonstrates how to customize the container of the TkDrawer component using containerStyle prop.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas!

View Code
const [width, setWidth] = useState("400px");
  
<TkButton label="Open Drawer" onTkClick={() => setShowDrawer(true)} />
<TkDrawer
  header="Custom Width Drawer"
  open={showDrawer}
  onTkDrawerClose={() => setShowDrawer(false)}
  containerStyle={{ width }}
>
  <div slot="content">
    <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore
        sed consequuntur error repudiandae numquam deserunt quisquam repellat
        libero asperiores earum nam nobis, culpa ratione quam perferendis
        esse, cupiditate neque quas!
    </p>
  </div>
</TkDrawer>

Prevent Dismiss​

Illustrates how to prevent the TkDrawer from being dismissed by clicking outside of it. This ensures that users must interact with the drawer's controls to close it.

Clicking outside the drawer will close it.

View Code
const [showDrawer, setShowDrawer] = useState(false);
const [preventDismiss, setPreventDismiss] = useState(false);
return (
  <>
    <div className="mb-4">
      <TkCheckbox
        label="Prevent Dismiss by Clicking Outside"
        value={preventDismiss}
        onTkChange={(e) => setPreventDismiss(e.detail)}
      />
    </div>
    <TkButton label="Open Drawer" onTkClick={() => setShowDrawer(true)} />
    <TkDrawer
      header="Prevent Dismiss Drawer"
      open={showDrawer}
      preventDismiss={preventDismiss}
      onTkDrawerClose={() => setShowDrawer(false)}
    >
      <div slot="content">
        <p>
          {preventDismiss
            ? "Clicking outside the drawer will not close it. Please use the close button."
            : "Clicking outside the drawer will close it."}
        </p>
      </div>
    </TkDrawer>
  </>
);

API​

Props​

NameTypeDefaultDescription
anynullThe style attribute of container element
"basic", "divided", "light"'basic'The mode of the footer
stringnullText to display in the drawer header
"basic", "dark", "divided", "light", "primary"'basic'The type of the header
booleanfalseControls whether the backdrop is shown
booleanfalseControls whether to hide the close icon
"base", "dark", "darkest", "light", "lightest"'base'Appearance of the mask
booleanfalseControls whether the drawer is open or closed
"bottom", "full-screen", "left", "right", "top"'right'Determines the position of the drawer
booleanfalsePrevents the drawer from being dismissed by clicking outside
booleanfalseControls whether to unblock scrolling when the drawer is open

Events​

NameDescription
tk-drawer-changeEmitted when the drawer's open state changes
tk-drawer-closeEmitted when the drawer is closed
tk-drawer-enterEmitted when the drawer starts to enter
tk-drawer-leaveEmitted when the drawer starts to leave
tk-drawer-openEmitted when the drawer is opened

Methods​

NameDescription
closeCloses the drawer by emitting a tk-drawer-close event Parent components should listen for this event and update the open prop
showOpens the drawer by emitting a tk-drawer-open event Parent components should listen for this event and update the open prop

Slots​

NameDescription
containerCustom container template.
contentCustom inner body template.
footerCustom footer template.
headerCustom header template.
header-actionCustom actions template of header.