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

Add float label demo for all input components

pull/358/head
cagataycivici 2020-07-03 10:54:55 +03:00
parent 68fc69b99b
commit d1a5d23af9
5 changed files with 277 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/AppMenu.vue
View File

@ -40,6 +40,7 @@
<router-link to="/inputnumber">InputNumber</router-link>
<router-link to="/inputswitch">InputSwitch</router-link>
<router-link to="/inputtext">InputText</router-link>
<router-link to="/floatlabel">FloatLabel</router-link>
<router-link to="/listbox">Listbox</router-link>
<router-link to="/multiselect">MultiSelect</router-link>
<router-link to="/password">Password</router-link>

5
src/router.js
View File

@ -491,6 +491,11 @@ export default new Router({
name: 'flexbox',
component: () => import('./views/flexbox/FlexBoxDemo.vue')
},
{
path: '/floatlabel',
name: 'floatlabel',
component: () => import('./views/floatlabel/FloatLabelDemo.vue')
},
{
path: '/text',
name: 'text',

1
src/views/autocomplete/AutoCompleteDemo.vue
View File

@ -12,6 +12,7 @@
<div class="card">
<h5>Basic</h5>
<AutoComplete v-model="selectedCountry1" :suggestions="filteredCountries" @complete="searchCountry($event)" field="name" />
<h5>Dropdown and Templating</h5>
<AutoComplete v-model="selectedCountry2" :suggestions="filteredCountries" @complete="searchCountry($event)" :dropdown="true" field="name">
<template #item="slotProps">

1
src/views/autocomplete/AutoCompleteDoc.vue
View File

@ -256,6 +256,7 @@ export default {
<template v-pre>
&lt;h5&gt;Basic&lt;/h5&gt;
&lt;AutoComplete v-model="selectedCountry1" :suggestions="filteredCountries" @complete="searchCountry($event)" field="name" /&gt;
&lt;h5&gt;Dropdown and Templating&lt;/h5&gt;
&lt;AutoComplete v-model="selectedCountry2" :suggestions="filteredCountries" @complete="searchCountry($event)" :dropdown="true" field="name"&gt;
&lt;template #item="slotProps"&gt;

269
src/views/floatlabel/FloatLabelDemo.vue Normal file
View File

@ -0,0 +1,269 @@
<template>
<div>
<div class="content-section introduction">
<div class="feature-intro">
<h1>Float Label</h1>
<p>All input text components support floating labels.</p>
</div>
<AppInputStyleSwitch />
</div>
<div class="content-section implementation">
<div class="card">
<div class="p-fluid p-grid">
<div class="p-field p-col-12 p-md-4">
<span class="p-float-label">
<InputText id="inputtext" type="text" v-model="value1" />
<label for="inputtext">InputText</label>
</span>
</div>
<div class="p-field p-col-12 p-md-4">
<span class="p-float-label">
<AutoComplete v-model="value2" :suggestions="filteredCountries" @complete="searchCountry($event)" field="name" />
<label for="autocomplete">AutoComplete</label>
</span>
</div>
<div class="p-field p-col-12 p-md-4">
<span class="p-float-label">
<Calendar id="calendar" v-model="value3" />
<label for="calendar">Calendar</label>
</span>
</div>
<div class="p-field p-col-12 p-md-4">
<span class="p-float-label">
<chips id="chips" v-model="value4" />
<label for="chips">Chips</label>
</span>
</div>
<div class="p-field p-col-12 p-md-4">
<span class="p-float-label">
<InputMask id="inputmask" v-model="value5" mask="99/99/9999" slotChar="mm/dd/yyyy" />
<label for="inputmask">InputMask</label>
</span>
</div>
<div class="p-field p-col-12 p-md-4">
<span class="p-float-label">
<InputNumber id="inputnumber" v-model="value6" />
<label for="inputnumber">InputNumber</label>
</span>
</div>
<div class="p-field p-col-12 p-md-4">
<div class="p-inputgroup">
<span class="p-inputgroup-addon">
<i class="pi pi-user"></i>
</span>
<span class="p-float-label">
<InputText id="inputgroup" type="text" v-model="value7" />
<label for="inputgroup">InputGroup</label>
</span>
</div>
</div>
<div class="p-field p-col-12 p-md-4">
<span class="p-float-label">
<Dropdown id="dropdown" v-model="value8" :options="cities" optionLabel="name" />
<label for="dropdown">Dropdown</label>
</span>
</div>
<div class="p-field p-col-12 p-md-4">
<span class="p-float-label">
<MultiSelect id="multiselect" v-model="value9" :options="cities" optionLabel="name" />
<label for="multiselect">MultiSelect</label>
</span>
</div>
<div class="p-field p-col-12 p-md-4">
<span class="p-float-label">
<Textarea id="textarea" v-model="value10" rows="3" />
<label for="textarea">Textarea</label>
</span>
</div>
</div>
</div>
</div>
<div class="content-section documentation">
<TabView>
<TabPanel header="Source">
<CodeHighlight>
<template v-pre>
&lt;div class="p-fluid p-grid"&gt;
&lt;div class="p-field p-col-12 p-md-4"&gt;
&lt;span class="p-float-label"&gt;
&lt;InputText id="inputtext" type="text" v-model="value1" /&gt;
&lt;label for="inputtext"&gt;InputText&lt;/label&gt;
&lt;/span&gt;
&lt;/div&gt;
&lt;div class="p-field p-col-12 p-md-4"&gt;
&lt;span class="p-float-label"&gt;
&lt;AutoComplete v-model="value2" :suggestions="filteredCountries" @complete="searchCountry($event)" field="name" /&gt;
&lt;label for="autocomplete"&gt;AutoComplete&lt;/label&gt;
&lt;/span&gt;
&lt;/div&gt;
&lt;div class="p-field p-col-12 p-md-4"&gt;
&lt;span class="p-float-label"&gt;
&lt;Calendar id="calendar" v-model="value3" /&gt;
&lt;label for="calendar"&gt;Calendar&lt;/label&gt;
&lt;/span&gt;
&lt;/div&gt;
&lt;div class="p-field p-col-12 p-md-4"&gt;
&lt;span class="p-float-label"&gt;
&lt;chips id="chips" v-model="value4" /&gt;
&lt;label for="chips"&gt;Chips&lt;/label&gt;
&lt;/span&gt;
&lt;/div&gt;
&lt;div class="p-field p-col-12 p-md-4"&gt;
&lt;span class="p-float-label"&gt;
&lt;InputMask id="inputmask" v-model="value5" mask="99/99/9999" slotChar="mm/dd/yyyy" /&gt;
&lt;label for="inputmask"&gt;InputMask&lt;/label&gt;
&lt;/span&gt;
&lt;/div&gt;
&lt;div class="p-field p-col-12 p-md-4"&gt;
&lt;span class="p-float-label"&gt;
&lt;InputNumber id="inputnumber" v-model="value6" /&gt;
&lt;label for="inputnumber"&gt;InputNumber&lt;/label&gt;
&lt;/span&gt;
&lt;/div&gt;
&lt;div class="p-field p-col-12 p-md-4"&gt;
&lt;div class="p-inputgroup"&gt;
&lt;span class="p-inputgroup-addon"&gt;
&lt;i class="pi pi-user"&gt;&lt;/i&gt;
&lt;/span&gt;
&lt;span class="p-float-label"&gt;
&lt;InputText id="inputgroup" type="text" v-model="value7" /&gt;
&lt;label for="inputgroup"&gt;InputGroup&lt;/label&gt;
&lt;/span&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="p-field p-col-12 p-md-4"&gt;
&lt;span class="p-float-label"&gt;
&lt;Dropdown id="dropdown" v-model="value8" :options="cities" optionLabel="name" /&gt;
&lt;label for="dropdown"&gt;Dropdown&lt;/label&gt;
&lt;/span&gt;
&lt;/div&gt;
&lt;div class="p-field p-col-12 p-md-4"&gt;
&lt;span class="p-float-label"&gt;
&lt;MultiSelect id="multiselect" v-model="value9" :options="cities" optionLabel="name" /&gt;
&lt;label for="multiselect"&gt;MultiSelect&lt;/label&gt;
&lt;/span&gt;
&lt;/div&gt;
&lt;div class="p-field p-col-12 p-md-4"&gt;
&lt;span class="p-float-label"&gt;
&lt;Textarea id="textarea" v-model="value10" rows="3" /&gt;
&lt;label for="textarea"&gt;Textarea&lt;/label&gt;
&lt;/span&gt;
&lt;/div&gt;
&lt;/div&gt;
</template>
</CodeHighlight>
<CodeHighlight lang="javascript">
import CountryService from '../../service/CountryService';
export default {
data() {
return {
countries: null,
filteredCountries: null,
cities: [
{name: 'New York', code: 'NY'},
{name: 'Rome', code: 'RM'},
{name: 'London', code: 'LDN'},
{name: 'Istanbul', code: 'IST'},
{name: 'Paris', code: 'PRS'}
],
value1: null,
value2: null,
value3: null,
value4: null,
value5: null,
value6: null,
value7: null,
value8: null,
value9: null,
value10: null
}
},
countryService: null,
created() {
this.countryService = new CountryService();
},
mounted() {
this.countryService.getCountries().then(data => this.countries = data);
},
methods: {
searchCountry(event) {
setTimeout(() => {
if (!event.query.trim().length) {
this.filteredCountries = [...this.countries];
}
else {
this.filteredCountries = this.countries.filter((country) => {
return country.name.toLowerCase().startsWith(event.query.toLowerCase());
});
}
}, 250);
}
},
}
</CodeHighlight>
</TabPanel>
</TabView>
</div>
</div>
</template>
<script>
import CountryService from '../../service/CountryService';
export default {
data() {
return {
countries: null,
filteredCountries: null,
cities: [
{name: 'New York', code: 'NY'},
{name: 'Rome', code: 'RM'},
{name: 'London', code: 'LDN'},
{name: 'Istanbul', code: 'IST'},
{name: 'Paris', code: 'PRS'}
],
value1: null,
value2: null,
value3: null,
value4: null,
value5: null,
value6: null,
value7: null,
value8: null,
value9: null,
value10: null
}
},
countryService: null,
created() {
this.countryService = new CountryService();
},
mounted() {
this.countryService.getCountries().then(data => this.countries = data);
},
methods: {
searchCountry(event) {
setTimeout(() => {
if (!event.query.trim().length) {
this.filteredCountries = [...this.countries];
}
else {
this.filteredCountries = this.countries.filter((country) => {
return country.name.toLowerCase().startsWith(event.query.toLowerCase());
});
}
}, 250);
}
},
}
</script>
<style lang="scss" scoped>
textarea {
resize: none;
}
</style>