Form elements

Вы просматриваете документацию старой версии MoonShine. Рассмотрите возможность обновления вашего проекта до MoonShine 2.x.

Разделы
- Label
- Input
- Checkbox
- Radio
- Color
- Button
- Hint
- File
- Range
- Select
- Switcher
- Textarea

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

# Label

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

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

Slug

Если поле обязательно для заполнения, то можно передать атрибут 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>

Title *

# Input

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

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

# Checkbox

<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>

Property 1

# Radio

<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>

Variant 1

# Выбор цвета

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

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

# Button

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

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

# Hint

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

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

Fugiat natus ipsa deserunt consequatur ut velit amet non.

# File

<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'
]" name="images[]" multiple="multiple"/>

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

Дополнительно будут созданы скрытые поля со значениями переданные в массиве files[].

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

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

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

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

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

# Select

<x-moonshine::form.select
    :values="[
        1 => 'Option 1',
        2 => 'Option 2'
    ]"
    value="2"
/>

<x-moonshine::form.select
    :values="[
        1 => 'Option 1',
        2 => 'Option 2'
    ]"
    value="2"
/>

или через slot:options

<x-moonshine::form.select>
    <x-slot:options>
        <option value="1">Option 1</option>
        <option selected value="2">Option 2</option>
    </x-slot:options>
</x-moonshine::form.select>

<x-moonshine::form.select>
    <x-slot:options>
        <option value="1">Option 1</option>
        <option selected value="2">Option 2</option>
    </x-slot:options>
</x-moonshine::form.select>

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

<x-moonshine::form.select
    :values="[
        'Italy' => [
            1 => 'Rome',
            2 => 'Milan'
        ],
        'France' => [
            3 => 'Paris',
            4 => 'Marseille'
        ],
    ]"
    :searchable="true"
/>

<x-moonshine::form.select
    :values="[
        'Italy' => [
            1 => 'Rome',
            2 => 'Milan'
        ],
        'France' => [
            3 => 'Paris',
            4 => 'Marseille'
        ],
    ]"
    :searchable="true"
/>

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

searchable - поиск по значениям
nullable - может иметь значение NULL

<x-moonshine::form.select
    :values="[
        1 => 'Option 1',
        2 => 'Option 2'
    ]"
    :nullable="true"
    :searchable="true"
/>

<x-moonshine::form.select
    :values="[
        1 => 'Option 1',
        2 => 'Option 2'
    ]"
    :nullable="true"
    :searchable="true"
/>

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

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

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

# Switcher

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

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

onValue - значение при активном состоянии
offValue - значение при неактивном состоянии

# Textarea

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

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