Component Library
Sign out

Action Bar 

<div style="display:flex;">
    <div onclick="actionBarDemo1.showActionBar()" style="background-color: rgb(241, 241, 241); cursor:pointer; font-size: 12px; font-weight:bold; width: 250px; padding: 10px; width: 135px; margin-bottom: 50px; margin-right: 10px; border-radius: 6px">
        Show Action Bar
    </div>

    <div onclick="actionBarDemo1.hideActionBar()" style="background-color: rgb(241, 241, 241); cursor:pointer; font-size: 12px; font-weight:bold; width: 250px; padding: 10px; width: 135px; margin-bottom: 50px; margin-right: 10px; border-radius: 6px">
        Hide Action Bar
    </div>
</div>

<div class="acl-action-bar__container acl-action-bar--raised acl-action-bar__dark-grey-text animated slideInUp">
    <div class="acl-action-bar__content-container animated fadeIn">
        <div class="acl-action-bar__content-left">
            <label class="container acl-asset-card__select" style="width: 0; margin: 10px 0">
                <input type="checkbox" class="acl-asset-card__select-input">
                <span class="acl-asset-card__select-box" style="border: 1px solid rgb(0,0,0,0.1)"></span>
            </label>
            <span>4 files selected</span>
        </div>
    </div>
    <div class="acl-action-bar__content-right">
        <i class="aforza-icons acl-action-bar__icon-button animated fadeIn" style="cursor:pointer">acl_download</i>
        <i class="aforza-icons acl-action-bar__icon-button animated fadeIn" style="cursor:pointer">acl_delete</i>
        <i class="aforza-icons acl-action-bar__icon-button animated fadeIn" style="cursor:pointer">acl_horizontal_ellipsis</i>
    </div>
</div>

<script>
    const actionBarEl = document.querySelector('.acl-action-bar__container');
    const actionBarDemo1 = new acl.ACLActionBar(actionBarEl);
</script>
 
<div style="display:flex;">
	<div
		onclick="actionBarDemo1.showActionBar()"
		style="background-color: rgb(241, 241, 241); cursor:pointer; font-size: 12px; font-weight:bold; width: 250px; padding: 10px; width: 135px; margin-bottom: 50px; margin-right: 10px; border-radius: 6px"
	>
		Show Action Bar
	</div>

	<div
		onclick="actionBarDemo1.hideActionBar()"
		style="background-color: rgb(241, 241, 241); cursor:pointer; font-size: 12px; font-weight:bold; width: 250px; padding: 10px; width: 135px; margin-bottom: 50px; margin-right: 10px; border-radius: 6px"
	>
		Hide Action Bar
	</div>
</div>

<div class="acl-action-bar__container acl-action-bar--raised acl-action-bar__dark-grey-text animated slideInUp">
    <div class="acl-action-bar__content-container animated fadeIn">
        <div class="acl-action-bar__content-left">
            <label class="container acl-asset-card__select" style="width: 0; margin: 10px 0">
                        <input type="checkbox" class="acl-asset-card__select-input">
                        <span class="acl-asset-card__select-box" style="border: 1px solid rgb(0,0,0,0.1)"></span>
                    </label>
            <span>4 files selected</span>
            </div>
    </div>
    <div class="acl-action-bar__content-right">
        <i class="aforza-icons acl-action-bar__icon-button animated fadeIn" style="cursor:pointer">acl_download</i>
        <i class="aforza-icons acl-action-bar__icon-button animated fadeIn" style="cursor:pointer">acl_delete</i>
        <i class="aforza-icons acl-action-bar__icon-button animated fadeIn" style="cursor:pointer">acl_horizontal_ellipsis</i>
    </div>
</div>

<script>
    const actionBarEl = document.querySelector('.acl-action-bar__container');
    const actionBarDemo1 = new acl.ACLActionBar(actionBarEl);
</script>
 
/* No context defined. */
  • Content: 
    .acl-action-bar {
	&__container {
		align-items: center;
		min-height: 60px;
		padding: 0 20px;
		display: none;
	}

	&--show {
		display: flex;
	}

	&--raised {
		box-shadow: 0 2px 8px 2px rgba(0, 0, 0, 0.15);
	}

	&__content-container {
		display: flex;
		flex: 1;
		align-items: center;
		font-size: 12px;
	}

	&__dark-grey-text {
		color: rgba(0, 0, 0, 0.75);
	}

	&__content-left {
		flex: 1;
		display: flex;
		align-items: center;
	}

	&__icon-button {
		color: #9f9f9f;
		margin: 0 10px;
	}
}
  • URL: /components/raw/action-bar/acl-action-bar.scss
  • Filesystem Path: src/components/action-bar/acl-action-bar.scss
  • Size: 501 Bytes
  • Content: 
    class ACLActionBar {
	constructor(actionBarEl) {
		this.actionBarElement = actionBarEl;

		this.selector = Object.freeze({
			ACL_ACTION_BAR: 'acl-action-bar',
		});

		this.modifier = Object.freeze({
			SHOW: '--show',
		});
	}

	showActionBar() {
		if (this.actionBarElement) {
			this.actionBarElement.classList.add(`${this.selector.ACL_ACTION_BAR}${this.modifier.SHOW}`);
		}
	}

	hideActionBar() {
		if (this.actionBarElement) {
			this.actionBarElement.classList.remove(`${this.selector.ACL_ACTION_BAR}${this.modifier.SHOW}`);
		}
	}
}

export { ACLActionBar };
  • URL: /components/raw/action-bar/index.js
  • Filesystem Path: src/components/action-bar/index.js
  • Size: 568 Bytes

No notes defined.