Go Main page
Go Main page

Web components

Foundations
Components
About
cover

components

Drawer

v.1.0.0 | Saturn

Usage

The name of the the tokens object to style drawer is DRAWER_STYLES.

You can not change the name of the the tokens object.

Drawer component has one way to modify the styles:

  • Variant: modify the styles of the Drawer.

The structure of the DRAWER_STYLES object is:

Variants

The tokens used are:

12345678910
const DRAWER_STYLES = {
  [VARIANT]: {
    [DeviceBreakpointsType]: {
      container?: [DrawerVariantPositionTypes]?: CommonStyleType;
      iconContainer?: CommonStyleType;
      icon?: IconTypes;
      titleContentFooterContainer?: CommonStyleType & {
        paddingTopIsBlocking?: string;
      };
      titleContainer?: CommonStyleType & TypographyTypes;

Example

drawer theme object example:

12345678910
const DRAWER_STYLES = {
  [VARIANT]: {
    [DeviceBreakpointsType]: {
      container: {
        [DrawerVariantPositionTypes]: {
          background_color: 'background-color',
          width: 'width',
        },
      },
      icon: {
DrawerCode API
DrawerAccessibility