2019-03-21 09:57:27 +01:00
|
|
|
<!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>
|
2019-05-22 16:03:19 +02:00
|
|
|
<script src="../../dist/iwmlib.3rdparty.js"></script>
|
2019-03-21 09:57:27 +01:00
|
|
|
|
2019-05-22 16:03:19 +02:00
|
|
|
<script src="../../dist/iwmlib.js"></script>
|
|
|
|
|
<script src="../../dist/iwmlib.pixi.js"></script>
|
2019-03-21 09:57:27 +01:00
|
|
|
</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,
|
2019-08-08 13:46:02 +02:00
|
|
|
height: 600,
|
2019-03-21 09:57:27 +01:00
|
|
|
transparent: false
|
|
|
|
|
}).setup().run()
|
|
|
|
|
|
2019-08-01 09:42:04 +02:00
|
|
|
const button1 = new Button({x: 10, y: 10})
|
2019-03-21 09:57:27 +01:00
|
|
|
|
2019-08-01 09:42:04 +02:00
|
|
|
const button2 = new Button({
|
2019-03-21 09:57:27 +01:00
|
|
|
theme: 'red',
|
|
|
|
|
x: 60,
|
|
|
|
|
y: 10,
|
|
|
|
|
label: 'Button',
|
|
|
|
|
type: 'checkbox',
|
|
|
|
|
action: e => {
|
|
|
|
|
console.info('Button clicked')
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
|
2019-08-01 09:42:04 +02:00
|
|
|
const button3 = new Button({
|
2019-03-21 09:57:27 +01:00
|
|
|
x: 150,
|
|
|
|
|
y: 10,
|
|
|
|
|
label: 'Checkbox button',
|
|
|
|
|
type: 'checkbox',
|
|
|
|
|
action: e => {
|
|
|
|
|
console.info('Button clicked', e)
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
|
2019-08-01 09:42:04 +02:00
|
|
|
const button4 = new Button({
|
2019-03-21 09:57:27 +01:00
|
|
|
x: 330,
|
|
|
|
|
y: 10,
|
|
|
|
|
label: 'Disabled button',
|
|
|
|
|
disabled: true,
|
|
|
|
|
action: e => {
|
|
|
|
|
console.info('Disabled button clicked')
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
|
2019-08-01 09:42:04 +02:00
|
|
|
const button5 = new Button({
|
2019-03-21 09:57:27 +01:00
|
|
|
x: 500,
|
|
|
|
|
y: 10,
|
|
|
|
|
label: 'Active button',
|
|
|
|
|
active: true
|
|
|
|
|
})
|
|
|
|
|
|
2019-08-01 09:42:04 +02:00
|
|
|
const button6 = new Button({
|
2019-03-21 09:57:27 +01:00
|
|
|
x: 650,
|
|
|
|
|
y: 10,
|
|
|
|
|
label: 'Active disabled button',
|
|
|
|
|
type: 'checkbox',
|
|
|
|
|
active: true,
|
|
|
|
|
disabled: true
|
|
|
|
|
})
|
|
|
|
|
|
2019-08-01 09:42:04 +02:00
|
|
|
const button7 = new Button({
|
2019-03-21 09:57:27 +01:00
|
|
|
x: 10,
|
|
|
|
|
y: 70,
|
|
|
|
|
label: 'Icon button',
|
|
|
|
|
type: 'checkbox',
|
|
|
|
|
active: true,
|
|
|
|
|
icon: 'arrow_back'
|
|
|
|
|
})
|
|
|
|
|
|
2019-08-01 09:42:04 +02:00
|
|
|
const button8 = new Button({
|
2019-03-21 09:57:27 +01:00
|
|
|
x: 180,
|
|
|
|
|
y: 70,
|
|
|
|
|
theme: 'light',
|
|
|
|
|
label: 'Icon button',
|
|
|
|
|
icon: 'arrow_forward',
|
|
|
|
|
type: 'checkbox',
|
|
|
|
|
iconPosition: 'right'
|
|
|
|
|
})
|
|
|
|
|
|
2019-08-01 09:42:04 +02:00
|
|
|
const button9 = new Button({
|
2019-03-21 09:57:27 +01:00
|
|
|
x: 10,
|
|
|
|
|
y: 130,
|
|
|
|
|
type: 'checkbox',
|
|
|
|
|
icon: 'play_arrow',
|
|
|
|
|
iconActive: 'pause'
|
|
|
|
|
})
|
|
|
|
|
|
2019-08-01 09:42:04 +02:00
|
|
|
const button10 = new Button({
|
2019-03-21 09:57:27 +01:00
|
|
|
x: 60,
|
|
|
|
|
y: 130,
|
|
|
|
|
icon: 'stop',
|
|
|
|
|
action: function() {
|
|
|
|
|
this.iconColor = Math.round(Math.random() * 16777215)
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
|
2019-08-01 09:42:04 +02:00
|
|
|
const button11 = new Button({
|
2019-03-21 09:57:27 +01:00
|
|
|
x: 110,
|
|
|
|
|
y: 130,
|
|
|
|
|
icon: 'star_border',
|
|
|
|
|
tooltip: 'Bookmark'
|
|
|
|
|
})
|
|
|
|
|
|
2019-08-01 09:42:04 +02:00
|
|
|
const button12 = new Button({
|
2019-03-21 09:57:27 +01:00
|
|
|
x: 10,
|
|
|
|
|
y: 190,
|
|
|
|
|
icon: 'airplay',
|
|
|
|
|
fillAlpha: 0,
|
|
|
|
|
strokeAlpha: 0,
|
|
|
|
|
iconColor: 0xdd0000,
|
|
|
|
|
iconColorActive: 0x00dd00,
|
|
|
|
|
fillActiveAlpha: 0,
|
|
|
|
|
strokeActiveAlpha: 0,
|
|
|
|
|
type: 'checkbox'
|
|
|
|
|
})
|
|
|
|
|
|
2019-08-01 09:42:04 +02:00
|
|
|
const button13 = new Button({
|
2019-03-21 09:57:27 +01:00
|
|
|
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'
|
|
|
|
|
})
|
|
|
|
|
|
2019-08-01 09:42:04 +02:00
|
|
|
const button14 = new Button({
|
2019-03-21 09:57:27 +01:00
|
|
|
x: 10,
|
|
|
|
|
y: 250,
|
|
|
|
|
label: 'Button',
|
|
|
|
|
type: 'checkbox',
|
|
|
|
|
icon: null,
|
|
|
|
|
iconActive: 'add_circle'
|
|
|
|
|
})
|
|
|
|
|
|
2019-08-01 09:42:04 +02:00
|
|
|
const button15 = new Button({
|
2019-03-21 09:57:27 +01:00
|
|
|
x: 200,
|
|
|
|
|
y: 250,
|
|
|
|
|
label: 'Button',
|
|
|
|
|
type: 'checkbox',
|
|
|
|
|
icon: 'add_circle',
|
|
|
|
|
iconActive: null
|
|
|
|
|
})
|
|
|
|
|
|
2019-08-01 09:42:04 +02:00
|
|
|
const button16 = new Button({
|
2019-03-21 09:57:27 +01:00
|
|
|
x: 400,
|
|
|
|
|
y: 250,
|
|
|
|
|
label: 'Button',
|
|
|
|
|
type: 'checkbox',
|
|
|
|
|
icon: null,
|
|
|
|
|
iconActive: 'add_circle',
|
|
|
|
|
active: true
|
|
|
|
|
})
|
|
|
|
|
|
2019-08-01 09:42:04 +02:00
|
|
|
const button17 = new Button({
|
2019-03-21 09:57:27 +01:00
|
|
|
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)
|
|
|
|
|
|
2019-08-01 09:42:04 +02:00
|
|
|
const button18 = new Button({
|
2019-03-21 09:57:27 +01:00
|
|
|
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)
|
|
|
|
|
|
2019-08-01 09:42:04 +02:00
|
|
|
const button19 = new Button({
|
2019-03-21 09:57:27 +01:00
|
|
|
x: 200,
|
|
|
|
|
y: 310,
|
|
|
|
|
label: 'Button',
|
|
|
|
|
type: 'checkbox',
|
|
|
|
|
icon: graphic3,
|
|
|
|
|
iconActive: graphic4,
|
|
|
|
|
active: true,
|
|
|
|
|
iconPosition: 'right'
|
|
|
|
|
})
|
|
|
|
|
|
2019-08-01 09:42:04 +02:00
|
|
|
const button20 = new Button({
|
2019-03-21 09:57:27 +01:00
|
|
|
x: 400,
|
|
|
|
|
y: 310,
|
|
|
|
|
label: 'Link Button',
|
|
|
|
|
type: 'checkbox',
|
2020-01-30 15:41:31 +01:00
|
|
|
style: 'link',
|
|
|
|
|
action: event => {
|
|
|
|
|
console.log('Link button clicked')
|
|
|
|
|
}
|
2019-03-21 09:57:27 +01:00
|
|
|
})
|
|
|
|
|
|
2019-08-01 09:42:04 +02:00
|
|
|
const button21 = new Button({
|
2019-03-21 09:57:27 +01:00
|
|
|
x: 600,
|
|
|
|
|
y: 310,
|
|
|
|
|
minWidth: 70,
|
|
|
|
|
minHeight: 70,
|
|
|
|
|
icon: 'loop',
|
|
|
|
|
type: 'checkbox',
|
|
|
|
|
style: 'link'
|
|
|
|
|
})
|
|
|
|
|
|
2019-08-01 09:42:04 +02:00
|
|
|
const button22 = new Button({
|
|
|
|
|
x: 10,
|
|
|
|
|
y: 440,
|
|
|
|
|
icon: 'play_arrow',
|
|
|
|
|
badge: '19'
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
const button23 = new Button({
|
|
|
|
|
x: 100,
|
|
|
|
|
y: 440,
|
|
|
|
|
icon: 'stop',
|
|
|
|
|
badge: 'Stop'
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
const button24 = new Button({
|
|
|
|
|
x: 200,
|
|
|
|
|
y: 440,
|
|
|
|
|
icon: 'star_border',
|
|
|
|
|
badge: {
|
|
|
|
|
content: 'Bookmark',
|
|
|
|
|
align: 'center',
|
|
|
|
|
verticalAlign: 'bottom',
|
|
|
|
|
offsetTop: 8,
|
|
|
|
|
radius: 14,
|
|
|
|
|
fill: 0xfe832d
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
|
2019-08-06 12:01:32 +02:00
|
|
|
const button25 = new Button({
|
|
|
|
|
x: 300,
|
|
|
|
|
y: 460,
|
|
|
|
|
icon: 'add',
|
|
|
|
|
badge: {
|
2019-08-06 14:24:50 +02:00
|
|
|
content: 'Sweden',
|
2019-08-06 12:01:32 +02:00
|
|
|
align: 'center',
|
|
|
|
|
verticalAlign: 'top',
|
|
|
|
|
offsetTop: -20,
|
|
|
|
|
radius: 12,
|
|
|
|
|
fill: 0x5856d6
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
|
2019-08-06 14:24:50 +02:00
|
|
|
const countries = ['Tajikistan', 'Zambia', 'Dominica', 'Australia', 'Botswana', 'Mozambique', 'Lesotho', 'Thailand', 'Gabon', 'Cuba', 'Mexico', 'Central African Republic', 'Réunion', 'Montenegro', 'Romania', 'Jamaica', 'Thailand', 'Cameroon', 'French Guiana', 'Nigeria', 'Tokelau', 'Slovenia', 'Kuwait', 'Palestinian Territories', 'Estonia', 'Germany', 'Cameroon', 'Somalia', 'El Salvador', 'San Marino', 'Sierra Leone', 'Sierra Leone', 'Gibraltar', 'Benin', 'Russia', 'Iraq', 'Tunisia', 'Greenland', 'Côte d\'Ivoire', 'Tanzania', 'Zambia', 'Bermuda', 'Somalia', 'Malaysia', 'Croatia', 'Togo', 'Belgium', 'Uruguay', 'Equatorial Guinea', 'Nigeria', 'St. Martin', 'Tuvalu', 'South Africa', 'Hong Kong SAR China', 'Palau', 'Canary Islands', 'Algeria', 'Hong Kong SAR China', 'Brunei', 'Dominican Republic', 'Sierra Leone', 'Moldova', 'Indonesia', 'Central African Republic', 'Anguilla', 'Malaysia', 'Bahrain', 'Indonesia', 'Peru', 'Namibia', 'Congo - Brazzaville', 'Micronesia', 'Cambodia', 'Réunion', 'Honduras', 'Hungary', 'Brazil', 'Trinidad & Tobago', 'Hungary', 'Madagascar', 'Sierra Leone', 'Seychelles', 'St. Martin', 'New Caledonia', 'Tokelau', 'Macedonia', 'Netherlands', 'Panama', 'Venezuela', 'Nepal', 'Guernsey', 'Papua New Guinea', 'Finland', 'Malaysia', 'Hong Kong SAR China', 'Trinidad & Tobago', 'Montserrat', 'Comoros', 'Benin', 'South Korea', 'Peru', 'Botswana', 'Cambodia', 'Isle of Man', 'Mozambique']
|
|
|
|
|
setInterval(() => {
|
|
|
|
|
button25.badge.content = countries[Math.floor(Math.random() * countries.length)]
|
|
|
|
|
button25.layout()
|
|
|
|
|
}, 1000)
|
|
|
|
|
|
2019-08-08 13:46:02 +02:00
|
|
|
const button26 = new Button({
|
|
|
|
|
x: 10,
|
|
|
|
|
y: 520,
|
|
|
|
|
label: 'add',
|
|
|
|
|
type: 'checkbox',
|
|
|
|
|
strokeActive: 0x28a745,
|
|
|
|
|
textStyleActive: {
|
|
|
|
|
fill: 0x28a745
|
2019-10-15 14:56:24 +02:00
|
|
|
},
|
|
|
|
|
textAlpha: .2,
|
|
|
|
|
textActiveAlpha: .6
|
2019-08-08 13:46:02 +02:00
|
|
|
})
|
|
|
|
|
|
2019-03-21 09:57:27 +01:00
|
|
|
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)
|
2019-08-06 12:01:32 +02:00
|
|
|
app.scene.addChild(button22, button23, button24, button25)
|
2019-08-08 13:46:02 +02:00
|
|
|
app.scene.addChild(button26)
|
2019-03-21 09:57:27 +01:00
|
|
|
</script>
|
|
|
|
|
</body>
|
2019-07-31 16:12:15 +02:00
|
|
|
</html>
|
