quasar/dev/components/web-tests/layout.vue at v0.16 · 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
<template>
  <div>
    <q-option-group
      type="radio"
      v-model="tab"
      :options="[
        {label: 'one', value: 'one'},
        {label: 'two', value: 'two'},
        {label: 'three', value: 'three'},
        {label: 'four', value: 'four'},
        {label: 'five', value: 'five'},
        {label: 'six', value: 'six'},
        {label: 'Bogus', value: 'bogus'}
      ]"
    />

    <br><br>

    <q-tabs inverted align="center" v-model="tab" @input="onInput" @select="onSelect">
      <q-tab slot="title" name="one" label="One" @select="onTabSelect" />
      <q-tab default slot="title" name="two" label="Two" @select="onTabSelect" />
      <q-tab slot="title" name="three" label="Three" @select="onTabSelect" />
      <q-tab slot="title" name="four" label="Four" @select="onTabSelect" />
      <q-tab slot="title" name="five" label="Five" @select="onTabSelect" />
      <q-tab slot="title" name="six" label="Six" @select="onTabSelect" />
    </q-tabs>
    <br>

    <q-tabs inverted @input="onInput" @select="onSelect">
      <q-tab slot="title" name="one" label="One" @select="onTabSelect" />
      <q-tab default slot="title" name="two" label="Two" @select="onTabSelect" />
      <q-tab slot="title" name="three" label="Three" @select="onTabSelect" />
      <q-tab slot="title" name="four" label="Four" @select="onTabSelect" />
      <q-tab slot="title" name="five" label="Five" @select="onTabSelect" />
      <q-tab slot="title" name="six" label="Six" @select="onTabSelect" />
    </q-tabs>
    <br>

    <q-tabs color="secondary" inverted>
      <q-route-tab
        v-for="route in ['a', 'b', 'c']"
        :key="route"
        slot="title"
        :name="route"
        :to="`/lay/${route}`"
        :label="`Route ${route}`"
        @select="onRouteTabSelect"
        replace
        icon="receipt"
      />
      <q-tab slot="title" name="link" label="Link" icon="cloud" color="amber" />

      <q-tab-pane name="link">
        Link Tab
      </q-tab-pane>
    </q-tabs>

    <router-view />
  </div>
</template>

<script>
export default {
  data () {
    return {
      tab: ''
    }
  },
  methods: {
    onInput (val) {
      console.log('@input', val)
    },
    onSelect (val) {
      console.log('@select', val)
    },
    onTabSelect (val) {
      console.log('@tab-select', val)
    },
    onRouteTabSelect (val) {
      console.log('@routeTab-select', val)
    }
  }
}
</script>