Drawer

Component

 <template>
    <Drawer 
        v-model="showDrawer" 
        :direction="Direction.RIGHT"
    >
        <ContentPlaceholder text="Insert content here" />
    </Drawer>
        
    <ActionButton 
        :styleType="ButtonStyleType.NEUTRAL_FILLED"
        text="Open drawer"
        @click="showDrawer = true"
    />
</template>
<script setup lang="ts">
// States
const showDrawer = ref(false)
</script>
 

Architecture

The Drawer component is a modal that slides in from the edge of the screen. It can be used to display additional content or actions without navigating away from the current page.

 <template>
    <Drawer 
        v-model="showDrawer"
        :direction="currentDirection"
    >
        <ContentPlaceholder text="Insert content here" />
    </Drawer>
</template>
 

Props

Usage

modelValue

Sets the modal to open or close.

 <template>
    <Drawer v-model="showDrawer" >
        ...
    </Drawer>
</template>
<script setup="ts">
const showDrawer = ref(false)
</script>
 

• Type: boolean
• Default: false

direction

Sets the direction from which the drawer will appear. It can uses the Direction enum.

 <template>
    <Drawer :direction="Direction.LEFT">
        ...
    </Drawer>
</template>
 

• Type: Direction
• Default: Direction.RIGHT

Options

maxSize

Defines the maximum size of the drawer in pixels. For left and right directions, it sets the max width, while for top and bottom directions, it sets the max height.

 <template>
    <Drawer :maxSize="400">
        ...
    </Drawer>
</template>
 

• Type: number
• Default: 320

hasHeader

Determines whether the drawer should display a header section containing the title and close button.

 <template>
    <Drawer :hasHeader="false">
        ...
    </Drawer>
</template>
 

• Type: boolean
• Default: true

hasCloseButton

Controls the visibility of the close button in the drawer header.

 <template>
    <Drawer :hasCloseButton="false">
        ...
    </Drawer>
</template>
 

• Type: boolean
• Default: true

closeOnOverlayClick

Enables closing the drawer when the user clicks on the overlay outside of the drawer content.

 <template>
    <Drawer :closeOnOverlayClick="false">
        ...
    </Drawer>
</template>
 

• Type: boolean
• Default: true

title

Sets the text to be displayed as the drawer's title in the header.

 <template>
    <Drawer title="My Custom Title">
        ...
    </Drawer>
</template>
 

• Type: string
• Default: 'Drawer'

titleHeadingTag

Defines the HTML heading tag used for the drawer title in the header.

 <template>
    <Drawer :titleHeadingTag="'h3'">
        ...
    </Drawer>
</template>
 

• Type: 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
• Default: 'h2'

buttonCloseIcon

Specifies the icon to be used for the close button in the drawer header. It accepts any valid icon name from the integrated icon library.

 <template>
    <Drawer buttonCloseIcon="mdi:close-circle">
        ...
    </Drawer>
</template>
 

• Type: string
• Default: 'mdi:close'

hasBorder

Determines whether the drawer should have a border. If set to false, the drawer will be rendered without a border, blending with the surrounding content.

 <template>
    <Drawer :hasBorder="false">
        ...
    </Drawer>
</template>
 

• Type: boolean
• Default: true

drawerClass

Allows you to pass custom CSS classes to the drawer element for additional styling.

 <template>
    <Drawer drawerClass="p-8">
        ...
    </Drawer>
</template>
 

• Type: string

drawerContentClass

Allows you to pass custom CSS classes to the drawer content area for additional styling.

 <template>
    <Drawer drawerContentClass="bg-gray-100">
        ...
    </Drawer>
</template>
 

overlayClass

Allows you to pass custom CSS classes to the overlay element for additional styling.

 <template>
    <Drawer 
        hasOverlay
        overlayClass="bg-black bg-opacity-50"
    >
        ...
    </Drawer>
</template>
 

• Type: string

headerClass

Allows you to pass custom CSS classes to the drawer header for additional styling.

 <template>
    <Drawer headerClass="bg-blue-500 text-white">
        ...
    </Drawer>
</template>
 

• Type: string

titleClass

Allows you to pass custom CSS classes to the drawer title for additional styling.

 <template>
    <Drawer titleClass="text-red-500">
        ...
    </Drawer>   
</template>
 

• Type: string

closeAriaLabel

The closeAriaLabel prop sets the accessible label for the close button. Override it for i18n.

 <template>
    <Drawer closeAriaLabel="Cerrar">
        ...
    </Drawer>
</template>
 

• Type: string
• Default: 'Close'