quasar/ui/src/components/tabs/QTabs.json at v1 · 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
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
{
  "meta": {
    "docsUrl": "https://v1.quasar.dev/vue-components/tabs"
  },

  "behavior": {
    "$listeners": true
  },

  "props": {
    "value":{
      "type": [ "Number", "String" ],
      "desc": "Model of the component defining current panel name; Either use this property (along with a listener for 'input' event) OR use v-model directive",
      "examples": [ "v-model=\"selectedTab\"" ],
      "category": "model"
    },

    "vertical": {
      "type": "Boolean",
      "desc": "Use vertical design (tabs one on top of each other rather than one next to the other horizontally)",
      "category": "content"
    },

    "outside-arrows": {
      "type": "Boolean",
      "desc": "Reserve space for arrows to place them on each side of the tabs (the arrows fade when inactive)",
      "category": "content",
      "addedIn": "v1.12.9"
    },

    "mobile-arrows": {
      "type": "Boolean",
      "desc": "Force display of arrows (if needed) on mobile",
      "category": "content",
      "addedIn": "v1.12.9"
    },

    "align": {
      "type": "String",
      "desc": "Horizontal alignment the tabs within the tabs container",
      "default": "center",
      "values": [ "left", "center", "right", "justify" ],
      "examples": [ "right" ],
      "category": "content"
    },

    "breakpoint": {
      "type": [ "Number", "String" ],
      "desc": "Breakpoint (in pixels) of tabs container width at which the tabs automatically turn to a justify alignment",
      "default": 600,
      "examples": [ ":breakpoint=\"500\"" ],
      "category": "content|behavior"
    },

    "active-class": {
      "type": "String",
      "desc": "The class to be set on the active tab",
      "examples": [ "my-active-class" ],
      "category": "style",
      "addedIn": "v1.17"
    },

    "active-color": {
      "extends": "color",
      "desc": "The color to be attributed to the text of the active tab",
      "category": "style"
    },

    "active-bg-color": {
      "extends": "color",
      "desc": "The color to be attributed to the background of the active tab",
      "category": "style"
    },

    "indicator-color": {
      "extends": "color",
      "desc": "The color to be attributed to the indicator (the underline) of the active tab",
      "category": "style"
    },

    "content-class": {
      "type": "String",
      "desc": "Class definitions to be attributed to the content wrapper",
      "examples": [ "my-special-class" ],
      "category": "style",
      "addedIn": "v1.12.0"
    },

    "left-icon": {
      "type": "String",
      "desc": "The name of an icon to replace the default arrow used to scroll through the tabs to the left, when the tabs extend past the width of the tabs container",
      "examples": [ "arrow_left" ],
      "category": "content"
    },

    "right-icon": {
      "type": "String",
      "desc": "The name of an icon to replace the default arrow used to scroll through the tabs to the right, when the tabs extend past the width of the tabs container",
      "examples": [ "arrow_right" ],
      "category": "content"
    },

    "stretch": {
      "type": "Boolean",
      "desc": "When used on flexbox parent, tabs will stretch to parent's height",
      "category": "content"
    },

    "shrink": {
      "type": "Boolean",
      "desc": "By default, QTabs is set to grow to the available space; However, you can reverse that with this prop; Useful (and required) when placing the component in a QToolbar",
      "category": "content"
    },

    "switch-indicator": {
      "type": "Boolean",
      "desc": "Switches the indicator position (on left of tab for vertical mode or above the tab for default horizontal mode)",
      "category": "content"
    },

    "narrow-indicator": {
      "type": "Boolean",
      "desc": "Allows the indicator to be the same width as the tab's content (text or icon), instead of the whole width of the tab",
      "category": "content"
    },

    "inline-label": {
      "type": "Boolean",
      "desc": "Allows the text to be inline with the icon, should one be used",
      "category": "content"
    },

    "no-caps": {
      "type": "Boolean",
      "desc": "Turns off capitalizing all letters within the tab (which is the default)",
      "category": "content"
    },

    "dense": {
      "extends": "dense"
    }
  },

  "slots": {
    "default": {
      "extends": "default"
    }
  },

  "events": {
    "input": {
      "extends": "input"
    }
  }
}