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



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

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

Input

Является одним из разносторонних элементов формы и позволяет создавать разные части интерфейса и обеспечивать взаимодействие с пользователем. Главным образом предназначен для создания текстовых полей.

Input

Пример записи:

Input::make('name');

Пользовательское оформление

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

Input::make('name')
    ->title('First name');

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

Input::make('name')
    ->help('What is your name?');

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

Input::make('name')
    ->popover('Tooltip - hint that user opens himself.');

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

Input::make('name')->vertical();
Input::make('name')->horizontal();

Обязательное для заполнения

Иногда вам может потребоваться указать поле обязательным к заполнению, для этого необходимо вызвать метод required:

Input::make('name')
    ->type('text')
    ->required();

Скрытие полей

Input::make('name')->canSee(true);
Input::make('name')->canSee(false);

Заметьте, многие методы, такие как canSee, required, title, help, vertical, horizontal и многие другие, доступны почти в каждом поле системы.

Типы

Одно из самых универсальных полей за счет указания типа, поддерживаются все html значения:

Обратите внимание. Поддержка новых HTML5 атрибутов полностью зависит от используемого браузера.

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

Input::make('name')->type('text');

Поле для ввода имени файла, который пересылается на сервер.

Input::make('name')->type('file');

Скрытое поле.

Input::make('name')->type('hidden');

Виджет для выбора цвета.

Input::make('name')->type('color');

Для адресов электронной почты.

Input::make('name')->type('email');

Ввод чисел.

Input::make('name')->type('number');

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

Input::make('name')->type('range');

Для указания веб-адресов.

Input::make('name')->type('url');

Более подробно о типах атрибутов можно узнать на сайте Mozilla.

Маска для ввода значений

Отлично подходит если значения должны быть записаны в стандартном виде, например ИНН или номер телефона

Пример записи:

Input::make('phone')
    ->mask('(999) 999-9999')
    ->title('Номер телефона');

В маску можно передавать массив с параметрами, например:

Input::make('price')
    ->title('Стоимость')
    ->mask([
     'mask' => '999 999 999.99',
     'numericInput' => true
    ]);
Input::make('price')
    ->title('Стоимость')
    ->mask([
        'alias' => 'currency',
        'prefix' => ' ',
        'groupSeparator' => ' ',
        'digitsOptional' => true,
    ]);

Все доступные параметры Inputmask можно посмотреть здесь.

TextArea

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

Пример записи:

TextArea::make('description');

Вы можете задать необходимое количество строк с помощью метода rows:

TextArea::make('description')
    ->rows(5);

CheckBox

Элемент графического пользовательского интерфейса, позволяющий пользователю управлять параметром с двумя состояниями — ☑ включено и ☐ выключено.

Пример записи:

CheckBox::make('free')
    ->value(1)
    ->title('Free')
    ->placeholder('Event for free')
    ->help('Event for free');

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

CheckBox::make('enabled')
    ->sendTrueOrFalse();

Select

Простой выбор из списка массива:

Select::make('select')
    ->options([
        'index'   => 'Index',
        'noindex' => 'No index',
    ])
    ->title('Select tags')
    ->help('Allow search bots to index');

Работа с источником:

Select::make('user')
    ->fromModel(User::class, 'email');

Источник с условием:

Select::make('user')
    ->fromQuery(User::where('balance', '!=', '0'), 'email');

Изменение ключа:

Select::make('user')
    ->fromModel(User::class, 'email', 'uuid');

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

// Для массива
Select::make('user')
    ->empty('Не выбрано')
    ->options([
        1  => 'Пункт 1',
        2  => 'Пункт 2',
    ]);

// Для источника
Select::make('user')
    ->fromModel(User::class, 'name')
    ->empty('Не выбрано');

Обратите внимание, что empty вызывается позднее заполняющих методов, иначе добавленное значение будет перезаписано.

Метод empty так же принимает и второй аргумент, отвечающий за значение:

Select::make('user')
    ->empty('Не выбрано', 0)
    ->options([
        1  => 'Пункт 1',
        2  => 'Пункт 2',
    ]);

Relation

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

Relation::make('idea')
    ->fromModel(Idea::class, 'name')
    ->title('Выберите свою идею');

Для множественого выбора примените метод multiple()

Relation::make('ideas.')
    ->fromModel(Idea::class, 'name')
    ->multiple()
    ->title('Выберите свои идеи');

Примечание. Обратите внимание на точку в конце имени. Она необходима для того, чтобы показать ожидаемость массива. Как если бы это был HTML код <input name='ideas[]'>

Для модификации загрузки можно использовать указание на scope модели, например, взять только активные:

namespace App;

use Illuminate\Database\Eloquent\Model;

class Idea extends Model
{

    /**
     * @param Builder $query
     *
     * @return Builder
     */
    public function scopeActive(Builder $query)
    {
        return $query->where('active', true);
    }
}
Relation::make('idea')
    ->fromModel(Idea::class, 'name')
    ->applyScope('active')
    ->title('Выберите свою идею');

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

namespace App;

use Illuminate\Database\Eloquent\Model;

class User extends Model
{
    /**
     * @return string
     */
    public function getFullAttribute(): string
    {
        return $this->attributes['name'] . ' (' . $this->attributes['email'] . ')';
    }
}

Для указания отображаемого поля необходимо:

Relation::make('users.')
    ->fromModel(User::class, 'name')
    ->displayAppend('full')
    ->multiple()
    ->title('Select users');

DateTime

Позволяет выбрать дату и время.

Datatime

Пример записи:

DateTimer::make('open')
    ->title('Opening date');

Разрешить прямой ввод:

DateTimer::make('open')
    ->title('Opening date')
    ->allowInput();

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

DateTimer::make('open')
    ->title('Opening date')
    ->allowInput()
    ->required();

Формат данных:

DateTimer::make('open')
    ->title('Opening date')
    ->format('Y-m-d');

Пример, для отображения в 24-ом формате:

DateTimer::make('open')
    ->title('Opening date')
    ->format24hr();

Календарь со временем:

DateTimer::make('open')
    ->title('Opening time')
    ->enableTime();

Выбор только времени:

DateTimer::make('open')
    ->title('Opening time')
    ->noCalendar()
    ->format('h:i K');

TimeZone

Поле для удобного выбора часового пояса:

TimeZone::make('time');

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

use DateTimeZone;

TimeZone::make('time')
    ->listIdentifiers(DateTimeZone::ALL); 

По умолчанию принимает значение DateTimeZone::ALL, но возможны и другие:

DateTimeZone::AFRICA;
DateTimeZone::AMERICA;
DateTimeZone::ANTARCTICA;
DateTimeZone::ARCTIC;
DateTimeZone::ASIA;
DateTimeZone::ATLANTIC;
DateTimeZone::AUSTRALIA;
DateTimeZone::EUROPE;
DateTimeZone::INDIAN;
DateTimeZone::PACIFIC;
DateTimeZone::UTC;
DateTimeZone::ALL_WITH_BC;
DateTimeZone::PER_COUNTRY;

С представлением пременных зон можно ознакомиться в документации PHP.

HTML редактор Quill

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

Пример записи:

Quill::make('html');

Доступно 6 групп элементов управления:

Quill::make('html')
    ->toolbar(["text", "color", "header", "list", "format", "media"]);

Markdown редактор

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

MarkdownMarkdown2

Пример записи:

SimpleMDE::make('markdown');

Matrix

Поле предоставляет удобный интерфейс для редактирования плоской таблицы. Например, вы можете хранить информацию внутри столбца типа JSON:

Matrix::make('options')
    ->columns([
        'Attribute',
        'Value',
        'Units',
    ])

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

Matrix::make('options')
    ->columns([
        'Attribute' => 'attr',
        'Value' => 'product_value',
    ])

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

Matrix::make('options')
    ->columns(['id', 'name'])
    ->maxRows(10)

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

Matrix::make('users')
    ->title('Users list')
    ->columns(['id', 'name'])
    ->fields([
        'id'   => Input::make()->type('number'),
        'name' => TextArea::make(),
    ]),

Редактор кода

Поле для записи программного кода с возможностью подсветки.

Code

Пример записи:

Code::make('code');

Для указания подцветки кода под конкретный язык программирования можно использовать метод language().

 Code::make('code')
     ->language(Code::CSS);

Доступны следующие языки:

  • Markup - markup, html, xml, svg, mathml
  • CSS - css
  • C-like - clike
  • JavaScript - javascript, js

Поддерживается указание количества строк:

Code::make('code')
    ->lineNumbers();

Picture

Позволяет загружать изображение.

Пример записи:

Picture::make('picture');

Cropper

Позволяет загружать изображение и обрезать до нужного формата.

Cropper

Пример записи:

Cropper::make('picture');

Ширина и высота

Для того чтобы контролировать формат, можно указать ширину и высоту необходимого изображения:

Cropper::make('picture')
    ->width(500)
    ->height(300);

Ограничение размера файла

Для ограничения размера загружаемого файла необходимо задать максимальное значение в MB

Cropper::make('picture')
    ->maxFileSize(2);

Значение

Контроль возращаемого значения осуществляется с помощью методов:

Cropper::make('picture')
    ->targetId();

Будет возвращён порядковый номер (id) записи Attachment.

Cropper::make('picture')
    ->targetRelativeUrl();

Вернёт относительный путь до изображения.

Cropper::make('picture')
    ->targetUrl();

Вернёт абсолютный путь до изображения.

Upload

Визуализирует загрузку для изображений или обычных файлов.

Пример записи:

Upload::make('upload');
Upload::make('docs')
    ->groups('documents');

Upload::make('images')
    ->groups('photo');

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

Upload::make('upload')
    ->maxFiles(10);

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

Upload::make('upload')
    ->parallelUploads(2);

Максимальный объём загружаемого файла:

Upload::make('upload')
    ->maxFileSize(1024);

Реализация по умолчанию accept проверяет тип или расширение MIME файла по этому списку. Это разделенный запятыми список типов MIME или расширений файлов.

Upload::make('upload')
    ->acceptedFiles('image/*,application/pdf,.psd');

Поле загрузки может работать с различными хранилищами, чтобы указать его необходимо передать ключ указанный в config/filesystems.php:

Upload::make('upload')
    ->storage('s3');

По умолчанию используется хранилище public.

Group

Группа используется для объединения нескольких полей на одной строке.

Group::make([
    Input::make('first_name'),
    Input::make('last_name'),
]),

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

Поля будут занимать всю доступную ширину экрана.

Group::make([
    // ...
])->fullWidth();

Поля будут занимать столько места, сколько необходимо.

Group::make([
    // ...
])->autoWidth();

Кнопка/Ссылка

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

Пример использования с модальным окном addNewPayment добавленного ранее на экран:

ModalToggle::make('Add Payment')
    ->modal('addNewPayment')
    ->icon('wallet');

Пример использования со ссылкой:

Link::make('Google It!')
    ->href('http://google.com');

Link::make('Idea')
    ->route('platform.idea');

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

Button::make('Google It!')
    ->method('goToGoogle');

Доступные модификаторы:

  • right() - позиционирование элемента по правому краю экрана.
  • block() - позиционирование элемента по всей ширине экрана.
  • class('class-names') - переписывает стандартные классы для кнопки.
  • method('methodName') - при клике форма будет отправлена на заданный метод в рамках текущего экрана.
  • icon('wallet) - задает иконку для кнопки.