Sections
Components
- Alert banner
- Alert dialog
- Alert
- Avatar
- Badge
- Breadcrumb
- Button
- Calendar icon
- Cell layout
- Cell link
- Checkbox
- Collapse
- Control label
- Date picker
- Dialog
- Divider
- Drawer
- Empty cell
- Empty state
- Empty
- Error overlay
- Filter bar
- Filter chips
- Flex
- Grid layout
- Humanised date
- Icon
- Duration input
- Input field
- Input
- Label
- Loader
- More actions
- Number input
- Outside click
- Page loader
- Page
- Popconfirm
- Popover
- Progress pie
- Progress
- Radio button group
- Radio Group
- Radio
- Relative time
- Resizable
- Search input
- Select
- Skeleton text
- Skeleton
- Space
- Squad avatar list
- Status picker
- Stepper
- Switch
- Content switcher
- Table light
- Tabs
- Tag
- Text
- Textarea
- Toast
- Tooltip
- Trigger select
- Upload
<rl-drawer title="Details" description="More context for this row." placement="right" width="400"><rl-button variant="secondary">Open drawer</rl-button></rl-drawer>Examples#
Placement#
Slide from the left at 480px wide.
<rl-drawer title="Details" description="More context for this row." placement="left" width="480"><rl-button variant="secondary">Open drawer</rl-button></rl-drawer>API#
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | — | Heading. |
description | string | — | Body. |
placement | "top" | "right" | "bottom" | "left" | "bottom" | Edge the panel slides from (the slide direction). |
width | number | 400 | Panel width in pixels when placement is left or right. Ignored for top and bottom. |