page.md

< Back to Components List

Page

polaris-page implements the Polaris Page component.

NOTE: the icon and pagination properties are currently unimplemented.

Examples

Basic usage:

{{#polaris-page
  title="Welcome to Polaris!"
}}
  Your page content goes here
{{/polaris-page}}

Full-width page with disableable primary action, secondary actions and action groups (using ember-array-helper):

{{polaris-page
  title="This is the title"
  fullWidth=true
  primaryAction=(hash
    text="Take action!"
    disabled=primaryActionDisabled
    onAction=(action "primaryActionFired")
  )
  secondaryActions=(array
    (hash
      text="Do something"
      onAction=(action "secondaryAction1Fired")
    )
    (hash
      text="Do something else"
      onAction=(action (mut secondaryAction2Fired) true)
    )
  )
  actionGroups=(array
    (hash
      title="Action group with details"
      actions=(array
        (hash
          text="Group action 1.1"
          onAction=(action (mut group1Button1Clicked) true)
        )
        (hash
          text="Group action 1.2"
          onAction=(action (mut group1Button2Clicked) true)
        )
      )
      details=(component
        "polaris-text-style"
        variation="positive"
        text="This is an action group with details"
      )
    )
  )
}}

Page with title and breadcrumbs. Breadcrumbs take url or onAction properties. Note that only the last breadcrumb will be rendered:

{{#polaris-page
  title="Welcome to Polaris!"
  breadcrumbs=(array
    (hash
      content="Parent"
      url="/home"
    )
    (hash
      content="Child"
      onAction=(action "goToChildRoute")
    )
  )
}}
  Your page content goes here
{{/polaris-page}}