OctantisWeb.Components.Polaris.Page (octantis v0.1.12)
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 present
filter_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.