1 | {
|
2 | "props": {
|
3 | "readonly": {
|
4 | "type": "Boolean",
|
5 | "desc": "Put component in readonly mode",
|
6 | "category": "state"
|
7 | },
|
8 |
|
9 | "disable": {
|
10 | "type": "Boolean",
|
11 | "desc": "Put component in disabled mode",
|
12 | "category": "state"
|
13 | },
|
14 |
|
15 | "color": {
|
16 | "type": "String",
|
17 | "desc": "Color name for component from the Quasar Color Palette",
|
18 | "examples": [ "primary", "teal-10" ],
|
19 | "category": "style"
|
20 | },
|
21 |
|
22 | "text-color": {
|
23 | "type": "String",
|
24 | "desc": "Overrides text color (if needed); Color name from the Quasar Color Palette",
|
25 | "examples": [ "primary", "teal-10" ],
|
26 | "category": "style"
|
27 | },
|
28 |
|
29 | "dense": {
|
30 | "type": "Boolean",
|
31 | "desc": "Dense mode; occupies less space",
|
32 | "category": "style"
|
33 | },
|
34 |
|
35 | "size": {
|
36 | "type": "String",
|
37 | "desc": "Size in CSS units, including unit name",
|
38 | "examples": [ "16px", "2rem" ],
|
39 | "category": "style"
|
40 | },
|
41 |
|
42 | "dark": {
|
43 | "type": "Boolean",
|
44 | "desc": "Notify the component that the background is a dark color",
|
45 | "category": "style"
|
46 | },
|
47 |
|
48 | "icon": {
|
49 | "type": "String",
|
50 | "desc": "Icon name following Quasar convention; Make sure you have the icon library installed unless you are using 'img:' prefix",
|
51 | "examples": [
|
52 | "map",
|
53 | "ion-add",
|
54 | "img:https://cdn.quasar.dev/logo/svg/quasar-logo.svg",
|
55 | "img:statics/path/to/some_image.png"
|
56 | ],
|
57 | "category": "content"
|
58 | },
|
59 |
|
60 | "flat": {
|
61 | "type": "Boolean",
|
62 | "desc": "Applies a 'flat' design (no default shadow)",
|
63 | "category": "style"
|
64 | },
|
65 |
|
66 | "bordered": {
|
67 | "type": "Boolean",
|
68 | "desc": "Applies a default border to the component",
|
69 | "category": "style"
|
70 | },
|
71 |
|
72 | "square": {
|
73 | "type": "Boolean",
|
74 | "desc": "Removes border-radius so borders are squared",
|
75 | "category": "style"
|
76 | },
|
77 |
|
78 | "rounded": {
|
79 | "type": "Boolean",
|
80 | "desc": "Applies a small standard border-radius for a squared shape of the component",
|
81 | "category": "style"
|
82 | },
|
83 |
|
84 | "tabindex": {
|
85 | "type": [ "Number", "String" ],
|
86 | "desc": "Tabindex HTML attribute value",
|
87 | "examples": [ "0", "100" ],
|
88 | "category": "general"
|
89 | },
|
90 |
|
91 | "transition": {
|
92 | "type": "String",
|
93 | "desc": "One of Quasar's embedded transitions",
|
94 | "examples": [ "fade", "slide-down" ],
|
95 | "category": "behavior"
|
96 | },
|
97 |
|
98 | "value": {
|
99 | "desc": "Model of the component; Either use this property (along with a listener for 'input' event) OR use v-model directive",
|
100 | "category": "model"
|
101 | },
|
102 |
|
103 | "sanitize": {
|
104 | "type": "Boolean",
|
105 | "default": "false",
|
106 | "desc": "Force use of textContent instead of innerHTML to render text; Use it when the text might be unsafe (from user input)",
|
107 | "category": "behavior"
|
108 | },
|
109 |
|
110 | "scroll-target": {
|
111 | "type": [ "Element", "String" ],
|
112 | "desc": "CSS selector or DOM element to be used as a custom scroll container instead of the auto detected one",
|
113 | "examples": [
|
114 | ":scroll-target=\"$refs.scrollTarget\"",
|
115 | "scroll-target=\".scroll-target-class\"",
|
116 | "scroll-target=\"#scroll-target-id\"",
|
117 | "scroll-target=\"body\""
|
118 | ],
|
119 | "category": "behavior",
|
120 | "addedIn": "v1.8.0"
|
121 | }
|
122 | },
|
123 |
|
124 | "slots": {
|
125 | "default": {
|
126 | "desc": "Default slot in the devland unslotted content of the component"
|
127 | }
|
128 | },
|
129 |
|
130 | "scopedSlots": {
|
131 | "default": {
|
132 | "desc": "Default scoped slot in the devland content of the component"
|
133 | }
|
134 | },
|
135 |
|
136 | "events": {
|
137 | "input": {
|
138 | "desc": "Emitted when the component needs to change the model; Is also used by v-model",
|
139 | "params": {
|
140 | "value": {
|
141 | "type": "Any",
|
142 | "desc": "New model value",
|
143 | "required": true,
|
144 | "__exemption": [ "examples" ]
|
145 | }
|
146 | }
|
147 | },
|
148 |
|
149 | "show": {
|
150 | "desc": "Emitted after component has triggered show()",
|
151 | "params": {
|
152 | "evt": {
|
153 | "type": "Object",
|
154 | "desc": "JS event object",
|
155 | "required": true,
|
156 | "__exemption": [ "examples" ]
|
157 | }
|
158 | }
|
159 | },
|
160 |
|
161 | "before-show": {
|
162 | "desc": "Emitted when component triggers show() but before it finishes doing it",
|
163 | "params": {
|
164 | "evt": {
|
165 | "type": "Object",
|
166 | "desc": "JS event object",
|
167 | "required": true,
|
168 | "__exemption": [ "examples" ]
|
169 | }
|
170 | }
|
171 | },
|
172 |
|
173 | "after-show": {
|
174 | "desc": "Emitted when component show animation is finished"
|
175 | },
|
176 |
|
177 | "hide": {
|
178 | "desc": "Emitted after component has triggered hide()",
|
179 | "params": {
|
180 | "evt": {
|
181 | "type": "Object",
|
182 | "desc": "JS event object",
|
183 | "required": true,
|
184 | "__exemption": [ "examples" ]
|
185 | }
|
186 | }
|
187 | },
|
188 |
|
189 | "before-hide": {
|
190 | "desc": "Emitted when component triggers hide() but before it finishes doing it",
|
191 | "params": {
|
192 | "evt": {
|
193 | "type": "Object",
|
194 | "desc": "JS event object",
|
195 | "required": true,
|
196 | "__exemption": [ "examples" ]
|
197 | }
|
198 | }
|
199 | },
|
200 |
|
201 | "after-hide": {
|
202 | "desc": "Emitted when component hide animation is finished"
|
203 | },
|
204 |
|
205 | "click": {
|
206 | "desc": "Emitted when user clicks/taps on the component",
|
207 | "params": {
|
208 | "evt": {
|
209 | "type": "Object",
|
210 | "desc": "JS event object",
|
211 | "required": true,
|
212 | "__exemption": [ "examples" ]
|
213 | }
|
214 | }
|
215 | }
|
216 | },
|
217 |
|
218 | "methods": {
|
219 | "show": {
|
220 | "desc": "Triggers component to show",
|
221 | "params": {
|
222 | "evt": {
|
223 | "type": "Object",
|
224 | "required": false,
|
225 | "desc": "JS event object",
|
226 | "__exemption": [ "examples" ]
|
227 | }
|
228 | }
|
229 | },
|
230 |
|
231 | "hide": {
|
232 | "desc": "Triggers component to hide",
|
233 | "params": {
|
234 | "evt": {
|
235 | "type": "Object",
|
236 | "required": false,
|
237 | "desc": "JS event object",
|
238 | "__exemption": [ "examples" ]
|
239 | }
|
240 | }
|
241 | },
|
242 |
|
243 | "toggle": {
|
244 | "params": {
|
245 | "evt": {
|
246 | "type": "Object",
|
247 | "required": false,
|
248 | "desc": "JS event object",
|
249 | "__exemption": [ "examples" ]
|
250 | }
|
251 | },
|
252 | "desc": "Triggers component to toggle between show/hide"
|
253 | }
|
254 | }
|
255 | }
|