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

Suggest edit

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

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

Input

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

Input

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

use Orchid\Screen\Fields\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 и многие другие, доступны почти в каждом поле системы.

Типы

Input – одно из самых универсальных полей за счет указания типа, поддерживаются все 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');

Более подробно о атрибуте type можно узнать на сайте 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')
    ->options([
        1  => 'Пункт 1',
        2  => 'Пункт 2',
    ])
    ->empty('Не выбрано');

// Для источника
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('Выберите свою идею');

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

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

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

Relation::make('idea')
     ->fromModel(Idea::class, 'name')
     ->searchColumns('author', 'description')
     ->title('Choose your idea');

Чтобы установить количество элементов, которые будут перечислены в результате поиска, Вы можете использовать метод chunk, передав количество результатов поиска в качестве параметра:

Relation::make('users.')
    ->fromModel(User::class, 'name')
    ->chunk(20);

Опции выбора могут работать с вычисляемыми полями, но только для отображения результата, поиск будет происходить только по одной колонке в базе данных. Для этого используется метод 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');

DateRange

Позволяет выбрать диапазон даты (и времени).

Пример:

DateRange::make('open')
    ->title('Opening between');

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"]);

Можно установить дополнительные плагины с помощью простого Javascript файла:

document.addEventListener('orchid:quill', (event) => {
    // Object for registering plugins
    event.detail.quill;

    // Parameter object for initialization
    event.detail.options;
});

Примечание: Вы можете добавлять пользовательские сценарии и таблицы стилей через файл конфигурацииplatform.php.

Пример для quill-image-compress:

В файле config/platform.php добавьте следующее в массив resource.scripts :

"https://unpkg.com/quill-image-compress@1.2.11/dist/quill.imageCompressor.min.js",
"/js/admin/quill.imagecropper.js",

В директории public/js/admin создайте файл quill.imagecropper.js со следующим содержимым:

document.addEventListener('orchid:quill', (event) => {
    // Object for registering plugins
    event.detail.quill.register("modules/imageCompressor", imageCompressor);

    // Parameter object for initialization
    event.detail.options.modules = {
         imageCompressor: {
            quality: 0.9,
            maxWidth: 1000, // default
            maxHeight: 1000, // default
            imageType: 'image/jpeg'
        }
    };
});

Markdown редактор

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

Markdown Markdown2

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

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(),
    ]),

Примечание. Матрица под капотом делает копирование полей на стороне клиента. Это хорошо работает для простых полей input/select/etc, но может не сработать для сложных или составных полей.

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

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

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');

Поддерживаются файловые системы Laravel:

Picture::make('picture')
    ->storage('s3');

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

Picture::make('picture')
    ->acceptedFiles('.jpg');

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

Cropper

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

Cropper

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

Cropper::make('picture');

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

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

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

Или вы можете установить определенные ограничения, используя minWidth / maxWidth или minHeight / maxHeight или использовать удобные методы minCanvas / maxCanvas

Cropper::make('picture')
    ->minCanvas(500)
    ->maxWidth(1000)
    ->maxHeight(800);

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

Для ограничения размера загружаемого файла необходимо задать максимальное значение в 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');

Чтобы получить определенные файлы через отношение модели:

use Orchid\Attachment\Models\Attachment;

// Один ко многим (с внешним  id)
public function hero()
{
    return $this->hasOne(Attachment::class, 'id', 'hero')->withDefault();
}

// Много ко многим (в таблице нет внешнего идентификатора, его следует загружать с помощью функции groups())
public function documents()
{
    return $this->hasMany(Attachment::class)->where('group','documents');
}

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

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

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

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

Максимальный размер загружаемого файла: по умолчанию значения upload_max_filesize и post_max_size равны 2M, Вы можете изменить их в файле php.ini , чтобы установить максимальный размер файла более 2M.

Upload::make('upload')
    ->maxFileSize(1024); // Size in MB

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

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

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

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

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

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

Upload::make('upload')
    ->media();

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

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('icon-wallet) – задает иконку для кнопки.

Dropdown

Вы можете легко создать кнопку действия DropDown, объединяющую все остальные действия. Например, создать типичный раскрывающийся список из трех точек:

DropDown::make()
    ->icon('options-vertical')
    ->list([
        Link::make(__('Edit'))
            ->route('platform.systems.users.edit', $user->id)
            ->icon('pencil'),
        Button::make(__('Delete'))
            ->method('remove')
            ->icon('trash')
            ->confirm(__('Are you sure you want to delete the user?'))
            ->parameters([
                'id' => $user->id,
            ]),
    ]);

NumberRange

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

NumberRange::make();

Использование с фильтрами:

TD::make()->filter(NumberRange::make())
//or
TD::make()->filter(TD::FILTER_NUMBER_RANGE)

Результатом является массив с ключами min, max.

And one more thing.

Community Guidelines Donation

GitHub Telegram Twitter Discord HIG

English / Russian