IWMBrowser/iwmlib
IWMBrowser/iwmlib
4
0
Fork 0
Code Issues 6 Pull Requests Releases Wiki Activity

Added badge examples for buttons and button groups.

Browse Source
This commit is contained in:
Sebastian Kupke 2019-08-01 09:42:04 +02:00
parent dafc820466
commit afa1c71a0a
2 changed files with 74 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

73
lib/pixi/button.html
View File

@ -32,13 +32,13 @@
const app = new PIXIApp({ const app = new PIXIApp({
view: canvas, view: canvas,
width: 900, width: 900,
height: 420, height: 520,
transparent: false transparent: false
}).setup().run() }).setup().run()
let button1 = new Button({x: 10, y: 10}) const button1 = new Button({x: 10, y: 10})
let button2 = new Button({ const button2 = new Button({
theme: 'red', theme: 'red',
x: 60, x: 60,
y: 10, y: 10,
@ -49,7 +49,7 @@ let button2 = new Button({
} }
}) })
let button3 = new Button({ const button3 = new Button({
x: 150, x: 150,
y: 10, y: 10,
label: 'Checkbox button', label: 'Checkbox button',
@ -59,7 +59,7 @@ let button3 = new Button({
} }
}) })
let button4 = new Button({ const button4 = new Button({
x: 330, x: 330,
y: 10, y: 10,
label: 'Disabled button', label: 'Disabled button',
@ -69,14 +69,14 @@ let button4 = new Button({
} }
}) })
let button5 = new Button({ const button5 = new Button({
x: 500, x: 500,
y: 10, y: 10,
label: 'Active button', label: 'Active button',
active: true active: true
}) })
let button6 = new Button({ const button6 = new Button({
x: 650, x: 650,
y: 10, y: 10,
label: 'Active disabled button', label: 'Active disabled button',
@ -85,7 +85,7 @@ let button6 = new Button({
disabled: true disabled: true
}) })
let button7 = new Button({ const button7 = new Button({
x: 10, x: 10,
y: 70, y: 70,
label: 'Icon button', label: 'Icon button',
@ -94,7 +94,7 @@ let button7 = new Button({
icon: 'arrow_back' icon: 'arrow_back'
}) })
let button8 = new Button({ const button8 = new Button({
x: 180, x: 180,
y: 70, y: 70,
theme: 'light', theme: 'light',
@ -104,7 +104,7 @@ let button8 = new Button({
iconPosition: 'right' iconPosition: 'right'
}) })
let button9 = new Button({ const button9 = new Button({
x: 10, x: 10,
y: 130, y: 130,
type: 'checkbox', type: 'checkbox',
@ -112,7 +112,7 @@ let button9 = new Button({
iconActive: 'pause' iconActive: 'pause'
}) })
let button10 = new Button({ const button10 = new Button({
x: 60, x: 60,
y: 130, y: 130,
icon: 'stop', icon: 'stop',
@ -121,14 +121,14 @@ let button10 = new Button({
} }
}) })
let button11 = new Button({ const button11 = new Button({
x: 110, x: 110,
y: 130, y: 130,
icon: 'star_border', icon: 'star_border',
tooltip: 'Bookmark' tooltip: 'Bookmark'
}) })
let button12 = new Button({ const button12 = new Button({
x: 10, x: 10,
y: 190, y: 190,
icon: 'airplay', icon: 'airplay',
@ -141,7 +141,7 @@ let button12 = new Button({
type: 'checkbox' type: 'checkbox'
}) })
let button13 = new Button({ const button13 = new Button({
x: 50, x: 50,
y: 190, y: 190,
label: 'Button', label: 'Button',
@ -169,7 +169,7 @@ let button13 = new Button({
type: 'checkbox' type: 'checkbox'
}) })
let button14 = new Button({ const button14 = new Button({
x: 10, x: 10,
y: 250, y: 250,
label: 'Button', label: 'Button',
@ -178,7 +178,7 @@ let button14 = new Button({
iconActive: 'add_circle' iconActive: 'add_circle'
}) })
let button15 = new Button({ const button15 = new Button({
x: 200, x: 200,
y: 250, y: 250,
label: 'Button', label: 'Button',
@ -187,7 +187,7 @@ let button15 = new Button({
iconActive: null iconActive: null
}) })
let button16 = new Button({ const button16 = new Button({
x: 400, x: 400,
y: 250, y: 250,
label: 'Button', label: 'Button',
@ -197,7 +197,7 @@ let button16 = new Button({
active: true active: true
}) })
let button17 = new Button({ const button17 = new Button({
x: 600, x: 600,
y: 250, y: 250,
label: 'Button', label: 'Button',
@ -215,7 +215,7 @@ let graphic2 = new PIXI.Graphics()
graphic2.beginFill(0x40c3f2) graphic2.beginFill(0x40c3f2)
graphic2.drawCircle(30, 30, 30) graphic2.drawCircle(30, 30, 30)
let button18 = new Button({ const button18 = new Button({
x: 10, x: 10,
y: 310, y: 310,
label: 'Button', label: 'Button',
@ -232,7 +232,7 @@ let graphic4 = new PIXI.Graphics()
graphic4.beginFill(0xf8ce2d) graphic4.beginFill(0xf8ce2d)
graphic4.drawCircle(40, 40, 40) graphic4.drawCircle(40, 40, 40)
let button19 = new Button({ const button19 = new Button({
x: 200, x: 200,
y: 310, y: 310,
label: 'Button', label: 'Button',
@ -243,7 +243,7 @@ let button19 = new Button({
iconPosition: 'right' iconPosition: 'right'
}) })
let button20 = new Button({ const button20 = new Button({
x: 400, x: 400,
y: 310, y: 310,
label: 'Link Button', label: 'Link Button',
@ -251,7 +251,7 @@ let button20 = new Button({
style: 'link' style: 'link'
}) })
let button21 = new Button({ const button21 = new Button({
x: 600, x: 600,
y: 310, y: 310,
minWidth: 70, minWidth: 70,
@ -261,12 +261,41 @@ let button21 = new Button({
style: 'link' 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
}
})
app.scene.addChild(button1, button2, button3, button4, button5, button6) app.scene.addChild(button1, button2, button3, button4, button5, button6)
app.scene.addChild(button7, button8) app.scene.addChild(button7, button8)
app.scene.addChild(button9, button10, button11) app.scene.addChild(button9, button10, button11)
app.scene.addChild(button12, button13) app.scene.addChild(button12, button13)
app.scene.addChild(button14, button15, button16, button17) app.scene.addChild(button14, button15, button16, button17)
app.scene.addChild(button18, button19, button20, button21) app.scene.addChild(button18, button19, button20, button21)
app.scene.addChild(button22, button23, button24)
</script> </script>
</body> </body>
</html> </html>

24
lib/pixi/buttongroup.html
View File

@ -281,12 +281,34 @@ const buttonGroup16 = new ButtonGroup({
app app
}) })
const buttonGroup17 = new ButtonGroup({
x: 10,
y: 1270,
buttons: [
{icon: 'local_airport', type: 'checkbox', iconColorActive: 0xefc201, badge: 'Airport'},
{icon: 'local_bar', type: 'checkbox', iconColorActive: 0xefc201, badge: 'Bar'},
{icon: 'local_cafe', type: 'checkbox', iconColorActive: 0xefc201, badge: 'Cafe'},
{icon: 'local_car_wash', type: 'checkbox', iconColorActive: 0xefc201, badge: 'Car wash'},
{icon: 'local_dining', type: 'checkbox', iconColorActive: 0xefc201, badge: 'Dining'},
{icon: 'local_florist', type: 'checkbox', iconColorActive: 0xefc201, badge: 'Florist'},
{icon: 'local_gas_station', type: 'checkbox', iconColorActive: 0xefc201, badge: 'Gas station'},
{icon: 'local_grocery_store', type: 'checkbox', iconColorActive: 0xefc201, badge: 'Grocery store'},
{icon: 'local_mall', type: 'checkbox', iconColorActive: 0xefc201, badge: 'Mall'},
{icon: 'local_pizza', type: 'checkbox', iconColorActive: 0xefc201, badge: 'Pizza'},
{icon: 'local_printshop', type: 'checkbox', iconColorActive: 0xefc201, badge: 'Printshop'},
{icon: 'local_pharmacy', type: 'checkbox', iconColorActive: 0xefc201, badge: 'Pharmacy'}
],
margin: 50,
maxWidth: 400,
app
})
app.scene.addChild(buttonGroup1, buttonGroup2, buttonGroup3) app.scene.addChild(buttonGroup1, buttonGroup2, buttonGroup3)
app.scene.addChild(buttonGroup4) app.scene.addChild(buttonGroup4)
app.scene.addChild(buttonGroup5, buttonGroup6) app.scene.addChild(buttonGroup5, buttonGroup6)
app.scene.addChild(buttonGroup7, buttonGroup8) app.scene.addChild(buttonGroup7, buttonGroup8)
app.scene.addChild(buttonGroup9, buttonGroup10, buttonGroup11, buttonGroup12, buttonGroup13) app.scene.addChild(buttonGroup9, buttonGroup10, buttonGroup11, buttonGroup12, buttonGroup13)
app.scene.addChild(buttonGroup14, buttonGroup15, buttonGroup16) app.scene.addChild(buttonGroup14, buttonGroup15, buttonGroup16, buttonGroup17)
</script> </script>
</body> </body>
</html> </html>