Drawer
A Drawer is a sliding panel that emerges from one edge of the screen, typically used for supplementary navigation or additional content. It's a space-efficient way to provide access to menus, settings, or tools without leaving the current page. Drawers can be triggered by user actions like clicking a button or swiping, making them a flexible and user-friendly component.
Examples
Various examples showcasing different configurations of the component
Examples
Property
Value
Children
Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod. Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod
Title
This is a modal
Cancel text
Cancel
Ok text
Ok
Has cross
true
Subtitle
Here is an optional subtitle
Background
BLACK
Alignment header
CENTER
Header Configuration
Property
Value
Children
Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod. Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod
Title
This is a modal
Cancel text
Cancel
Ok text
Ok
Has cross
true
Subtitle
Here is an optional subtitle
Has back button
true
Alignment header
CENTER
Footer Configuration
Property
Value
Children
Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod. Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod
Title
This is a modal
Cancel text
Cancel
Ok text
Ok
Has cross
true
Subtitle
Here is an optional subtitle
Alignment footer
LEFT
Properties
Each component can be customized and configured based on product requirements. You can modify the component on Canonic by clicking on the component and opening the configuration panel.
Header Properties
Property
Description
Default Value
Type
Title
The title of the modal.
String
Subtitle
The subtitle of the modal.
String
Has cross
Whether the modal should have a close (cross) button.
true
Bool
Has back button
Whether the modal should have a back (<-) button.
false
Bool
Footer Properties
Property
Description
Default Value
Type
Cancel text
Text for the cancel button.
String
Ok text
Text for the OK button.
String
Alignment
Alignment of the footer.
Right
String
Configuration Properties
Property
Description
Default Value
Type
Button text
The text of the button that opens the drawer.
Open Drawer
String
Size
Size of the modal.
Medium
String
Background
Background color of the modal.
White
String
Flex configuration
Flex
Position
Position of the drawer.
Left
String
Did you find what you were looking for?
👍
👎
What went wrong?
Need more help?We have a thriving Discordcommunity that can help you with all things Canonic. →