Headers | Razor UI

Headers

<x-app-ui::header>
    <x-slot name="heading">
        Personal Site
    </x-slot>

    <x-slot name="meta">
        <x-app-ui::header.meta-detail icon="iconic-lock" icon-color="success">
            larsklopstra.nl
        </x-app-ui::header.meta-detail>
    </x-slot>

    <x-slot name="actions">
        <div>
            <x-app-ui::sr-only>
                <label for="date-range">
                    Show statistics for
                </label>
            </x-app-ui::sr-only>

            <x-app-ui::select id="date-range">
                <option value="week">Last week</option>
                <option value="month">Last month</option>
                <option value="year">Last year</option>
            </x-app-ui::select>
        </div>
    </x-slot>
</x-app-ui::header>

<x-app-ui::header background-color="light">
    <x-slot name="heading">
        Personal Site
    </x-slot>

    <x-slot name="meta">
        <x-app-ui::header.meta-detail icon="iconic-lock" icon-color="success">
            larsklopstra.nl
        </x-app-ui::header.meta-detail>
    </x-slot>

    <x-slot name="actions">
        <div>
            <x-app-ui::sr-only>
                <label for="date-range">
                    Show statistics for
                </label>
            </x-app-ui::sr-only>

            <x-app-ui::select id="date-range">
                <option value="week">Last week</option>
                <option value="month">Last month</option>
                <option value="year">Last year</option>
            </x-app-ui::select>
        </div>
    </x-slot>
</x-app-ui::header>

<x-app-ui::header background-color="light">
    <x-slot name="heading">
        razorui.com
    </x-slot>

    <x-slot name="meta">
        <x-app-ui::header.meta-detail icon="iconic-upload" icon-color="danger">
            <x-slot name="label">
                Latest Deployment
            </x-slot>

            2 hours ago
        </x-app-ui::header.meta-detail>
    </x-slot>

    <x-slot name="actions">
        <x-app-ui::button>
            Deploy now
        </x-app-ui::button>

        <x-app-ui::button color="secondary">
            View logs
        </x-app-ui::button>
    </x-slot>
</x-app-ui::header>

<x-app-ui::header background-color="light">
    <x-slot name="heading">
        razorui.com
    </x-slot>

    <x-slot name="meta">
        <x-app-ui::header.meta-detail icon="iconic-upload" icon-color="danger">
            <x-slot name="label">
                Latest Deployment
            </x-slot>

            2 hours ago
        </x-app-ui::header.meta-detail>
    </x-slot>

    <x-slot name="actions">
        <x-app-ui::button>
            Deploy now
        </x-app-ui::button>

        <x-app-ui::button color="secondary">
            View logs
        </x-app-ui::button>
    </x-slot>

    <x-slot name="tabs">
        <x-app-ui::tabs>
            <x-app-ui::tabs.item active>
                Deployments
            </x-app-ui::tabs.item>

            <x-app-ui::tabs.item>
                Analytics
            </x-app-ui::tabs.item>

            <x-app-ui::tabs.item>
                Workflow
            </x-app-ui::tabs.item>

            <x-app-ui::tabs.item>
                Settings
            </x-app-ui::tabs.item>
        </x-app-ui::tabs>
    </x-slot>
</x-app-ui::header>

API

`app-ui::header`

Attributes

Name	Default	Options	Notes
`background-color`		`light`

Slots

Name	Notes
`actions`	Contains the `app-ui::button` component actions to display aside the heading, subheading and meta on desktop, and under them on mobile.
`breadcrumbs`	Contains an `app-ui::breadcrumbs` component to display above the heading.
`heading`	Contains the heading text.
`meta`	Contains `app-ui::header.meta-detail` components to display below the heading and subheading.
`subheading`	Contains the subheading text.
`tabs`	Contains an `app-ui::tabs` component to display at the end of the heading.

`app-ui::header.meta-detail`

Attributes

Name	Default	Options	Notes
`icon`		Any Blade icon component name
`icon-color`		`danger`, `primary`, `success`, `warning`

Slots

Name	Notes
Main	Contains the text content of the meta detail.
`label`	Contains the label text.