Summary

Functions

A header inside of a page.

Use to build the outer wrapper of a page, including the page title and associated actions.

A title inside of a header

Functions

build_class(arg)

class(attrs)

header(assigns)

A header inside of a page.

See

  • polaris-react/src/components/Page/components/Header/Header.tsx

Attributes

  • title (:string) - Page title, in large type.

  • subtitle (:string) - Page subtitle, in regular type.

  • title_hidden (:boolean) - Visually hide the title. Defaults to false.

  • title_metadata (:any) - title_metadata slot passed through. Defaults to [].

  • page_ready_accessibility_label (:string) - A label to use for the page when the page is ready, used by screen readers.

    Will override the title prop if present
  • filter_actions (:boolean) - Enables filtering action list items.

  • pagination (:string) - Page-level pagination. Defaults to nil.

  • back_action (:any) - Breadcrumb back action.

  • primary_action (:any) - Primary action for the card.

  • secondary_action (:any) - Secondary action for the card.

hide(js \\ %JS{}, id)

page(assigns)

Use to build the outer wrapper of a page, including the page title and associated actions.

Examples

<.page></.page>

See

Attributes

  • id (:string) - Defaults to "Page".
  • title (:string) - Page title, in large type. Defaults to nil.
  • subtitle (:string) - Page subtitle, in regular type. Defaults to nil.
  • full_width (:boolean) - Remove the normal max-width on the page. Defaults to false.
  • narrow_width (:boolean) - Decreases the maximum layout width. Intended for single-column layouts. Defaults to false.
  • phx_hook (:string) - Defaults to nil.

Slots

  • title_metadata - Important status information shown immediately after the title.
  • back_action - Breadcrumb back action. Accepts attributes:
    • content (:string) - Content the action displays.
    • disabled (:boolean) - Whether or not the action is disabled.
    • variant (:string) - Changes the visual appearance of the Button.Must be one of "plain", "primary", "secondary", "tertiary", or "monochromePlain".
    • tone (:string) - Sets the color treatment of the Button.Must be one of "critical", or "success".
    • full_width (:boolean) - Allows the button to grow to the width of its container.
    • size (:string) - Changes the size of the button, giving it more or less padding.Must be one of "micro", "slim", "medium", or "large".
    • navigate (:string) - Passes through to .link component.
    • patch (:string) - Passes through to .link component.
    • href (:string) - Passes through to .link component.
    • target (:string) - Passes through to .link component.
    • icon (:any) - Source of the icon.Examples include &OctantisWeb.Components.Polaris.Icons.arrow_right/1.
    • phx_click (:any) - Click function passed through to the button.
  • primary_action - Primary action for the card. Accepts attributes:
    • content (:string) - Content the action displays.
    • disabled (:boolean) - Whether or not the action is disabled.
    • variant (:string) - Changes the visual appearance of the Button.Must be one of "plain", "primary", "secondary", "tertiary", or "monochromePlain".
    • tone (:string) - Sets the color treatment of the Button.Must be one of "critical", or "success".
    • full_width (:boolean) - Allows the button to grow to the width of its container.
    • size (:string) - Changes the size of the button, giving it more or less padding.Must be one of "micro", "slim", "medium", or "large".
    • navigate (:string) - Passes through to .link component.
    • patch (:string) - Passes through to .link component.
    • href (:string) - Passes through to .link component.
    • target (:string) - Passes through to .link component.
    • icon (:any) - Source of the icon.Examples include &OctantisWeb.Components.Polaris.Icons.arrow_right/1.
    • phx_click (:any) - Click function passed through to the button.
  • secondary_action - Secondary action for the card. Accepts attributes:
    • content (:string) - Content the action displays.
    • disabled (:boolean) - Whether or not the action is disabled.
    • variant (:string) - Changes the visual appearance of the Button.Must be one of "plain", "primary", "secondary", "tertiary", or "monochromePlain".
    • tone (:string) - Sets the color treatment of the Button.Must be one of "critical", or "success".
    • full_width (:boolean) - Allows the button to grow to the width of its container.
    • size (:string) - Changes the size of the button, giving it more or less padding.Must be one of "micro", "slim", "medium", or "large".
    • navigate (:string) - Passes through to .link component.
    • patch (:string) - Passes through to .link component.
    • href (:string) - Passes through to .link component.
    • target (:string) - Passes through to .link component.
    • icon (:any) - Source of the icon.Examples include &OctantisWeb.Components.Polaris.Icons.arrow_right/1.
    • phx_click (:any) - Click function passed through to the button.
  • inner_block (required)

show(js \\ %JS{}, id)

title(assigns)

A title inside of a header

See

Attributes

  • title (:string) - Page title, in large type.
  • subtitle (:string) - Page subtitle, in regular type.
  • title_metadata (:any) - title_metadata slot passed through. Defaults to [].
  • compact_title (:boolean) - Removes spacing between title and subtitle.
  • has_subtitle_max_width (:boolean) - Whether or not to add a max-width to the subtitle. Gets calculated by the presence of either the secondaryActions or actionGroups props on the Header that consumes this component.