<!doctype html> <html lang="en"> <head> <meta http-eqv="Content-Type" content="text/html; charset=utf-8"> <title>PIXI ButtonGroup</title> <link rel="stylesheet" href="../3rdparty/highlight/styles/default.css"> <link rel="stylesheet" href="../../css/doctest.css"> <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> <script src="../../dist/iwmlib.js"></script> <script src="../../dist/iwmlib.pixi.js"></script> </head> <body onload="Doctest.run()"> <h1>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() 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'} ] }) 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 }) 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 }) 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: .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 }) 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' }) const buttonGroup6 = new ButtonGroup({ x: 450, y: 180, buttons: [ {label: 'ButtonGroup'}, {label: 'of'}, {label: 'type', active: true}, {label: 'radio'} ], margin: 0, type: 'radio' }) 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' }) 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 }) const buttonGroup9 = new ButtonGroup({ x: 10, y: 320, buttons: [ {icon: 'attachment'}, {icon: 'autorenew'}, {icon: 'backup'}, {icon: 'apps'} ], orientation: 'vertical', minWidth: 70 }) 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 }) 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' }) 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' }) 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 }) 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 }) 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 }) const buttons16 = [] for (let i = 1; i < 101; i++) { buttons16.push({label: `Button ${i}`, stroke: Math.floor(Math.random() * 16777215), strokeWidth: 3, radius: 16}) } buttons16.splice(6, 0, {minWidth: 50, style: 'link'}) const buttonGroup16 = new ButtonGroup({ x: 90, y: 1040, buttons: buttons16, stackPadding: 3, maxWidth: 900, app }) 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 }) 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 }) const buttonGroup19 = new ButtonGroup({ x: 10, y: 1420, buttons: [ {label: 'move'}, {label: 'explanation dried'}, {label: 'out catch'} ], maxWidth: 500, app }) const buttonGroup20 = new ButtonGroup({ x: 10, y: 1520, type: 'checkbox', buttons: [ {label: 'one'}, {label: 'two'}, {label: 'three'} ], textAlpha: .7, textActiveAlpha: .2 }) const buttonGroup21 = new ButtonGroup({ x: 300, y: 1520, type: 'checkbox', buttons: [ {label: 'eins', textAlpha: 1, textActiveAlpha: .2}, {label: 'zwei', textAlpha: .2, textActiveAlpha: 1}, {label: 'drei'} ] }) 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> </html>