Use formlayout

pull/345/head
cagataycivici 2020-05-14 12:53:11 +03:00
parent 9859cbaeca
commit 766e423b07
2 changed files with 26 additions and 26 deletions

View File

@ -8,34 +8,34 @@
</div>
<div class="content-section implementation">
<div class="p-grid p-fluid">
<div class="p-col-12 p-md-4">
<h3>Basic {{val1}}</h3>
<div class="p-fluid p-formgrid p-grid">
<div class="p-field p-col-12 p-md-4">
<label for="basic">Basic</label>
<InputMask mask="99-999999" v-model="val1" placeholder="99-999999" />
</div>
<div class="p-col-12 p-md-4">
<h3>SSN {{val2}}</h3>
<div class="p-field p-col-12 p-md-4">
<label for="ssn">SSN</label>
<InputMask mask="999-99-9999" v-model="val2" placeholder="999-99-9999" />
</div>
<div class="p-col-12 p-md-4">
<h3>Date {{val3}}</h3>
<div class="p-field p-col-12 p-md-4">
<label for="date">Date</label>
<InputMask mask="99/99/9999" v-model="val3" placeholder="99/99/9999" slotChar="mm/dd/yyyy" />
</div>
<div class="p-col-12 p-md-4">
<h3>Phone {{val4}}</h3>
<div class="p-field p-col-12 p-md-4">
<label for="Phone">Phone</label>
<InputMask mask="(999) 999-9999" v-model="val4" placeholder="(999) 999-9999" />
</div>
<div class="p-col-12 p-md-4">
<h3>Phone Ext {{val5}}</h3>
<div class="p-field p-col-12 p-md-4">
<label for="phoneext">Phone Ext</label>
<InputMask mask="(999) 999-9999? x99999" v-model="val5" placeholder="(999) 999-9999? x99999"/>
</div>
<div class="p-col-12 p-md-4">
<h3>Serial Number {{val6}}</h3>
<div class="p-field p-col-12 p-md-4">
<label for="serial">Serial</label>
<InputMask mask="a*-999-a999" v-model="val6" placeholder="a*-999-a999" />
</div>
</div>

View File

@ -118,34 +118,34 @@ import InputMask from 'primevue/inputmask';
</a>
<CodeHighlight>
<template v-pre>
&lt;div class="p-grid p-fluid"&gt;
&lt;div class="p-col-12 p-md-4"&gt;
&lt;h3&gt;Basic {{val1}}&lt;/h3&gt;
&lt;div class="p-fluid p-formgrid p-grid"&gt;
&lt;div class="p-field p-col-12 p-md-4"&gt;
&lt;label for="basic"&gt;Basic&lt;/label&gt;
&lt;InputMask mask="99-999999" v-model="val1" placeholder="99-999999" /&gt;
&lt;/div&gt;
&lt;div class="p-col-12 p-md-4"&gt;
&lt;h3&gt;SSN {{val2}}&lt;/h3&gt;
&lt;div class="p-field p-col-12 p-md-4"&gt;
&lt;label for="ssn"&gt;SSN&lt;/label&gt;
&lt;InputMask mask="999-99-9999" v-model="val2" placeholder="999-99-9999" /&gt;
&lt;/div&gt;
&lt;div class="p-col-12 p-md-4"&gt;
&lt;h3&gt;Date {{val3}}&lt;/h3&gt;
&lt;div class="p-field p-col-12 p-md-4"&gt;
&lt;label for="date"&gt;Date&lt;/label&gt;
&lt;InputMask mask="99/99/9999" v-model="val3" placeholder="99/99/9999" slotChar="mm/dd/yyyy" /&gt;
&lt;/div&gt;
&lt;div class="p-col-12 p-md-4"&gt;
&lt;h3&gt;Phone {{val4}}&lt;/h3&gt;
&lt;div class="p-field p-col-12 p-md-4"&gt;
&lt;label for="Phone"&gt;Phone&lt;/label&gt;
&lt;InputMask mask="(999) 999-9999" v-model="val4" placeholder="(999) 999-9999" /&gt;
&lt;/div&gt;
&lt;div class="p-col-12 p-md-4"&gt;
&lt;h3&gt;Phone Ext {{val5}}&lt;/h3&gt;
&lt;div class="p-field p-col-12 p-md-4"&gt;
&lt;label for="phoneext"&gt;Phone Ext&lt;/label&gt;
&lt;InputMask mask="(999) 999-9999? x99999" v-model="val5" placeholder="(999) 999-9999? x99999"/&gt;
&lt;/div&gt;
&lt;div class="p-col-12 p-md-4"&gt;
&lt;h3&gt;Serial Number {{val6}}&lt;/h3&gt;
&lt;div class="p-field p-col-12 p-md-4"&gt;
&lt;label for="serial"&gt;Serial&lt;/label&gt;
&lt;InputMask mask="a*-999-a999" v-model="val6" placeholder="a*-999-a999" /&gt;
&lt;/div&gt;
&lt;/div&gt;