From afa1c71a0a2246d39f2f5909e98116a228cefe63 Mon Sep 17 00:00:00 2001 From: Sebastian Kupke Date: Thu, 1 Aug 2019 09:42:04 +0200 Subject: [PATCH] Added badge examples for buttons and button groups. --- lib/pixi/button.html | 73 +++++++++++++++++++++++++++------------ lib/pixi/buttongroup.html | 24 ++++++++++++- 2 files changed, 74 insertions(+), 23 deletions(-) diff --git a/lib/pixi/button.html b/lib/pixi/button.html index 1b113bc..d478174 100644 --- a/lib/pixi/button.html +++ b/lib/pixi/button.html @@ -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) \ No newline at end of file diff --git a/lib/pixi/buttongroup.html b/lib/pixi/buttongroup.html index fe3fe5c..eece850 100644 --- a/lib/pixi/buttongroup.html +++ b/lib/pixi/buttongroup.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)