betty-ActionBar¶
.betty-ActionBar
is an extension of coral-actionbar to satisfy the requirement of Betty Actionbar.
Markup¶
.betty-ActionBar¶
Indicates the root of the component.
Selector Rule:
coral-actionbar.betty-ActionBar
.betty-ActionBar-item¶
Indicates the item of the ActionBar.
By default .betty-ActionBar-item 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.
Selector Rule:
coral-actionbar-item > .betty-ActionBar-item
Variants¶
.betty-ActionBar–large¶
The variant to represent Shell3 specific of the ActionBar.
Selector Rule:
.betty-ActionBar.betty-ActionBar--large
.betty-ActionBar–overlay¶
The variant that is required to be used in overlay scenario.
Selector Rule:
.betty-ActionBar.betty-ActionBar--overlay
Example¶
<coral-actionbar class="betty-ActionBar">
<coral-actionbar-primary>
<coral-actionbar-item>
<button class="betty-ActionBar-item" is="coral-button" variant="quiet">Create</button>
</coral-actionbar-item>
<coral-actionbar-item>
<button class="betty-ActionBar-item" is="coral-button" variant="quiet">Edit</button>
</coral-actionbar-item>
</coral-actionbar-primary>
<coral-actionbar-secondary>
<coral-actionbar-item>
<button class="betty-ActionBar-item" is="coral-button" variant="quiet">Cancel</button>
</coral-actionbar-item>
<coral-actionbar-item>
<button class="betty-ActionBar-item" is="coral-button" variant="primary">Save</button>
</coral-actionbar-item>
</coral-actionbar-secondary>
</coral-actionbar>