Dashboard Shaper

Shape your dashboard into life.

Example

Props

    🕹ī¸ standard props
    layoutWidth
    number
    Width of the dashboard grid
    6
    layoutHeight
    number
    Height of the dashboard grid
    4
    widgets
    Widget[]
    Widgets to display
    availableWidgetCells
    AvailableWidget[]
    Every available widget to choose from
    someRowSlotEmpty
    boolean
    True if there is a row that is not fully complete
    preview
    boolean
    Puts the dashboard in preview mode
    false
    canAdd
    boolean
    Enables add widget button
    true
    lang
    "it" | "en"
    Language of the text
    "en"
    🎨 style props
    --dashboard-shaper-widget-height
    height
    Widget height
    200px
    --dashboard-shaper-gap
    gap
    Gap between widgets
    4px
    --dashboard-shaper-cell-preview-background-color
    color
    Preview widgets background color
    rgb(var(--global-color-primary-500), 0.5)
    --dashboard-shaper-widget-preview-border-radius
    border-radius
    Preview widgets border radius
    8px
    --dashboard-shaper-display-mobile
    display
    Dashboard display on mobile screen
    flex
    --dashboard-shaper-flex-direction-mobile
    flex-direction
    Dashboard flex direction on mobile screen
    column
    --dashboard-shaper-dialog-background-color
    color
    Selection dialog background color
    rgb(var(--global-color-background-300))
    --dashboard-shaper-dialog-header-background-color
    color
    Selection dialog header background color
    rgb(var(--global-color-background-400))
    --dashboard-shaper-add-widget-button-background-color
    color
    Add widget button background color
    rgb(var(--global-color-background-300))

Slots

    widgetCellSnippet
    Snippet containing the actual widget
    Default content:
    
{widgetCell.widget.componentName}
    Available variables:
    NameTypeDescription
    widgetCellWidgetThe widget to display
    removeWidgetCell({ id }) => voidFunction to call when deleting a widget
    addWidgetButtonSnippet
    The button to add widget
    Default content:
    
<button 
	class="add-button" 
	onclick={() => handleAddClick({ slot })}
>
	<Icon name="mdi-plus" --icon-default-size="1.5rem" />
	<div class="description">{lang == 'en' ? 'Add widget' : 'Aggiungi widget'}</div>
</button>
    Available variables:
    NameTypeDescription
    handleAddClick({ slot }) => voidFunction to call to add a widget
    slotSlotSlot to pass to the handleAddClick function
    widgetSelectionDialogHeaderSnippet
    Header of the dialog to select widgets
    Default content:
    
<div class="header">
	<Icon name={"mdi-widgets-outline"} --icon-size="30px"/>
	<div class="title">{lang == 'en' ? 'Add widget' : 'Aggiungi widget'}</div>
</div>

Events

    onaddWidgetCell
    Event dispatched when a widget is added
    AttributeTypeDescription
    widgetCellWidgetThe widget added
    onremoveWidgetCell
    Event dispatched when a widget is removed
    AttributeTypeDescription
    widgetCellWidgetThe widget removed