UI компоненты

Элементы формы

Компоненты формы являются обертками аналогичных HTML-элементов; им можно передавать все необходимые атрибуты.

Основы

Компонент Form предназначен для создания форм.

<x-moonshine::form raw>
    // элементы формы
</x-moonshine::form>
<x-moonshine::form raw>
    // элементы формы
</x-moonshine::form>

Компонент создает html разметку для будущей формы.

<form
    class="form" method="POST"
    x-id="['form']"
    :id="$id('form')"
>
    <input type="hidden" name="_token" value="huwre3xs9N9k82ThhkGVVfzWuf0L6heHRnEAogHD" autocomplete="off">
 
    // элементы формы
 
</form>
<form
    class="form" method="POST"
    x-id="['form']"
    :id="$id('form')"
>
    <input type="hidden" name="_token" value="huwre3xs9N9k82ThhkGVVfzWuf0L6heHRnEAogHD" autocomplete="off">
 
    // элементы формы
 
</form>

Кнопки

Компонент Form позволяет размещать кнопки в отдельном блоке. Для этого нужно передать их в слот buttons.

<x-moonshine::form>
    <x-moonshine::form.input
        name="title"
        placeholder="Title"
        value=""
    />
    <x-slot:buttons>
        <x-moonshine::form.button type="reset">Cancel</x-moonshine::form.button>
        <x-moonshine::form.button class="btn-primary">Submit</x-moonshine::form.button>
    </x-slot:buttons>
</x-moonshine::form>
<x-moonshine::form>
    <x-moonshine::form.input
        name="title"
        placeholder="Title"
        value=""
    />
    <x-slot:buttons>
        <x-moonshine::form.button type="reset">Cancel</x-moonshine::form.button>
        <x-moonshine::form.button class="btn-primary">Submit</x-moonshine::form.button>
    </x-slot:buttons>
</x-moonshine::form>

Ошибки

Параметр errors позволяет отображать список ошибок.

<x-moonshine::form raw error>
    // элементы формы
</x-moonshine::form>
<x-moonshine::form raw error>
    // элементы формы
</x-moonshine::form>

Если на странице несколько форм, рекомендуется задать name форме, чтобы отображать ошибки только для конкретной формы.

<x-moonshine::form raw error name="my-form">
    // элементы формы
</x-moonshine::form>
<x-moonshine::form raw error name="my-form">
    // элементы формы
</x-moonshine::form>

Предварительное распознавание

Параметр precognitive позволяет включить режим Precognition для формы.

<x-moonshine::form precognitive>
    // элементы формы
</x-moonshine::form>
<x-moonshine::form precognitive>
    // элементы формы
</x-moonshine::form>

Метка

<x-moonshine::form.label name="slug">
    Slug
</x-moonshine::form.label>
<x-moonshine::form.label name="slug">
    Slug
</x-moonshine::form.label>

Если поле обязательно, можно передать атрибут required для стилизации элемента.

<x-moonshine::form.label name="title" required>
    Title
</x-moonshine::form.label>
<x-moonshine::form.label name="title" required>
    Title
</x-moonshine::form.label>

Ввод

<x-moonshine::form.input
    name="title"
    placeholder="Title"
    value=""
/>
<x-moonshine::form.input
    name="title"
    placeholder="Title"
    value=""
/>

Флажок

<x-moonshine::form.label>
    <x-moonshine::form.input
        name="property[]"
        type="checkbox"
        value="1"
    />
    Property 1
</x-moonshine::form.label>
<x-moonshine::form.label>
    <x-moonshine::form.input
        name="property[]"
        type="checkbox"
        value="1"
    />
    Property 1
</x-moonshine::form.label>

Переключатель

<x-moonshine::form.label>
    <x-moonshine::form.input
        name="variant"
        type="radio"
        value="1"
    />
    Variant 1
</x-moonshine::form.label>
<x-moonshine::form.label>
    <x-moonshine::form.input
        name="variant"
        type="radio"
        value="1"
    />
    Variant 1
</x-moonshine::form.label>

Цвет

<x-moonshine::form.input
    name="color"
    type="color"
    value="#ec4176"
/>
<x-moonshine::form.input
    name="color"
    type="color"
    value="#ec4176"
/>

Кнопка

<x-moonshine::form.button>Click me</x-moonshine::form.button>
<x-moonshine::form.button>Click me</x-moonshine::form.button>

Подсказка

<x-moonshine::form.hint>
    {{ fake()->sentence() }}
</x-moonshine::form.hint>
<x-moonshine::form.hint>
    {{ fake()->sentence() }}
</x-moonshine::form.hint>

Файл

<x-moonshine::form.file name="file" />
<x-moonshine::form.file name="file" />

С помощью компонента можно отобразить ранее загруженные файлы.

<x-moonshine::form.file
    :files="[
        '/images/thumb_1.jpg',
        '/images/thumb_2.jpg',
        '/images/thumb_3.jpg'
    ]"
    :raw="[
        'thumb_1.jpg',
        'thumb_2.jpg',
        'thumb_3.jpg'
    ]"
    name="images[]"
    multiple="multiple"
/>
<x-moonshine::form.file
    :files="[
        '/images/thumb_1.jpg',
        '/images/thumb_2.jpg',
        '/images/thumb_3.jpg'
    ]"
    :raw="[
        'thumb_1.jpg',
        'thumb_2.jpg',
        'thumb_3.jpg'
    ]"
    name="images[]"
    multiple="multiple"
/>

files - массив url файлов для вывода raw - массив исходных данных (значение, хранящееся в базе данных).

Вы можете передать дополнительные параметры компоненту:

download - скачивание загруженного файла removable - удаление из списка загруженных файлов imageable - отображение превью изображения

<x-moonshine::form.file
    :files="[
        '/images/thumb_1.jpg',
        '/images/thumb_2.jpg',
        '/images/thumb_3.jpg'
    ]"
    :raw="[
        'thumb_1.jpg',
        'thumb_2.jpg',
        'thumb_3.jpg'
    ]"
    name="images[]"
    multiple="multiple"
    :download="true"
    :removable="false"
    :imageable="false"
/>
<x-moonshine::form.file
    :files="[
        '/images/thumb_1.jpg',
        '/images/thumb_2.jpg',
        '/images/thumb_3.jpg'
    ]"
    :raw="[
        'thumb_1.jpg',
        'thumb_2.jpg',
        'thumb_3.jpg'
    ]"
    name="images[]"
    multiple="multiple"
    :download="true"
    :removable="false"
    :imageable="false"
/>

Диапазон

<x-moonshine::form.slide-range
    fromName="from"
    toName="to"
    fromValue="1000"
    toValue="9000"
    min="0"
    max="10000"
/>
<x-moonshine::form.slide-range
    fromName="from"
    toName="to"
    fromValue="1000"
    toValue="9000"
    min="0"
    max="10000"
/>

Выбор

<x-moonshine::form.select
    :values="[
        1 => 'Вариант 1',
        2 => 'Вариант 2'
    ]"
    value="2"
/>
<x-moonshine::form.select
    :values="[
        1 => 'Вариант 1',
        2 => 'Вариант 2'
    ]"
    value="2"
/>

или через slot:options

<x-moonshine::form.select>
    <x-slot:options>
        <option value="1">Вариант 1</option>
        <option selected value="2">Вариант 2</option>
    </x-slot:options>
</x-moonshine::form.select>
<x-moonshine::form.select>
    <x-slot:options>
        <option value="1">Вариант 1</option>
        <option selected value="2">Вариант 2</option>
    </x-slot:options>
</x-moonshine::form.select>

Вы можете объединять значения в группы.

<x-moonshine::form.select
    :values="[
        'Италия' => [
            1 => 'Рим',
            2 => 'Милан'
        ],
        'Франция' => [
            3 => 'Париж',
            4 => 'Марсель'
        ],
    ]"
    :searchable="true"
/>
<x-moonshine::form.select
    :values="[
        'Италия' => [
            1 => 'Рим',
            2 => 'Милан'
        ],
        'Франция' => [
            3 => 'Париж',
            4 => 'Марсель'
        ],
    ]"
    :searchable="true"
/>

Вы можете передать дополнительные параметры компоненту: searchable - поиск по значениям nullable - может иметь значение NULL

<x-moonshine::form.select
    :values="[
        1 => 'Вариант 1',
        2 => 'Вариант 2'
    ]"
    :nullable="true"
    :searchable="true"
/>
<x-moonshine::form.select
    :values="[
        1 => 'Вариант 1',
        2 => 'Вариант 2'
    ]"
    :nullable="true"
    :searchable="true"
/>

Для асинхронной загрузки значений необходимо указать url для атрибута asyncRoute, который вернет данные в формате json.

 
<x-moonshine::form.select asyncRoute='url' />
 
<x-moonshine::form.select asyncRoute='url' />

Переключатель

<x-moonshine::form.switcher
    :onValue="true"
    :offValue="false"
    checked="checked"
/>
<x-moonshine::form.switcher
    :onValue="true"
    :offValue="false"
    checked="checked"
/>

onValue - активное значение offValue - неактивное значение

Текстовая область

<x-moonshine::form.textarea>
    {{ fake()->text() }}
</x-moonshine::form.textarea>
<x-moonshine::form.textarea>
    {{ fake()->text() }}
</x-moonshine::form.textarea>