Type Alias Props

Props: {
    allowLocking?: boolean;
    classes?: Iterable<string>;
    clickToOpen?: boolean;
    duration?: number;
    easingIn?: EasingReference;
    easingOut?: EasingReference;
    items?: Iterable<{
        condition?: boolean | (() => boolean);
        icon: string | TJSSvelteConfig;
        svelte: TJSSvelteConfig;
        title?: string;
    }>;
    side?: "left" | "right";
    styles?: {
        [key: string]: string | null;
    };
    top?: string | number;
    topUnit?: string;
    zIndex?: number;
}

Props type alias for associated component.

Type declaration

  • OptionalallowLocking?: boolean

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

  • Optionalclasses?: Iterable<string>

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

  • OptionalclickToOpen?: boolean

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

  • Optionalduration?: number

    Duration of transition effect.

  • OptionaleasingIn?: EasingReference

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

  • OptionaleasingOut?: EasingReference

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

  • Optionalitems?: Iterable<{
        condition?: boolean | (() => boolean);
        icon: string | TJSSvelteConfig;
        svelte: TJSSvelteConfig;
        title?: string;
    }>

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

    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.

  • Optionalside?: "left" | "right"

    The side in layers parent element to display.

  • Optionalstyles?: {
        [key: string]: string | null;
    }

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

    • [key: string]: string | null
  • Optionaltop?: 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.

  • OptionaltopUnit?: 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.

  • OptionalzIndex?: number

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

Settings

Member Visibility