Titlebar

Displays a titlebar inside a paper (or anywhere really, but it looks pretty cool with those). Allows customization of the text and side controls.

Component Macros

$fill / $flat
$color

Areas

$title `required`

The main content of the titlebar, will always sit in between the menu and action slot elements (if any). If no element with the $title macro is used, the titlebar will not appear correctly.

Content that sits on the left side of the titlebar, where menu-opening controls usually sit.

$action

Content that sits on the right side of the titlebar.

Preview

Preview Theme

Example

<ws-grid ws-x="[gr.cols 1fr 1fr] [gap 8px]">
    <ws-titlebar>
        <span ws-x="[$title]">
            <div ws-x="[$title-text]">Basic Titlebar</div>
        </span>
    </ws-titlebar>
    <ws-titlebar>
        <span ws-x="[$title]">
            <div ws-x="[$title-text]">Basic Titlebar</div>
            <div ws-x="[$subtitle-text]">With Subtitle</div>
        </span>
    </ws-titlebar>

    <ws-titlebar>
        <span ws-x="[$title] [$flat]">
            <div ws-x="[$title-text]">Flat Titlebar</div>
        </span>
    </ws-titlebar>
    <ws-titlebar>
        <span ws-x="[$title] [$flat]">
            <div ws-x="[$title-text]">Flat Titlebar</div>
            <div ws-x="[$subtitle-text]">With Subtitle</div>
        </span>
    </ws-titlebar>

    <ws-titlebar>
        <span ws-x="[$title] [$color @primary] [$title-text]">
            Color Titlebar
        </span>
    </ws-titlebar>

    <ws-titlebar>
        <span ws-x="[$title] [$color @danger] [$title-text]">
            Titlebar + controls
        </span>

        <button ws-x="[$flat]">
            <ws-icon class="bi-list" ws-x="[t.sz 20px]"></ws-icon>
        </button>
    </ws-titlebar>

    <ws-titlebar>
        <span ws-x="[$title] [$fill] [$color @accent] [$title-text]">
            Filled Color Titlebar
        </span>
    </ws-titlebar>

    <ws-titlebar>
        <span ws-x="[$title] [$fill] [$color @secondary] [$title-text]">
            Filled Titlebar + controls
        </span>

        <div ws-x="[grid] [$action]">
            <label ws-x="@@button [$compact]">
                Done
            </label>
        </div>
    </ws-titlebar>

    <ws-paper>
        <ws-titlebar ws-x="[$header]">
            <span ws-x="[$title] [$flat]">
                <div ws-x="[$title-text]">Flat Titlebar</div>
                <div ws-x="[$subtitle-text]">in Paper</div>
            </span>
        </ws-titlebar>
        <ws-flex>
            <div>Paper Content</div>
        </ws-flex>
    </ws-paper>

    <ws-paper ws-x="[$outline]">
        <ws-titlebar ws-x="[$header]">
            <span ws-x="[$title]">
                <div ws-x="[$title-text]">Basic Titlebar</div>
                <div ws-x="[$subtitle-text]">in Paper</div>
            </span>
        </ws-titlebar>
        <ws-flex>
            <div>Paper Content</div>
        </ws-flex>
    </ws-paper>
</ws-grid>