Blame view
src/pages/ui/Slider.vue
2.81 KB
8ab31dc8b
changes
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 |
<template>
<div id="page-sliders">
<v-container grid-list-lg fluid>
<v-layout row wrap>
<v-flex xs12>
<v-widget title="Basic Usage">
<div slot="widget-content">
<v-subheader>Default</v-subheader>
<div class="container">
<div class="layout column">
<div class="flex">
<v-slider v-model="slider1" step="0"></v-slider>
</div>
</div>
</div>
<v-subheader>Disabled</v-subheader>
<div class="container">
<div class="layout column">
<div class="flex">
<v-slider v-model="slider2" step="0" disabled></v-slider>
</div>
</div>
</div>
<v-subheader>Concreate step (Drag the slider) </v-subheader>
<div class="container">
<div class="layout column">
<div class="flex">
<v-slider placeholder="step" color="pink" :max="255" thumb-label step="10" ticks v-model="slider3"></v-slider>
</div>
</div>
</div>
<v-subheader>With Icon </v-subheader>
<div class="container">
<div class="layout column">
<div class="flex">
<v-slider prepend-icon="volume_up" v-model="media1"></v-slider>
<v-slider prepend-icon="volume_down" v-model="media2"></v-slider>
</div>
</div>
</div>
<v-subheader>Custom color</v-subheader>
<div class="container">
<div class="layout column">
<div class="flex">
<v-slider :label="ex1.label" v-model="ex1.val" :color="ex1.color"></v-slider>
<v-slider :label="ex2.label" v-model="ex2.val" :track-color="ex2.color"></v-slider>
<v-slider :label="ex3.label" v-model="ex3.val" :thumb-color="ex3.color" thumb-label></v-slider>
</div>
</div>
</div>
</div>
</v-widget>
</v-flex>
</v-layout>
</v-container>
</div>
</template>
<script>
import VWidget from '@/components/VWidget';
export default {
components: {
VWidget
},
data () {
return {
slider1: 0,
slider2: 0,
slider3: 0,
media1: 0,
media2: 0,
ex1: { label: 'color', val: 25, color: 'orange darken-3' },
ex2: { label: 'track-color', val: 75, color: 'green lighten-1' },
ex3: { label: 'thumb-color', val: 50, color: 'red' }
};
},
computed: {
},
methods: {
}
};
</script>
|