Skip to content

Commit f2347f1

Browse files
shafimspmarcosmoura
shafimsp
authored and
marcosmoura
committed
feat(MdField): new field variants (#1545)
* feat(MdField) Field Variants * docs(MdField) Field Variants * fix issues with the theme colors
1 parent b19f6f0 commit f2347f1

File tree

7 files changed

+1601
-177
lines changed

7 files changed

+1601
-177
lines changed

‎docs/app/pages/Components/Input/Input.vue

+55
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@
33
<example src="./examples/Counters.vue" />
44
<example src="./examples/FieldIcons.vue" />
55
<example src="./examples/InlineActions.vue" />
6+
<example src="./examples/FieldVariations.vue" />
7+
<example src="./examples/AppBarNested.vue" />
68

79
<template>
810
<page-container centered :title="$t('pages.input.title')">
@@ -20,6 +22,20 @@
2022
<code-example title="Input and Textarea" :component="examples['text-fields']" />
2123
</div>
2224

25+
<div class="page-container-section">
26+
<h2>Field Variations</h2>
27+
28+
<p>Fields have three layout variations: Default (with floating labels), solo (with inline labels) and boxed (with floating labels).</p>
29+
<code-example title="Variants and Dense" :component="examples['field-variations']" />
30+
</div>
31+
32+
<div class="page-container-section">
33+
<h2>App Bar Nested</h2>
34+
35+
<p>All field variations are works really great as search bar inside a toolbar.</p>
36+
<code-example title="Nested Fields" :component="examples['app-bar-nested']" />
37+
</div>
38+
2339
<div class="page-container-section">
2440
<h2>Errors and Messages</h2>
2541

@@ -80,12 +96,51 @@
8096
field: {
8197
headings: ['Name', 'Description', 'Default'],
8298
props: [
99+
{
100+
name: 'md-variant',
101+
type: 'String',
102+
description: 'Sets the field variant. The bottom line variant is the default. See below the detailed description of each variant.',
103+
defaults: 'bottom-line'
104+
},
105+
{
106+
offset: true,
107+
name: 'md-variant="bottom-line"',
108+
type: 'String',
109+
description: 'Sets the field variant to bottom line. This is the default.',
110+
defaults: '-'
111+
},
112+
{
113+
offset: true,
114+
name: 'md-variant="box"',
115+
type: 'String',
116+
description: 'Sets the field variant to a boxed variant.',
117+
defaults: '-'
118+
},
119+
{
120+
offset: true,
121+
name: 'md-variant="raised"',
122+
type: 'String',
123+
description: 'Sets the field variant to a raised variant.',
124+
defaults: '-'
125+
},
126+
{
127+
name: 'md-dense',
128+
type: 'Boolean',
129+
description: 'Enable the dense layout',
130+
defaults: 'false'
131+
},
83132
{
84133
name: 'md-inline',
85134
type: 'Boolean',
86135
description: 'Make the label inline. This means that the label will disappear when the input receives a focus.',
87136
defaults: 'false'
88137
},
138+
{
139+
name: 'md-nested',
140+
type: 'Boolean',
141+
description: 'Enable the nested layout. Its works only within toolbar',
142+
defaults: 'false'
143+
},
89144
{
90145
name: 'md-counter',
91146
type: 'Boolean',

‎docs/app/pages/Components/Input/examples/AppBarNested.vue

+102
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
<template>
2+
<div>
3+
<md-toolbar class="md-primary">
4+
<div class="md-toolbar-row">
5+
<div class="md-toolbar-section-start">
6+
<md-button class="md-icon-button">
7+
<md-icon>menu</md-icon>
8+
</md-button>
9+
</div>
10+
11+
<md-field class="search" md-nested md-clearable>
12+
<md-icon>search</md-icon>
13+
<label>Search...</label>
14+
<md-input v-model="normal"></md-input>
15+
</md-field>
16+
17+
<div class="md-toolbar-section-end">
18+
<md-button class="md-icon-button">
19+
<md-icon>refresh</md-icon>
20+
</md-button>
21+
22+
<md-button class="md-icon-button">
23+
<md-icon>more_vert</md-icon>
24+
</md-button>
25+
</div>
26+
</div>
27+
</md-toolbar>
28+
29+
<md-toolbar class="md-primary">
30+
<div class="md-toolbar-row">
31+
<div class="md-toolbar-section-start">
32+
<md-button class="md-icon-button">
33+
<md-icon>menu</md-icon>
34+
</md-button>
35+
</div>
36+
37+
<md-field class="search" md-variant="box" md-nested md-clearable>
38+
<md-icon>search</md-icon>
39+
<label>Search...</label>
40+
<md-input v-model="box"></md-input>
41+
</md-field>
42+
43+
<div class="md-toolbar-section-end">
44+
<md-button class="md-icon-button">
45+
<md-icon>refresh</md-icon>
46+
</md-button>
47+
48+
<md-button class="md-icon-button">
49+
<md-icon>more_vert</md-icon>
50+
</md-button>
51+
</div>
52+
</div>
53+
</md-toolbar>
54+
55+
<md-toolbar class="md-primary">
56+
<div class="md-toolbar-row">
57+
<div class="md-toolbar-section-start">
58+
<md-button class="md-icon-button">
59+
<md-icon>menu</md-icon>
60+
</md-button>
61+
</div>
62+
63+
<md-field class="search" md-variant="raised" md-nested md-clearable>
64+
<md-icon>search</md-icon>
65+
<label>Search...</label>
66+
<md-input v-model="raised"></md-input>
67+
</md-field>
68+
69+
<div class="md-toolbar-section-end">
70+
<md-button class="md-icon-button">
71+
<md-icon>refresh</md-icon>
72+
</md-button>
73+
74+
<md-button class="md-icon-button">
75+
<md-icon>more_vert</md-icon>
76+
</md-button>
77+
</div>
78+
</div>
79+
</md-toolbar>
80+
</div>
81+
</template>
82+
83+
<script>
84+
export default {
85+
name: 'AppBsrNested',
86+
data: () => ({
87+
normal: null,
88+
box: null,
89+
raised: null
90+
})
91+
}
92+
</script>
93+
94+
<style lang="scss" scoped>
95+
.md-toolbar + .md-toolbar {
96+
margin-top: 24px;
97+
}
98+
99+
.search {
100+
max-width: 500px;
101+
}
102+
</style>

‎docs/app/pages/Components/Input/examples/FieldVariations.vue

+48
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
<template>
2+
<div>
3+
<md-field md-variant="bottom-line">
4+
<label>Bottom Line</label>
5+
<md-input v-model="normal"></md-input>
6+
</md-field>
7+
8+
<md-field md-variant="box">
9+
<label>Box</label>
10+
<md-input v-model="box"></md-input>
11+
</md-field>
12+
13+
<md-field md-variant="raised">
14+
<label>Raised (Inline Only)</label>
15+
<md-input v-model="raised"></md-input>
16+
</md-field>
17+
18+
<md-field md-variant="bottom-line" md-dense>
19+
<label>Bottom Line with dense</label>
20+
<md-input v-model="normalDense"></md-input>
21+
</md-field>
22+
23+
<md-field md-variant="box" md-dense>
24+
<label>Box with dense</label>
25+
<md-input v-model="boxDense"></md-input>
26+
</md-field>
27+
28+
<md-field md-variant="raised" md-dense>
29+
<label>Raised (Inline Only)</label>
30+
<md-input v-model="raisedDense"></md-input>
31+
</md-field>
32+
33+
</div>
34+
</template>
35+
36+
<script>
37+
export default {
38+
name: 'FieldVariations',
39+
data: () => ({
40+
normal: null,
41+
box: null,
42+
raised: null,
43+
normalDense: null,
44+
boxDense: null,
45+
raisedDense: null
46+
})
47+
}
48+
</script>

0 commit comments

Comments
 (0)