Hopiu/vue-material
1
0
Fork 0
mirror of https://github.com/Hopiu/vue-material.git synced 2026-04-27 01:54:48 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Update Switch Examples and add primary and warn colors

Browse source
This commit is contained in:
Marcos Moura 2016-09-19 20:34:53 -03:00
parent a48283ebad
commit 97d61de4e7
2 changed files with 76 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
src/components/mdSwitch/mdSwitch.theme
View file

@ -19,7 +19,36 @@
}
}
&.md-disabled {
&.md-checked.md-primary {
.md-switch-container {
background-color: #{'PRIMARY-COLOR-500-0.5'};
}
.md-switch-thumb {
background-color: #{'PRIMARY-COLOR'};
}
.md-ink-ripple {
color: #{'PRIMARY-COLOR'};
}
}
&.md-checked.md-warn {
.md-switch-container {
background-color: #{'WARN-COLOR-500-0.5'};
}
.md-switch-thumb {
background-color: #{'WARN-COLOR'};
}
.md-ink-ripple {
color: #{'WARN-COLOR'};
}
}
&.md-disabled,
&.md-disabled.md-checked {
.md-switch-container {
background-color: rgba(#000, .12);
}

73
src/docs/pages/Switch.vue
View file

@ -1,39 +1,53 @@
<template>
<section>
<h2 class="title">Switch</h2>
<demo-page>
<div slot="examples">
<demo-example label="Default">
<div>
<md-switch v-model="checked0" id="my-test0" name="my-test0"></md-switch>
</div>
<div>
<md-switch v-model="checked0" id="my-test0" name="my-test0"></md-switch>
<div>
<md-switch v-model="checked1" id="my-test1" name="my-test1" class="md-primary">Primary Color</md-switch>
</div>
<div>
<md-switch v-model="checked2" id="my-test2" name="my-test2" class="md-warn">Warn Color</md-switch>
</div>
<div>
<md-switch v-model="checked3" id="my-test3" name="my-test3" disabled>Disabled</md-switch>
</div>
</demo-example>
<demo-example label="Themed">
<div v-md-theme="'orange'">
<md-switch v-model="checked4" id="my-test4" name="my-test4" class="md-primary"></md-switch>
</div>
<div v-md-theme="'green'">
<md-switch v-model="checked5" id="my-test5" name="my-test5" class="md-primary">Green Primary Color</md-switch>
</div>
<div v-md-theme="'brown'">
<md-switch v-model="checked6" id="my-test6" name="my-test6" class="md-primary">Brown Primary Color</md-switch>
</div>
<div v-md-theme="'light-blue'">
<md-switch v-model="checked7" id="my-test7" name="my-test7" class="md-primary" disabled>Light Blue Primary Color Disabled</md-switch>
</div>
</demo-example>
</div>
<div v-md-theme="'indigo'">
<md-switch v-model="checked1" id="my-test1" name="my-test1">With label</md-switch>
<div slot="code">
<h2>Code</h2>
</div>
<div v-md-theme="'blue'">
<md-switch v-model="checked2" id="my-test2" name="my-test2">Themed</md-switch>
</div>
<div slot="api">
<div v-md-theme="'orange'">
<md-switch v-model="checked3" id="my-test3" name="my-test3">Accent Color</md-switch>
</div>
<div v-md-theme="'teal'">
<md-switch v-model="checked4" id="my-test4" name="my-test4">Fancy colors</md-switch>
</div>
<div v-md-theme="'teal'">
<md-switch v-model="checked5" id="my-test5" name="my-test5" disabled>Disabled</md-switch>
</div>
</section>
</demo-page>
</template>
<style lang="scss" scoped>
section {
padding: 0 24px;
}
</style>
<script>
export default {
data() {
@ -43,8 +57,13 @@
checked2: true,
checked3: true,
checked4: true,
checked5: true
checked5: true,
checked6: true,
checked7: true
};
},
mounted() {
this.$root.pageTitle = 'Switch';
}
};
</script>