A Floating Action Button (FAB) is a high-emphasis button that allows users to perform a primary action in an application. It typically appears as a circular icon anchored to the bottom right of the screen.
const cntlFab = new ac.buttons.FAB(
{
iconCss: "a-icon a-heart-filled",
target: "#panelBasic",
cssClass: "a-primary",
position: "BottomRight"
},
"#cntlFab"
);
cntlFab.element.onclick = function (e) {
cntlDefaultToast.show({
title: "Ahoy, hoy",
content: "Welcome to Aware Controls!",
cssClass: "a-toast-info",
showProgressBar: true,
timeout: 3000
});
};
<div id="panelBasic" class="panel-body" style="height: 200px"></div>
<button id="cntlFab" title="Add Record"></button>
const cntlPositionFab = new ac.buttons.FAB(
{
iconCss: "a-icon a-heart-filled",
target: "#panelPosition",
cssClass: "a-primary",
position: "BottomRight"
},
"#cntlPositionFab"
);
cntlPositionFab.element.onclick = function (e) {
cntlDefaultToast.show({
title: "Ahoy, hoy",
content: "Welcome to Aware Controls!",
cssClass: "a-toast-info",
showProgressBar: true,
timeout: 3000
});
};
new ac.dropdowns.DropDownList(
{
select: function (e) {
cntlPositionFab.position = e.itemData.value;
}
},
"#cntlButtonPosition"
);
new ac.dropdowns.DropDownList(
{
select: function (e) {
const target = e.itemData.value;
switch (target) {
case "thispanel":
cntlPositionFab.target = document.getElementById("panelPosition");
break;
default:
cntlPositionFab.target = document.body;
break;
}
}
},
"#cntlButtonTarget"
);
<div class="form-horizontal form-bordered">
<div class="form-group row">
<label class="form-label col-form-label col-lg-4">Position</label>
<div class="col-lg-8">
<select id="cntlButtonPosition">
<option value="TopLeft">Top Left</option>
<option value="TopCenter">Top Center</option>
<option value="TopRight">Top Right</option>
<option value="MiddleLeft">Middle Left</option>
<option value="MiddleCenter">Middle Center</option>
<option value="MiddleRight">Middle Right</option>
<option value="BottomLeft">Bottom Left</option>
<option value="BottomCenter">Bottom Center</option>
<option value="BottomRight">Bottom Right</option>
</select>
</div>
</div>
<div class="form-group row">
<label class="form-label col-form-label col-lg-4">Target</label>
<div class="col-lg-8">
<select id="cntlButtonTarget">
<option value="body">Document Body</option>
<option value="thispanel" selected>This Panel</option>
</select>
</div>
</div>
</div>
<button id="cntlPositionFab" title="Show Toast"></button>