|
3 | 3 | <example src="./examples/Counters.vue" />
|
4 | 4 | <example src="./examples/FieldIcons.vue" />
|
5 | 5 | <example src="./examples/InlineActions.vue" />
|
6 |
| -<example src="./examples/FieldVariations.vue" /> |
7 |
| -<example src="./examples/AppBarNested.vue" /> |
8 | 6 | <example src="./examples/Fixes.vue" />
|
9 | 7 |
|
10 | 8 | <template>
|
|
23 | 21 | <code-example title="Input and Textarea" :component="examples['text-fields']" />
|
24 | 22 | </div>
|
25 | 23 |
|
26 |
| - <div class="page-container-section"> |
27 |
| - <h2>Field Variations</h2> |
28 |
| - |
29 |
| - <p>Fields have three layout variations: Default (with floating labels), solo (with inline labels) and boxed (with floating labels).</p> |
30 |
| - <code-example title="Variants and Dense" :component="examples['field-variations']" /> |
31 |
| - </div> |
32 |
| - |
33 |
| - <div class="page-container-section"> |
34 |
| - <h2>App Bar Nested</h2> |
35 |
| - |
36 |
| - <p>All field variations are works really great as search bar inside a toolbar.</p> |
37 |
| - <code-example title="Nested Fields" :component="examples['app-bar-nested']" /> |
38 |
| - </div> |
39 |
| - |
40 | 24 | <div class="page-container-section">
|
41 | 25 | <h2>Errors and Messages</h2>
|
42 | 26 |
|
|
105 | 89 | mixins: [examples],
|
106 | 90 | data: () => ({
|
107 | 91 | field: {
|
108 |
| - props: { |
109 |
| - headings: ['Name', 'Description', 'Default'], |
110 |
| - props: [ |
111 |
| - { |
112 |
| - name: 'md-variant', |
113 |
| - type: 'String', |
114 |
| - description: 'Sets the field variant. The bottom line variant is the default. See below the detailed description of each variant.', |
115 |
| - defaults: 'bottom-line' |
116 |
| - }, |
117 |
| - { |
118 |
| - offset: true, |
119 |
| - name: 'md-variant="bottom-line"', |
120 |
| - type: 'String', |
121 |
| - description: 'Sets the field variant to bottom line. This is the default.', |
122 |
| - defaults: '-' |
123 |
| - }, |
124 |
| - { |
125 |
| - offset: true, |
126 |
| - name: 'md-variant="box"', |
127 |
| - type: 'String', |
128 |
| - description: 'Sets the field variant to a boxed variant.', |
129 |
| - defaults: '-' |
130 |
| - }, |
131 |
| - { |
132 |
| - offset: true, |
133 |
| - name: 'md-variant="raised"', |
134 |
| - type: 'String', |
135 |
| - description: 'Sets the field variant to a raised variant.', |
136 |
| - defaults: '-' |
137 |
| - }, |
138 |
| - { |
139 |
| - name: 'md-dense', |
140 |
| - type: 'Boolean', |
141 |
| - description: 'Enable the dense layout', |
142 |
| - defaults: 'false' |
143 |
| - }, |
144 |
| - { |
145 |
| - name: 'md-inline', |
146 |
| - type: 'Boolean', |
147 |
| - description: 'Make the label inline. This means that the label will disappear when the input receives a focus.', |
148 |
| - defaults: 'false' |
149 |
| - }, |
150 |
| - { |
151 |
| - name: 'md-nested', |
152 |
| - type: 'Boolean', |
153 |
| - description: 'Enable the nested layout. Its works only within toolbar', |
154 |
| - defaults: 'false' |
155 |
| - }, |
156 |
| - { |
157 |
| - name: 'md-counter', |
158 |
| - type: 'Boolean', |
159 |
| - description: 'Enable the character counter. Only works with fields that have a <code>md-input</code> or <code>md-textarea</code> with a <code>maxlength</code> or <code>md-counter</code> attributes.', |
160 |
| - defaults: 'false' |
161 |
| - }, |
162 |
| - { |
163 |
| - name: 'md-clearable', |
164 |
| - type: 'Boolean', |
165 |
| - description: 'Add a clear button on the right of the input.', |
166 |
| - defaults: 'false' |
167 |
| - }, |
168 |
| - { |
169 |
| - name: 'md-toggle-password', |
170 |
| - type: 'Boolean', |
171 |
| - description: 'Add a toggle button on the right of the input to reveal/hide the password. Only works with fields that have a <code>md-input</code> with type password.', |
172 |
| - defaults: 'false' |
173 |
| - } |
174 |
| - ] |
175 |
| - }, |
| 92 | + headings: ['Name', 'Description', 'Default'], |
| 93 | + props: [ |
| 94 | + { |
| 95 | + name: 'md-inline', |
| 96 | + type: 'Boolean', |
| 97 | + description: 'Make the label inline. This means that the label will disappear when the input receives a focus.', |
| 98 | + defaults: 'false' |
| 99 | + }, |
| 100 | + { |
| 101 | + name: 'md-counter', |
| 102 | + type: 'Boolean', |
| 103 | + description: 'Enable the character counter. Only works with fields that have a <code>md-input</code> or <code>md-textarea</code> with a <code>maxlength</code> or <code>md-counter</code> attributes.', |
| 104 | + defaults: 'false' |
| 105 | + }, |
| 106 | + { |
| 107 | + name: 'md-clearable', |
| 108 | + type: 'Boolean', |
| 109 | + description: 'Add a clear button on the right of the input.', |
| 110 | + defaults: 'false' |
| 111 | + }, |
| 112 | + { |
| 113 | + name: 'md-toggle-password', |
| 114 | + type: 'Boolean', |
| 115 | + description: 'Add a toggle button on the right of the input to reveal/hide the password. Only works with fields that have a <code>md-input</code> with type password.', |
| 116 | + defaults: 'false' |
| 117 | + } |
| 118 | + ], |
176 | 119 | events: {
|
177 | 120 | headings: ['Name', 'Description', 'Value'],
|
178 | 121 | props: [
|
|
0 commit comments