iwmlib/lib/pixi/theme.html

119 lines
3.9 KiB
HTML

<!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="../../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>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>
</html>