betty-titlebar¶
betty-titlebar
is a custom element to satisfy the requirement of Betty TitleBar.
Markup¶
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>