Initial commit.
This commit is contained in:
@@ -0,0 +1,240 @@
|
||||
<!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="../3rdparty/all.js"></script>
|
||||
|
||||
<script src="../all.js"></script>
|
||||
<script src="./all.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: 1000
|
||||
}).setup().run()
|
||||
|
||||
let buttonGroup1 = new ButtonGroup({
|
||||
x: 10,
|
||||
y: 10,
|
||||
buttons: [
|
||||
{icon: 'keyboard_arrow_left'},
|
||||
{icon: 'keyboard_arrow_up'},
|
||||
{icon: 'keyboard_arrow_down'},
|
||||
{icon: 'keyboard_arrow_right'}
|
||||
]
|
||||
})
|
||||
|
||||
let 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
|
||||
})
|
||||
|
||||
let 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
|
||||
})
|
||||
|
||||
let 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
|
||||
})
|
||||
|
||||
let buttonGroup5 = new ButtonGroup({
|
||||
x: 10,
|
||||
y: 180,
|
||||
buttons: [
|
||||
{label: 'ButtonGroup'},
|
||||
{label: 'of', active: true},
|
||||
{label: 'type'},
|
||||
{label: 'checkbox', active: true}
|
||||
],
|
||||
margin: 6,
|
||||
type: 'checkbox'
|
||||
})
|
||||
|
||||
let buttonGroup6 = new ButtonGroup({
|
||||
x: 450,
|
||||
y: 180,
|
||||
buttons: [
|
||||
{label: 'ButtonGroup'},
|
||||
{label: 'of'},
|
||||
{label: 'type', active: true},
|
||||
{label: 'radio'}
|
||||
],
|
||||
margin: 0,
|
||||
type: 'radio'
|
||||
})
|
||||
|
||||
let 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'
|
||||
})
|
||||
|
||||
let 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
|
||||
})
|
||||
|
||||
let buttonGroup9 = new ButtonGroup({
|
||||
x: 10,
|
||||
y: 320,
|
||||
buttons: [
|
||||
{icon: 'attachment'},
|
||||
{icon: 'autorenew'},
|
||||
{icon: 'backup'},
|
||||
{icon: 'apps'}
|
||||
],
|
||||
orientation: 'vertical',
|
||||
minWidth: 70
|
||||
})
|
||||
|
||||
let 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
|
||||
})
|
||||
|
||||
let 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'
|
||||
})
|
||||
|
||||
let 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'
|
||||
})
|
||||
|
||||
let 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
|
||||
})
|
||||
|
||||
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)
|
||||
</script>
|
||||
</body>
|
||||
Reference in New Issue
Block a user