OctantisWeb.Components.Polaris.Page (octantis v0.2.0)
View SourceUse to build the outer wrapper of a page, including the page title and associated actions.
Examples
<.page></.page>See
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
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 tofalse.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 presentfilter_actions(:boolean) - Enables filtering action list items.pagination(:string) - Page-level pagination. Defaults tonil.back_action(:any) - Breadcrumb back action.primary_action(:any) - Primary action for the card.secondary_action(:any) - Secondary action for the card.
Use to build the outer wrapper of a page, including the page title and associated actions.
Examples
<.page></.page>See
- https://polaris.shopify.com/components/layout-and-structure/page
- https://github.com/Shopify/polaris/blob/main/polaris-react/src/components/Page/Page.tsx
- https://github.com/Shopify/polaris/blob/main/polaris-react/src/components/Page/tests/Page.test.tsx
Attributes
id(:string) - Defaults to"Page".title(:string) - Page title, in large type. Defaults tonil.subtitle(:string) - Page subtitle, in regular type. Defaults tonil.full_width(:boolean) - Remove the normal max-width on the page. Defaults tofalse.narrow_width(:boolean) - Decreases the maximum layout width. Intended for single-column layouts. Defaults tofalse.phx_hook(:string) - Defaults tonil.
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)
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.