Panel
A container used to display grouped content like text, images, and actions. Can serve as a basis for a card component
View source
Panel content
<script lang="ts">
import { Panel } from 'svxui';
</script>
<Panel>Panel content</Panel>API Reference
| Property | Type | Default | Description |
|---|---|---|---|
as | keyof SvelteHTMLElements | "div" | Render element as |
children Snippet | Snippet<[void]> | Panel content to render | |
color | string | number | symbol | "neutral" | Panel color |
elementRef $bindable | HTMLElement | Rendered DOM element | |
fullWidth | boolean | false | Panel full with |
radius | union | Panel radius | |
size | union | "3" | Panel size |
variant | union | "solid" | Panel variant |
Examples
Colors
Panel content
Panel content
Panel content
Panel content
Panel content
Panel content
Sizes
Panel size 0
Panel size 1
Panel size 2
Panel size 3
Panel size 4
Panel size 5
Panel size 6
Panel size 7
Panel size 8
Panel size 9
Variants
Panel solid
Panel soft
Panel outline
FullWidth
Panel content
Interactive
The panel is hoverable and focusable if it is rendered as:
buttonalabelcontaining a radio/checkbox input
Card
Card title
Card subtitle
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tincidunt elit mattis sem mollis, sit amet dapibus arcu commodo. Morbi non aliquam sapien. Quisque pretium.