iwmlib/pixi/button.html
2019-03-21 09:57:27 +01:00

272 lines
5.5 KiB
HTML

<!doctype html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>PIXI Button</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>Button</h1>
<p>
The Button class defines a clickable/touchable button. Use custom button styles for actions in forms, dialogs,
and more with support for multiple sizes, states, and more. Buttons will appear pressed when active. Make
buttons look inactive by setting the disabled state to true. To allow changing the state between active/inactive, set
the button type to "checkbox".
</p>
<p><a href="../../doc/out/Button.html">JavaScript API</a></p>
<p>Let's look at some button examples:</p><br />
<canvas id="canvas" class="interactive"></canvas>
<p>
What you should see: Many buttons with very different styling and behaviour.
</p>
<script class="doctest">
const app = new PIXIApp({
view: canvas,
width: 900,
height: 420,
transparent: false
}).setup().run()
let button1 = new Button({x: 10, y: 10})
let button2 = new Button({
theme: 'red',
x: 60,
y: 10,
label: 'Button',
type: 'checkbox',
action: e => {
console.info('Button clicked')
}
})
let button3 = new Button({
x: 150,
y: 10,
label: 'Checkbox button',
type: 'checkbox',
action: e => {
console.info('Button clicked', e)
}
})
let button4 = new Button({
x: 330,
y: 10,
label: 'Disabled button',
disabled: true,
action: e => {
console.info('Disabled button clicked')
}
})
let button5 = new Button({
x: 500,
y: 10,
label: 'Active button',
active: true
})
let button6 = new Button({
x: 650,
y: 10,
label: 'Active disabled button',
type: 'checkbox',
active: true,
disabled: true
})
let button7 = new Button({
x: 10,
y: 70,
label: 'Icon button',
type: 'checkbox',
active: true,
icon: 'arrow_back'
})
let button8 = new Button({
x: 180,
y: 70,
theme: 'light',
label: 'Icon button',
icon: 'arrow_forward',
type: 'checkbox',
iconPosition: 'right'
})
let button9 = new Button({
x: 10,
y: 130,
type: 'checkbox',
icon: 'play_arrow',
iconActive: 'pause'
})
let button10 = new Button({
x: 60,
y: 130,
icon: 'stop',
action: function() {
this.iconColor = Math.round(Math.random() * 16777215)
}
})
let button11 = new Button({
x: 110,
y: 130,
icon: 'star_border',
tooltip: 'Bookmark'
})
let button12 = new Button({
x: 10,
y: 190,
icon: 'airplay',
fillAlpha: 0,
strokeAlpha: 0,
iconColor: 0xdd0000,
iconColorActive: 0x00dd00,
fillActiveAlpha: 0,
strokeActiveAlpha: 0,
type: 'checkbox'
})
let button13 = new Button({
x: 50,
y: 190,
label: 'Button',
fillAlpha: 0,
strokeAlpha: 0,
fillActiveAlpha: 0,
strokeActiveAlpha: 0,
textStyle: {
fontSize: 20,
stroke: 'brown',
fill: 'orange',
strokeThickness: 4,
miterLimit: 1,
letterSpacing: 6
},
textStyleActive: {
fontSize: 20,
stroke: 'orange',
fill: 'brown',
strokeThickness: 4,
fontWeight: 'bold',
miterLimit: 1,
letterSpacing: 5
},
type: 'checkbox'
})
let button14 = new Button({
x: 10,
y: 250,
label: 'Button',
type: 'checkbox',
icon: null,
iconActive: 'add_circle'
})
let button15 = new Button({
x: 200,
y: 250,
label: 'Button',
type: 'checkbox',
icon: 'add_circle',
iconActive: null
})
let button16 = new Button({
x: 400,
y: 250,
label: 'Button',
type: 'checkbox',
icon: null,
iconActive: 'add_circle',
active: true
})
let button17 = new Button({
x: 600,
y: 250,
label: 'Button',
type: 'checkbox',
icon: 'add_circle',
iconActive: null,
active: true
})
let graphic1 = new PIXI.Graphics()
graphic1.beginFill(0xd7a3f9)
graphic1.drawCircle(10, 10, 10)
let graphic2 = new PIXI.Graphics()
graphic2.beginFill(0x40c3f2)
graphic2.drawCircle(30, 30, 30)
let button18 = new Button({
x: 10,
y: 310,
label: 'Button',
type: 'checkbox',
icon: graphic1,
iconActive: graphic2
})
let graphic3 = new PIXI.Graphics()
graphic3.beginFill(0xfd6b6a)
graphic3.drawCircle(2, 2, 2)
let graphic4 = new PIXI.Graphics()
graphic4.beginFill(0xf8ce2d)
graphic4.drawCircle(40, 40, 40)
let button19 = new Button({
x: 200,
y: 310,
label: 'Button',
type: 'checkbox',
icon: graphic3,
iconActive: graphic4,
active: true,
iconPosition: 'right'
})
let button20 = new Button({
x: 400,
y: 310,
label: 'Link Button',
type: 'checkbox',
style: 'link'
})
let button21 = new Button({
x: 600,
y: 310,
minWidth: 70,
minHeight: 70,
icon: 'loop',
type: 'checkbox',
style: 'link'
})
app.scene.addChild(button1, button2, button3, button4, button5, button6)
app.scene.addChild(button7, button8)
app.scene.addChild(button9, button10, button11)
app.scene.addChild(button12, button13)
app.scene.addChild(button14, button15, button16, button17)
app.scene.addChild(button18, button19, button20, button21)
</script>
</body>