Skip to content

Instantly share code, notes, and snippets.

@johnleider

johnleider/input-playground.vue

Created January 10, 2020 21:39
Show Gist options
  • Save johnleider/7b01f5f3fff3310c3b06fcf20f7b7e9a to your computer and use it in GitHub Desktop.
Save johnleider/7b01f5f3fff3310c3b06fcf20f7b7e9a to your computer and use it in GitHub Desktop.
Download ZIP
Raw
input-playground.vue
<template>
<v-container fluid>
<v-radio-group>
<v-row>
<v-col
cols="12"
sm="6"
>
<v-text-field
label="Regular"
value="Comboboxes"
prefix="foo"
prepend-icon="mdi-vuetify"
prepend-inner-icon="mdi-vuetify"
append-icon="mdi-vuetify"
append-outer-icon="mdi-vuetify"
suffix="bar"
:items="components"
error
></v-text-field>
</v-col>
<v-col
cols="12"
sm="6"
>
<v-select
label="Regular"
value="Comboboxes"
filled
offset-y
:items="components"
></v-select>
</v-col>
<v-col
cols="12"
sm="6"
>
<v-text-field
value="John Doe"
label="Regular"
prefix="foo"
suffix="bar"
disabled
></v-text-field>
</v-col>
<v-col
cols="12"
sm="6"
>
<v-text-field
value="John Doe"
label="Regular"
prefix="foo"
suffix="bar"
readonly
></v-text-field>
</v-col>
<v-col
cols="12"
sm="6"
>
<v-text-field
value="John Doe"
label="Solo"
solo
disabled
></v-text-field>
</v-col>
<v-col
cols="12"
sm="6"
>
<v-text-field
value="John Doe2"
label="Solo"
solo-inverted
></v-text-field>
</v-col>
<v-col
cols="12"
sm="6"
>
<v-text-field
value="John Doe"
label="Filled"
filled
disabled
></v-text-field>
</v-col>
<v-col
cols="12"
sm="6"
>
<v-text-field
value="John Doe"
label="Filled"
filled
readonly
></v-text-field>
</v-col>
<v-col
cols="12"
sm="6"
>
<v-text-field
value="John Doe"
label="Outlined"
outlined
disabled
></v-text-field>
</v-col>
<v-col
cols="12"
sm="6"
>
<v-text-field
value="John Doe"
label="Outlined"
outlined
readonly
></v-text-field>
</v-col>
<!-- Break -->
<v-col
cols="12"
sm="6"
>
<v-textarea
value="John Doe"
label="Regular"
prefix="foo"
suffix="bar"
disabled
></v-textarea>
</v-col>
<v-col
cols="12"
sm="6"
>
<v-textarea
value="John Doe"
label="Regular"
prefix="foo"
suffix="bar"
readonly
></v-textarea>
</v-col>
<v-col
cols="12"
sm="6"
>
<v-textarea
value="John Doe"
label="Solo"
solo
disabled
></v-textarea>
</v-col>
<v-col
cols="12"
sm="6"
>
<v-textarea
value="John Doe2"
label="Solo"
solo-inverted
></v-textarea>
</v-col>
<v-col
cols="12"
sm="6"
>
<v-textarea
value="John Doe"
label="Filled"
filled
disabled
></v-textarea>
</v-col>
<v-col
cols="12"
sm="6"
>
<v-textarea
value="John Doe"
label="Filled"
filled
readonly
></v-textarea>
</v-col>
<v-col
cols="12"
sm="6"
>
<v-textarea
value="John Doe"
label="Outlined"
outlined
disabled
></v-textarea>
</v-col>
<v-col
cols="12"
sm="6"
>
<v-textarea
value="John Doe"
label="Outlined"
outlined
readonly
></v-textarea>
</v-col>
<!-- Break -->
<v-col
cols="12"
sm="6"
>
<v-select
value="John Doe"
label="Regular"
disabled
></v-select>
</v-col>
<v-col
cols="12"
sm="6"
>
<v-select
value="John Doe"
label="Regular"
readonly
></v-select>
</v-col>
<v-col
cols="12"
sm="6"
>
<v-select
value="John Doe"
label="Solo"
solo
disabled
></v-select>
</v-col>
<v-col
cols="12"
sm="6"
>
<v-select
value="John Doe"
label="Solo"
solo
readonly
></v-select>
</v-col>
<v-col
cols="12"
sm="6"
>
<v-select
value="John Doe"
label="Filled"
filled
disabled
></v-select>
</v-col>
<v-col
cols="12"
sm="6"
>
<v-select
value="John Doe"
label="Filled"
filled
readonly
></v-select>
</v-col>
<v-col
cols="12"
sm="6"
>
<v-select
value="John Doe"
label="Outlined"
outlined
disabled
></v-select>
</v-col>
<v-col
cols="12"
sm="6"
>
<v-select
value="John Doe"
label="Outlined"
outlined
readonly
></v-select>
</v-col>
<!-- Break -->
<v-col
cols="12"
sm="6"
>
<v-autocomplete
value="John Doe"
label="Regular"
disabled
></v-autocomplete>
</v-col>
<v-col
cols="12"
sm="6"
>
<v-autocomplete
value="John Doe"
label="Regular"
readonly
></v-autocomplete>
</v-col>
<v-col
cols="12"
sm="6"
>
<v-autocomplete
value="John Doe"
label="Solo"
solo
disabled
></v-autocomplete>
</v-col>
<v-col
cols="12"
sm="6"
>
<v-autocomplete
value="John Doe"
label="Solo"
solo
readonly
></v-autocomplete>
</v-col>
<v-col
cols="12"
sm="6"
>
<v-autocomplete
value="John Doe"
label="Filled"
filled
disabled
></v-autocomplete>
</v-col>
<v-col
cols="12"
sm="6"
>
<v-autocomplete
value="John Doe"
label="Filled"
filled
readonly
></v-autocomplete>
</v-col>
<v-col
cols="12"
sm="6"
>
<v-autocomplete
value="John Doe"
label="Outlined"
outlined
disabled
></v-autocomplete>
</v-col>
<v-col
cols="12"
sm="6"
>
<v-autocomplete
value="John Doe"
label="Outlined"
outlined
readonly
></v-autocomplete>
</v-col>
<!-- Break -->
<v-col
cols="12"
sm="6"
>
<v-combobox
value="John Doe"
label="Regular"
disabled
></v-combobox>
</v-col>
<v-col
cols="12"
sm="6"
>
<v-combobox
value="John Doe"
label="Regular"
readonly
></v-combobox>
</v-col>
<v-col
cols="12"
sm="6"
>
<v-combobox
value="John Doe"
label="Solo"
solo
disabled
></v-combobox>
</v-col>
<v-col
cols="12"
sm="6"
>
<v-combobox
value="John Doe"
label="Solo"
solo
readonly
></v-combobox>
</v-col>
<v-col
cols="12"
sm="6"
>
<v-combobox
value="John Doe"
label="Filled"
filled
disabled
></v-combobox>
</v-col>
<v-col
cols="12"
sm="6"
>
<v-combobox
value="John Doe"
label="Filled"
filled
readonly
></v-combobox>
</v-col>
<v-col
cols="12"
sm="6"
>
<v-combobox
value="John Doe"
label="Outlined"
outlined
disabled
></v-combobox>
</v-col>
<v-col
cols="12"
sm="6"
>
<v-combobox
value="John Doe"
label="Outlined"
outlined
readonly
></v-combobox>
</v-col>
<!-- Break -->
<v-col
cols="12"
sm="6"
>
<v-overflow-btn
value="John Doe"
label="Regular"
disabled
></v-overflow-btn>
</v-col>
<v-col
cols="12"
sm="6"
>
<v-overflow-btn
value="John Doe"
label="Regular"
readonly
></v-overflow-btn>
</v-col>
<v-col
cols="12"
sm="6"
>
<v-overflow-btn
value="John Doe"
label="Solo"
disabled
></v-overflow-btn>
</v-col>
<v-col
cols="12"
sm="6"
>
<v-overflow-btn
value="John Doe"
label="Solo"
readonly
></v-overflow-btn>
</v-col>
<v-col
cols="12"
sm="6"
>
<v-overflow-btn
value="John Doe"
label="Filled"
disabled
></v-overflow-btn>
</v-col>
<v-col
cols="12"
sm="6"
>
<v-overflow-btn
value="John Doe"
label="Filled"
readonly
></v-overflow-btn>
</v-col>
<v-col
cols="12"
sm="6"
>
<v-overflow-btn
value="John Doe"
label="Outlined"
disabled
></v-overflow-btn>
</v-col>
<v-col
cols="12"
sm="6"
>
<v-overflow-btn
value="John Doe"
label="Outlined"
readonly
></v-overflow-btn>
</v-col>
<!-- Break -->
<v-col
cols="12"
sm="6"
>
<v-checkbox
label="Outlined"
outlined
disabled
></v-checkbox>
</v-col>
<v-col
cols="12"
sm="6"
>
<v-checkbox
label="Outlined"
outlined
readonly
></v-checkbox>
</v-col>
<v-col
cols="12"
sm="6"
>
<v-switch
label="Outlined"
outlined
disabled
></v-switch>
</v-col>
<v-col
cols="12"
sm="6"
>
<v-switch
label="Outlined"
outlined
readonly
></v-switch>
</v-col>
<v-col
cols="12"
sm="6"
>
<v-radio-group
label="Outlined"
outlined
disabled
>
<v-radio label="foo"></v-radio>
<v-radio label="bar"></v-radio>
</v-radio-group>
</v-col>
<v-col
cols="12"
sm="6"
>
<v-radio-group
label="Outlined"
outlined
readonly
>
<v-radio label="foo"></v-radio>
<v-radio label="bar"></v-radio>
</v-radio-group>
</v-col>
<v-col
cols="12"
sm="6"
>
<v-slider
label="Outlined"
outlined
disabled
></v-slider>
</v-col>
<v-col
cols="12"
sm="6"
>
<v-slider
label="Outlined"
outlined
readonly
></v-slider>
</v-col>
<v-col
cols="12"
sm="6"
>
<v-range-slider
label="Outlined"
outlined
disabled
></v-range-slider>
</v-col>
<v-col
cols="12"
sm="6"
>
<v-range-slider
label="Outlined"
outlined
readonly
></v-range-slider>
</v-col>
<v-col
cols="12"
sm="6"
>
<v-slider
label="Outlined"
outlined
disabled
vertical
></v-slider>
</v-col>
<v-col
cols="12"
sm="6"
>
<v-slider
label="Outlined"
outlined
readonly
vertical
></v-slider>
</v-col>
<v-col
cols="12"
sm="6"
>
<v-range-slider
label="Outlined"
outlined
disabled
vertical
></v-range-slider>
</v-col>
<v-col
cols="12"
sm="6"
>
<v-range-slider
label="Outlined"
outlined
readonly
vertical
></v-range-slider>
</v-col>
</v-row>
</v-radio-group>
</v-container>
</template>
<script>
export default {
name: 'TEst',
data: () => ({
components: [
'Autocompletes', 'Comboboxes', 'Forms', 'Inputs', 'Overflow Buttons', 'Selects', 'Selection Controls', 'Sliders', 'Textareas', 'Text Fields',
],
}),
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment