+1601
-177
lines changedFilter options
+1601
-177
lines changed Original file line number Diff line number Diff line change
@@ -3,6 +3,8 @@
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" />
6 8 7 9
<template>
8 10
<page-container centered :title="$t('pages.input.title')">
@@ -20,6 +22,20 @@
20 22
<code-example title="Input and Textarea" :component="examples['text-fields']" />
21 23
</div>
22 24 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 + 23 39
<div class="page-container-section">
24 40
<h2>Errors and Messages</h2>
25 41
@@ -80,12 +96,51 @@
80 96
field: {
81 97
headings: ['Name', 'Description', 'Default'],
82 98
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 +
},
83 132
{
84 133
name: 'md-inline',
85 134
type: 'Boolean',
86 135
description: 'Make the label inline. This means that the label will disappear when the input receives a focus.',
87 136
defaults: 'false'
88 137
},
138 +
{
139 +
name: 'md-nested',
140 +
type: 'Boolean',
141 +
description: 'Enable the nested layout. Its works only within toolbar',
142 +
defaults: 'false'
143 +
},
89 144
{
90 145
name: 'md-counter',
91 146
type: 'Boolean',
@@ -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>
Original file line number Diff line number Diff 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>
You can’t perform that action at this time.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4