Moxi Design System

# Page Headers

The Page Header component displays the heading text of a page, and may also contain:

  • a link to the previous page,
  • primary, secondary, and tertiary buttons,
  • and tabs.

On smaller screens, the size of the text and buttons will be reduced. Additionally, if there is not enough room on small screens for the tertiary button, it will be converted into a small menu button.

Page Header Page Header Page Header Page Header Page Header Page Header 
<section class="mds">
  <div class="mt-20 space-y-20 -mx-32 md:-ml-32">
    <mx-page-header pattern class="shadow-2">Page Header</mx-page-header>
    <mx-page-header
      previous-page-url="#"
      previous-page-title="Home"
      class="shadow-2"
    >
      Page Header
    </mx-page-header>
    <mx-page-header
      :buttons.prop="[
        { label: 'Primary', onClick: clickHandlerGoesHere },
        { label: 'Secondary', onClick: clickHandlerGoesHere },
      ]"
      pattern
      previous-page-url="#"
      previous-page-title="Home"
      class="shadow-2"
    >
      Page Header
    </mx-page-header>
    <mx-page-header
      class="shadow-2"
      :buttons.prop="[{ label: 'Primary', onClick: clickHandlerGoesHere }]"
    >
      Page Header
    </mx-page-header>
    <mx-page-header
      pattern
      previous-page-url="#"
      previous-page-title="Home"
      class="shadow-2"
      :buttons.prop="[
        { label: 'Primary', onClick: clickHandlerGoesHere },
        { label: 'Secondary', onClick: clickHandlerGoesHere },
        { label: 'Tertiary', onClick: clickHandlerGoesHere },
      ]"
    >
      Page Header
      <mx-tabs
        slot="tabs"
        :tabs.prop="[
          { label: 'Tab 1' },
          { label: 'Tab 2' },
          { label: 'Tab 3' },
        ]"
        :value="activeTab"
        @mxChange="e => activeTab = e.detail"
      />
    </mx-page-header>
    <mx-page-header
      class="shadow-2"
      :buttons.prop="[
        { label: 'Primary', onClick: clickHandlerGoesHere },
        { label: 'Secondary', onClick: clickHandlerGoesHere },
      ]"
    >
      Page Header
      <mx-tabs
        slot="tabs"
        fill
        :tabs.prop="[
          { label: 'Tab 1' },
          { label: 'Tab 2' },
          { label: 'Tab 3' },
        ]"
        :value="activeTab"
        @mxChange="e => activeTab = e.detail"
      />
    </mx-page-header>
  </div>
</section>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72

# mx-page-header

# Properties

Property Attribute Description Type Default
buttons -- An array of prop objects for each button. Use the label property to specify the button's inner text. IPageHeaderButton[] []
modal modal This flag is set by the Modal component to adjust the page header styling when used internally. boolean false
pattern pattern When set to true, the Page Header will use the themed background pattern. boolean false
previousPageTitle previous-page-title The text to display for the previous page link string 'Back'
previousPageUrl previous-page-url The URL for the previous page link string ''

# Methods

# resetResizeObserver() => Promise<void>

Attach a new ResizeObserver that calls updateRenderTertiaryButtonAsMenu

# Returns

Type: Promise<void>

# Dependencies

# Used by

# Depends on

# Graph

graph TD;
  mx-page-header --> mx-icon-button
  mx-page-header --> mx-menu
  mx-page-header --> mx-menu-item
  mx-page-header --> mx-button
  mx-menu-item --> mx-checkbox
  mx-modal --> mx-page-header
  style mx-page-header fill:#f9f,stroke:#333,stroke-width:4px
1
2
3
4
5
6
7
8

If you are having trouble setting a prop or adding an event listener, refer to this page.

← Pagination →