Props type alias for associated component.

type Props = {
    allowLocking?: boolean;
    classes?: Iterable<string>;
    clickToOpen?: boolean;
    duration?: number;
    easingIn?: EasingReference;
    easingOut?: EasingReference;
    items?: Iterable<
        {
            condition?: boolean
            | (() => boolean);
            icon: string | Embed;
            svelte: Embed;
            tooltip?: string;
        },
    >;
    side?: "left"
    | "right";
    sideAbs?: boolean;
    styles?: { [key: string]: string };
    tooltipDirection?: string;
    tooltips?: boolean;
    top?: string | number;
    topUnit?: string;
    zIndex?: number;
}
Index

Properties

allowLocking?: boolean

Controls whether items can be locked when clickToOpen is false. By default, items can be locked.

classes?: Iterable<string>

An iterable list of additional classes to add to the main slide layer element

clickToOpen?: boolean

When true items are only opened / closed by click / keyboard interaction.

duration?: number

Duration of transition effect.

easingIn?: EasingReference

Either the name of a Svelte easing function or a Svelte compatible easing function.

easingOut?: EasingReference

Either the name of a Svelte easing function or a Svelte compatible easing function.

items?: Iterable<
    {
        condition?: boolean
        | (() => boolean);
        icon: string | Embed;
        svelte: Embed;
        tooltip?: string;
    },
>

An iterable list of side slide items including icon (Font awesome string), a Svelte configuration object, and tooltip.

You may provide a condition boolean or function that returns a boolean to hide the item. This is useful for adding items / panels only visible for the GM amongst other conditional tests.

side?: "left" | "right"

The side in layers parent element to display.

sideAbs?: boolean

Whether to apply absolute positioning for left / right layout.

styles?: { [key: string]: string }

Additional inline styles to apply to the side slide layer. Useful for setting CSS variables.

tooltipDirection?: string

Tooltip direction

tooltips?: boolean

When true, tooltips are enabled.

top?: string | number

A valid CSS value for the top positioning attribute for the top of the side slide layer.

When top is a number it will be treated as pixels unless topUnit is defined.

topUnit?: string

When top is defined as a number and topUnit is defined then it is used to create the top style. This facilitates creating a UI for editing side slide layer via a range input and separately storing the unit type.

Examples are: px, %, em, rem. Either px or % make the most sense depending on the layout constraints.

zIndex?: number

The z-index for the side slide layer inside the parent element.