+70
-0
lines changedFilter options
+70
-0
lines changed Original file line number Diff line number Diff line change
@@ -5,6 +5,7 @@
5 5
<example src="./examples/InlineActions.vue" />
6 6
<example src="./examples/FieldVariations.vue" />
7 7
<example src="./examples/AppBarNested.vue" />
8 +
<example src="./examples/Fixes.vue" />
8 9 9 10
<template>
10 11
<page-container centered :title="$t('pages.input.title')">
@@ -62,7 +63,16 @@
62 63 63 64
<p>Fields can have a clearable feature to make easy for users to clear the value. And to be easier to type passwords we can show a toggle button to reveal the password. This is really useful for mobile applications:</p>
64 65
<code-example title="Clear and password" :component="examples['inline-actions']" />
66 +
</div>
67 + 68 +
<div class="page-container-section">
69 +
<h2>Prefixes & suffixes</h2>
65 70 71 +
<p>Prefixes and suffixes can be used to clarify units or to add input in advance. Prefixes are left justified in the text field; suffixes are right justified. Text fields can have both prefixes and suffixes.</p>
72 +
<code-example title="Prefixes & suffixes" :component="examples['fixes']" />
73 +
</div>
74 + 75 +
<div class="page-container-section">
66 76
<api-item title="API - md-field">
67 77
<p>The following options can be applied to any field:</p>
68 78
@@ -0,0 +1,31 @@
1 +
<template>
2 +
<div>
3 +
<md-field>
4 +
<label>Prefix</label>
5 +
<span class="md-prefix">$</span>
6 +
<md-input v-model="initial"></md-input>
7 +
</md-field>
8 + 9 +
<md-field>
10 +
<label>Suffix</label>
11 +
<md-input v-model="empty"></md-input>
12 +
<span class="md-suffix">@gmail.com</span>
13 +
</md-field>
14 +
</div>
15 +
</template>
16 + 17 +
<script>
18 +
export default {
19 +
name: 'Fixes',
20 +
data: () => ({
21 +
initial: 0,
22 +
empty: ''
23 +
})
24 +
}
25 +
</script>
26 + 27 +
<style lang="scss" scoped>
28 +
.md-field:last-child {
29 +
margin-bottom: 40px;
30 +
}
31 +
</style>
Original file line number Diff line number Diff line change
@@ -196,6 +196,27 @@
196 196
transition-duration: .3s;
197 197
line-height: 1;
198 198
}
199 +
.md-suffix {
200 +
font-size: 16px;
201 +
line-height: 32px;
202 +
align-self: center;
203 +
justify-self: center;
204 +
}
205 + 206 +
.md-prefix {
207 +
display: none;
208 +
padding-right: 4px;
209 +
font-size: 16px;
210 +
line-height: 32px;
211 +
align-self: center;
212 +
justify-self: center;
213 +
}
214 + 215 +
&.md-focused, &.md-has-value {
216 +
.md-prefix {
217 +
display: block;
218 +
}
219 +
}
199 220 200 221
.md-input,
201 222
.md-textarea {
@@ -29,6 +29,10 @@
29 29
color: rgba(#000, .54);
30 30
}
31 31 32 +
.md-suffix, .md-prefix {
33 +
color: rgba(#000, .54);
34 +
}
35 + 32 36
.md-input,
33 37
.md-textarea {
34 38
&::-webkit-input-placeholder {
@@ -58,6 +62,10 @@
58 62
color: rgba(#fff, .7);
59 63
}
60 64 65 +
.md-suffix, .md-prefix {
66 +
color: rgba(#fff, .7);
67 +
}
68 + 61 69
.md-input,
62 70
.md-textarea {
63 71
&::-webkit-input-placeholder {
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