Phoenix.Component

Отображает структуру Phoenix.LiveView.AsyncResult (например, полученную из Phoenix.LiveView.assign_async/4) со слотами для различных состояний загрузки. Состояние результата имеет приоритет над последующими состояниями загрузки и ошибки.

Примеры

def mount(%{"slug" => slug}, _, socket) do
  {:ok,
    socket
    |> assign_async(:org, fn -> {:ok, %{org: fetch_org!(slug)}} end)}
end

<.async_result :let={org} assign={@org}>
  <:loading>Loading organization...</:loading>
  <:failed :let={_failure}>there was an error loading the organization</:failed>
  <%= if org do %>
    {org.name}
  <% else %>
    You don't have an organization yet.
  <% end %>
</.async_result>

Дополнительные сведения см. в разделе Асинхронные операции.

Чтобы при последующих вызовах assign_async снова отображались состояния загрузки и ошибки, сбросьте assign, чтобы в %AsyncResult{} не было результата:

{:noreply,
  socket
  |> assign_async(:page, &reload_data/0)
  |> assign(:page, AsyncResult.loading())}

Атрибуты

• assign (Phoenix.LiveView.AsyncResult) (обязательный)

Слоты

• loading — отображается при первой загрузке assign.
• failed — отображается, если перехвачена ошибка или выход либо если assign_async впервые возвращает {:error, reason}. Получает ошибку в качестве :let.
• inner_block — отображается, если assign успешно загружен с помощью AsyncResult.ok/2. Получает результат в качестве :let.

Создаёт HTML-тег с динамически заданным именем.

Вызывает исключение ArgumentError, если имя тега признано небезопасным HTML.

Атрибуты

• tag_name (:string) (обязательный) — имя тега, например div.
• name (:string) — устарел: используйте вместо него tag_name. Если используется tag_name, передаётся тегу. В противном случае — имя тега, например div.
• Поддерживаются глобальные атрибуты. Дополнительные HTML-атрибуты, добавляемые к тегу с надлежащим экранированием.

Слоты

• inner_block

Примеры

<.dynamic_tag tag_name="input" name="my-input" type="text"/>

<input name="my-input" type="text"/>

<.dynamic_tag tag_name="p">content</.dynamic_tag>

<p>content</p>

Обеспечивает циклическое перемещение фокуса клавишей Tab внутри контейнера для повышения доступности.

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

Атрибуты

• id (:string) (обязательный) — идентификатор DOM-тега контейнера.
• Поддерживаются глобальные атрибуты. Дополнительные HTML-атрибуты, добавляемые к тегу контейнера.

Слоты

• inner_block (обязательный) — содержимое, отображаемое внутри тега контейнера.

Примеры

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

<.focus_wrap id="my-modal" class="bg-white">
  <div id="modal-content">
    Are you sure?
    <button phx-click="cancel">Cancel</button>
    <button phx-click="confirm">OK</button>
  </div>
</.focus_wrap>

Отображает форму.

Эта функция принимает структуру Phoenix.HTML.Form, обычно созданную с помощью to_form/2, и генерирует соответствующие теги формы. Её можно использовать как внутри LiveView, так и вне его.

Чтобы увидеть, как формы работают на практике, можно запустить mix phx.gen.live Blog Post posts title body:text в приложении Phoenix. Эта команда настроит необходимые таблицы базы данных и LiveView для управления данными.

Примеры: внутри LiveView

Внутри LiveView этот функциональный компонент обычно вызывается с for={@form}, где @form — результат функции to_form/1. Функция to_form/1 принимает в качестве источника данных либо map, либо Ecto.Changeset и нормализует его в структуру Phoenix.HTML.Form.

Например, можно использовать параметры, полученные в обратном вызове Phoenix.LiveView.handle_event/3, чтобы создать changeset Ecto, а затем воспользоваться to_form/1, чтобы преобразовать его в форму. Затем в шаблонах передайте @form в качестве аргумента компоненту :for:

<.form
  for={@form}
  id="my-form"
  phx-change="change_name"
>
  <.input field={@form[:email]} />
</.form>

Компонент .input обычно определяется в самом приложении и добавляет все необходимые стили:

def input(assigns) do
  ~H"""
  <input type="text" name={@field.name} id={@field.id} value={@field.value} class="..." />
  """
end

Форма принимает несколько параметров. Например, при загрузке файлов, если нужно обрабатывать отправку формы, можно написать так:

<.form
  for={@form}
  id="my-form"
  phx-change="change_user"
  phx-submit="save_user"
  multipart
>
  ...
  <input type="submit" value="Save" />
</.form>

Обратите внимание, что в обоих примерах используется phx-change. LiveView должен реализовать событие phx-change и сохранять значения полей по мере их изменения. Это важно, поскольку при изменении несвязанной части страницы LiveView должен повторно отобразить поля с обновлёнными значениями. Без phx-change значения полей будут очищены. В качестве альтернативы можно использовать phx-update="ignore" формы, чтобы отбросить все обновления.

Использование атрибута for

Атрибут for также может принимать map или Ecto.Changeset. В этом случае форма будет создана автоматически, а получить её можно с помощью :let:

<.form
  :let={form}
  for={@changeset}
  id="my-form"
  phx-change="change_user"
>

Однако в LiveView такой подход не рекомендуется по двум причинам:

• LiveView может эффективнее оптимизировать код, если обращаться к полям формы через @form[:field], а не через переменную let form

• Changeset Ecto предназначены для однократного использования. Если не сохранять changeset в assign, у вас будет меньше соблазна использовать его в нескольких операциях

Примечание об ошибках :errors

Даже если changeset.errors не пуст, ошибки не будут отображаться в форме, если действие changeset :action равно nil или :ignore.

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

Например, если пользователь отправляет форму, вызывается Repo.insert/1, и проверка changeset завершается неудачей, для действия задаётся значение :insert, указывающее на попытку вставки. Наличие этого действия приводит к отображению ошибок. То же самое справедливо для Repo.update/delete.

Видимость ошибок регулируется передачей действия в to_form/2, которая задаёт действие underlying changeset. Действие также можно задать вручную, напрямую изменив поле структуры Ecto.Changeset или воспользовавшись Ecto.Changeset.apply_action/2. Поскольку действие может быть произвольным, можно задать ему значение :validate или любое другое, чтобы не создавать впечатление, будто операция с базой данных действительно выполнялась.

Отображение ошибок в использованных и неиспользованных полях ввода

Использованными считаются только поля ввода, на которые клиент устанавливал фокус, с которыми взаимодействовал или которые отправлял. В большинстве случаев пользователь не должен получать сообщения об ошибках в формах, с которыми он ещё не взаимодействовал, пока не отправит форму. Фильтровать ошибки по использованным полям ввода можно с помощью used_input?/1.

Пример: вне LiveView (обычные HTTP-запросы)

Компонент form по-прежнему можно использовать для отправки форм вне LiveView. В таких случаях необходимо указать стандартный HTML-атрибут action. Без него метод form и токен CSRF будут отброшены.

<.form :let={f} for={@changeset} action={~p"/comments/#{@comment}"}>
  <.input field={f[:body]} />
</.form>

В приведённом выше примере мы передали changeset в for и получили значение с помощью :let={f}. Такой подход допустим вне LiveView, поскольку там не нужно учитывать оптимизации отслеживания изменений.

Защита от CSRF

Защита от CSRF — это механизм, который позволяет убедиться, что форму отправляет тот же пользователь, который её отобразил. Этот модуль по умолчанию генерирует токен CSRF. Приложение должно проверять этот токен на сервере, чтобы злоумышленники не могли отправлять запросы от имени других пользователей. По умолчанию Phoenix проверяет этот токен.

Если адрес отправки формы содержит хост, например "//host.com/path" вместо просто "/path", Phoenix включит подпись хоста в токен и проверит его, только если хост запроса совпадает с хостом в токене. Это предотвращает утечку токенов сторонним приложениям. Если такое поведение вызывает проблемы, можно создать токен, не привязанный к хосту, с помощью Plug.CSRFProtection.get_csrf_token/0 и передать его генератору формы через параметр :csrf_token.

Атрибуты

• for (:any) (обязательный) — существующая форма или исходные данные формы.

• action (:string) — адрес, на который отправляется форма. Этот атрибут необходимо указать, если вы хотите отправлять форму на URL вне LiveView.

• as (:atom) — префикс для имён и идентификаторов, создаваемых формой. Например, если задать as: :user_params, параметры будут вложены в "user_params" в вашем handle_event или conn.params["user_params"] при обычных HTTP-запросах. Если задан этот параметр, необходимо получить форму с помощью :let.

• csrf_token (:any) — токен для проверки подлинности запросов. Он генерируется автоматически, если указан адрес отправки, а метод не равен get. Если задано значение false, токен не генерируется.

• errors (:list) — позволяет вручную передать форме список ошибок в формате keyword list. Этот параметр полезен, когда в качестве источника формы передан обычный map: ошибки будут доступны в f.errors. Если задан этот параметр, необходимо получить форму с помощью :let.

• method (:string) — HTTP-метод. Используется только при наличии :action. Если метод не равен get или post, рядом с тегом формы создаётся тег input с именем _method. Если указан :action, но метод не задан, по умолчанию используется значение, возвращаемое Phoenix.HTML.FormData.to_form/2 (обычно post).

• multipart (:boolean) — устанавливает enctype в значение multipart/form-data. Обязателен при загрузке файлов.

  По умолчанию — false.

• Поддерживаются глобальные атрибуты. Дополнительные HTML-атрибуты, добавляемые к тегу формы. Поддерживаются все глобальные атрибуты, а также: ["autocomplete", "name", "rel", "enctype", "novalidate", "target"].

Слоты

• inner_block (обязательный) — содержимое, отображаемое внутри тега формы.

Отображает вложенные поля формы для ассоциаций или встраиваемых структур.

Атрибуты

• field (Phoenix.HTML.FormField) (обязательный) — кортеж %Phoenix.HTML.Form{}/имя поля, например: {@form[:email]}.

• id (:string) — базовый идентификатор для полей формы. По умолчанию используется идентификатор родительской формы. Вычисленный идентификатор будет состоять из базового идентификатора и имени поля, а также индекса для каждого поля в списке.

• as (:atom) — имя формы; по умолчанию это имя родительской формы, объединённое с заданным полем.

• default (:any) — значение, используемое, если другое значение отсутствует.

• prepend (:list) — значения, добавляемые в начало при отображении. Применяется, только если значение поля — список и через форму не были переданы параметры.

• append (:list) — значения, добавляемые в конец при отображении. Применяется, только если значение поля — список и через форму не были переданы параметры.

• skip_hidden (:boolean) — пропускает автоматическое отображение скрытых полей, позволяя точнее контролировать создаваемую разметку.

  По умолчанию — false.

• skip_persistent_id (:boolean) — пропускает автоматическое отображение скрытых полей _persistent_id, используемых для изменения порядка полей ввода.

  По умолчанию — false.

• options (:list) — любые дополнительные параметры для реализации протокола Phoenix.HTML.FormData.

  По умолчанию — [].

Слоты

• inner_block (обязательный) — содержимое, отображаемое для каждой вложенной формы.

Примеры

<.form
  for={@form}
  id="my-form"
  phx-change="change_name"
>
  <.inputs_for :let={f_nested} field={@form[:nested]}>
    <.input type="text" field={f_nested[:name]} />
  </.inputs_for>
</.form>

Динамическое добавление и удаление полей ввода

Динамическое добавление и удаление полей ввода поддерживается с помощью именованных кнопок добавления и удаления. Как и поля ввода, кнопки с парами имя/значение сериализуются вместе с данными формы при событиях изменения и отправки. Библиотеки, такие как Ecto, или пользовательская фильтрация параметров могут анализировать параметры и обрабатывать добавленные или удалённые поля. Это можно сочетать с параметрами :sort_param и :drop_param функции Ecto.Changeset.cast_assoc/3. Например, представьте родительскую структуру с ассоциацией :emails has_many или embeds_many. Чтобы преобразовать пользовательский ввод из вложенной формы, достаточно настроить параметры:

schema "mailing_lists" do
  field :title, :string

  embeds_many :emails, EmailNotification, on_replace: :delete do
    field :email, :string
    field :name, :string
  end
end

def changeset(list, attrs) do
  list
  |> cast(attrs, [:title])
  |> cast_embed(:emails,
    with: &email_changeset/2,
    sort_param: :emails_sort,
    drop_param: :emails_drop
  )
end

Здесь показано, как работают параметры :sort_param и :drop_param.

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

Разметка для такой схемы и ассоциации будет выглядеть так:

<.inputs_for :let={ef} field={@form[:emails]}>
  <input type="hidden" name="mailing_list[emails_sort][]" value={ef.index} />
  <.input type="text" field={ef[:email]} placeholder="email" />
  <.input type="text" field={ef[:name]} placeholder="name" />
  <button
    type="button"
    name="mailing_list[emails_drop][]"
    value={ef.index}
    phx-click={JS.dispatch("change")}
  >
    <.icon name="hero-x-mark" class="w-6 h-6 relative top-2" />
  </button>
</.inputs_for>

<input type="hidden" name="mailing_list[emails_drop][]" />

<button type="button" name="mailing_list[emails_sort][]" value="new" phx-click={JS.dispatch("change")}>
  add more
</button>

Мы использовали inputs_for для отображения полей ввода ассоциации :emails, которая содержит поля для адреса электронной почты и имени каждого дочернего элемента. Во вложенных полях ввода мы отображаем скрытое поле mailing_list[emails_sort][], которому присваивается индекс соответствующего дочернего элемента. Это сообщает операции cast в Ecto, как сортировать существующие дочерние элементы или куда вставлять новые. Затем мы отображаем поля для электронной почты и имени обычным способом. После этого отображаем кнопку с текстом "delete" и именем mailing_list[emails_drop][], значением которого является индекс дочернего элемента.

Как и прежде, это указывает Ecto удалить дочерний элемент с данным индексом при нажатии кнопки. Мы используем phx-click={JS.dispatch("change")} для кнопки, чтобы сообщить LiveView, что нажатие следует считать событием изменения, а не отправкой формы, которая вызывает привязку phx-change нашей формы.

За пределами inputs_for мы отображаем пустое поле ввода mailing_list[emails_drop][], чтобы при сохранении формы удалялись все дочерние элементы, если пользователь удалил все записи. Это скрытое поле обязательно при удалении ассоциаций.

Наконец, мы также отображаем другую кнопку с именем параметра сортировки mailing_list[emails_sort][] и именем value="new", снабжённую текстом "add more". Обратите внимание: у этой кнопки должен быть атрибут type="button", чтобы она не отправляла форму. Ecto считает неизвестные параметры сортировки новыми дочерними элементами и создаёт новый дочерний элемент. Эта кнопка необязательна и нужна только для динамического добавления записей. При желании можно добавить похожую кнопку перед <.inputs_for>, если нужно добавлять записи в начало списка.

def handle_event("validate", %{"tracked_day" => params}, socket) do
  changeset = TrackedDay.changeset(socket.assigns.tracked_day, params)
  remaining = calculate_remaining(changeset)
  {:noreply, assign(socket, form: to_form(changeset, action: :validate), remaining: remaining)}
end

# Helper function to calculate remaining time
defp calculate_remaining(changeset) do
  total = Ecto.Changeset.get_field(changeset, :total)
  activities = Ecto.Changeset.get_embed(changeset, :activities)

  Enum.reduce(activities, total, fn activity, acc ->
    duration =
      case activity do
        %{valid?: true} = changeset -> Ecto.Changeset.get_field(changeset, :duration)
        # if the activity is invalid, we don't include its duration in the calculation
        _ -> 0
      end

    acc - length
  end)
end

def changeset(tracked_day, attrs) do
  tracked_day
  |> cast(attrs, [:total_duration])
  |> cast_embed(:activities)
  |> validate_required([:total_duration])
  |> validate_number(:total_duration, greater_than: 0)
  |> validate_and_put_remaining_time()
end

defp validate_and_put_remaining_time(changeset) do
  remaining = calculate_remaining(changeset)
  put_change(changeset, :remaining, remaining)
end

Вставляет слот-разделитель между элементами перечисления.

Полезно, когда нужно добавить разделитель между элементами, например при отображении навигационной цепочки. Передаёт каждый элемент внутреннему блоку.

Примеры

<.intersperse :let={item} enum={["home", "profile", "settings"]}>
  <:separator>
    <span class="sep">|</span>
  </:separator>
  {item}
</.intersperse>

Отображает следующую разметку:

home <span class="sep">|</span> profile <span class="sep">|</span> settings

Атрибуты

• enum (:any) (обязательный) — перечисление, между элементами которого вставляются разделители.

Слоты

• inner_block (обязательный) — inner_block, отображаемый для каждого элемента.
• separator (обязательный) — слот для разделителя.

Создаёт ссылку на указанный маршрут.

Обычно используется с одним из трёх атрибутов:

• patch — при нажатии изменяет текущий LiveView на указанный путь
• navigate — при нажатии выполняет переход к новому LiveView по указанному пути
• href — при нажатии выполняет обычную навигацию браузера (как любой тег <a>)

Атрибуты

• navigate (:string) — выполняет переход к LiveView. При переходе между LiveView страница браузера сохраняется, но запускается новый процесс LiveView, и его содержимое загружается на страницу. Переход возможен только между LiveView, объявленными в рамках одного маршрутизатора live_session. При использовании вне LiveView или между live-сессиями ведёт себя как обычное перенаправление браузера.

• patch (:string) — обновляет текущий LiveView. Вызывается обратный вызов handle_params текущего LiveView, а по сети передаётся только минимально необходимое содержимое, как и при любом другом обновлении LiveView.

• href (:any) — выполняет обычную навигацию браузера к новому адресу. Это означает, что страница в браузере будет загружена заново.

• replace (:boolean) — следует ли при использовании :patch или :navigate заменить запись в истории браузера с помощью replaceState?

  По умолчанию — false.

• method (:string) — HTTP-метод ссылки. Предназначен для использования вне LiveView и работает только с атрибутом href={...}. Не влияет на инструкции patch и navigate.

  Если метод не равен get, ссылка создаётся с атрибутом data-method, который перехватывается библиотекой JavaScript phoenix_html для отправки формы. Для отправки формы в браузере должен быть включён JavaScript.

  По умолчанию — "get".

• csrf_token (:any) — логическое значение или пользовательский токен для ссылок с HTTP-методом, отличным от get. По умолчанию — true.

• Поддерживаются глобальные атрибуты. Дополнительные HTML-атрибуты, добавляемые к тегу a. Поддерживаются все глобальные атрибуты, а также: ["download", "hreflang", "referrerpolicy", "rel", "target", "type"].

Слоты

• inner_block (обязательный) — содержимое, отображаемое внутри тега a.

Примеры

<.link href="/">Regular anchor link</.link>

<.link navigate={~p"/"} class="underline">home</.link>

<.link navigate={~p"/?sort=asc"} replace={false}>
  Sort By Price
</.link>

<.link patch={~p"/details"}>view details</.link>

<.link href={URI.parse("https://elixir-lang.org")}>hello</.link>

<.link href="/the_world" method="delete" data-confirm="Really?">delete</.link>

Зависимость от JavaScript

Для поддержки ссылок, у которых :method не равно "get", или использования перечисленных выше атрибутов данных, Phoenix.HTML использует JavaScript. Можно добавить priv/static/phoenix_html.js в инструмент сборки.

Атрибуты данных

Атрибуты данных добавляются в виде списка ключевых слов, передаваемого ключу data. Поддерживаются следующие атрибуты данных:

• data-confirm — отображает запрос подтверждения перед созданием и отправкой формы, если :method не равно "get".

Изменение стандартного поведения подтверждения

phoenix_html.js действительно запускает пользовательское событие phoenix.link.click для нажатого элемента DOM при щелчке. Это позволяет перехватить событие при его всплытии к window и выполнить собственную логику, чтобы дополнить или изменить обработку атрибута data-confirm. Например, можно заменить поведение браузера confirm() собственной реализацией на JavaScript:

// Compared to a javascript window.confirm, the custom dialog does not block
// javascript execution. Therefore to make this work as expected we store
// the successful confirmation as an attribute and re-trigger the click event.
// On the second click, the `data-confirm-resolved` attribute is set and we proceed.
const RESOLVED_ATTRIBUTE = "data-confirm-resolved";
// listen on document.body, so it's executed before the default of
// phoenix_html, which is listening on the window object
document.body.addEventListener('phoenix.link.click', function (e) {
  // Prevent default implementation
  e.stopPropagation();
  // Introduce alternative implementation
  var message = e.target.getAttribute("data-confirm");
  if(!message){ return; }

  // Confirm is resolved execute the click event
  if (e.target?.hasAttribute(RESOLVED_ATTRIBUTE)) {
    e.target.removeAttribute(RESOLVED_ATTRIBUTE);
    return;
  }

  // Confirm is needed, preventDefault and show your modal
  e.preventDefault();
  e.target?.setAttribute(RESOLVED_ATTRIBUTE, "");

  vex.dialog.confirm({
    message: message,
    callback: function (value) {
      if (value == true) {
        // Customer confirmed, re-trigger the click event.
        e.target?.click();
      } else {
        // Customer canceled
        e.target?.removeAttribute(RESOLVED_ATTRIBUTE);
      }
    }
  })
}, false);

Либо можно добавить собственное поведение.

window.addEventListener('phoenix.link.click', function (e) {
  // Introduce custom behaviour
  var message = e.target.getAttribute("data-prompt");
  var answer = e.target.getAttribute("data-prompt-answer");
  if(message && answer && (answer != window.prompt(message))) {
    e.preventDefault();
  }
}, false);

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

Защита от CSRF

По умолчанию токены CSRF создаются с помощью Plug.CSRFProtection.

Функциональный компонент для отображения Phoenix.LiveComponent внутри родительского LiveView.

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

Атрибуты

• id (:string) (обязательный) — уникальный идентификатор LiveComponent. Обратите внимание, что id не обязательно будет использоваться в качестве DOM id. Это определяется самим компонентом.

• module (:atom) (обязательный) — модуль LiveComponent для отображения.

Все дополнительные атрибуты передаются LiveComponent в виде map со значениями assign. Дополнительные сведения см. в разделе Phoenix.LiveComponent.

Примеры

<.live_component module={MyApp.WeatherComponent} id="thermostat" city="Kraków" />

Создаёт тег поля ввода файла для загрузки LiveView.

Атрибуты

• upload (Phoenix.LiveView.UploadConfig) (обязательный) — структура Phoenix.LiveView.UploadConfig.
• accept (:string) — необязательное переопределение атрибута accept. По умолчанию используется значение :accept, указанное в allow_upload.
• Допускаются глобальные атрибуты. Поддерживаются все глобальные атрибуты, а также: ["webkitdirectory", "required", "disabled", "capture", "form"].

Настройка метки

Атрибут id нельзя переопределить, но можно создать метку с атрибутом for, указывающим на ref UploadConfig:

<label for={@uploads.avatar.ref}>
  <.live_file_input upload={@uploads.avatar} />
</label>

Перетаскивание

Перетаскивание поддерживается, если добавить контейнеру, в который можно перетаскивать файлы, атрибут phx-drop-target, указывающий на ref UploadConfig. Таким образом, для поддержки перетаскивания достаточно следующей разметки:

<label for={@uploads.avatar.ref} phx-drop-target={@uploads.avatar.ref}>
  <.live_file_input upload={@uploads.avatar} />
</label>

Когда цель активна, она получает класс phx-drop-target-active. Дополнительные сведения см. в руководстве по загрузке файлов.

Примеры

Отрисовка поля ввода файла:

<.live_file_input upload={@uploads.avatar} />

Отрисовка поля ввода файла с меткой:

<label for={@uploads.avatar.ref}>Avatar</label>
<.live_file_input upload={@uploads.avatar} />

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

Атрибуты

• entry (Phoenix.LiveView.UploadEntry) (обязательный) — структура Phoenix.LiveView.UploadEntry.
• id (:string) — идентификатор тега img. По умолчанию он формируется на основе ref записи, но его можно переопределить, если требуется несколько раз отобразить предварительный просмотр одной и той же записи на одной странице. По умолчанию — nil.
• Допускаются глобальные атрибуты.

Примеры

<.live_img_preview :for={entry <- @uploads.avatar.entries} entry={entry} width="75" />

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

<.live_img_preview :for={entry <- @uploads.avatar.entries} entry={entry} width="75" />

<.live_img_preview :for={entry <- @uploads.avatar.entries} id={"modal-#{entry.ref}"} entry={entry} width="500" />

Отображает заголовок с автоматическим префиксом и суффиксом при обновлениях @page_title.

Атрибуты

• prefix (:string) — префикс, добавляемый перед содержимым inner_block. По умолчанию — nil.
• default (:string) — заголовок по умолчанию, используемый, если внутренний блок пуст при обычном или подключённом монтировании. Примечание: пустые заголовки, например nil или пустая строка, заменяются значением по умолчанию. По умолчанию — nil.
• suffix (:string) — суффикс, добавляемый после содержимого inner_block. По умолчанию — nil.

Слоты

• inner_block (обязательный) — содержимое, отображаемое внутри тега title.

Примеры

<.live_title default="Welcome" prefix="MyApp · ">
  {assigns[:page_title]}
</.live_title>

<.live_title default="Welcome" suffix=" · MyApp">
  {assigns[:page_title]}
</.live_title>