Скачать laravel form components - laravel form components Скачать исходный код

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

Компоненты совместимы с Livewire и могут использоваться со следующими рамками пользовательского интерфейса:

Начальная загрузка 5
Начальная загрузка 4
Tailwindcss 3 (предстоящая функция)

Нашли этот пакет полезным? Пожалуйста, рассмотрите возможность поддержать мою работу!

Совместимость

Ларавел	Livewire	PHP	Упаковка
^9,0 \| ^10.0	^2.0	8.1.* \| 8.2.*	^1.2
^8.0 \| ^9.0	^2.0	^8.1 \| ^8.2	^1.1
^8.0 \| ^9.0	^2.0	^8.0 \| ^8.1	^1.0

Руководство по обновлению

От Okipa/Laravel-Bootstrap-Components до Okipa/Laravel-Form-Components

Пример использования

Просто позвоните в компоненты, которые вам нужны в ваших взглядах, и позвольте этому пакету позаботиться о трудоемкой части HTML Generation.

< x:form::form class = " row " method = " PUT " :action = " route('user.update', $user) " :bind = " $user " >
    < div class = " col-md-6 " >
        < x:form::input name = " name " />
        < x:form::input type = " email " name = " email " />
        < x:form::textarea name = " biography " :locales = " ['fr', 'en'] " />
    </ div >
    < div class = " col-md-6 " >
        < x:form::select name = " hobbies " :options = " [1 => 'Sport', 2 => 'Cinema', 3 => 'Literature', 4 => 'Travel'] " caption = " Select your favorite hobbies. " multiple />
        < x:form::checkbox name = " technologies " :group = " [1 => 'Laravel', 2 => 'Bootstrap', 3 => 'Tailwind', 4 => 'Livewire'] " inline />
        < x:form::radio name = " gender " :group = " [1 => 'Male', 2 => 'Female', 3 => 'Other'] " inline />
        < x:form::toggle-switch name = " active " />
    </ div >
    < div class = " col-12 mt-2 " >
        < x:form::button .link class = " btn-secondary me-3 " > {{ __ ( ' Cancel ' ) } } </ x:form::button .link >
        < x:form::button .submit />
    </ div >
</ x:form:form >

И покажите эти компоненты:

Скриншот компонентов формы Laravel

Установка
Конфигурация
Виды
Компоненты
- Форма
- Вход
- Textarea
- Выбирать
- Флажок
- Выключатель
- Радио
- Кнопки
Как
- Иметь дело с атрибутами и классами
- Установить идентификатор
- Управлять этикеткой и заполнителем
- Ручка с плавающей этикеткой отображает
- Установить аддоны
- Связывать данные
- Установить пользовательское значение
- Обрабатывать статусы проверки и ошибки
- Добавить подписи
- Активируйте многоязычный режим
- Подключите с Livewire
Тестирование
Изменение
Внося
Кредиты
Лицензия

Установка

Вы можете установить пакет через композитор:

composer require okipa/laravel-form-components

Конфигурация

Вы можете опубликовать файл конфигурации с помощью:

php artisan vendor:publish --tag=form-components:config

Среди его конфигураций этот пакет позволяет выбирать, какую структуру пользовательского интерфейса будет использовать.

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

Виды

Вы можете опубликовать представления пакета, чтобы настраивать их при необходимости:

php artisan vendor:publish --tag=form-components:views

Компоненты

Форма

Компоненты могут быть завернуты в компонент формы.

Если не установлен пользовательский метод, метод GET будет установлен по умолчанию.

Скрытые поля метода CSRF и подделки будут автоматически генерироваться при необходимости, в соответствии с методом определенной формы:

Вам не нужно будет определить директиву @method() , объявить о том, как они PUT , PATCH или DELETE действие непосредственно в атрибуте action
Вам не нужно будет определить директиву @csrf() , она будет автоматически объявлена с помощью POST , PUT , PATCH и DELETE Actions

Формы генерируются с помощью атрибута HTML novalidate по умолчанию, который предотвращает проверку браузера в пользу проверки на стороне сервера (которая является хорошей практикой для вопросов безопасности).

< x:form::form method = " PUT " >
    < x:form::input name = " first_name " />
    ...
</ x:form::form >

Ввод и Textarea

Добавьте входы и текстовые средства в свои формы.

Если вы не установите пользовательский тип на ввод, он потребует типа text по умолчанию.

Радио, флажок и входы кнопок должны использоваться с их собственными компонентами из -за их различного поведения.

Компонент Textarea может использоваться так же, как входной компонент, но без объявления типа.

< x:form::input type = " file " name = " avatar " />
< x:form::input name = " first_name " />
< x:form::input type = " email " name = " email " />
...
< x:form::textarea name = " description " />

Выбирать

Установите выберите компоненты в ваших формах.

Автоматическое генерирование опций, предоставляя ассоциативную стоимость/массив метки.

HTML Select Elements Nontance не принимайте атрибуты заполнителей, однако компонент SELECT позволяет обрабатывать опцию, подобную заполнителю, готовится к другим. Этот заполнитель будет вести себя как для других компонентов.

По умолчанию эта опция заполнителя выбирается, отключена и скрыта. Тем не менее, вы сможете позволить его выбрать, если вам необходимо установить, например, nullable поле. Чтобы сделать это, просто добавьте атрибут allowPlaceholderToBeSelected в свой компонент.

В нескольких режиме этот пакет позаботится о преобразовании имени в имени массива, поэтому вам не нужно добавлять его вручную.

 @php ( $options = [ 1 => ' Laravel ' , 2 => ' Bootstrap ' , 3 => ' Tailwind ' , 4 => ' Livewire ' ] )
< x:form::select name = " hobby " placeholder = " What is your hobby prefered hobby? " :options = " $options " selected = " 1 " />
< x:form::select name = " hobbies " :options = " $options " :selected = " [2, 3] " allowPlaceholderToBeSelected multiple /> {{-- You'll be able to selected the placeholder and the name will be converted to hobbies[] --}}

Флакторы, переключатели переключателя и радиоприемники

Флакторы, переключатель переключателя и радиокомпоненты доступны для использования.

Поскольку радиопередаты никогда не используются в одиночку, вам придется объявить необходимый атрибут group при их использовании, в ожидании ассоциативного массива значения/метки, из которого будут генерироваться радио -поля.

Что касается входов на флажок и переключателя, вы сможете использовать их в одиночном или в групповом режиме. Чтобы использовать их в групповом режиме, вам также придется объявить group атрибут.

В групповом режиме этот пакет позаботится о преобразовании имени в имя массива, поэтому вам не нужно добавлять его вручную.

Если вы хотите отобразить эти входные компоненты встроенных, просто определите inline атрибут.

< x:form::checkbox name = " newsletter_subscription " :checked = " true " /> {{-- 1 generated checkbox --}}
< x:form::checkbox name = " technologies " :group = " ['laravel' => 'Laravel', 'bootstrap' => 'Bootstrap'] " :checked = " laravel " /> {{-- 2 generated checkboxes --}}
< x:form::toggle-switch name = " active " :checked = " false " inline /> {{-- 1 generated toggle switch with inline mode --}}
< x:form::toggle-switch name = " technologies " :group = " ['tailwind' => 'Tailwind', 'livewire " => 'Livewire']" :checked="livewire"/> {{-- 2 generated toggle switches --}}
< x:form::radio name = " gender " :group = " ['female' => 'Female', 'male' => 'Male'] " :checked = " male " inline /> {{-- 2 generated radios with inline mode --}}

Кнопки

Отправить, и компоненты кнопки ссылки доступны.

Кнопка «Отправить» позволяет запустить форму и обеспечить тело по умолчанию __('Submit') если его не определено.

Кнопка Link позволяет вам устанавливать действия, такие как Back или Cancel в ваших формах, предоставляя ссылку с кнопкой, похожим на дисплей. Поскольку этот компонент является ссылкой HTML, он предоставит заголовок по умолчанию, анализируя его тело.

По умолчанию оба компонента установят базовый цвет фона, если не определяется пользовательский атрибут класса.

< x:form::form >
    ...
    < div class = " d-grid " >
        < x:form::button .submit >Submit this form</ x:form::submit > {{-- Will provide `btn-primary` class with Bootstrap UI --}}
        < x:form::button .link class = " btn-secondary " href = " {{ back () } } " > {{-- Will auto-generate `title="Back"` --}}
            < i class = " fas fa-undo fa-fw " ></ i >
            Back
        </ x:form::submit >
    </ div >
</ x:form::form >

Как

Иметь дело с атрибутами и классами

При условии, что компонент строится с использованием компонентов лезвия.

После того, как работают компоненты лезвия, вы можете установить любые атрибуты и классы HTML:

Атрибуты заменят по умолчанию
Занятия будут объединены с существующими

Установить идентификатор

Определите идентификаторы компонентов, как вы бы сделали для любого элемента HTML.

Если не установлен пользовательский идентификатор, идентификатор будет сгенерирован с использованием значений Kebab <type>-<name> .

< x:form::input id = " custom-id " name = " first_name " /> {{-- Default id: `input-first-name` --}}

< x:form::textarea id = " custom-id " name = " first_name " /> {{-- Default id: `textarea-first-name` --}}

Включить или отключить входные маржины

По умолчанию все входные компоненты будут объявлять нижнюю маржу, чтобы правильно позиционировать себя в форме.

Иногда вам нужно отключить эту нижнюю маржу по умолчанию: вы сможете сделать это, установив атрибут marginBottom на false .

< x:form::input name = " first_name " /> {{-- Will declare a bottom margin --}}

< x:form::textarea name = " first_name " :marginBottom = " false " /> {{-- Will not declare any bottom margin --}}

Управлять этикеткой и заполнителем

Вы можете определить метки на всех входных компонентах (за исключением радио).

Если настраиваемая метка не определено, метки будут принимать __('validation.attributes.<name>) Значение по умолчанию.

После того же поведения все входные компоненты, которые позволяют использовать placeholder (Select Incluct), предоставят заполнителю по умолчанию, который примет значение label .

Вы можете переопределить это значение по умолчанию, установив пользовательского заполнителя.

Вы также можете скрыть автозаправленную этикетку и заполнителя к false .

< x:form::input name = " first_name " label = " First Name " placeholder = " Please fill your first name... " /> {{-- Will display the custom label and placeholder --}}
< x:form::input name = " last_name " :label = " false " :placeholder = " false " /> {{-- Will hide the label and placeholder --}}
< x:form::input type = " tel " name = " phone_number " /> {{-- Will display default auto-generated label and placeholder --}}

Ручка с плавающей этикеткой отображает

Этот пакет позволяет включить или отключить отображение плавучих меток.

Вы можете установить глобальное поведение с плавающей меткой с помощью config('form-components.floating_label') config.

Вы сможете переопределить это глобальное поведение на уровне формы для всех содержащихся компонентов.

< x:form::form :floatingLabel = " true " >
    < x:form::input name = " first_name " /> {{-- Will display a floating label even if it has been disabled in config --}}
</ x:form::form >

Наконец, вы также сможете переопределить все другие определенные поведение на самих компонентах.

    < x:form::input name = " first_name " :floatingLabel = " true " />

Установить аддоны

Вы можете определить prepend и append аддоны HTML на компоненты ввода и текстовой обработки.

    < x:form::input name = " " prepend = " <i class= " fas fa-code fa-fw " ></i> " />
    < x:form::input name = " search " append = " <i class= " fas fa-search fa-fw " ></i> " />

Примечание. Вы можете использовать HTML напрямую вместо компонентов для управления сложным аддоном.

Связывать данные

Вы можете связать красноречивые модели, объекты, коллекции или массивы, чтобы автоматически заполнить значения компонентов.

Данные привязки на компоненте формы запустит связывание всех его содержащихся компонентов.

Вы можете связать данные непосредственно на компоненте и переопределить привязку формы.

В случае ошибки проверки компоненты будут заполнены старыми значениями, которые будут переопределять связанные значения.

Для конкретного варианта использования вы также можете использовать @bind($boundDataBatch) и директивы @endbind Blade, чтобы связать группу компонентов.

 @php
    $dataBatch1 = [ ' description ' => ' A wonderful description ' ];
    $dataBatch2 = [ ' first_name ' => ' John ' , ' last_name ' => ' Bonham ' ];
@endphp
< x:form::form :bind = " $user " >
    < x:form::input type = " email " name = " email " /> {{-- Will set the value from `$user->email` --}}
    < x:form::textarea name = " description " :bind = " $dataBatch1 " /> {{-- Will set the value from `$dataBatch1['description`] --}}
    @bind ( $dataBatch2 )
        < x:form::input name = " first_name " /> {{-- Will set the value from `$dataBatch2['first_name`] --}}
        < x:form::input name = " last_name " /> {{-- Will set the value from `$dataBatch2['last_name`] --}}
    @endbind
</ x:form::form >

Установить пользовательское значение

Привлечение данных может быть переопределено, установив пользовательские значения на компоненты.

 @php ( $data = [ ' description ' => ' A wonderful description ' ]; )
< x:form::form :bind = " $user " >
    ...
    < x:form::textarea
        name = " description "
        :bind = " $user "
        :value = " $data['description'] " /> {{-- Will set the value from `$data['description`] --}}
</ x:form::form >

Обрабатывать статусы проверки и ошибки

Компоненты смогут отображать или скрывать свои статусы успеха/ошибки и сообщение об ошибке, когда запускается ошибка проверки:

Если активируется успех проверки проверки, компоненты будут помечены как действительные только тогда, когда другие компоненты в форме будут обнаружены как недействительные
Если отображение сбоя проверки активировано, компоненты в ошибке будут помечены как недействительные и отобразит соответствующее сообщение об ошибке

Вы можете контролировать это поведение на разных уровнях:

Определите глобальное поведение по умолчанию с помощью config('form-components.display_validation_success') и config('form-components.display_validation_failure')
Настройте это поведение в форме и примените его локально для всех его содержащих компонентов
Установите конкретное поведение непосредственно на компонент

< x:form::form displayValidationSuccess = " false " displayValidationFailure = " false " >
    < x:form::input type = " email " name = " email " /> {{-- Disabled success/error statuses and error message --}}
    < x:form::textarea
        name = " description "
        displayValidationSuccess = " true "
        displayValidationFailure = " true " /> {{-- Enabled success/error statuses and error message --}}
</ x:form::form >

Вы также можете настроить сумку с ошибкой, которая должна использоваться для определения статусов успеха/ошибок компонентов и сообщений об ошибках в компонентах формы.

< x:form::form errorBag = " form_error_bag " > {{-- Error bag for all components within the form --}}
    @errorbag ( ' group_error_bag ' ) {{-- Error bag for a group of components --}}
        < x:form::input name = " first_name " />
        < x:form::input name = " last_name " />
    @enderrorbag
    < x:form::input type = " email " name = " email " errorBag = " component_error_bag " /> {{-- Error bag for a specific component --}}
    ...
</ x:form::form >

Добавить подписи

Помогите пользователям и отобразите дополнительные инструкции в соответствии с вашими компонентами, добавив подписи.

    < x:form::input name = " name " caption = " Please fill this input with your full name. " />

Активируйте многоязычный режим

Активируйте многоязычный режим на компонентах input и textarea , чтобы извлечь выгоду из следующих функций:

Дублирование компонента: будет отображаться один компонент на локали
Локализация имени: name="description" будет преобразована в name="description[<locale>]"
Метка по умолчанию и сообщения об ошибке локализация: __(validation.attributes.name) Перевод, используемый для генерации метки по умолчанию, и сообщение об ошибке будет добавлено с (<LOCALE>)

< x:form::input name = " name " :locales = " ['fr', 'en'] " />
< x:form::textarea name = " description " :locales = " ['fr', 'en'] " />

Подключите с Livewire

Форма и входные компоненты совместимы с проводной.

Вместо того, чтобы определять wire:model HTML-атрибута на каждом компоненте, который вы хотите провести, как вы бы сделали без этого пакета, здесь вам просто нужно определить wire="<optional-modifier>" HTML-атрибут для выполнения этой работы.

Каждый проводной входной компонент будет использовать свой собственный атрибут name и преобразовать его в допустимый wire:model="<name>" One.

< x:form::form wire:submit.prevent = " submit " >
    < x:form::input name = " name " /> {{-- Will not be wired --}}
    < x:form::input type = " email " name = " email " wire /> {{-- Will bind the value from the Livewire component `$email` property with no defined Livewire modifier --}}
    < x-form::input name = " description " wire = " lazy " /> {{-- Will bind the value from the Livewire component `$description` property with the the `lazy` Livewire modifier --}}
    < x-form::submit />
</ x:form::form >

Следуя той же логике, вы также можете провести входные компоненты непосредственно из формы, в которую они содержат.

< x-form::form wire:submit.prevent = " submit " wire >
    < x-form::input type = " email " name = " email " /> {{-- Will bind the value from the Livewire component `$email` property with no defined Livewire modifier --}}
    < x-form::input name = " description " wire = " lazy " /> {{-- Will bind the value from the Livewire component `$description` property with the the `lazy` Livewire modifier --}}
    < x-form::submit />
</ x:form::form >

Для конкретного варианта использования вы также можете использовать директивы @wire($modifier) и @endwire Blade, чтобы подключить группу компонентов с определенным модификатором Livewire.

< x-form::form wire:submit.prevent = " submit " wire = " lazy " >
    < x-form::input name = " first_name " /> {{-- Will bind the value from the Livewire component `$first_name` property with the `lazy` Livewire modifier --}}
    @wire ( ' debounce.150ms ' )
        < x-form::input name = " last_name " /> {{-- Will bind the value from the Livewire component `$last_name` property with the `debounce.150ms` Livewire modifier --}}
    @endbind
    @wire ( null )
        < x-form::input type = " email " name = " email " /> {{-- Will bind the value from the Livewire component `$email` property with no defined Livewire modifier --}}
        < x-form::input name = " description " wire = " lazy " /> {{-- Will bind the value from the Livewire component `$description` property with the the `lazy` Livewire modifier --}}
    @endbind
    < x-form::submit />
</ x-form::form >