Status
The status of the component
Component checklist
Ready for use!
Figma component
A link to the Figma library where the component lives.
Repository
A link to the repo where the component lives.
gux-modal-side-panel-beta
Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
| open | open | boolean | false | |
| size | size | "large" | "medium" | "small" | 'medium' |
Events
| Event | Description | Type |
|---|---|---|
| modalSidePanelDismiss | CustomEvent<void> |
Methods
close() => Promise<void>
Returns
Type: Promise<void>
showModal() => Promise<void>
Returns
Type: Promise<void>
Slots
| Slot | Description |
|---|---|
| "content" | The content of the side panel |
| "description" | Optional description of the side panel |
| "footer" | The footer of the side panel |
| "header" | The header of the side panel |
Dependencies
Depends on
Graph
graph TD;
gux-modal-side-panel-beta --> gux-side-panel-beta
gux-side-panel-beta --> gux-dismiss-button
gux-dismiss-button --> gux-button-slot
gux-dismiss-button --> gux-icon
style gux-modal-side-panel-beta fill:#f9f,stroke:#333,stroke-width:4pxBuilt with StencilJS
gux-side-sheet-beta
Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
| size | size | "large" | "medium" | "small" | 'small' |
Events
| Event | Description | Type |
|---|---|---|
| sidePanelDismiss | CustomEvent<void> |
Slots
| Slot | Description |
|---|---|
| "content" | Required slot for the content |
| "footer" | Optional slot for the footer |
| "header" | Required slot for the header |
| "tabs" | Optional slot for the tabs |
Dependencies
Used by
Depends on
Graph
graph TD;
gux-side-panel-beta --> gux-dismiss-button
gux-dismiss-button --> gux-button-slot
gux-dismiss-button --> gux-icon
gux-modal-side-panel-beta --> gux-side-panel-beta
style gux-side-panel-beta fill:#f9f,stroke:#333,stroke-width:4pxBuilt with StencilJS
gux-side-panel-header
Slots
| Slot | Description |
|---|---|
| "badge" | Badge displayed on the right hand side |
| "description" | Description truncated to 3 lines |
| "icon" | Icon component displayed on the left side of the header |
| "title" | Title for the side panel |
Dependencies
Depends on
Graph
graph TD;
gux-side-panel-header --> gux-truncate
gux-truncate --> gux-tooltip
style gux-side-panel-header fill:#f9f,stroke:#333,stroke-width:4pxBuilt with StencilJS
gux-side-sheet-heading
Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
| level | level | Heading level, 1-6. | 1 | 2 | 3 | 4 | 5 | 6 | 1 |
| size | size | "default" | "large" | 'default' |
Slots
| Slot | Description |
|---|---|
| The heading text |
Dependencies
Depends on
Graph
graph TD;
gux-side-panel-heading --> gux-truncate
gux-truncate --> gux-tooltip
style gux-side-panel-heading fill:#f9f,stroke:#333,stroke-width:4pxBuilt with StencilJS