Welcome to the Ape Design Language demonstration website. The Ape Design Language, or adl for short, is the UI design used by Ape Apps for multiple projects across platforms. It is made to give a consistent look and feel across the entire Ape Apps ecosystem. Although the adl is meant for use in Ape Apps products, you may freely use the styles and functions in your own works.
adl uses the Fluent UI System Icons icon font for various menus and toolbars. When the adl module is properly imported, this iconset will be available to your project. You can see a list of all supported icons in the Icon Font section of the sidebar.
The adl library is provided as a module that you import into your project. It utilizes npm and webpack for easy integration into modern web development workflows. You can find the source code and implementation documentation at the adl GitHub repository.
Theme and Style
Theme Color
let theme = "default"; // default, light or dark
let color = "#1565C0";
adl.setTheme(color,theme);
Icon Font
Dialogs
The ADL modal dialog boxes come in a variety of styles and can be customized to fit many scenarios. There are also several helper functions to make creating a dialog a lot easier.
Alert Box (simple)
adl.showAlert("This is an alert box!");
Alert Box With Title (simple)
adl.showAlertWithTitle("This is the message!","This is the Title");
Choice Box (simple)
adl.showChoice("Pick a color!", "Red", "Blue", function() {
adl.showAlert("You picked Red!");
}, function() {
adl.showAlert("You picked Blue!");
});
Dialog Box (basic)
The above functions were all wrappers for the more complete showDialog function.
adl.showDialog({
title: "Dialog Box",
message: "This is the basic usage of the showDialog function. There are a lot of available options, allowing for complete customization of the dialog box. This one is using an ionic icon, but you can also specify an image URL for an icon.",
icon: "ic_fluent_animal_rabbit_20_regular",
iconColor: "#33691E",
buttons: [
{
text: "Button A"
},
{
text: "Button B",
color: "#4DB6AC"
},
{
text: "Button C",
color: "#f44336",
func: function(){ adl.showAlert("You picked C!"); }
}
],
});
Input Box (simple)
adl.inputBox({
title: "Input Box",
message: "An input box is an easy way to gather user input!",
multiline: false,
password: false,
placeholder: "Type something here!",
func: function(result) {
adl.showAlert("You typed: " + result);
}
});
Multiline Input Box (simple)
adl.inputBox({
title: "Multiline Input Box",
message: "A multiline input box, for those times when you want to let the user type in a bit more info.",
multiline: true,
password: false,
placeholder: "Type something here!",
func: function(result) {
adl.showAlert("You typed: " + result);
}
});
Password Box (simple)
adl.inputBox({
title: "Enter Password",
message: "Use the password flag to make an input box work as a password input.",
multiline: false,
password: true,
placeholder: "Enter password",
func: function(result) {
adl.showAlert("You typed: " + result);
}
});
Custom Input Box
Ultimately, the inputBox function is another wrapper for the showDialog function, which can become an input box using the input related options below.
adl.showDialog({
title: "Custom Input Box",
message: "The showDialog function can also be used to create an input box. One of the buttons must have the inputResult option set in order to recieve the result text from the input.",
icon: "ic_fluent_drink_beer_20_regular",
iconColor: "#FFA000",
input: {
multiline: false,
password: false,
placeholder: "What ales you?"
},
buttons: [
{
text: "NOTHING!!",
color: "#f44336"
},
{
text: "Submit",
color: "#4CAF50",
inputResult: true,
func: function(result){ adl.showAlert("You typed: " + result); }
}
],
});
Slider Dialog
The dialog window can also be configured to provide a horizontal slider for selection of a number between two defined values.
adl.showDialog({
title: "Slider Dialog",
message: "Choose a value based on the slider. The onChange callback gives you the current value and an update function that allows you to change the status display as the user manipulates the slider. Give a button the sliderResult attribute to be passed the result of the slider.",
slider: {
min: 0,
max: 100,
value: 50,
status: "50 out of 100",
onChange: function(value,update) { update(value + " out of 100"); },
},
buttons: [
{
text: "Dismiss",
},
{
text: "Save",
color: "#AB47BC",
sliderResult: true,
func: function(result){ adl.showAlert("You choose: " + result); }
}
],
});
Color Picker (dialog)
adl.pickColor({
callback: function(color) {
adl.showAlert("You picked: " + color);
}
});
Color Picker (embedded)
adl.pickColor({
element: domElement,
callback: function(color) {
adl.showAlert("You picked: " + color);
}
});
Color Picker (with hex input)
adl.pickColor({
withInput: true,
default: "#ff0000",
callback: function(color) {
adl.showAlert("You picked: " + color);
}
});
Color Picker (custom swatches)
You can pass in a 2d array of hex colors to use as custom color swatches. Each array represents a row of swatches, and each must have the same number of colors.
adl.pickColor({
colors: [["#ff0000","#00ff00","#0000ff"]],
callback: function(color) {
adl.showAlert("You picked: " + color);
}
});
Dialog with Custom Element
You can also pass any element you wish into a dialog, making dialog possibilities virtually limitless.
adl.showDialog({
title: "Custom Dialog",
customElement:
myDomElement
});
Progress Dialog
These are more helper functions for the showDialog interface that let you easily display and manipulate a Please Wait type dialog that can be updated and dismissed on your command.
adl.showProgress({ title: "Loading: 0%", indeterminate: false, percent: 0 });
adl.updateProgress({ title: "Loading: 12%", indeterminate: false, percent: 12 });
adl.dismissProgress();
List Dialog
The List Dialog is another showDialog wrapper for easily creating a popup list menu of customizable items.
adl.showList({
title: "Choose Something",
options: [
{
title: "Option 1",
tag: "one"
},
{
title: "Option 2",
description: "The second glorious option.",
icon: "",
iconColor: "#43A047",
tag: "two"
},
{
title: "Option 3",
description: "This one needs no description!",
status: "Almost Complete",
progress: 85,
tag: "three"
},
{ special: "separator" },
{
title: "Option 4",
titleColor: "#ff0000",
icon: "",
status: "WARNING!",
statusColor: "#ff0000",
overflow: [
{
pre: "Cost",
icon: "",
post: "Too Much!"
},
{
pre: "Cost",
icon: "",
iconColor: "#795548",
post: "Way Too Much!",
color: "#ff0000"
}
],
tag: "four"
}
],
onSelection: function(tag) {
adl.showAlert("you picked: " + tag);
},
cancelText: "Dismiss"
});
Embedded List
Just like the color picker, the list can also be embedded right into the document so that it's always available. Just pass in a dom element in your options. Items can also be added in "compact" mode.
adl.showList({
title: "Choose Something",
options: [
{
title: "Option 1",
tag: "one"
},
{
title: "Option 2",
description: "The second glorious option.",
icon: "",
iconColor: "#43A047",
tag: "two"
},
{
title: "Option 3",
description: "This one needs no description!",
status: "Almost Complete",
progress: 85,
tag: "three"
},
{ special: "separator" },
{
title: "Option 4",
titleColor: "#ff0000",
icon: "",
status: "WARNING!",
statusColor: "#ff0000",
overflow: [
{
pre: "Cost",
icon: "",
post: "Too Much!"
},
{
pre: "Cost",
icon: "",
iconColor: "#795548",
post: "Way Too Much!",
color: "#ff0000"
}
],
tag: "four"
},
{
title: "Compact Option 5",
icon: "",
iconColor: "#673AB7",
compactItem: true,
tag: "compactfive"
},
{
title: "Plain Function Callback Option",
icon: "",
iconColor: "#4CAF50",
compactItem: true,
func: function() {
adl.showAlert("see, no tag required!");
}
}
],
onSelection: function(tag) {
adl.showAlert("you picked: " + tag);
},
cancelText: "Dismiss"
element: domElement
});
Dialog Flyout
Using the flyout options, the dialog box can also be positioned as a flyout element. When used as a flyout, clicking/tapping outside of the dialog will dismiss it. The flyout can take all of the same options as the regular dialog window.
adl.showDialog({
title: "Dialog Flyout",
message: "Flyout dialogs can come in handy in many situations. They can be used for settings screens, 'hamburger' type menus, or small informational popups.",
icon: "",
iconColor: "#FBC02D",
flyout: {
position: "bottom"
}
});
Flyout List
Lists can also be used in Flyout mode.
adl.showList({
title: "Choose Something",
options: [
{
title: "Option 1",
tag: "one"
},
{
title: "Option 2",
description: "The second glorious option.",
icon: "",
iconColor: "#43A047",
tag: "two"
},
{
title: "Option 3",
description: "This one needs no description!",
status: "Almost Complete",
progress: 85,
tag: "three"
},
{ special: "separator" },
{
title: "Option 4",
titleColor: "#ff0000",
icon: "",
status: "WARNING!",
statusColor: "#ff0000",
overflow: [
{
pre: "Cost",
icon: "",
post: "Too Much!"
},
{
pre: "Cost",
icon: "",
iconColor: "#795548",
post: "Way Too Much!",
color: "#ff0000"
}
],
tag: "four"
},
{
title: "Compact Option 5",
icon: "",
iconColor: "#673AB7",
compactItem: true,
tag: "compactfive"
},
{
title: "Plain Function Callback Option",
icon: "",
iconColor: "#4CAF50",
compactItem: true,
func: function() {
adl.showAlert("see, no tag required!");
}
}
],
onSelection: function(tag) {
adl.showAlert("you picked: " + tag);
},
cancelText: "Dismiss",
flyout: {
position: "left"
}
});