Button
The Button control is a user interface element that triggers an event when it is clicked. It can contain text, an image, or both.
The Button control is a user interface element that triggers an event when it is clicked. It can contain text, an image, or both.
new ac.buttons.Button({}, "#btnNormal");
new ac.buttons.Button({ isPrimary: true }, "#btnPrimary");
new ac.buttons.Button({ cssClass: "a-info" }, "#btnInfo");
new ac.buttons.Button({ cssClass: "a-success" }, "#btnSuccess");
new ac.buttons.Button({ cssClass: "a-danger" }, "#btnDanger");
new ac.buttons.Button({ cssClass: "a-warning" }, "#btnWarning");
new ac.buttons.Button({ cssClass: "a-outline", isPrimary: true }, "#btnOutline");
new ac.buttons.Button({ cssClass: "a-flat", isPrimary: true }, "#btnFlat");
<button id="btnNormal">Normal</button>
<button id="btnPrimary">Primary</button>
<button id="btnInfo">Info</button>
<button id="btnSuccess">Success</button>
<button id="btnWarning">Warning</button>
<button id="btnDanger">Danger</button>
<button id="btnOutline">Outline</button>
<button id="btnFlat">Flat</button>
var btnToggle = new ac.buttons.Button(
{
iconCss: "a-icons a-play-icon",
cssClass: "a-primary",
isToggle: true
},
"#btnToggle"
);
btnToggle.element.onclick = () => {
if (btnToggle.element.classList.contains("a-active")) {
btnToggle.content = "Pause";
btnToggle.iconCss = "a-icons a-pause-icon";
} else {
btnToggle.content = "Play";
btnToggle.iconCss = "a-icons a-play-icon";
}
};
<button id="btnToggle">Play</button>
.a-icons {
font-family: "a-icons";
}
.a-play-icon::before {
content: "\e06a";
}
.a-pause-icon::before {
content: "\e06b";
}
new ac.buttons.Button({ cssClass: "a-lg", isPrimary: true }, "#btnLargeButton");
new ac.buttons.Button({ isPrimary: true }, "#btnNormalButton");
new ac.buttons.Button({ cssClass: "a-sm", isPrimary: true }, "#btnSmallButton");
new ac.buttons.Button({ cssClass: "a-xs", isPrimary: true }, "#btnExtraSmallButton");
<button id="btnLargeButton">Large Button</button>
<button id="btnNormalButton">Normal Button</button>
<button id="btnSmallButton">Small Button</button>
<button id="btnExtraSmallButton">Extra Small Button</button>
<div class="form-horizontal form-bordered">
<div class="form-group row">
<label class="form-label col-form-label col-lg-4">Default Group</label>
<div class="col-lg-8">
<div class="a-btn-group">
<button class="a-btn">HTML</button>
<button class="a-btn">CSS</button>
<button class="a-btn">Javascript</button>
</div>
</div>
</div>
<div class="form-group row">
<label class="form-label col-form-label col-lg-4">Single Selection</label>
<div class="col-lg-8">
<div id="text" class="a-btn-group">
<input type="radio" id="left" name="align" value="left" />
<label class="a-btn" for="left">Left</label>
<input type="radio" id="center" name="align" value="center" />
<label class="a-btn" for="center">Center</label>
<input type="radio" id="right" name="align" value="right" />
<label class="a-btn" for="right">Right</label>
</div>
</div>
</div>
<div class="form-group row">
<label class="form-label col-form-label col-lg-4">Multi Selection</label>
<div class="col-lg-8">
<div id="iconandtext" class="a-btn-group">
<input type="checkbox" id="bold" name="fontstyle" value="bold" checked />
<label class="a-btn" for="bold"> <span class="a-btn-icon bg-icons a-btngrp-bold a-icon-left"></span>Bold </label>
<input type="checkbox" id="italic" name="fontstyle" value="italic" />
<label class="a-btn" for="italic"> <span class="a-btn-icon bg-icons a-btngrp-italic a-icon-left"></span>Italic </label>
<input type="checkbox" id="underline" name="fontstyle" value="underline" />
<label class="a-btn" for="underline"> <span class="a-btn-icon bg-icons a-btngrp-underline a-icon-left"></span>Underline </label>
</div>
</div>
</div>
</div>
new ac.buttons.Button({}, "#btnEnabledButton");
new ac.buttons.Button({ disabled: true }, "#btnDisabledButton");
<button id="btnEnabledButton">Enabled Button</button>
<button id="btnDisabledButton">Disabled Button</button>