Observer.Web.Components.Core (Observer Web v0.2.8)
View SourceProvides core UI components.
Summary
Functions
Renders a disclosure row: a single truncated line preceded by a triangle marker that is filled when there is more content to expand and hollow (and non-interactive) when the line is all there is - so a list of rows reads at a glance which entries hide detail.
Renders an input with label and error messages.
Renders a label.
Renders a table with generic metrics styling.
Renders a table with process styling.
Renders a table with generic metric log styling.
Translates an error message using gettext.
Translates the errors for a field from a keyword list of errors.
Renders a value that stays plain text while it is short and collapses behind
a click-to-expand summary when it exceeds max_chars, following the same
pattern as the tracing results content.
Functions
Renders a disclosure row: a single truncated line preceded by a triangle marker that is filled when there is more content to expand and hollow (and non-interactive) when the line is all there is - so a list of rows reads at a glance which entries hide detail.
Used by the Logs pillar; any table listing collapsible rows can adopt it.
Examples
<.disclosure id="log-entry-1" expandable?={entry.expandable?} title={entry.summary}>
<:summary>{entry.summary}</:summary>
<pre>{entry.content}</pre>
</.disclosure>Attributes
id(:string) (required)expandable?(:boolean) - Defaults totrue.summary_class(:any) - Defaults tonil.title(:string) - Defaults tonil.
Slots
summary(required)inner_block
Renders an input with label and error messages.
A Phoenix.HTML.FormField may be passed as argument,
which is used to retrieve the input name, id, and values.
Otherwise all attributes may be passed explicitly.
Types
This function accepts all HTML input types, considering that:
You may also set
type="select"to render a<select>tagtype="checkbox"is used exclusively to render boolean valuesFor live file uploads, see
Phoenix.Component.live_file_input/1
See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input for more information. Unsupported types, such as hidden and radio, are best written directly in your templates.
Examples
<.input field={@form[:email]} type="email" />
<.input name="my-input" errors={["oh no!"]} />Attributes
id(:any) - Defaults tonil.name(:any)label(:string) - Defaults tonil.value(:any)type(:string) - Defaults to"text". Must be one of"checkbox","color","date","datetime-local","email","file","month","number","password","range","search","select","tel","text","textarea","time","url","week","select-undefined-class", or"text-custom-search".field(Phoenix.HTML.FormField) - a form field struct retrieved from the form, for example: @form[:email].errors(:list) - Defaults to[].checked(:boolean) - the checked flag for checkbox inputs.prompt(:string) - the prompt for select inputs. Defaults tonil.options(:list) - the options to pass to Phoenix.HTML.Form.options_for_select/2.multiple(:boolean) - the multiple flag for select inputs. Defaults tofalse.- Global attributes are accepted. Supports all globals plus:
["accept", "autocomplete", "capture", "cols", "disabled", "form", "list", "max", "maxlength", "min", "minlength", "multiple", "pattern", "placeholder", "readonly", "required", "rows", "size", "step"].
Slots
inner_block
Renders a label.
Attributes
for(:string) - Defaults tonil.
Slots
inner_block(required)
Renders a table with generic metrics styling.
Examples
<.table id="users" rows={@users}>
<:col :let={user} label="id"><%= user.id %></:col>
<:col :let={user} label="username"><%= user.username %></:col>
</.table>Attributes
id(:string) (required)rows(:list) (required)row_id(:any) - the function for generating the row id. Defaults tonil.row_click(:any) - the function for handling phx-click on each row. Defaults tonil.transition(:boolean) - Defaults tofalse.h_max_size(:string) - Defaults to"h-64".row_item(:any) - the function for mapping each row before calling the :col and :action slots. Defaults to&Function.identity/1.
Slots
col(required) - Accepts attributes:label(:string)
Renders a table with process styling.
Examples
<.table id="users" rows={@users}>
<:col :let={user} label="id"><%= user.id %></:col>
<:col :let={user} label="username"><%= user.username %></:col>
</.table>Attributes
id(:string) (required)title(:string) (required)rows(:list) (required)row_id(:any) - the function for generating the row id. Defaults tonil.row_click(:any) - the function for handling phx-click on each row. Defaults tonil.transition(:boolean) - Defaults tofalse.title_bg_color(:string) - Defaults to"standard".row_item(:any) - the function for mapping each row before calling the :col slots. Defaults to&Function.identity/1.
Slots
col(required) - Accepts attributes:label(:string)
Renders a table with generic metric log styling.
Examples
<.table_tracing id="users" rows={@users}>
<:col :let={user} label="id"><%= user.id %></:col>
<:col :let={user} label="username"><%= user.username %></:col>
</.table_tracing>Attributes
id(:string) (required)rows(:list) (required)row_id(:any) - the function for generating the row id. Defaults tonil.row_click(:any) - the function for handling phx-click on each row. Defaults tonil.transition(:boolean) - Defaults tofalse.row_item(:any) - the function for mapping each row before calling the :col slots. Defaults to&Function.identity/1.
Slots
col(required) - Accepts attributes:label(:string)
Translates an error message using gettext.
Translates the errors for a field from a keyword list of errors.
Renders a value that stays plain text while it is short and collapses behind
a click-to-expand summary when it exceeds max_chars, following the same
pattern as the tracing results content.
Examples
<.truncated value={row.name} />
<.truncated value={table.owner_label} max_chars={30} />Attributes
value(:string) (required)max_chars(:integer) - Defaults to40.