diff --git a/src/js/toggle.jsx b/src/js/toggle.jsx
index ffc1f56980047d..fa0d143bddf207 100644
--- a/src/js/toggle.jsx
+++ b/src/js/toggle.jsx
@@ -6,7 +6,8 @@ var Toggle = React.createClass({
propTypes: {
onToggle: React.PropTypes.func,
- toggled: React.PropTypes.bool
+ toggled: React.PropTypes.bool,
+ label: React.PropTypes.string
},
mixins: [Classable],
@@ -23,9 +24,12 @@ var Toggle = React.createClass({
})
return (
-
-
-
+
+ {this.props.label ?
{this.props.label}
: ''}
+
);
},
diff --git a/src/less/components/toggle.less b/src/less/components/toggle.less
index e9c97f8a4a4622..0b7fe7487c76f9 100644
--- a/src/less/components/toggle.less
+++ b/src/less/components/toggle.less
@@ -1,44 +1,53 @@
-.mui-toggle {
- position: relative;
- line-height: 24px;
- width: 36px;
- cursor: pointer;
+.mui-toggle-wrap {
- * {
- .ease-out();
+ .mui-toggle-label {
+ display: inline-block;
+ padding-right: 10px;
+ cursor: pointer;
}
-
- .mui-toggle-track {
- width: 100%;
- height: 14px;
- border-radius: 30px;
- background-color: @toggle-track-off-color;
- }
-
- .mui-toggle-thumb {
- position: absolute;
- top: -3px;
- width: @toggle-size;
- height: @toggle-size;
+ .mui-toggle {
+ position: relative;
+ display: inline-block;
line-height: 24px;
- left: 0;
- border-radius: 50%;
- background-color: @toggle-thumb-off-color;
+ width: 36px;
+ cursor: pointer;
- .mui-paper-container {
- border-radius: 50%;
+ * {
+ .ease-out();
}
- }
- &.mui-is-toggled {
-
.mui-toggle-track {
- background-color: @toggle-track-on-color;
+ width: 100%;
+ height: 14px;
+ border-radius: 30px;
+ background-color: @toggle-track-off-color;
}
.mui-toggle-thumb {
- left: 16px;
- background-color: @toggle-thumb-on-color;
+ position: absolute;
+ top: -3px;
+ width: @toggle-size;
+ height: @toggle-size;
+ line-height: 24px;
+ left: 0;
+ border-radius: 50%;
+ background-color: @toggle-thumb-off-color;
+
+ .mui-paper-container {
+ border-radius: 50%;
+ }
+ }
+
+ &.mui-is-toggled {
+
+ .mui-toggle-track {
+ background-color: @toggle-track-on-color;
+ }
+
+ .mui-toggle-thumb {
+ left: 16px;
+ background-color: @toggle-thumb-on-color;
+ }
}
}
}
\ No newline at end of file