quasar/dev/components/form/align-test.vue at v0.15 · hipertracker/quasar · GitHub

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
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
<template>
  <div>
    <div class="layout-padding">
      <div class="row no-wrap gutter-sm size-test-example-base items-end" style="width: 100%">
        <div class="col-auto">Text</div>
        <div class="col"><q-input v-model="text" clearable /></div>
        <div class="col"><q-select v-model="select" :options="selectOptions" clearable /></div>
        <div class="col"><q-search v-model="text" clearable /></div>
        <div class="col"><q-search stack-label="Label" v-model="text" clearable /></div>
        <div class="col"><q-search hide-underline v-model="text" clearable /></div>
        <div class="col"><q-datetime type="datetime" v-model="date" clearable /></div>
        <div><q-btn color="primary" size="form" outline label="Button" /></div>
        <div><q-btn color="primary" size="form" flat label="Button" /></div>
      </div>
      <div class="row no-wrap gutter-sm size-test-example-base items-end">
        <div>Text</div>
        <div><q-input v-model="text" clearable /></div>
        <div><q-select v-model="select" :options="selectOptions" clearable /></div>
        <div><q-search v-model="text" clearable /></div>
        <div><q-search stack-label="Label" v-model="text" clearable /></div>
        <div><q-search hide-underline v-model="text" clearable /></div>
        <div><q-datetime type="datetime" v-model="date" clearable /></div>
        <div><q-btn color="primary" size="form" outline label="Button" /></div>
        <div><q-btn color="primary" size="form" flat label="Button" /></div>
      </div>
      <div class="row no-wrap gutter-sm size-test-example-base items-end q-pt-md">
        <div>Text</div>
        <div><q-input stack-label="Label" v-model="text" clearable /></div>
        <div><q-select stack-label="Label" v-model="select" :options="selectOptions" clearable /></div>
        <div><q-search stack-label="Label" v-model="text" clearable /></div>
        <div><q-datetime stack-label="Label" type="datetime" v-model="date" clearable /></div>
        <div><q-btn color="primary" size="form-label" outline label="Button" /></div>
        <div><q-btn color="primary" size="form-label" flat label="Button" /></div>
      </div>
      <div class="row no-wrap gutter-sm size-test-example-base items-end q-pt-md">
        <div>Text</div>
        <div><q-input float-label="Label" v-model="text" clearable /></div>
        <div><q-select float-label="Label" v-model="select" :options="selectOptions" clearable /></div>
        <div><q-search float-label="Label" v-model="text" clearable /></div>
        <div><q-datetime float-label="Label" type="datetime" v-model="date" clearable /></div>
        <div><q-btn color="primary" size="form-label" outline label="Button" /></div>
        <div><q-btn color="primary" size="form-label" flat label="Button" /></div>
      </div>

      <div class="row no-wrap gutter-sm size-test-example-base items-end q-pt-md">
        <div>Text</div>
        <div><q-input hide-underline v-model="text" clearable /></div>
        <div><q-select hide-underline v-model="select" :options="selectOptions" clearable /></div>
        <div><q-search hide-underline v-model="text" clearable /></div>
        <div><q-search hide-underline stack-label="Label" v-model="text" clearable /></div>
        <div><q-datetime hide-underline type="datetime" v-model="date" clearable /></div>
        <div><q-btn color="primary" size="form-hide-underline" outline label="Button" /></div>
        <div><q-btn color="primary" size="form-hide-underline" flat label="Button" /></div>
      </div>
      <div class="row no-wrap gutter-sm size-test-example-base items-end q-pt-md">
        <div>Text</div>
        <div><q-input hide-underline stack-label="Label" v-model="text" clearable /></div>
        <div><q-select hide-underline stack-label="Label" v-model="select" :options="selectOptions" clearable /></div>
        <div><q-search hide-underline stack-label="Label" v-model="text" clearable /></div>
        <div><q-datetime hide-underline stack-label="Label" type="datetime" v-model="date" clearable /></div>
        <div><q-btn color="primary" size="form-label-hide-underline" outline label="Button" /></div>
        <div><q-btn color="primary" size="form-label-hide-underline" flat label="Button" /></div>
      </div>
      <div class="row no-wrap gutter-sm size-test-example-base items-end q-pt-md">
        <div>Text</div>
        <div><q-input hide-underline float-label="Label" v-model="text" clearable /></div>
        <div><q-select hide-underline float-label="Label" v-model="select" :options="selectOptions" clearable /></div>
        <div><q-search hide-underline float-label="Label" v-model="text" clearable /></div>
        <div><q-datetime hide-underline float-label="Label" type="datetime" v-model="date" clearable /></div>
        <div><q-btn color="primary" size="form-label-hide-underline" outline label="Button" /></div>
        <div><q-btn color="primary" size="form-label-hide-underline" flat label="Button" /></div>
      </div>

      <div class="row no-wrap gutter-sm size-test-example-base items-end q-pt-md">
        <div>Text</div>
        <div><q-input inverted v-model="text" clearable /></div>
        <div><q-select inverted v-model="select" :options="selectOptions" clearable /></div>
        <div><q-search inverted v-model="text" clearable /></div>
        <div><q-search inverted stack-label="Label" v-model="text" clearable /></div>
        <div><q-datetime inverted type="datetime" v-model="date" clearable /></div>
        <div><q-btn color="primary" size="form-inverted" label="Button" /></div>
      </div>
      <div class="row no-wrap gutter-sm size-test-example-base items-end q-pt-md">
        <div>Text</div>
        <div><q-input inverted stack-label="Label" v-model="text" clearable /></div>
        <div><q-select inverted stack-label="Label" v-model="select" :options="selectOptions" clearable /></div>
        <div><q-search inverted stack-label="Label" v-model="text" clearable /></div>
        <div><q-datetime inverted stack-label="Label" type="datetime" v-model="date" clearable /></div>
        <div><q-btn color="primary" size="form-label-inverted" label="Button" /></div>
      </div>
      <div class="row no-wrap gutter-sm size-test-example-base items-end q-pt-md">
        <div>Text</div>
        <div><q-input inverted float-label="Label" v-model="text" clearable /></div>
        <div><q-select inverted float-label="Label" v-model="select" :options="selectOptions" clearable /></div>
        <div><q-search inverted float-label="Label" v-model="text" clearable /></div>
        <div><q-datetime inverted float-label="Label" type="datetime" v-model="date" clearable /></div>
        <div><q-btn color="primary" size="form-label-inverted" label="Button" /></div>
      </div>
    </div>
  </div>
</template>

<style lang="stylus">
  .size-test-example-base > div:not(:first-child)
    flex 1 1 100%
</style>

<script>
export default {
  data () {
    return {
      text: 'AQGqftj',
      date: '2016-09-18T10:45:00.000Z',
      select: '',
      selectOptions: [
        {
          label: 'Google',
          value: 'goog'
        },
        {
          label: 'Facebook',
          value: 'fb'
        },
        {
          label: 'Twitter',
          value: 'twtr'
        },
        {
          label: 'Apple Inc.',
          value: 'appl'
        },
        {
          label: 'Oracle',
          value: 'ora'
        }
      ]
    }
  }
}
</script>