Hopiu/vue-material
1
0
Fork 0
mirror of https://github.com/Hopiu/vue-material.git synced 2026-05-14 10:13:09 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

add icons example

Browse source
This commit is contained in:
Marcos Moura 2016-12-29 02:06:05 -02:00
parent 1ac720ee54
commit c6287eb347
2 changed files with 57 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

56
docs/src/pages/components/Input.vue
View file

@ -258,6 +258,62 @@
</div>
</example-box>
<example-box card-title="Icons">
<div slot="demo">
<form novalidate @submit.stop.prevent="submit">
<md-input-container>
<md-icon class="md-warn">
warning
<md-tooltip>Be careful. You're almost broken!</md-tooltip>
</md-icon>
<label>Money</label>
<md-input type="text"></md-input>
<md-icon>attach_money</md-icon>
</md-input-container>
<md-input-container>
<md-icon>phone</md-icon>
<label>Phone</label>
<md-input type="tel"></md-input>
</md-input-container>
<md-input-container>
<md-icon>speaker_notes</md-icon>
<label>Notes</label>
<md-textarea></md-textarea>
</md-input-container>
</form>
</div>
<div slot="code">
<code-block lang="xml">
&lt;form novalidate @submit.stop.prevent=&quot;submit&quot;&gt;
&lt;md-input-container&gt;
&lt;md-icon class=&quot;md-warn&quot;&gt;
warning
&lt;md-tooltip&gt;Be careful. You&#039;re almost broken!&lt;/md-tooltip&gt;
&lt;/md-icon&gt;
&lt;label&gt;Money&lt;/label&gt;
&lt;md-input type=&quot;text&quot;&gt;&lt;/md-input&gt;
&lt;md-icon&gt;attach_money&lt;/md-icon&gt;
&lt;/md-input-container&gt;
&lt;md-input-container&gt;
&lt;md-icon&gt;phone&lt;/md-icon&gt;
&lt;label&gt;Phone&lt;/label&gt;
&lt;md-input type=&quot;tel&quot;&gt;&lt;/md-input&gt;
&lt;/md-input-container&gt;
&lt;md-input-container&gt;
&lt;md-icon&gt;speaker_notes&lt;/md-icon&gt;
&lt;label&gt;Notes&lt;/label&gt;
&lt;md-textarea&gt;&lt;/md-textarea&gt;
&lt;/md-input-container&gt;
&lt;/form&gt;
</code-block>
</div>
</example-box>
<example-box card-title="Required and Errors">
<div slot="demo">
<form novalidate @submit.stop.prevent="submit">

1
src/components/mdInputContainer/mdInputContainer.scss
View file

@ -98,6 +98,7 @@ $input-size: 32px;
}
.md-icon {
margin: 4px auto;
color: rgba(#000, .54);
transition: $swift-ease-out;