Form elements

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

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

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

# Input 

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

# Radio 

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

# Button 

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

# Hint 

<x-moonshine::form.hint>
    {{ fake()->sentence() }}
</x-moonshine::form.hint>
Qui aliquam soluta accusamus quia facere et.

# 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"/>

Дополнительно будут созданы скрытые поля со значениями переданные в массиве 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"
/>
/images/thumb_1.jpg
/images/thumb_2.jpg
/images/thumb_3.jpg

# Range 

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

или через 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
    :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"
/>

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

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

# Switcher 

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

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

# Textarea 

<x-moonshine::form.textarea>
    {{ fake()->text() }}
</x-moonshine::form.textarea>
UI компоненты
Files
UI компоненты
Grid/Column