Aware Controls | JavaScript (ES5) Drop Down Demos

The Drop Down Button is utilized to toggle contextual overlays for displaying a list of action items. It can include both text and images.

Default Behavior

Demonstrates the default behavior of the Drop Down Button control.

const items = [
	{ text: "Save", iconCss: "fa-regular fa-floppy-disk" },
	{ text: "Save As", iconCss: "fa-regular fa-floppy-disk-pen" },
	{ text: "Save to Cloud", iconCss: "fa-regular fa-cloud" },
	{ text: "Share", iconCss: "fa-regular fa-share" }
];

new ac.buttons.DropDownButton({ items: items, content: "Save" }, "#cntlDropDownButton");

<button id="cntlDropDownButton"></button>

Icon and Text

Demonstrates a drop down button using both an icon and text in the primary button.

const items = [
	{ text: "Save", iconCss: "fa-regular fa-floppy-disk" },
	{ text: "Save As", iconCss: "fa-regular fa-floppy-disk-pen" },
	{ text: "Save to Cloud", iconCss: "fa-regular fa-cloud" },
	{ text: "Share", iconCss: "fa-regular fa-share" }
];

new ac.buttons.DropDownButton({ items: items, content: "Save", iconCss: "fa-regular fa-floppy-disk" }, "#cntlDropDownButton");

<button id="cntlDropDownButton"></button>

Separator and URLs

Demonstrates how a separator or a URL can be specified on a secondary item.

const items = [
	{ text: "Save", iconCss: "fa-regular fa-floppy-disk" },
	{ text: "Save As", iconCss: "fa-regular fa-floppy-disk-pen" },
	{ separator: true },
	{ text: "Open OneDrive", iconCss: "fa-regular fa-cloud", url: "https://onedrive.live.com/", urlTarget: "_blank" }
];

new ac.buttons.DropDownButton({ items: items, content: "Save" }, "#cntlDropDownButton");

<button id="cntlDropDownButton"></button>

Icon Only

Demonstrates a drop down button using only an icon in the primary button.

const items = [
	{ text: "Save", iconCss: "fa-regular fa-floppy-disk" },
	{ text: "Save As", iconCss: "fa-regular fa-floppy-disk-pen" },
	{ text: "Save to Cloud", iconCss: "fa-regular fa-cloud" },
	{ text: "Share", iconCss: "fa-regular fa-share" }
];

new ac.buttons.DropDownButton({ items: items, iconCss: "fa-regular fa-floppy-disk" }, "#cntlDropDownButton");

<button id="cntlDropDownButton"></button>

Disable Items

Demonstrates disabling items using the item collection.

const items = [
	{ text: "Save", iconCss: "fa-regular fa-floppy-disk" },
	{ text: "Save As", iconCss: "fa-regular fa-floppy-disk-pen" },
	{ text: "Save to Cloud", iconCss: "fa-regular fa-cloud", disabled: true },
	{ text: "Share", iconCss: "fa-regular fa-share", disabled: true }
];

new ac.buttons.DropDownButton({ items: items, content: "Save" }, "#cntlDropDownButton");

<button id="cntlDropDownButton"></button>

Disable Items Using Event

Demonstrates disabling items using beforeItemRender event.

const items = [
	{ text: "Save", iconCss: "fa-regular fa-floppy-disk" },
	{ text: "Save As", iconCss: "fa-regular fa-floppy-disk-pen" },
	{ text: "Save to Cloud", iconCss: "fa-regular fa-cloud" },
	{ text: "Share", iconCss: "fa-regular fa-share" }
];

new ac.buttons.DropDownButton(
	{
		items: items,
		content: "Save",
		beforeItemRender: (args) => {
			if (args.item.text === "Share" || args.item.text === "Save to Cloud") {
				args.element.classList.add("a-disabled");
			}
		}
	},
	"#cntlDropDownButton"
);

<button id="cntlDropDownButton"></button>