446 lines
13 KiB
HTML
446 lines
13 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="../../dist/iwmlib.3rdparty.js"></script>
|
|
|
|
<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>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: 600,
|
|
transparent: false
|
|
})
|
|
.setup()
|
|
.run()
|
|
|
|
const button1 = new Button({ x: 10, y: 10 })
|
|
|
|
const button2 = new Button({
|
|
theme: 'red',
|
|
x: 60,
|
|
y: 10,
|
|
label: 'Button',
|
|
type: 'checkbox',
|
|
action: (e) => {
|
|
console.info('Button clicked')
|
|
}
|
|
})
|
|
|
|
const button3 = new Button({
|
|
x: 150,
|
|
y: 10,
|
|
label: 'Checkbox button',
|
|
type: 'checkbox',
|
|
action: (e) => {
|
|
console.info('Button clicked', e)
|
|
}
|
|
})
|
|
|
|
const button4 = new Button({
|
|
x: 330,
|
|
y: 10,
|
|
label: 'Disabled button',
|
|
disabled: true,
|
|
action: (e) => {
|
|
console.info('Disabled button clicked')
|
|
}
|
|
})
|
|
|
|
const button5 = new Button({
|
|
x: 500,
|
|
y: 10,
|
|
label: 'Active button',
|
|
active: true
|
|
})
|
|
|
|
const button6 = new Button({
|
|
x: 650,
|
|
y: 10,
|
|
label: 'Active disabled button',
|
|
type: 'checkbox',
|
|
active: true,
|
|
disabled: true
|
|
})
|
|
|
|
const button7 = new Button({
|
|
x: 10,
|
|
y: 70,
|
|
label: 'Icon button',
|
|
type: 'checkbox',
|
|
active: true,
|
|
icon: 'arrow_back'
|
|
})
|
|
|
|
const button8 = new Button({
|
|
x: 180,
|
|
y: 70,
|
|
theme: 'light',
|
|
label: 'Icon button',
|
|
icon: 'arrow_forward',
|
|
type: 'checkbox',
|
|
iconPosition: 'right'
|
|
})
|
|
|
|
const button9 = new Button({
|
|
x: 10,
|
|
y: 130,
|
|
type: 'checkbox',
|
|
icon: 'play_arrow',
|
|
iconActive: 'pause'
|
|
})
|
|
|
|
const button10 = new Button({
|
|
x: 60,
|
|
y: 130,
|
|
icon: 'stop',
|
|
action: function () {
|
|
this.iconColor = Math.round(Math.random() * 16777215)
|
|
}
|
|
})
|
|
|
|
const button11 = new Button({
|
|
x: 110,
|
|
y: 130,
|
|
icon: 'star_border',
|
|
tooltip: 'Bookmark'
|
|
})
|
|
|
|
const button12 = new Button({
|
|
x: 10,
|
|
y: 190,
|
|
icon: 'airplay',
|
|
fillAlpha: 0,
|
|
strokeAlpha: 0,
|
|
iconColor: 0xdd0000,
|
|
iconColorActive: 0x00dd00,
|
|
fillActiveAlpha: 0,
|
|
strokeActiveAlpha: 0,
|
|
type: 'checkbox'
|
|
})
|
|
|
|
const 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'
|
|
})
|
|
|
|
const button14 = new Button({
|
|
x: 10,
|
|
y: 250,
|
|
label: 'Button',
|
|
type: 'checkbox',
|
|
icon: null,
|
|
iconActive: 'add_circle'
|
|
})
|
|
|
|
const button15 = new Button({
|
|
x: 200,
|
|
y: 250,
|
|
label: 'Button',
|
|
type: 'checkbox',
|
|
icon: 'add_circle',
|
|
iconActive: null
|
|
})
|
|
|
|
const button16 = new Button({
|
|
x: 400,
|
|
y: 250,
|
|
label: 'Button',
|
|
type: 'checkbox',
|
|
icon: null,
|
|
iconActive: 'add_circle',
|
|
active: true
|
|
})
|
|
|
|
const 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)
|
|
|
|
const 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)
|
|
|
|
const button19 = new Button({
|
|
x: 200,
|
|
y: 310,
|
|
label: 'Button',
|
|
type: 'checkbox',
|
|
icon: graphic3,
|
|
iconActive: graphic4,
|
|
active: true,
|
|
iconPosition: 'right'
|
|
})
|
|
|
|
const button20 = new Button({
|
|
x: 400,
|
|
y: 310,
|
|
label: 'Link Button',
|
|
type: 'checkbox',
|
|
style: 'link',
|
|
action: (event) => {
|
|
console.log('Link button clicked')
|
|
}
|
|
})
|
|
|
|
const button21 = new Button({
|
|
x: 600,
|
|
y: 310,
|
|
minWidth: 70,
|
|
minHeight: 70,
|
|
icon: 'loop',
|
|
type: 'checkbox',
|
|
style: 'link'
|
|
})
|
|
|
|
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
|
|
}
|
|
})
|
|
|
|
const button25 = new Button({
|
|
x: 300,
|
|
y: 460,
|
|
icon: 'add',
|
|
badge: {
|
|
content: 'Sweden',
|
|
align: 'center',
|
|
verticalAlign: 'top',
|
|
offsetTop: -20,
|
|
radius: 12,
|
|
fill: 0x5856d6
|
|
}
|
|
})
|
|
|
|
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)
|
|
|
|
const button26 = new Button({
|
|
x: 10,
|
|
y: 520,
|
|
label: 'add',
|
|
type: 'checkbox',
|
|
strokeActive: 0x28a745,
|
|
textStyleActive: {
|
|
fill: 0x28a745
|
|
},
|
|
textAlpha: 0.2,
|
|
textActiveAlpha: 0.6
|
|
})
|
|
|
|
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)
|
|
app.scene.addChild(button22, button23, button24, button25)
|
|
app.scene.addChild(button26)
|
|
</script>
|
|
</body>
|
|
</html>
|