2023-05-09 13:25:39 +02:00
|
|
|
<!DOCTYPE html>
|
2019-03-21 09:57:27 +01:00
|
|
|
<html lang="en">
|
2023-05-09 13:25:39 +02:00
|
|
|
<head>
|
|
|
|
|
<meta http-eqv="Content-Type" content="text/html; charset=utf-8" />
|
2019-03-21 09:57:27 +01:00
|
|
|
|
2023-05-09 13:25:39 +02:00
|
|
|
<title>PIXI ButtonGroup</title>
|
2019-03-21 09:57:27 +01:00
|
|
|
|
2023-05-09 13:25:39 +02:00
|
|
|
<link rel="stylesheet" href="../3rdparty/highlight/styles/default.css" />
|
|
|
|
|
<link rel="stylesheet" href="../../css/doctest.css" />
|
2019-03-21 09:57:27 +01:00
|
|
|
|
2023-05-09 13:25:39 +02:00
|
|
|
<script src="../3rdparty/highlight/highlight.pack.js"></script>
|
|
|
|
|
<script src="../../dist/iwmlib.3rdparty.js"></script>
|
|
|
|
|
<script src="../3rdparty/gsap/src/uncompressed/plugins/ThrowPropsPlugin.js"></script>
|
2019-03-21 09:57:27 +01:00
|
|
|
|
2023-05-09 13:25:39 +02:00
|
|
|
<script src="../../dist/iwmlib.js"></script>
|
|
|
|
|
<script src="../../dist/iwmlib.pixi.js"></script>
|
|
|
|
|
</head>
|
|
|
|
|
<body onload="Doctest.run()">
|
|
|
|
|
<h1><a href="../index.html">lib.</a><a href="index.html">pixi.</a>ButtonGroup</h1>
|
|
|
|
|
<p>Group a series of buttons together on a single line with the button group.</p>
|
|
|
|
|
<p><a href="../../doc/out/ButtonGroup.html">JavaScript API</a></p>
|
|
|
|
|
<p>Let's look at some button groups:</p>
|
|
|
|
|
<br />
|
|
|
|
|
<canvas id="canvas" class="interactive"></canvas>
|
|
|
|
|
<p>What you should see: Many button groups with very different styling and behaviour.</p>
|
|
|
|
|
<script class="doctest">
|
|
|
|
|
const app = new PIXIApp({
|
|
|
|
|
view: canvas,
|
|
|
|
|
width: 1000,
|
|
|
|
|
height: 1700
|
|
|
|
|
})
|
|
|
|
|
.setup()
|
|
|
|
|
.run()
|
2019-03-21 09:57:27 +01:00
|
|
|
|
2023-05-09 13:25:39 +02:00
|
|
|
const buttonGroup1 = new ButtonGroup({
|
|
|
|
|
x: 10,
|
|
|
|
|
y: 10,
|
|
|
|
|
buttons: [
|
|
|
|
|
{ icon: 'keyboard_arrow_left' },
|
|
|
|
|
{ icon: 'keyboard_arrow_up' },
|
|
|
|
|
{ icon: 'keyboard_arrow_down' },
|
|
|
|
|
{ icon: 'keyboard_arrow_right' }
|
|
|
|
|
]
|
|
|
|
|
})
|
2019-03-21 09:57:27 +01:00
|
|
|
|
2023-05-09 13:25:39 +02:00
|
|
|
const buttonGroup2 = new ButtonGroup({
|
|
|
|
|
x: 260,
|
|
|
|
|
y: 10,
|
|
|
|
|
buttons: [
|
|
|
|
|
{ icon: 'directions_walk', tooltip: 'Gehen' },
|
|
|
|
|
{ icon: 'directions_run', tooltip: 'Laufen' },
|
|
|
|
|
{ icon: 'directions_bike', tooltip: 'Fahrrad' },
|
|
|
|
|
{ icon: 'directions_bus', tooltip: 'Bus' },
|
|
|
|
|
{ icon: 'directions_car', tooltip: 'Auto' },
|
|
|
|
|
{ icon: 'directions_boat', tooltip: 'Schiff' },
|
|
|
|
|
{ icon: 'directions_railway', tooltip: 'Bahn' }
|
|
|
|
|
],
|
|
|
|
|
margin: 0,
|
|
|
|
|
stroke: 0x0088ff,
|
|
|
|
|
strokeWidth: 3
|
|
|
|
|
})
|
2019-03-21 09:57:27 +01:00
|
|
|
|
2023-05-09 13:25:39 +02:00
|
|
|
const buttonGroup3 = new ButtonGroup({
|
|
|
|
|
x: 610,
|
|
|
|
|
y: 10,
|
|
|
|
|
buttons: [
|
|
|
|
|
{ icon: 'laptop' },
|
|
|
|
|
{ label: 'Linux' },
|
|
|
|
|
{ icon: 'laptop_windows', label: 'Windows', align: 'center' },
|
|
|
|
|
{ icon: 'laptop_mac', iconPosition: 'right', label: 'macOS' }
|
|
|
|
|
],
|
|
|
|
|
margin: 0,
|
|
|
|
|
stroke: 0xffffff,
|
|
|
|
|
strokeWidth: 1
|
|
|
|
|
})
|
2019-03-21 09:57:27 +01:00
|
|
|
|
2023-05-09 13:25:39 +02:00
|
|
|
const buttonGroup4 = new ButtonGroup({
|
|
|
|
|
x: 10,
|
|
|
|
|
y: 90,
|
|
|
|
|
buttons: [
|
|
|
|
|
{ label: 'Button 1', action: (event, button) => console.log(button.id) },
|
|
|
|
|
{ label: 'Button 2', action: (event, button) => console.log(button.id), radius: 0 },
|
|
|
|
|
{
|
|
|
|
|
label: 'Button 3',
|
|
|
|
|
textStyle: { fill: '#fd6b6a' },
|
|
|
|
|
stroke: 0xd7a3f9,
|
|
|
|
|
strokeWidth: 8,
|
|
|
|
|
strokeAlpha: 0.8
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: 'Button 4',
|
|
|
|
|
textStyle: { fill: '#40c3f2' },
|
|
|
|
|
radius: 20,
|
|
|
|
|
icon: 'looks',
|
|
|
|
|
iconPosition: 'right',
|
|
|
|
|
iconColor: 0xd7ff30
|
|
|
|
|
}
|
|
|
|
|
],
|
|
|
|
|
margin: 40,
|
|
|
|
|
minWidth: 180,
|
|
|
|
|
minHeight: 60,
|
|
|
|
|
textStyle: {
|
|
|
|
|
fill: '#f8ce2d'
|
|
|
|
|
},
|
|
|
|
|
stroke: 0xffffff,
|
|
|
|
|
strokeWidth: 1
|
|
|
|
|
})
|
2019-03-21 09:57:27 +01:00
|
|
|
|
2023-05-09 13:25:39 +02:00
|
|
|
const buttonGroup5 = new ButtonGroup({
|
|
|
|
|
x: 10,
|
|
|
|
|
y: 180,
|
|
|
|
|
buttons: [
|
|
|
|
|
{ label: 'ButtonGroup' },
|
|
|
|
|
{ label: 'of', active: true },
|
|
|
|
|
{ label: 'type' },
|
|
|
|
|
{ minWidth: 30, style: 'link' },
|
|
|
|
|
{ label: 'checkbox', active: true }
|
|
|
|
|
],
|
|
|
|
|
margin: 6,
|
|
|
|
|
type: 'checkbox'
|
|
|
|
|
})
|
2019-03-21 09:57:27 +01:00
|
|
|
|
2023-05-09 13:25:39 +02:00
|
|
|
const buttonGroup6 = new ButtonGroup({
|
|
|
|
|
x: 450,
|
|
|
|
|
y: 180,
|
|
|
|
|
buttons: [
|
|
|
|
|
{ label: 'ButtonGroup' },
|
|
|
|
|
{ label: 'of' },
|
|
|
|
|
{ label: 'type', active: true },
|
|
|
|
|
{ label: 'radio' }
|
|
|
|
|
],
|
|
|
|
|
margin: 0,
|
|
|
|
|
type: 'radio'
|
|
|
|
|
})
|
2019-03-21 09:57:27 +01:00
|
|
|
|
2023-05-09 13:25:39 +02:00
|
|
|
const buttonGroup7 = new ButtonGroup({
|
|
|
|
|
x: 10,
|
|
|
|
|
y: 250,
|
|
|
|
|
theme: 'light',
|
|
|
|
|
buttons: [
|
|
|
|
|
{ label: 'ButtonGroup' },
|
|
|
|
|
{ label: 'of' },
|
|
|
|
|
{ label: 'style' },
|
|
|
|
|
{ label: 'link' },
|
|
|
|
|
{ label: 'with' },
|
|
|
|
|
{ label: 'one exception', style: 'default' }
|
|
|
|
|
],
|
|
|
|
|
style: 'link'
|
|
|
|
|
})
|
2019-03-21 09:57:27 +01:00
|
|
|
|
2023-05-09 13:25:39 +02:00
|
|
|
const buttonGroup8 = new ButtonGroup({
|
|
|
|
|
x: 610,
|
|
|
|
|
y: 250,
|
|
|
|
|
buttons: [
|
|
|
|
|
{ icon: 'airline_seat_legroom_extra' },
|
|
|
|
|
{ icon: 'airline_seat_legroom_normal' },
|
|
|
|
|
{ icon: 'airline_seat_legroom_reduced' },
|
|
|
|
|
{ icon: 'wifi_tethering', type: 'checkbox' }
|
|
|
|
|
],
|
|
|
|
|
type: 'radio',
|
|
|
|
|
margin: 0
|
|
|
|
|
})
|
2019-03-21 09:57:27 +01:00
|
|
|
|
2023-05-09 13:25:39 +02:00
|
|
|
const buttonGroup9 = new ButtonGroup({
|
|
|
|
|
x: 10,
|
|
|
|
|
y: 320,
|
|
|
|
|
buttons: [{ icon: 'attachment' }, { icon: 'autorenew' }, { icon: 'backup' }, { icon: 'apps' }],
|
|
|
|
|
orientation: 'vertical',
|
|
|
|
|
minWidth: 70
|
|
|
|
|
})
|
2019-03-21 09:57:27 +01:00
|
|
|
|
2023-05-09 13:25:39 +02:00
|
|
|
const buttonGroup10 = new ButtonGroup({
|
|
|
|
|
x: 100,
|
|
|
|
|
y: 320,
|
|
|
|
|
buttons: [
|
|
|
|
|
{ label: 'Vertical' },
|
|
|
|
|
{ label: 'ButtonGroup' },
|
|
|
|
|
{ label: 'align: left', active: true },
|
|
|
|
|
{ label: 'margin: 0' }
|
|
|
|
|
],
|
|
|
|
|
orientation: 'vertical',
|
|
|
|
|
stroke: 0xff0000,
|
|
|
|
|
strokeWidth: 3,
|
|
|
|
|
align: 'left',
|
|
|
|
|
margin: 0
|
|
|
|
|
})
|
2019-03-21 09:57:27 +01:00
|
|
|
|
2023-05-09 13:25:39 +02:00
|
|
|
const buttonGroup11 = new ButtonGroup({
|
|
|
|
|
x: 250,
|
|
|
|
|
y: 320,
|
|
|
|
|
buttons: [
|
|
|
|
|
{ label: 'Vertical', active: true, verticalAlign: 'top' },
|
|
|
|
|
{ label: 'ButtonGroup' },
|
|
|
|
|
{ label: 'centered', active: true, disabled: true, verticalAlign: 'middle' },
|
|
|
|
|
{ label: 'of', disabled: true, align: 'left' },
|
|
|
|
|
{ label: 'type' },
|
|
|
|
|
{ label: 'checkbox', align: 'right', verticalAlign: 'bottom' }
|
|
|
|
|
],
|
|
|
|
|
orientation: 'vertical',
|
|
|
|
|
margin: 0,
|
|
|
|
|
align: 'center',
|
|
|
|
|
verticalAlign: 'bottom',
|
|
|
|
|
minHeight: 100,
|
|
|
|
|
minWidth: 100,
|
|
|
|
|
stroke: 0x22ee22,
|
|
|
|
|
type: 'checkbox'
|
|
|
|
|
})
|
2019-03-21 09:57:27 +01:00
|
|
|
|
2023-05-09 13:25:39 +02:00
|
|
|
const buttonGroup12 = new ButtonGroup({
|
|
|
|
|
x: 400,
|
|
|
|
|
y: 320,
|
|
|
|
|
buttons: [
|
|
|
|
|
{ label: 'Controls', disabled: true },
|
|
|
|
|
{ icon: 'play_arrow' },
|
|
|
|
|
{ icon: 'pause', active: true, align: 'left' },
|
|
|
|
|
{ icon: 'stop', verticalAlign: 'bottom' }
|
|
|
|
|
],
|
|
|
|
|
orientation: 'vertical',
|
|
|
|
|
margin: 0,
|
|
|
|
|
align: 'right',
|
|
|
|
|
type: 'radio'
|
|
|
|
|
})
|
2019-03-21 09:57:27 +01:00
|
|
|
|
2023-05-09 13:25:39 +02:00
|
|
|
const buttonGroup13 = new ButtonGroup({
|
|
|
|
|
x: 520,
|
|
|
|
|
y: 320,
|
|
|
|
|
buttons: [
|
|
|
|
|
{ label: 'Volume', align: 'center', disabled: true },
|
|
|
|
|
{ icon: 'volume_off', label: 'Aus', align: 'left', iconColor: 0x99ffff, verticalAlign: 'top' },
|
|
|
|
|
{ icon: 'volume_mute', label: 'Lautlos', active: true, iconColorActive: 0xd7a3f9 },
|
|
|
|
|
{ icon: 'volume_down', label: 'Leiser', align: 'right', iconPosition: 'right' },
|
|
|
|
|
{
|
|
|
|
|
icon: 'volume_up',
|
|
|
|
|
label: 'Lauter',
|
|
|
|
|
align: 'right',
|
|
|
|
|
iconPosition: 'right',
|
|
|
|
|
verticalAlign: 'bottom'
|
|
|
|
|
}
|
|
|
|
|
],
|
|
|
|
|
orientation: 'vertical',
|
|
|
|
|
margin: 0,
|
|
|
|
|
type: 'radio',
|
|
|
|
|
stroke: 0x7b4073,
|
|
|
|
|
strokeWidth: 4,
|
|
|
|
|
minWidth: 200,
|
|
|
|
|
minHeight: 100
|
|
|
|
|
})
|
2019-03-21 09:57:27 +01:00
|
|
|
|
2023-05-09 13:25:39 +02:00
|
|
|
const buttonGroup14 = new ButtonGroup({
|
|
|
|
|
x: 10,
|
|
|
|
|
y: 960,
|
|
|
|
|
buttons: [
|
|
|
|
|
{ label: 'Stacked button 1', action: (event) => console.log('clicked 1') },
|
|
|
|
|
{ label: 'Stacked button 2', action: (event) => console.log('clicked 2') },
|
|
|
|
|
{ label: 'Stacked button 3', action: (event) => console.log('clicked 3') },
|
|
|
|
|
{ label: 'Stacked button 4', action: (event) => console.log('clicked 4') },
|
|
|
|
|
{ label: 'Stacked button 5', action: (event) => console.log('clicked 5') },
|
|
|
|
|
{ label: 'Stacked button 6', action: (event) => console.log('clicked 6') },
|
|
|
|
|
{ label: 'Stacked button 7', action: (event) => console.log('clicked 7') },
|
|
|
|
|
{ label: 'Stacked button 8', action: (event) => console.log('clicked 8') }
|
|
|
|
|
],
|
|
|
|
|
stackPadding: 6,
|
|
|
|
|
maxWidth: 620,
|
|
|
|
|
app
|
|
|
|
|
})
|
2019-07-30 16:56:29 +02:00
|
|
|
|
2023-05-09 13:25:39 +02:00
|
|
|
const buttonGroup15 = new ButtonGroup({
|
|
|
|
|
x: 10,
|
|
|
|
|
y: 1040,
|
|
|
|
|
buttons: [
|
|
|
|
|
{ icon: 'battery_charging_20', type: 'checkbox', iconColorActive: 0xd43e36 },
|
|
|
|
|
{ icon: 'battery_charging_30', type: 'checkbox', iconColorActive: 0xf99927 },
|
|
|
|
|
{ icon: 'battery_charging_50', type: 'checkbox', iconColorActive: 0xefc201 },
|
|
|
|
|
{ icon: 'battery_charging_60', type: 'checkbox', iconColorActive: 0x839b00 },
|
|
|
|
|
{ icon: 'battery_charging_80', type: 'checkbox', iconColorActive: 0x4ba8af },
|
|
|
|
|
{ icon: 'battery_charging_90', type: 'checkbox', iconColorActive: 0x5386bc },
|
|
|
|
|
{ icon: 'battery_charging_full', type: 'checkbox', iconColorActive: 0x9c71b7 }
|
|
|
|
|
],
|
|
|
|
|
orientation: 'vertical',
|
|
|
|
|
margin: 1,
|
|
|
|
|
maxHeight: 200,
|
|
|
|
|
app
|
|
|
|
|
})
|
2019-07-30 16:56:29 +02:00
|
|
|
|
2023-05-09 13:25:39 +02:00
|
|
|
const buttons16 = []
|
|
|
|
|
for (let i = 1; i < 101; i++) {
|
|
|
|
|
buttons16.push({
|
|
|
|
|
label: `Button ${i}`,
|
|
|
|
|
stroke: Math.floor(Math.random() * 16777215),
|
|
|
|
|
strokeWidth: 3,
|
|
|
|
|
radius: 16
|
|
|
|
|
})
|
|
|
|
|
}
|
2019-08-08 13:46:02 +02:00
|
|
|
|
2023-05-09 13:25:39 +02:00
|
|
|
buttons16.splice(6, 0, { minWidth: 50, style: 'link' })
|
|
|
|
|
const buttonGroup16 = new ButtonGroup({
|
|
|
|
|
x: 90,
|
|
|
|
|
y: 1040,
|
|
|
|
|
buttons: buttons16,
|
|
|
|
|
stackPadding: 3,
|
|
|
|
|
maxWidth: 900,
|
|
|
|
|
app
|
|
|
|
|
})
|
2019-07-31 16:12:00 +02:00
|
|
|
|
2023-05-09 13:25:39 +02:00
|
|
|
const buttonGroup17 = new ButtonGroup({
|
|
|
|
|
x: 10,
|
|
|
|
|
y: 1270,
|
|
|
|
|
buttons: [
|
|
|
|
|
{ icon: 'local_airport', type: 'checkbox', iconColorActive: 0xefc201, badge: 'Airport' },
|
|
|
|
|
{ icon: 'local_bar', type: 'checkbox', iconColorActive: 0xefc201, badge: 'Bar' },
|
|
|
|
|
{ icon: 'local_cafe', type: 'checkbox', iconColorActive: 0xefc201, badge: 'Cafe' },
|
|
|
|
|
{ icon: 'local_car_wash', type: 'checkbox', iconColorActive: 0xefc201, badge: 'Car wash' },
|
|
|
|
|
{ icon: 'local_dining', type: 'checkbox', iconColorActive: 0xefc201, badge: 'Dining' },
|
|
|
|
|
{ icon: 'local_florist', type: 'checkbox', iconColorActive: 0xefc201, badge: 'Florist' },
|
|
|
|
|
{ icon: 'local_gas_station', type: 'checkbox', iconColorActive: 0xefc201, badge: 'Gas station' },
|
|
|
|
|
{
|
|
|
|
|
icon: 'local_grocery_store',
|
|
|
|
|
type: 'checkbox',
|
|
|
|
|
iconColorActive: 0xefc201,
|
|
|
|
|
badge: 'Grocery store'
|
|
|
|
|
},
|
|
|
|
|
{ icon: 'local_mall', type: 'checkbox', iconColorActive: 0xefc201, badge: 'Mall' },
|
|
|
|
|
{ icon: 'local_pizza', type: 'checkbox', iconColorActive: 0xefc201, badge: 'Pizza' },
|
|
|
|
|
{ icon: 'local_printshop', type: 'checkbox', iconColorActive: 0xefc201, badge: 'Printshop' },
|
|
|
|
|
{ icon: 'local_pharmacy', type: 'checkbox', iconColorActive: 0xefc201, badge: 'Pharmacy' }
|
|
|
|
|
],
|
|
|
|
|
margin: 50,
|
|
|
|
|
maxWidth: 400,
|
|
|
|
|
app
|
|
|
|
|
})
|
2019-08-01 09:42:04 +02:00
|
|
|
|
2023-05-09 13:25:39 +02:00
|
|
|
const buttonGroup18 = new ButtonGroup({
|
|
|
|
|
x: 10,
|
|
|
|
|
y: 1340,
|
|
|
|
|
buttons: [
|
|
|
|
|
{ label: 'move' },
|
|
|
|
|
{ label: 'explanation dried' },
|
|
|
|
|
{ label: 'out catch' },
|
|
|
|
|
{ label: 'late either' },
|
|
|
|
|
{ label: 'tell pour' },
|
|
|
|
|
{ label: 'willing apart airplane' },
|
|
|
|
|
{ label: 'high war' },
|
|
|
|
|
{ label: 'future struck' },
|
|
|
|
|
{ label: 'sense image' },
|
|
|
|
|
{ label: 'never' },
|
|
|
|
|
{ label: 'mark cloth' },
|
|
|
|
|
{ label: 'everywhere due large' }
|
|
|
|
|
],
|
|
|
|
|
maxWidth: 500,
|
|
|
|
|
app
|
|
|
|
|
})
|
2019-08-01 11:26:22 +02:00
|
|
|
|
2023-05-09 13:25:39 +02:00
|
|
|
const buttonGroup19 = new ButtonGroup({
|
|
|
|
|
x: 10,
|
|
|
|
|
y: 1420,
|
|
|
|
|
buttons: [{ label: 'move' }, { label: 'explanation dried' }, { label: 'out catch' }],
|
|
|
|
|
maxWidth: 500,
|
|
|
|
|
app
|
|
|
|
|
})
|
2019-08-07 15:24:18 +02:00
|
|
|
|
2023-05-09 13:25:39 +02:00
|
|
|
const buttonGroup20 = new ButtonGroup({
|
|
|
|
|
x: 10,
|
|
|
|
|
y: 1520,
|
|
|
|
|
type: 'checkbox',
|
|
|
|
|
buttons: [{ label: 'one' }, { label: 'two' }, { label: 'three' }],
|
|
|
|
|
textAlpha: 0.7,
|
|
|
|
|
textActiveAlpha: 0.2
|
|
|
|
|
})
|
2019-10-15 14:56:24 +02:00
|
|
|
|
2023-05-09 13:25:39 +02:00
|
|
|
const buttonGroup21 = new ButtonGroup({
|
|
|
|
|
x: 300,
|
|
|
|
|
y: 1520,
|
|
|
|
|
type: 'checkbox',
|
|
|
|
|
buttons: [
|
|
|
|
|
{ label: 'eins', textAlpha: 1, textActiveAlpha: 0.2 },
|
|
|
|
|
{ label: 'zwei', textAlpha: 0.2, textActiveAlpha: 1 },
|
|
|
|
|
{ label: 'drei' }
|
|
|
|
|
]
|
|
|
|
|
})
|
2019-10-15 14:56:24 +02:00
|
|
|
|
2023-05-09 13:25:39 +02:00
|
|
|
app.scene.addChild(buttonGroup1, buttonGroup2, buttonGroup3)
|
|
|
|
|
app.scene.addChild(buttonGroup4)
|
|
|
|
|
app.scene.addChild(buttonGroup5, buttonGroup6)
|
|
|
|
|
app.scene.addChild(buttonGroup7, buttonGroup8)
|
|
|
|
|
app.scene.addChild(buttonGroup9, buttonGroup10, buttonGroup11, buttonGroup12, buttonGroup13)
|
|
|
|
|
app.scene.addChild(buttonGroup14, buttonGroup15, buttonGroup16, buttonGroup17, buttonGroup18, buttonGroup19)
|
|
|
|
|
app.scene.addChild(buttonGroup20, buttonGroup21)
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
2019-07-30 16:56:29 +02:00
|
|
|
</html>
|
