Ver código
<co-drawer heading="Título de ejemplo"></co-drawer>
Props
| Prop | Atributo | Tipo | Default | Descripción |
|---|
closable | closable | boolean | true | Show close (X) button in header |
closeOnEscape | close-on-escape | boolean | true | Close when pressing Escape |
closeOnOverlay | close-on-overlay | boolean | true | Close when clicking the backdrop |
heading | heading | string | '' | Drawer title (used when `header` slot is empty) |
loading | loading | boolean | false | Show a loading overlay over the body |
open | open | boolean | false | Whether the drawer is visible |
position | position | "bottom" | "left" | "right" | 'right' | Side from which the drawer slides in |
size | size | "full" | "lg" | "md" | "sm" | "xl" | 'md' | Predefined sizes — sm 400 / md 520 / lg 720 / xl 960 / full 100% |
Eventos
| Evento | Detail | Bubbles | Cancelable | Descripción |
|---|
coAfterClose | void | ✓ | ✓ | Slide-out animation finished. |
coAfterOpen | void | ✓ | ✓ | Slide-in animation finished. |
coClose | void | ✓ | ✓ | Requested to close (X, backdrop, Esc). Consumer should set `open=false`. |
coOpen | void | ✓ | ✓ | Transitioned to open=true. |
Slots
| Slot | Descripción |
|---|
(default) | Drawer body (scrollable). |
footer | Footer action area (right-aligned by default). |
header | Custom header content (overrides `heading` prop). Receives close button next to it. |
tabs | Optional row under the header (e.g. <co-tab-group>). |
CSS Parts
| Part | Descripción |
|---|
::part(body) | |
::part(drawer) | |
::part(footer) | |
::part(header) | |
::part(loader) | |
::part(tabs) | |
CSS Custom Properties
Este componente no expone CSS custom properties.
