diff --git a/demo/index.html b/demo/index.html index 96f9e27..5cb0ef6 100644 --- a/demo/index.html +++ b/demo/index.html @@ -46,6 +46,14 @@

Toggle buttons can be checked and disabled

+

The label position of the label can be setted

+ + + +

Toggle buttons can hide the ripple effect using the noink attribute

@@ -210,6 +220,13 @@ }, properties: { + /** + * The position of the label. + */ + labelPosition: { + type: String, + value: 'right', + }, /** * Fired when the checked state changes due to user interaction. * @@ -274,6 +291,10 @@ ripple.setAttribute('recenters', ''); ripple.classList.add('circle', 'toggle-ink'); return ripple; + }, + + _testLabelPosition(position, labelPosition) { + return position === labelPosition; } }); diff --git a/test/basic.html b/test/basic.html index 9ecdcf8..a671e71 100644 --- a/test/basic.html +++ b/test/basic.html @@ -76,6 +76,15 @@ done(); }, 1); }); + + test('set the label position', function(done) { + assert.isTrue(b1._testLabelPosition('right', b1.labelPosition)); + assert.isFalse(b1._testLabelPosition('left', b1.labelPosition)); + b1.labelPosition = 'left'; + assert.isFalse(b1._testLabelPosition('right', b1.labelPosition)); + assert.isTrue(b1._testLabelPosition('left', b1.labelPosition)); + done(); + }); }); suite('a11y', function() {