An implementation of Anthony Pipkin's Gallery Button using my own Gallery Makenode. It provides a regular button and a two position (toggle) button.
Button produces a fancier button that works either like a regular <button> or buttons of type submit or reset. Button can be created via code or read from markup.
ButtonToggle produces a button that switches in between two positions each time it is pressed.
Both buttons can have an image instead of or alongside text. The image can be at either side of the text.
If an href is provided it will navigate to it. If a callback is provided, it will be called. Otherwise, the pressed event can be listened to.
The code is based on Anthony Pipkin's though thoroughly modified. The styling is mostly his and the images have been copied verbatim. Thanks!
Plain button, only label set:
Button from existing markup:
Toggle button, icon added:
Group of plain buttons with one separator:
Group of toggle buttons, some with icons:
*/ YUI().use('gallery-md-button', 'gallery-md-button-group', function (Y) { 'use strict'; var PRESS = 'press', INFO = 'info'; var plain = (new Y.Button({label:'Ok'})).render('#plain'), // reads button type from markup markup = (new Y.Button({srcNode:'#markup'})).render(), submit = (new Y.Button({srcNode:'#submit'})).render(), reset = (new Y.Button({srcNode:'#reset'})).render(), toggle = (new Y.ButtonToggle({label:'B'})).render('#toggle'), // default child type for ButtonGroup is plain Button, // other button types need to be explictly instantiated multiButton = (new Y.ButtonGroup({ label:'Plain Buttons', children:[ {label:'A'}, new Y.ButtonSeparator(), {label:'B'}, {label:'C'} ] })).render('#multiButton'), multiToggle = (new Y.ButtonGroup({ label:'Toggle Buttons', children:[ new Y.ButtonToggle({label:'A',icon:'arrow-sw'}), new Y.ButtonToggle({label:'B'}), new Y.ButtonToggle({label:'C',icon:'arrow-se', iconPosition:'right'}) ] })).render('#multiToggle'); plain.after(PRESS, function(ev) { Y.log('Click: '+ ev.target.get('label'), INFO,'plain'); }); // toggles report their 'selected' (pushed or active) state toggle.after(PRESS, function(ev) { Y.log('toggle selected: ' + this.get('selected') , INFO,'toggle'); }); // Button groups report which button was pressed multiButton.after(PRESS, function(ev) { Y.log('multiButton pressed: ' + ev.pressed.get('label') , INFO,'multiButton'); }); multiToggle.after('selectionChange', function(ev) { var sel = this.get('selection'); Y.log('multiToggle selected: ' + (sel?sel.get('label'):'none') , INFO,'multiToggle'); }); }); ```