vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Fixed #305 - Icons inside InputText

pull/310/head
cagataycivici 2020-05-07 12:18:47 +03:00
parent d9d9016e9e
commit 339fa2f9ee
19 changed files with 328 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
public/themes/luna-amber/theme.css
View File

@ -668,6 +668,22 @@
transition-duration: 0.2s;
}
.p-input-icon-left > i {
left: 0.429em;
}
.p-input-icon-left > .p-inputtext {
padding-left: 1.858em;
}
.p-input-icon-right > i {
right: 0.429em;
}
.p-input-icon-right > .p-inputtext {
padding-right: 1.858em;
}
.p-listbox {
background: #323232;
color: #dedede;

16
public/themes/luna-green/theme.css
View File

@ -668,6 +668,22 @@
transition-duration: 0.2s;
}
.p-input-icon-left > i {
left: 0.429em;
}
.p-input-icon-left > .p-inputtext {
padding-left: 1.858em;
}
.p-input-icon-right > i {
right: 0.429em;
}
.p-input-icon-right > .p-inputtext {
padding-right: 1.858em;
}
.p-listbox {
background: #323232;
color: #dedede;

16
public/themes/luna-pink/theme.css
View File

@ -668,6 +668,22 @@
transition-duration: 0.2s;
}
.p-input-icon-left > i {
left: 0.429em;
}
.p-input-icon-left > .p-inputtext {
padding-left: 1.858em;
}
.p-input-icon-right > i {
right: 0.429em;
}
.p-input-icon-right > .p-inputtext {
padding-right: 1.858em;
}
.p-listbox {
background: #323232;
color: #dedede;

16
public/themes/nova-colored/theme.css
View File

@ -668,6 +668,22 @@
transition-duration: 0.2s;
}
.p-input-icon-left > i {
left: 0.429em;
}
.p-input-icon-left > .p-inputtext {
padding-left: 1.858em;
}
.p-input-icon-right > i {
right: 0.429em;
}
.p-input-icon-right > .p-inputtext {
padding-right: 1.858em;
}
.p-listbox {
background: #ffffff;
color: #333333;

16
public/themes/nova-dark/theme.css
View File

@ -668,6 +668,22 @@
transition-duration: 0.2s;
}
.p-input-icon-left > i {
left: 0.429em;
}
.p-input-icon-left > .p-inputtext {
padding-left: 1.858em;
}
.p-input-icon-right > i {
right: 0.429em;
}
.p-input-icon-right > .p-inputtext {
padding-right: 1.858em;
}
.p-listbox {
background: #ffffff;
color: #333333;

16
public/themes/nova-light/theme.css
View File

@ -668,6 +668,22 @@
transition-duration: 0.2s;
}
.p-input-icon-left > i {
left: 0.429em;
}
.p-input-icon-left > .p-inputtext {
padding-left: 1.858em;
}
.p-input-icon-right > i {
right: 0.429em;
}
.p-input-icon-right > .p-inputtext {
padding-right: 1.858em;
}
.p-listbox {
background: #ffffff;
color: #333333;

16
public/themes/nova-vue/theme.css
View File

@ -668,6 +668,22 @@
transition-duration: 0.2s;
}
.p-input-icon-left > i {
left: 0.429em;
}
.p-input-icon-left > .p-inputtext {
padding-left: 1.858em;
}
.p-input-icon-right > i {
right: 0.429em;
}
.p-input-icon-right > .p-inputtext {
padding-right: 1.858em;
}
.p-listbox {
background: #ffffff;
color: #333333;

16
public/themes/rhea/theme.css
View File

@ -668,6 +668,22 @@
transition-duration: 0.2s;
}
.p-input-icon-left > i {
left: 0.429em;
}
.p-input-icon-left > .p-inputtext {
padding-left: 1.858em;
}
.p-input-icon-right > i {
right: 0.429em;
}
.p-input-icon-right > .p-inputtext {
padding-right: 1.858em;
}
.p-listbox {
background: #ffffff;
color: #666666;

18
public/themes/saga-blue/theme.css
View File

@ -668,6 +668,24 @@
transition-duration: 0.2s;
}
.p-input-icon-left > i {
left: 0.5em;
color: #6c757d;
}
.p-input-icon-left > .p-inputtext {
padding-left: 2em;
}
.p-input-icon-right > i {
right: 0.5em;
color: #6c757d;
}
.p-input-icon-right > .p-inputtext {
padding-right: 2em;
}
.p-listbox {
background: #ffffff;
color: #495057;

18
public/themes/saga-green/theme.css
View File

@ -668,6 +668,24 @@
transition-duration: 0.2s;
}
.p-input-icon-left > i {
left: 0.5em;
color: #6c757d;
}
.p-input-icon-left > .p-inputtext {
padding-left: 2em;
}
.p-input-icon-right > i {
right: 0.5em;
color: #6c757d;
}
.p-input-icon-right > .p-inputtext {
padding-right: 2em;
}
.p-listbox {
background: #ffffff;
color: #495057;

18
public/themes/saga-orange/theme.css
View File

@ -668,6 +668,24 @@
transition-duration: 0.2s;
}
.p-input-icon-left > i {
left: 0.5em;
color: #6c757d;
}
.p-input-icon-left > .p-inputtext {
padding-left: 2em;
}
.p-input-icon-right > i {
right: 0.5em;
color: #6c757d;
}
.p-input-icon-right > .p-inputtext {
padding-right: 2em;
}
.p-listbox {
background: #ffffff;
color: #495057;

18
public/themes/saga-purple/theme.css
View File

@ -668,6 +668,24 @@
transition-duration: 0.2s;
}
.p-input-icon-left > i {
left: 0.5em;
color: #6c757d;
}
.p-input-icon-left > .p-inputtext {
padding-left: 2em;
}
.p-input-icon-right > i {
right: 0.5em;
color: #6c757d;
}
.p-input-icon-right > .p-inputtext {
padding-right: 2em;
}
.p-listbox {
background: #ffffff;
color: #495057;

16
public/themes/vela-blue/theme.css
View File

@ -668,6 +668,22 @@
transition-duration: 0.2s;
}
.p-input-icon-left > i {
left: 0.5em;
}
.p-input-icon-left > .p-inputtext {
padding-left: 2em;
}
.p-input-icon-right > i {
right: 0.5em;
}
.p-input-icon-right > .p-inputtext {
padding-right: 2em;
}
.p-listbox {
background: #34495E;
color: #ebedef;

16
public/themes/vela-green/theme.css
View File

@ -668,6 +668,22 @@
transition-duration: 0.2s;
}
.p-input-icon-left > i {
left: 0.5em;
}
.p-input-icon-left > .p-inputtext {
padding-left: 2em;
}
.p-input-icon-right > i {
right: 0.5em;
}
.p-input-icon-right > .p-inputtext {
padding-right: 2em;
}
.p-listbox {
background: #34495E;
color: #ebedef;

16
public/themes/vela-orange/theme.css
View File

@ -668,6 +668,22 @@
transition-duration: 0.2s;
}
.p-input-icon-left > i {
left: 0.5em;
}
.p-input-icon-left > .p-inputtext {
padding-left: 2em;
}
.p-input-icon-right > i {
right: 0.5em;
}
.p-input-icon-right > .p-inputtext {
padding-right: 2em;
}
.p-listbox {
background: #34495E;
color: #ebedef;

16
public/themes/vela-purple/theme.css
View File

@ -668,6 +668,22 @@
transition-duration: 0.2s;
}
.p-input-icon-left > i {
left: 0.5em;
}
.p-input-icon-left > .p-inputtext {
padding-left: 2em;
}
.p-input-icon-right > i {
right: 0.5em;
}
.p-input-icon-right > .p-inputtext {
padding-right: 2em;
}
.p-listbox {
background: #34495E;
color: #ebedef;

12
src/components/inputtext/InputText.css
View File

@ -52,4 +52,16 @@
.p-float-label .input:-webkit-autofill ~ label {
top: -20px;
font-size: 12px;
}
.p-input-icon-left,
.p-input-icon-right {
position: relative;
}
.p-input-icon-left > i,
.p-input-icon-right > i {
position: absolute;
top: 50%;
margin-top: -.5em;
}

18
src/views/inputtext/InputTextDemo.vue
View File

@ -18,8 +18,20 @@
<label for="username">Username</label>
</span>
<h3>Left Icon</h3>
<span class="p-input-icon-left">
<i class="pi pi-search" />
<InputText type="text" v-model="value3" placeholder="Search" />
</span>
<h3>Right Icon</h3>
<span class="p-input-icon-right">
<i class="pi pi-spin pi-spinner" />
<InputText type="text" v-model="value4" />
</span>
<h3>Disabled</h3>
<InputText type="text" v-model="value3" disabled />
<InputText type="text" v-model="value5" disabled />
<h3>Invalid</h3>
<InputText type="text" class="p-error" />
@ -44,7 +56,9 @@ export default {
return {
value1: '',
value2: '',
value3: 'PrimeVue'
value3: '',
value4: '',
value5: 'PrimeVue'
}
},
components: {

43
src/views/inputtext/InputTextDoc.vue
View File

@ -20,6 +20,21 @@ import InputText from 'primevue/inputtext';
&lt;InputText id="username" type="text" v-model="value" /&gt;
&lt;label for="username"&gt;Username&lt;/label&gt;
&lt;/span&gt;
</CodeHighlight>
<h3>Icons</h3>
<p>An icon can be integrated within an input field by wrapping the input and the icon with an element having either <i>p-input-icon-right</i>
or <i>p-input-icon-left</i> class depending on the icon location.</p>
<CodeHighlight>
&lt;span class="p-input-icon-left"&gt;
&lt;i class="pi pi-search" /&gt;
&lt;InputText type="text" v-model="value1" placeholder="Search" /&gt;
&lt;/span&gt;
&lt;span class="p-input-icon-right"&gt;
&lt;i class="pi pi-spin pi-spinner" /&gt;
&lt;InputText type="text" v-model="value2" /&gt;
&lt;/span&gt;
</CodeHighlight>
<h3>Properties</h3>
@ -57,7 +72,7 @@ import InputText from 'primevue/inputtext';
</a>
<CodeHighlight>
<template v-pre>
&lt;h3&gt;Basic&lt;/h3&gt;
&lt;h3 class="first"&gt;Basic&lt;/h3&gt;
&lt;InputText type="text" v-model="value1" /&gt;
&lt;span :style="{marginLeft: '.5em'}"&gt;{{value1}}&lt;/span&gt;
@ -67,10 +82,22 @@ import InputText from 'primevue/inputtext';
&lt;label for="username"&gt;Username&lt;/label&gt;
&lt;/span&gt;
&lt;h3&gt;Disabled&lt;/h3&gt;
&lt;InputText type="text" v-model="value3" disabled /&gt;
&lt;h3&gt;Left Icon&lt;/h3&gt;
&lt;span class="p-input-icon-left"&gt;
&lt;i class="pi pi-search" /&gt;
&lt;InputText type="text" v-model="value3" placeholder="Search" /&gt;
&lt;/span&gt;
&lt;h3&gt;Invalid&lt;/h3&gt;
&lt;h3&gt;Right Icon&lt;/h3&gt;
&lt;span class="p-input-icon-right"&gt;
&lt;i class="pi pi-spin pi-spinner" /&gt;
&lt;InputText type="text" v-model="value4" /&gt;
&lt;/span&gt;
&lt;h3&gt;Disabled&lt;/h3&gt;
&lt;InputText type="text" v-model="value5" disabled /&gt;
&lt;h3&gt;Invalid&lt;/h3&gt;
&lt;InputText type="text" class="p-error" /&gt;
&lt;h3&gt;Sizes&lt;/h3&gt;
@ -86,9 +113,11 @@ import InputText from 'primevue/inputtext';
export default {
data() {
return {
value1: '',
value2: '',
value3: 'PrimeVue'
value1: '',
value2: '',
value3: '',
value4: '',
value5: 'PrimeVue'
}
}
}