Added badge examples for buttons and button groups.
This commit is contained in:
parent
dafc820466
commit
afa1c71a0a
|
|
@ -32,13 +32,13 @@
|
|||
const app = new PIXIApp({
|
||||
view: canvas,
|
||||
width: 900,
|
||||
height: 420,
|
||||
height: 520,
|
||||
transparent: false
|
||||
}).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',
|
||||
x: 60,
|
||||
y: 10,
|
||||
|
|
@ -49,7 +49,7 @@ let button2 = new Button({
|
|||
}
|
||||
})
|
||||
|
||||
let button3 = new Button({
|
||||
const button3 = new Button({
|
||||
x: 150,
|
||||
y: 10,
|
||||
label: 'Checkbox button',
|
||||
|
|
@ -59,7 +59,7 @@ let button3 = new Button({
|
|||
}
|
||||
})
|
||||
|
||||
let button4 = new Button({
|
||||
const button4 = new Button({
|
||||
x: 330,
|
||||
y: 10,
|
||||
label: 'Disabled button',
|
||||
|
|
@ -69,14 +69,14 @@ let button4 = new Button({
|
|||
}
|
||||
})
|
||||
|
||||
let button5 = new Button({
|
||||
const button5 = new Button({
|
||||
x: 500,
|
||||
y: 10,
|
||||
label: 'Active button',
|
||||
active: true
|
||||
})
|
||||
|
||||
let button6 = new Button({
|
||||
const button6 = new Button({
|
||||
x: 650,
|
||||
y: 10,
|
||||
label: 'Active disabled button',
|
||||
|
|
@ -85,7 +85,7 @@ let button6 = new Button({
|
|||
disabled: true
|
||||
})
|
||||
|
||||
let button7 = new Button({
|
||||
const button7 = new Button({
|
||||
x: 10,
|
||||
y: 70,
|
||||
label: 'Icon button',
|
||||
|
|
@ -94,7 +94,7 @@ let button7 = new Button({
|
|||
icon: 'arrow_back'
|
||||
})
|
||||
|
||||
let button8 = new Button({
|
||||
const button8 = new Button({
|
||||
x: 180,
|
||||
y: 70,
|
||||
theme: 'light',
|
||||
|
|
@ -104,7 +104,7 @@ let button8 = new Button({
|
|||
iconPosition: 'right'
|
||||
})
|
||||
|
||||
let button9 = new Button({
|
||||
const button9 = new Button({
|
||||
x: 10,
|
||||
y: 130,
|
||||
type: 'checkbox',
|
||||
|
|
@ -112,7 +112,7 @@ let button9 = new Button({
|
|||
iconActive: 'pause'
|
||||
})
|
||||
|
||||
let button10 = new Button({
|
||||
const button10 = new Button({
|
||||
x: 60,
|
||||
y: 130,
|
||||
icon: 'stop',
|
||||
|
|
@ -121,14 +121,14 @@ let button10 = new Button({
|
|||
}
|
||||
})
|
||||
|
||||
let button11 = new Button({
|
||||
const button11 = new Button({
|
||||
x: 110,
|
||||
y: 130,
|
||||
icon: 'star_border',
|
||||
tooltip: 'Bookmark'
|
||||
})
|
||||
|
||||
let button12 = new Button({
|
||||
const button12 = new Button({
|
||||
x: 10,
|
||||
y: 190,
|
||||
icon: 'airplay',
|
||||
|
|
@ -141,7 +141,7 @@ let button12 = new Button({
|
|||
type: 'checkbox'
|
||||
})
|
||||
|
||||
let button13 = new Button({
|
||||
const button13 = new Button({
|
||||
x: 50,
|
||||
y: 190,
|
||||
label: 'Button',
|
||||
|
|
@ -169,7 +169,7 @@ let button13 = new Button({
|
|||
type: 'checkbox'
|
||||
})
|
||||
|
||||
let button14 = new Button({
|
||||
const button14 = new Button({
|
||||
x: 10,
|
||||
y: 250,
|
||||
label: 'Button',
|
||||
|
|
@ -178,7 +178,7 @@ let button14 = new Button({
|
|||
iconActive: 'add_circle'
|
||||
})
|
||||
|
||||
let button15 = new Button({
|
||||
const button15 = new Button({
|
||||
x: 200,
|
||||
y: 250,
|
||||
label: 'Button',
|
||||
|
|
@ -187,7 +187,7 @@ let button15 = new Button({
|
|||
iconActive: null
|
||||
})
|
||||
|
||||
let button16 = new Button({
|
||||
const button16 = new Button({
|
||||
x: 400,
|
||||
y: 250,
|
||||
label: 'Button',
|
||||
|
|
@ -197,7 +197,7 @@ let button16 = new Button({
|
|||
active: true
|
||||
})
|
||||
|
||||
let button17 = new Button({
|
||||
const button17 = new Button({
|
||||
x: 600,
|
||||
y: 250,
|
||||
label: 'Button',
|
||||
|
|
@ -215,7 +215,7 @@ let graphic2 = new PIXI.Graphics()
|
|||
graphic2.beginFill(0x40c3f2)
|
||||
graphic2.drawCircle(30, 30, 30)
|
||||
|
||||
let button18 = new Button({
|
||||
const button18 = new Button({
|
||||
x: 10,
|
||||
y: 310,
|
||||
label: 'Button',
|
||||
|
|
@ -232,7 +232,7 @@ let graphic4 = new PIXI.Graphics()
|
|||
graphic4.beginFill(0xf8ce2d)
|
||||
graphic4.drawCircle(40, 40, 40)
|
||||
|
||||
let button19 = new Button({
|
||||
const button19 = new Button({
|
||||
x: 200,
|
||||
y: 310,
|
||||
label: 'Button',
|
||||
|
|
@ -243,7 +243,7 @@ let button19 = new Button({
|
|||
iconPosition: 'right'
|
||||
})
|
||||
|
||||
let button20 = new Button({
|
||||
const button20 = new Button({
|
||||
x: 400,
|
||||
y: 310,
|
||||
label: 'Link Button',
|
||||
|
|
@ -251,7 +251,7 @@ let button20 = new Button({
|
|||
style: 'link'
|
||||
})
|
||||
|
||||
let button21 = new Button({
|
||||
const button21 = new Button({
|
||||
x: 600,
|
||||
y: 310,
|
||||
minWidth: 70,
|
||||
|
|
@ -261,12 +261,41 @@ let button21 = new Button({
|
|||
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(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)
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -281,12 +281,34 @@ const buttonGroup16 = new ButtonGroup({
|
|||
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(buttonGroup4)
|
||||
app.scene.addChild(buttonGroup5, buttonGroup6)
|
||||
app.scene.addChild(buttonGroup7, buttonGroup8)
|
||||
app.scene.addChild(buttonGroup9, buttonGroup10, buttonGroup11, buttonGroup12, buttonGroup13)
|
||||
app.scene.addChild(buttonGroup14, buttonGroup15, buttonGroup16)
|
||||
app.scene.addChild(buttonGroup14, buttonGroup15, buttonGroup16, buttonGroup17)
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Reference in New Issue