iwmlib/pixi/theme.html

123 lines
2.8 KiB
HTML
Raw Normal View History

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 Theme</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>Theme</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>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: 250,
transparent: false
}).setup().run()
let buttonDark = new Button({
x: 10,
y: 10,
label: 'Button with theme dark',
type: 'checkbox'
})
let buttonGroupLight = new ButtonGroup({
x: 230,
y: 10,
theme: 'light',
buttons: [
{label: 'Button with', active: true},
{label: 'theme light'}
],
type: 'checkbox'
})
let buttonGroupRed = new ButtonGroup({
x: 480,
y: 10,
theme: 'red',
margin: 0,
buttons: [
{label: 'Button with', active: true},
{label: 'theme red'}
],
type: 'radio'
})
let switchDark = new Switch({
x: 10,
y: 90
})
let switchLight = new Switch({
x: 80,
y: 90,
theme: 'light'
})
let switchRed = new Switch({
x: 150,
y: 90,
theme: 'red'
})
let yellowTheme = new Theme({
fill: 0xfecd2d,
fillActive: 0xfe9727,
strokeActive: 0xfecd2d,
strokeActiveWidth: 4,
textStyle: {
fill: 0x5ec7f8
},
textStyleActive: {
fill: 0x5954d3
},
textStyleLarge: {
fontSize: 36
}
})
let buttonYellow = new Button({
x: 10,
y: 160,
theme: yellowTheme,
label: 'Button with theme yellow',
type: 'checkbox',
action: event => {
const modal = new Modal({
app: app,
theme: yellowTheme,
header: 'Theme',
content: 'Yellow'
})
app.scene.addChild(modal)
}
})
app.scene.addChild(buttonDark, buttonGroupLight, buttonGroupRed)
app.scene.addChild(switchDark, switchLight, switchRed)
app.scene.addChild(buttonYellow)
</script>
</body>