Action Bar

Usage
Code

Import

Import the settings, the bottom-bar, the action-bar and the container scss files.


@import 'settings-tools/all-settings';
@import 'layouts/l.container';
@import 'components/c.bottom-bar';
@import 'components/c.action-bar';
@import 'components/c.button';
@import 'components/c.loader'; // optional

Usage

The creation of an action bar component in your code is done using the following HTML structure:


<div
class="ml-container ml-container--fluid mc-bottom-bar mc-bottom-bar--fixed mc-action-bar"
>
<div class="mc-action-bar__status">
<div class="mc-loader mc-loader--s">
<span class="mc-loader__spinner">
<svg
class="mc-loader__icon"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
>
<circle class="mc-loader__path" cx="50%" cy="50%" r="6" />
</svg>
</span>
</div>
<span>Saving</span>
</div>
<button class="mc-button mc-button--s mc-button--bordered-neutral">
Secondary action
</button>
<button class="mc-button mc-button--s">Primary action</button>
<button class="mc-button mc-button--s mc-button--bordered-danger">
Negative action
</button>
</div>

Fixed

The action bar component width can be fixed at the bottom of the page. To achieve that, you have to apply the mc-bottom-bar--fixed modifier.

Loading