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>

Relationship Graph