Docs for FormLayout
cagataycivici
parent
4fcf7bb218
commit
6313903557
|
|
@ -4,7 +4,7 @@
|
|||
<div class="feature-intro">
|
||||
<h1>FlexGrid</h1>
|
||||
<p>Flex Grid CSS is a lightweight flex based responsive layout utility optimized for mobile phones, tablets and desktops.
|
||||
Flex Grid CSS is not included in PrimeVue as it is provided by <a href="https://github.com/primefaces/primeflex">PrimeFlex</a> , a shared grid library between PrimeFaces, PrimeNG, PrimeReact and PrimeVue projects.</p>
|
||||
Flex Grid CSS is not included in PrimeVue as it is provided by <a href="https://github.com/primefaces/primeflex">PrimeFlex</a>, a shared grid library between PrimeFaces, PrimeNG, PrimeReact and PrimeVue projects.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -3,7 +3,8 @@
|
|||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<h1>Form Layout</h1>
|
||||
<p>Form layout is a CSS utility optimized for creating forms.</p>
|
||||
<p>Form layout is a CSS utility optimized for creating forms with ease. FormLayout is not included in PrimeVue as it is provided by <a href="https://github.com/primefaces/primeflex">PrimeFlex</a>,
|
||||
a shared grid library between PrimeFaces, PrimeNG, PrimeReact and PrimeVue projects.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -2,95 +2,402 @@
|
|||
<div class="content-section documentation">
|
||||
<TabView>
|
||||
<TabPanel header="Documentation">
|
||||
<h3>Import</h3>
|
||||
<CodeHighlight lang="javascript">
|
||||
import InputText from 'primevue/inputtext';
|
||||
<h3>Install</h3>
|
||||
<p>PrimeFlex is available at npm, if you have an existing application run the following command to download it to your project.</p>
|
||||
<CodeHighlight lang="js">
|
||||
npm install primeflex --save
|
||||
</CodeHighlight>
|
||||
|
||||
<p>Then add the primeflex.css to your application</p>
|
||||
<CodeHighlight lang="js">
|
||||
import 'primeflex/primeflex.css';
|
||||
</CodeHighlight>
|
||||
|
||||
<h3>Getting Started</h3>
|
||||
<p>A model can be bound using the standard v-model directive.</p>
|
||||
<p>Core member of the FormLayout is the <i>.p-field</i> class that wraps the input field and the associated label.</p>
|
||||
<CodeHighlight>
|
||||
<InputText type="text" v-model="value" />
|
||||
<div class="p-field">
|
||||
<label for="fieldId">Label</label>
|
||||
<InputText id="fieldId" type="text" />
|
||||
</div>
|
||||
</CodeHighlight>
|
||||
|
||||
<h3>Float Label</h3>
|
||||
<p>A floating label is implemented by wrapping the input and the label inside a container having <i>.p-float-label</i> style class.</p>
|
||||
<h3>Vertical Layout</h3>
|
||||
<p>In its simplest form, a vertical layout is created when used within <i>.p-fluid</i> which makes the components use all available width.</p>
|
||||
<CodeHighlight>
|
||||
<span class="p-float-label">
|
||||
<InputText id="username" type="text" v-model="value" />
|
||||
<label for="username">Username</label>
|
||||
</span>
|
||||
<div class="p-fluid">
|
||||
<div class="p-field">
|
||||
<label for="firstname">Firstname</label>
|
||||
<InputText id="firstname" type="text" />
|
||||
</div>
|
||||
<div class="p-field">
|
||||
<label for="lastname">Lastname</label>
|
||||
<InputText id="lastname" type="text" />
|
||||
</div>
|
||||
</div>
|
||||
</CodeHighlight>
|
||||
|
||||
<h3>Properties</h3>
|
||||
<p>InputText passes any valid attribute to the underlying input element.</p>
|
||||
<h3>Vertical Layout with Grid</h3>
|
||||
<p>This is where FormLayout actually hooks-in to PrimeFlex with the help of <i>.p-formgrid</i> class to optimize the content for form design. Example
|
||||
below arranges two fields to be displayed next two each other.</p>
|
||||
<CodeHighlight>
|
||||
<div class="p-fluid p-formgrid p-grid">
|
||||
<div class="p-field p-col">
|
||||
<label for="firstname">Firstname</label>
|
||||
<InputText id="firstname" type="text" />
|
||||
</div>
|
||||
<div class="p-field p-col">
|
||||
<label for="lastname">Lastname</label>
|
||||
<InputText id="lastname" type="text" />
|
||||
</div>
|
||||
</div>
|
||||
</CodeHighlight>
|
||||
|
||||
<h3>Events</h3>
|
||||
<p>Any valid event such as focus, blur and input are passed to the underlying input element.</p>
|
||||
<h3>Horizontal and Fixed Width</h3>
|
||||
<p>In horizontal form, label of the field is displayed on the same row of the input as opposed to the vertical alternative. In this
|
||||
example, label has a fixed width where container of the inputs gets the remaining space.
|
||||
</p>
|
||||
<CodeHighlight>
|
||||
<div class="p-field p-grid">
|
||||
<label for="firstname" class="p-col-fixed" style="width:100px">Firstname</label>
|
||||
<div class="p-col">
|
||||
<InputText id="firstname" type="text" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-field p-grid">
|
||||
<label for="lastname" class="p-col-fixed" style="width:100px">Lastname</label>
|
||||
<div class="p-col">
|
||||
<InputText id="lastname" type="text" />
|
||||
</div>
|
||||
</div>
|
||||
</CodeHighlight>
|
||||
|
||||
<h3>Horizontal and Fluid</h3>
|
||||
<p>Wrapping the form in the previous example with <i>.p-fluid</i> and removing the fixed width results in a fluid layout.</p>
|
||||
<CodeHighlight>
|
||||
<div class="p-fluid">
|
||||
<div class="p-field p-grid">
|
||||
<label for="firstname" class="p-col-12 p-md-2">Firstname</label>
|
||||
<div class="p-col-12 p-md-10">
|
||||
<InputText id="firstname" type="text" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-field p-grid">
|
||||
<label for="lastname" class="p-col-12 p-md-2">Lastname</label>
|
||||
<div class="p-col-12 p-md-10">
|
||||
<InputText id="lastname" type="text" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CodeHighlight>
|
||||
|
||||
<h3>Inline</h3>
|
||||
<p>Inline forms are used to display the content on the same row and can simply be implemented by adding <i>.p-formgroup-inline</i> to the form container. Note that per design requirements, if labels
|
||||
are not visually hidden, it is suggested to use <i>.p-sr-only</i> to still support screen readers.</p>
|
||||
<CodeHighlight>
|
||||
<div class="p-formgroup-inline">
|
||||
<div class="p-field">
|
||||
<label for="firstname" class="p-sr-only">Firstname</label>
|
||||
<InputText id="firstname" type="text" placeholder="Firstname" />
|
||||
</div>
|
||||
<div class="p-field">
|
||||
<label for="lastname" class="p-sr-only">Lastname</label>
|
||||
<InputText id="lastname" type="text" placeholder="Lastname" />
|
||||
</div>
|
||||
<Button type="button" label="Submit" />
|
||||
</div>
|
||||
</CodeHighlight>
|
||||
|
||||
<h3>Checkbox and RadioButton</h3>
|
||||
<p>Checkbox and RadioButton have exclusive layout support via <i>.p-field-checkbox</i> and <i>.p-field-radiobutton</i> classes respectively.
|
||||
Examples here demonstrates vertical and horizontal layout alternatives.</p>
|
||||
<CodeHighlight>
|
||||
<h3>Vertical Checkbox</h3>
|
||||
<div class="p-field-checkbox">
|
||||
<Checkbox id="city1" name="city1" value="Chicago" v-model="cities1" />
|
||||
<label for="city1">Chicago</label>
|
||||
</div>
|
||||
<div class="p-field-checkbox">
|
||||
<Checkbox id="city2" name="city1" value="Los Angeles" v-model="cities1" />
|
||||
<label for="city2">Los Angeles</label>
|
||||
</div>
|
||||
|
||||
<h3>Horizontal Checkbox</h3>
|
||||
<div class="p-formgroup-inline">
|
||||
<div class="p-field-checkbox">
|
||||
<Checkbox id="city3" name="city2" value="Chicago" v-model="cities2" />
|
||||
<label for="city3">Chicago</label>
|
||||
</div>
|
||||
<div class="p-field-checkbox">
|
||||
<Checkbox id="city4" name="city2" value="Los Angeles" v-model="cities2" />
|
||||
<label for="city4">Los Angeles</label>
|
||||
</div>
|
||||
</div>
|
||||
</CodeHighlight>
|
||||
|
||||
<CodeHighlight>
|
||||
<h3>Vertical RadioButton</h3>
|
||||
<div class="p-field-radiobutton">
|
||||
<RadioButton id="city5" name="city1" value="Chicago" v-model="city1" />
|
||||
<label for="city5">Chicago</label>
|
||||
</div>
|
||||
<div class="p-field-radiobutton">
|
||||
<RadioButton id="city6" name="city1" value="Los Angeles" v-model="city1" />
|
||||
<label for="city6">Los Angeles</label>
|
||||
</div>
|
||||
|
||||
<h3>Horizontal RadioButton</h3>
|
||||
<div class="p-formgroup-inline">
|
||||
<div class="p-field-checkbox">
|
||||
<RadioButton id="city7" name="city2" value="Chicago" v-model="city2" />
|
||||
<label for="city7">Chicago</label>
|
||||
</div>
|
||||
<div class="p-field-checkbox">
|
||||
<RadioButton id="city8" name="city2" value="Los Angeles" v-model="city2" />
|
||||
<label for="city8">Los Angeles</label>
|
||||
</div>
|
||||
</div>
|
||||
</CodeHighlight>
|
||||
|
||||
<h3>Helper text</h3>
|
||||
<p>Helper text is an optional element defined with the <i>small</i> tag to display additional information about the input field.</p>
|
||||
<CodeHighlight>
|
||||
<div class="p-field p-fluid">
|
||||
<label for="username">Username</label>
|
||||
<InputText id="username" type="username" aria-describedby="username-help" />
|
||||
<small id="username-help">Enter your username to reset your password.</small>
|
||||
</div>
|
||||
</CodeHighlight>
|
||||
|
||||
<h3>Advanced Forms</h3>
|
||||
<p>A responsive form with various input fields can easily be implemented using a combination of <i>.p-field</i>, <i>.p-formgrid</i> and <i>.p-fluid</i>.</p>
|
||||
<CodeHighlight>
|
||||
<div class="p-fluid p-formgrid p-grid">
|
||||
<div class="p-field p-col-12 p-md-6">
|
||||
<label for="firstname6">Firstname</label>
|
||||
<InputText id="firstname6" type="text" />
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-6">
|
||||
<label for="lastname6">Lastname</label>
|
||||
<InputText id="lastname6" type="text" />
|
||||
</div>
|
||||
<div class="p-field p-col-12">
|
||||
<label for="address">Address</label>
|
||||
<Textarea id="address" type="text" rows="4" />
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-6">
|
||||
<label for="city">City</label>
|
||||
<InputText id="city" type="text" />
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-3">
|
||||
<label for="state">State</label>
|
||||
<Dropdown inputId="state" v-model="selectedState" :options="states" optionLabel="name" placeholder="Select" />
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-3">
|
||||
<label for="zip">Zip</label>
|
||||
<InputText id="zip" type="text" />
|
||||
</div>
|
||||
</div>
|
||||
</CodeHighlight>
|
||||
|
||||
<h3>Customization</h3>
|
||||
<p>FormLayout comes with sensible defaults, in case these values need to be customized suggested way is building <a href="https://github.com/primefaces/primeflex/blob/master/primeflex.scss">primeflex.scss</a> with your on variables.</p>
|
||||
|
||||
<h3>Styling</h3>
|
||||
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
|
||||
<div class="doc-tablewrapper">
|
||||
<table class="doc-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Element</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Variable</th>
|
||||
<th>Default</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>p-inputtext</td>
|
||||
<td>Input element</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>$fieldMargin</td>
|
||||
<td>1em</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>$fieldLabelMargin</td>
|
||||
<td>.5em</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<h3>Dependencies</h3>
|
||||
<p>None.</p>
|
||||
</TabPanel>
|
||||
|
||||
<TabPanel header="Source">
|
||||
<a href="https://github.com/primefaces/primevue/tree/master/src/views/inputtext" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
|
||||
<a href="https://github.com/primefaces/primevue/tree/master/src/views/formlayout" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
|
||||
<span>View on GitHub</span>
|
||||
</a>
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<h3>Basic</h3>
|
||||
<InputText type="text" v-model="value1" />
|
||||
<span :style="{marginLeft: '.5em'}">{{value1}}</span>
|
||||
<h3>Vertical</h3>
|
||||
<div class="p-fluid">
|
||||
<div class="p-field">
|
||||
<label for="firstname1">Firstname</label>
|
||||
<InputText id="firstname1" type="text" />
|
||||
</div>
|
||||
<div class="p-field">
|
||||
<label for="lastname1">Lastname</label>
|
||||
<InputText id="lastname1" type="text" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>Floating Label</h3>
|
||||
<span class="p-float-label">
|
||||
<InputText id="username" type="text" v-model="value2" />
|
||||
<h3>Vertical and Grid</h3>
|
||||
<div class="p-fluid p-formgrid p-grid">
|
||||
<div class="p-field p-col">
|
||||
<label for="firstname2">Firstname</label>
|
||||
<InputText id="firstname2" type="text" />
|
||||
</div>
|
||||
<div class="p-field p-col">
|
||||
<label for="lastname2">Lastname</label>
|
||||
<InputText id="lastname2" type="text" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>Horizontal and Fixed Width</h3>
|
||||
<div class="p-field p-grid">
|
||||
<label for="firstname3" class="p-col-fixed" style="width:100px">Firstname</label>
|
||||
<div class="p-col">
|
||||
<InputText id="firstname3" type="text" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-field p-grid">
|
||||
<label for="lastname3" class="p-col-fixed" style="width:100px">Lastname</label>
|
||||
<div class="p-col">
|
||||
<InputText id="lastname3" type="text" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>Horizontal and Fluid</h3>
|
||||
<div class="p-fluid">
|
||||
<div class="p-field p-grid">
|
||||
<label for="firstname4" class="p-col-12 p-md-2">Firstname</label>
|
||||
<div class="p-col-12 p-md-10">
|
||||
<InputText id="firstname4" type="text" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-field p-grid">
|
||||
<label for="lastname4" class="p-col-12 p-md-2">Lastname</label>
|
||||
<div class="p-col-12 p-md-10">
|
||||
<InputText id="lastname4" type="text" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>Inline</h3>
|
||||
<div class="p-formgroup-inline">
|
||||
<div class="p-field">
|
||||
<label for="firstname5" class="p-sr-only">Firstname</label>
|
||||
<InputText id="firstname5" type="text" placeholder="Firstname" />
|
||||
</div>
|
||||
<div class="p-field">
|
||||
<label for="lastname5" class="p-sr-only">Lastname</label>
|
||||
<InputText id="lastname5" type="text" placeholder="Lastname" />
|
||||
</div>
|
||||
<Button type="button" label="Submit" />
|
||||
</div>
|
||||
|
||||
<h3>Vertical Checkbox</h3>
|
||||
<div class="p-field-checkbox">
|
||||
<Checkbox id="city1" name="city1" value="Chicago" v-model="cities1" />
|
||||
<label for="city1">Chicago</label>
|
||||
</div>
|
||||
<div class="p-field-checkbox">
|
||||
<Checkbox id="city2" name="city1" value="Los Angeles" v-model="cities1" />
|
||||
<label for="city2">Los Angeles</label>
|
||||
</div>
|
||||
|
||||
<h3>Horizontal Checkbox</h3>
|
||||
<div class="p-formgroup-inline">
|
||||
<div class="p-field-checkbox">
|
||||
<Checkbox id="city3" name="city2" value="Chicago" v-model="cities2" />
|
||||
<label for="city3">Chicago</label>
|
||||
</div>
|
||||
<div class="p-field-checkbox">
|
||||
<Checkbox id="city4" name="city2" value="Los Angeles" v-model="cities2" />
|
||||
<label for="city4">Los Angeles</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>Vertical RadioButton</h3>
|
||||
<div class="p-field-radiobutton">
|
||||
<RadioButton id="city5" name="city1" value="Chicago" v-model="city1" />
|
||||
<label for="city5">Chicago</label>
|
||||
</div>
|
||||
<div class="p-field-radiobutton">
|
||||
<RadioButton id="city6" name="city1" value="Los Angeles" v-model="city1" />
|
||||
<label for="city6">Los Angeles</label>
|
||||
</div>
|
||||
|
||||
<h3>Horizontal RadioButton</h3>
|
||||
<div class="p-formgroup-inline">
|
||||
<div class="p-field-checkbox">
|
||||
<RadioButton id="city7" name="city2" value="Chicago" v-model="city2" />
|
||||
<label for="city7">Chicago</label>
|
||||
</div>
|
||||
<div class="p-field-checkbox">
|
||||
<RadioButton id="city8" name="city2" value="Los Angeles" v-model="city2" />
|
||||
<label for="city8">Los Angeles</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>Help Text</h3>
|
||||
<div class="p-field p-fluid">
|
||||
<label for="username">Username</label>
|
||||
</span>
|
||||
<InputText id="username" type="username" aria-describedby="username-help" />
|
||||
<small id="username-help">Enter your username to reset your password.</small>
|
||||
</div>
|
||||
|
||||
<h3>Disabled</h3>
|
||||
<InputText type="text" v-model="value3" disabled />
|
||||
|
||||
<h3>Invalid</h3>
|
||||
<InputText type="text" class="p-error" />
|
||||
|
||||
<h3>Sizes</h3>
|
||||
<div class="component-sizes">
|
||||
<InputText type="text" class="p-component-sm" placeholder="Small" />
|
||||
<InputText type="text" placeholder="Normal" />
|
||||
<InputText type="text" class="p-component-lg" placeholder="Large" />
|
||||
<h3>Advanced</h3>
|
||||
<div class="p-fluid p-formgrid p-grid">
|
||||
<div class="p-field p-col-12 p-md-6">
|
||||
<label for="firstname6">Firstname</label>
|
||||
<InputText id="firstname6" type="text" />
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-6">
|
||||
<label for="lastname6">Lastname</label>
|
||||
<InputText id="lastname6" type="text" />
|
||||
</div>
|
||||
<div class="p-field p-col-12">
|
||||
<label for="address">Address</label>
|
||||
<Textarea id="address" type="text" rows="4" />
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-6">
|
||||
<label for="city">City</label>
|
||||
<InputText id="city" type="text" />
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-3">
|
||||
<label for="state">State</label>
|
||||
<Dropdown inputId="state" v-model="selectedState" :options="states" optionLabel="name" placeholder="Select" />
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-3">
|
||||
<label for="zip">Zip</label>
|
||||
<InputText id="zip" type="text" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</CodeHighlight>
|
||||
|
||||
<CodeHighlight lang="javascript">
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value1: '',
|
||||
value2: '',
|
||||
value3: 'PrimeVue'
|
||||
}
|
||||
}
|
||||
data() {
|
||||
return {
|
||||
selectedState: null,
|
||||
states: [
|
||||
{name: 'Arizona', code: 'Arizona'},
|
||||
{name: 'California', value: 'California'},
|
||||
{name: 'Florida', code: 'Florida'},
|
||||
{name: 'Ohio', code: 'Ohio'},
|
||||
{name: 'Washington', code: 'Washington'}
|
||||
],
|
||||
cities1: [],
|
||||
cities2: [],
|
||||
city1: null,
|
||||
city2: null
|
||||
}
|
||||
}
|
||||
}
|
||||
</CodeHighlight>
|
||||
</TabPanel>
|
||||
|
|
|
|||
Loading…
Reference in New Issue