Use formlayout
parent
9859cbaeca
commit
766e423b07
|
@ -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>
|
||||
|
|
|
@ -118,34 +118,34 @@ import InputMask from 'primevue/inputmask';
|
|||
</a>
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<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>
|
||||
|
|
Loading…
Reference in New Issue