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
+ Toggle
+
+
+
Toggle buttons can hide the ripple effect using the noink attribute
diff --git a/paper-toggle-button.html b/paper-toggle-button.html
index d9ab5f6..d1522be 100644
--- a/paper-toggle-button.html
+++ b/paper-toggle-button.html
@@ -172,6 +172,10 @@
color: var(--paper-toggle-button-label-color, --primary-text-color);
}
+ .toggle-label.left {
+ padding: 0 var(--paper-toggle-button-label-spacing, 8px) 0 0;
+ }
+
/* invalid state */
:host([invalid]) .toggle-bar {
background-color: var(--paper-toggle-button-invalid-bar-color, --error-color);
@@ -186,12 +190,18 @@
}
+
+
+
+
-
+
+
+
@@ -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() {