betty-titlebar

betty-titlebar is a custom element to satisfy the requirement of Betty TitleBar.

Markup

betty-titlebar

Indicates the root of the component.

Selector Rule:

betty-titlebar

betty-titlebar-title

Indicates the title area of the TitleBar.

The element should contain the title of the current page. Usually it is a breadcrumbs.

This element is mandatory.

Selector Rule:

betty-titlebar > betty-titlebar-title

betty-titlebar-primary

Indicates the primary area of the TitleBar.

By default the child of this element is assumed to be Coral.Button, where its padding is used as part of the calculation of the gap between items. So if there is a need to create a different item type, most likely effort is to have the same horizontal padding as Coral.Button.

This element is mandatory, even if there is no child.

Selector Rule:

betty-titlebar > betty-titlebar-primary

betty-titlebar-secondary

Indicates the secondary area of the TitleBar.

By default the child of this element is assumed to be Coral.Button, where its padding is used as part of the calculation of the gap between items. So if there is a need to create a different item type, most likely effort is to have the same horizontal padding as Coral.Button.

This element is mandatory, even if there is no child.

Selector Rule:

betty-titlebar > betty-titlebar-secondary

Example

<betty-titlebar>
  <betty-titlebar-title>
    <betty-breadcrumbs icon="pages">
      <betty-breadcrumbs-item>English</betty-breadcrumbs-item>
      <betty-breadcrumbs-item>Geo Outdoor</betty-breadcrumbs-item>
      <betty-breadcrumbs-item>Sites</betty-breadcrumbs-item>
    </betty-breadcrumbs>
  </betty-titlebar-title>
  <betty-titlebar-primary>
    <coral-cyclebutton>
      <coral-cyclebutton-item icon="railLeft">Content Only</coral-cyclebutton-item>
      <coral-cyclebutton-item>Timeline</coral-cyclebutton-item>
      <coral-cyclebutton-item>References</coral-cyclebutton-item>
      <coral-cyclebutton-item>Filter</coral-cyclebutton-item>
    </coral-cyclebutton>
  </betty-titlebar-primary>
  <betty-titlebar-secondary>
    <button type="button" is="coral-button" variant="primary">Create</button>
    <coral-cyclebutton>
      <coral-cyclebutton-item icon="viewColumn">Column View</coral-cyclebutton-item>
      <coral-cyclebutton-item icon="viewCard">Card View</coral-cyclebutton-item>
      <coral-cyclebutton-item icon="viewList">List View</coral-cyclebutton-item>
    </coral-cyclebutton>
  </betty-titlebar-secondary>
</betty-titlebar>

Relationship Graph

digraph "betty-titlebar" { rankdir=BT; "betty-breadcrumbs" -> "betty-titlebar" [label="related to"]; }