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

Use form layout

pull/345/head
cagataycivici 2020-05-14 13:09:01 +03:00
parent 766e423b07
commit a85903aefd
10 changed files with 219 additions and 274 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
src/views/checkbox/CheckboxDemo.vue
View File

@ -8,42 +8,36 @@
</div>
<div class="content-section implementation">
<h3 class="first">Basic</h3>
<div class="p-grid">
<div class="p-col-12">
<h3>Basic</h3>
<div class="p-field-checkbox">
<Checkbox id="binary" v-model="checked" :binary="true" />
<label for="binary" style="font-weight: bold">{{checked}}</label>
</div>
<label for="binary">{{checked}}</label>
</div>
<h3>Multiple</h3>
<div class="p-grid">
<div class="p-col-12">
<div class="p-field-checkbox">
<Checkbox id="city1" name="city" value="Chicago" v-model="cities" />
<label for="city1">Chicago</label>
</div>
<div class="p-col-12">
<div class="p-field-checkbox">
<Checkbox id="city2" name="city" value="Los Angeles" v-model="cities" />
<label for="city2">Los Angeles</label>
</div>
<div class="p-col-12">
<div class="p-field-checkbox">
<Checkbox id="city3" name="city" value="New York" v-model="cities" />
<label for="city3">New York</label>
</div>
<div class="p-col-12">
<div class="p-field-checkbox">
<Checkbox id="city4" name="city" value="San Francisco" v-model="cities" />
<label for="city4">San Francisco</label>
</div>
</div>
<p>Selected Cities : <span style="font-weight: bold">{{cities}}</span></p>
<h3>Dynamic Values, Preselection, Value Binding and Disabled Option</h3>
<div class="p-grid">
<div v-for="theme of themes" :key="theme.key" class="p-col-12">
<div v-for="theme of themes" :key="theme.key" class="p-field-checkbox">
<Checkbox :id="theme.key" name="theme" :value="theme" v-model="selectedThemes" :disabled="theme.key === 'U'"/>
<label :for="theme.key">{{theme.name}}</label>
</div>
</div>
<p>Selected Themes: <span style="font-weight: bold">{{this.selectedThemes}}</span></p>
</div>
@ -71,14 +65,3 @@ export default {
}
}
</script>
<style scoped>
.p-col-12 {
display: flex;
align-items: center;
}
label {
margin-left: .5rem;
}
</style>

30
src/views/checkbox/CheckboxDoc.vue
View File

@ -146,40 +146,34 @@ export default {
<CodeHighlight>
<template v-pre>
&lt;h3&gt;Basic&lt;/h3&gt;
&lt;div class="p-grid"&gt;
&lt;div class="p-col-12"&gt;
&lt;div class="p-field-checkbox"&gt;
&lt;Checkbox id="binary" v-model="checked" :binary="true" /&gt;
&lt;label for="binary" class="p-checkbox-label" style="font-weight: bold"&gt;{{checked}}&lt;/label&gt;
&lt;/div&gt;
&lt;label for="binary"&gt;{{checked}}&lt;/label&gt;
&lt;/div&gt;
&lt;h3&gt;Multiple&lt;/h3&gt;
&lt;div class="p-grid"&gt;
&lt;div class="p-col-12"&gt;
&lt;div class="p-field-checkbox"&gt;
&lt;Checkbox id="city1" name="city" value="Chicago" v-model="cities" /&gt;
&lt;label for="city1" class="p-checkbox-label"&gt;Chicago&lt;/label&gt;
&lt;label for="city1"&gt;Chicago&lt;/label&gt;
&lt;/div&gt;
&lt;div class="p-col-12"&gt;
&lt;div class="p-field-checkbox"&gt;
&lt;Checkbox id="city2" name="city" value="Los Angeles" v-model="cities" /&gt;
&lt;label for="city2" class="p-checkbox-label"&gt;Los Angeles&lt;/label&gt;
&lt;label for="city2"&gt;Los Angeles&lt;/label&gt;
&lt;/div&gt;
&lt;div class="p-col-12"&gt;
&lt;div class="p-field-checkbox"&gt;
&lt;Checkbox id="city3" name="city" value="New York" v-model="cities" /&gt;
&lt;label for="city3" class="p-checkbox-label"&gt;New York&lt;/label&gt;
&lt;label for="city3"&gt;New York&lt;/label&gt;
&lt;/div&gt;
&lt;div class="p-col-12"&gt;
&lt;div class="p-field-checkbox"&gt;
&lt;Checkbox id="city4" name="city" value="San Francisco" v-model="cities" /&gt;
&lt;label for="city4" class="p-checkbox-label"&gt;San Francisco&lt;/label&gt;
&lt;/div&gt;
&lt;label for="city4"&gt;San Francisco&lt;/label&gt;
&lt;/div&gt;
&lt;p&gt;Selected Cities : &lt;span style="font-weight: bold"&gt;{{cities}}&lt;/span&gt;&lt;/p&gt;
&lt;h3&gt;Dynamic Values, Preselection, Value Binding and Disabled Option&lt;/h3&gt;
&lt;div class="p-grid"&gt;
&lt;div v-for="theme of themes" :key="theme.key" class="p-col-12"&gt;
&lt;div v-for="theme of themes" :key="theme.key" class="p-field-checkbox"&gt;
&lt;Checkbox :id="theme.key" name="theme" :value="theme" v-model="selectedThemes" :disabled="theme.key === 'U'"/&gt;
&lt;label :for="theme.key" class="p-checkbox-label"&gt;{{theme.name}}&lt;/label&gt;
&lt;/div&gt;
&lt;label :for="theme.key"&gt;{{theme.name}}&lt;/label&gt;
&lt;/div&gt;
&lt;p&gt;Selected Themes: &lt;span style="font-weight: bold"&gt;{{this.selectedThemes}}&lt;/span&gt;&lt;/p&gt;
</template>

126
src/views/inputnumber/InputNumberDemo.vue
View File

@ -9,101 +9,101 @@
<div class="content-section implementation">
<h3>Numerals</h3>
<div class="p-grid p-fluid">
<div class="p-col-12 p-md-3">
Integer Only
<InputNumber v-model="value1" />
<div class="p-fluid p-grid p-formgrid">
<div class="p-field p-col-12 p-md-3">
<label for="integeronly">Integer Only</label>
<InputNumber id="integeronly" v-model="value1" />
</div>
<div class="p-col-12 p-md-3">
Without Grouping
<InputNumber v-model="value2" mode="decimal" :useGrouping="false" />
<div class="p-field p-col-12 p-md-3">
<label for="withoutgrouping">Without Grouping</label>
<InputNumber id="withoutgrouping" v-model="value2" mode="decimal" :useGrouping="false" />
</div>
<div class="p-col-12 p-md-3">
Min-Max Fraction Digits
<InputNumber v-model="value3" mode="decimal" :minFractionDigits="2" :maxFractionDigits="5" />
<div class="p-field p-col-12 p-md-3">
<label for="integeronly">Min-Max Fraction Digits</label>
<InputNumber id="integeronly" v-model="value3" mode="decimal" :minFractionDigits="2" :maxFractionDigits="5" />
</div>
<div class="p-col-12 p-md-3">
Min-Max Boundaries
<InputNumber v-model="value4" mode="decimal" :min="0" :max="100" />
<div class="p-field p-col-12 p-md-3">
<label for="minmax">Min-Max Boundaries</label>
<InputNumber id="minmax" v-model="value4" mode="decimal" :min="0" :max="100" />
</div>
<div class="p-col-12 p-md-3">
User Locale
<InputNumber v-model="value5" mode="decimal" :minFractionDigits="2" />
<div class="p-field p-col-12 p-md-3">
<label for="locale-user">User Locale</label>
<InputNumber id="locale-user" v-model="value5" mode="decimal" :minFractionDigits="2" />
</div>
<div class="p-col-12 p-md-3">
United State Locale
<InputNumber v-model="value6" mode="decimal" locale="en-US" :minFractionDigits="2" />
<div class="p-field p-col-12 p-md-3">
<label for="locale-us">United States Locale</label>
<InputNumber id="locale-us" v-model="value6" mode="decimal" locale="en-US" :minFractionDigits="2" />
</div>
<div class="p-col-12 p-md-3">
German Locale
<InputNumber v-model="value7" mode="decimal" locale="de-DE" :minFractionDigits="2"/>
<div class="p-field p-col-12 p-md-3">
<label for="locale-german">German Locale</label>
<InputNumber id="locale-german" v-model="value7" mode="decimal" locale="de-DE" :minFractionDigits="2"/>
</div>
<div class="p-col-12 p-md-3">
Indian Locale
<InputNumber v-model="value8" mode="decimal" locale="en-IN" :minFractionDigits="2" />
<div class="p-field p-col-12 p-md-3">
<label for="locale-japan">Indian Locale</label>
<InputNumber id="locale-japan" v-model="value8" mode="decimal" locale="en-IN" :minFractionDigits="2" />
</div>
</div>
<h3>Currency</h3>
<div class="p-grid p-fluid">
<div class="p-col-12 p-md-3">
United States
<InputNumber v-model="value9" mode="currency" currency="USD" locale="en-US" />
<div class="p-field p-col-12 p-md-3">
<label for="currency-us">United States</label>
<InputNumber id="currency-us" v-model="value9" mode="currency" currency="USD" locale="en-US" />
</div>
<div class="p-col-12 p-md-3">
Germany
<InputNumber v-model="value10" mode="currency" currency="EUR" locale="de-DE" />
<div class="p-field p-col-12 p-md-3">
<label for="currency-germany">Germany</label>
<InputNumber id="currency-germany" v-model="value10" mode="currency" currency="EUR" locale="de-DE" />
</div>
<div class="p-col-12 p-md-3">
India
<InputNumber v-model="value11" mode="currency" currency="INR" currencyDisplay="code" locale="en-IN" />
<div class="p-field p-col-12 p-md-3">
<label for="currency-india">India</label>
<InputNumber id="currency-india" v-model="value11" mode="currency" currency="INR" currencyDisplay="code" locale="en-IN" />
</div>
<div class="p-col-12 p-md-3">
Japan
<InputNumber v-model="value12" mode="currency" currency="JPY" locale="jp-JP" />
<div class="p-field p-col-12 p-md-3">
<label for="currency-japan">Japan</label>
<InputNumber id="currency-japan" v-model="value12" mode="currency" currency="JPY" locale="jp-JP" />
</div>
</div>
<h3>Prefix and Suffix</h3>
<div class="p-grid p-fluid">
<div class="p-col-12 p-md-3">
Mile
<InputNumber v-model="value13" suffix=" mi" />
<div class="p-field p-col-12 p-md-3">
<label for="mile">Mile</label>
<InputNumber id="mile" v-model="value13" suffix=" mi" />
</div>
<div class="p-col-12 p-md-3">
Percent
<InputNumber v-model="value14" prefix="%" />
<div class="p-field p-col-12 p-md-3">
<label for="percent">Percent</label>
<InputNumber id="percent" v-model="value14" prefix="%" />
</div>
<div class="p-col-12 p-md-3">
Expiry
<InputNumber v-model="value15" prefix="Expires in " suffix=" days" />
<div class="p-field p-col-12 p-md-3">
<label for="expiry">Expiry</label>
<InputNumber id="expiry" v-model="value15" prefix="Expires in " suffix=" days" />
</div>
<div class="p-col-12 p-md-3">
Temperature
<InputNumber v-model="value16" prefix="&uarr; " suffix="℃" :min="0" :max="40" />
<div class="p-field p-col-12 p-md-3">
<label for="temperature">Temperature</label>
<InputNumber id="temperature" v-model="value16" prefix="&uarr; " suffix="℃" :min="0" :max="40" />
</div>
</div>
<h3>Buttons</h3>
<div class="p-grid p-fluid">
<div class="p-col-12 p-md-3">
Stacked
<InputNumber v-model="value17" showButtons mode="currency" currency="USD" />
<div class="p-field p-col-12 p-md-3">
<label for="stacked">Stacked</label>
<InputNumber id="stacked" v-model="value17" showButtons mode="currency" currency="USD" />
</div>
<div class="p-col-12 p-md-3">
Horizontal with Step
<InputNumber v-model="value18" showButtons buttonLayout="horizontal" spinnerMode="horizontal" :step="0.25"
<div class="p-field p-col-12 p-md-3">
<label for="horizontal">Horizontal with Step</label>
<InputNumber id="horizontal" v-model="value18" showButtons buttonLayout="horizontal" spinnerMode="horizontal" :step="0.25"
decrementButtonClass="p-button-danger" incrementButtonClass="p-button-success" incrementButtonIcon="pi pi-plus" decrementButtonIcon="pi pi-minus" mode="currency" currency="EUR" />
</div>
<div class="p-col-12 p-md-3">
<div>Vertical</div>
<InputNumber v-model="value19" mode="decimal" showButtons buttonLayout="vertical" spinnerMode="vertical"
<div class="p-field p-col-12 p-md-3">
<label for="vertical">Vertical</label>
<InputNumber id="vertical" v-model="value19" mode="decimal" showButtons buttonLayout="vertical" spinnerMode="vertical"
decrementButtonClass="p-button-secondary" incrementButtonClass="p-button-secondary" incrementButtonIcon="pi pi-plus" decrementButtonIcon="pi pi-minus" />
</div>
<div class="p-col-12 p-md-3">
Min-Max Boundaries
<InputNumber v-model="value20" mode="decimal" showButtons :min="0" :max="100" />
<div class="p-field p-col-12 p-md-3">
<label for="minmax-buttons">Min-Max Boundaries</label>
<InputNumber id="minmax-buttons" v-model="value20" mode="decimal" showButtons :min="0" :max="100" />
</div>
</div>
</div>
@ -147,7 +147,7 @@ export default {
</script>
<style scoped>
.p-inputnumber {
margin-top: 1rem;
.layout-content .content-section.implementation > h3 {
font-weight: 600;
}
</style>

124
src/views/inputnumber/InputNumberDoc.vue
View File

@ -321,101 +321,101 @@ Vertical
<CodeHighlight>
<template v-pre>
&lt;h3&gt;Numerals&lt;/h3&gt;
&lt;div class="p-grid p-fluid"&gt;
&lt;div class="p-col-12 p-md-3"&gt;
Integer Only
&lt;InputNumber v-model="value1" /&gt;
&lt;div class="p-fluid p-grid p-formgrid"&gt;
&lt;div class="p-field p-col-12 p-md-3"&gt;
&lt;label for="integeronly"&gt;Integer Only&lt;/label&gt;
&lt;InputNumber id="integeronly" v-model="value1" /&gt;
&lt;/div&gt;
&lt;div class="p-col-12 p-md-3"&gt;
Without Grouping
&lt;InputNumber v-model="value2" mode="decimal" :useGrouping="false" /&gt;
&lt;div class="p-field p-col-12 p-md-3"&gt;
&lt;label for="withoutgrouping"&gt;Without Grouping&lt;/label&gt;
&lt;InputNumber id="withoutgrouping" v-model="value2" mode="decimal" :useGrouping="false" /&gt;
&lt;/div&gt;
&lt;div class="p-col-12 p-md-3"&gt;
Min-Max Fraction Digits
&lt;InputNumber v-model="value3" mode="decimal" :minFractionDigits="2" :maxFractionDigits="5" /&gt;
&lt;div class="p-field p-col-12 p-md-3"&gt;
&lt;label for="integeronly"&gt;Min-Max Fraction Digits&lt;/label&gt;
&lt;InputNumber id="integeronly" v-model="value3" mode="decimal" :minFractionDigits="2" :maxFractionDigits="5" /&gt;
&lt;/div&gt;
&lt;div class="p-col-12 p-md-3"&gt;
Min-Max Boundaries
&lt;InputNumber v-model="value4" mode="decimal" :min="0" :max="100" /&gt;
&lt;div class="p-field p-col-12 p-md-3"&gt;
&lt;label for="minmax"&gt;Min-Max Boundaries&lt;/label&gt;
&lt;InputNumber id="minmax" v-model="value4" mode="decimal" :min="0" :max="100" /&gt;
&lt;/div&gt;
&lt;div class="p-col-12 p-md-3"&gt;
User Locale
&lt;InputNumber v-model="value5" mode="decimal" :minFractionDigits="2" /&gt;
&lt;div class="p-field p-col-12 p-md-3"&gt;
&lt;label for="locale-user"&gt;User Locale&lt;/label&gt;
&lt;InputNumber id="locale-user" v-model="value5" mode="decimal" :minFractionDigits="2" /&gt;
&lt;/div&gt;
&lt;div class="p-col-12 p-md-3"&gt;
United State Locale
&lt;InputNumber v-model="value6" mode="decimal" locale="en-US" :minFractionDigits="2" /&gt;
&lt;div class="p-field p-col-12 p-md-3"&gt;
&lt;label for="locale-us"&gt;United States Locale&lt;/label&gt;
&lt;InputNumber id="locale-us" v-model="value6" mode="decimal" locale="en-US" :minFractionDigits="2" /&gt;
&lt;/div&gt;
&lt;div class="p-col-12 p-md-3"&gt;
German Locale
&lt;InputNumber v-model="value7" mode="decimal" locale="de-DE" :minFractionDigits="2"/&gt;
&lt;div class="p-field p-col-12 p-md-3"&gt;
&lt;label for="locale-german"&gt;German Locale&lt;/label&gt;
&lt;InputNumber id="locale-german" v-model="value7" mode="decimal" locale="de-DE" :minFractionDigits="2"/&gt;
&lt;/div&gt;
&lt;div class="p-col-12 p-md-3"&gt;
Indian Locale
&lt;InputNumber v-model="value8" mode="decimal" locale="en-IN" :minFractionDigits="2" /&gt;
&lt;div class="p-field p-col-12 p-md-3"&gt;
&lt;label for="locale-japan"&gt;Indian Locale&lt;/label&gt;
&lt;InputNumber id="locale-japan" v-model="value8" mode="decimal" locale="en-IN" :minFractionDigits="2" /&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;h3&gt;Currency&lt;/h3&gt;
&lt;div class="p-grid p-fluid"&gt;
&lt;div class="p-col-12 p-md-3"&gt;
United States
&lt;InputNumber v-model="value9" mode="currency" currency="USD" locale="en-US" /&gt;
&lt;div class="p-field p-col-12 p-md-3"&gt;
&lt;label for="currency-us"&gt;United States&lt;/label&gt;
&lt;InputNumber id="currency-us" v-model="value9" mode="currency" currency="USD" locale="en-US" /&gt;
&lt;/div&gt;
&lt;div class="p-col-12 p-md-3"&gt;
Germany
&lt;InputNumber v-model="value10" mode="currency" currency="EUR" locale="de-DE" /&gt;
&lt;div class="p-field p-col-12 p-md-3"&gt;
&lt;label for="currency-germany"&gt;Germany&lt;/label&gt;
&lt;InputNumber id="currency-germany" v-model="value10" mode="currency" currency="EUR" locale="de-DE" /&gt;
&lt;/div&gt;
&lt;div class="p-col-12 p-md-3"&gt;
India
&lt;InputNumber v-model="value11" mode="currency" currency="INR" currencyDisplay="code" locale="en-IN" /&gt;
&lt;div class="p-field p-col-12 p-md-3"&gt;
&lt;label for="currency-india"&gt;India&lt;/label&gt;
&lt;InputNumber id="currency-india" v-model="value11" mode="currency" currency="INR" currencyDisplay="code" locale="en-IN" /&gt;
&lt;/div&gt;
&lt;div class="p-col-12 p-md-3"&gt;
Japan
&lt;InputNumber v-model="value12" mode="currency" currency="JPY" locale="jp-JP" /&gt;
&lt;div class="p-field p-col-12 p-md-3"&gt;
&lt;label for="currency-japan"&gt;Japan&lt;/label&gt;
&lt;InputNumber id="currency-japan" v-model="value12" mode="currency" currency="JPY" locale="jp-JP" /&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;h3&gt;Prefix and Suffix&lt;/h3&gt;
&lt;div class="p-grid p-fluid"&gt;
&lt;div class="p-col-12 p-md-3"&gt;
Mile
&lt;InputNumber v-model="value13" suffix=" mi" /&gt;
&lt;div class="p-field p-col-12 p-md-3"&gt;
&lt;label for="mile"&gt;Mile&lt;/label&gt;
&lt;InputNumber id="mile" v-model="value13" suffix=" mi" /&gt;
&lt;/div&gt;
&lt;div class="p-col-12 p-md-3"&gt;
Percent
&lt;InputNumber v-model="value14" prefix="%" /&gt;
&lt;div class="p-field p-col-12 p-md-3"&gt;
&lt;label for="percent"&gt;Percent&lt;/label&gt;
&lt;InputNumber id="percent" v-model="value14" prefix="%" /&gt;
&lt;/div&gt;
&lt;div class="p-col-12 p-md-3"&gt;
Expiry
&lt;InputNumber v-model="value15" prefix="Expires in " suffix=" days" /&gt;
&lt;div class="p-field p-col-12 p-md-3"&gt;
&lt;label for="expiry"&gt;Expiry&lt;/label&gt;
&lt;InputNumber id="expiry" v-model="value15" prefix="Expires in " suffix=" days" /&gt;
&lt;/div&gt;
&lt;div class="p-col-12 p-md-3"&gt;
Temperature
&lt;InputNumber v-model="value16" prefix="&uarr; " suffix="℃" :min="0" :max="40" /&gt;
&lt;div class="p-field p-col-12 p-md-3"&gt;
&lt;label for="temperature"&gt;Temperature&lt;/label&gt;
&lt;InputNumber id="temperature" v-model="value16" prefix="&uarr; " suffix="℃" :min="0" :max="40" /&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;h3&gt;Buttons&lt;/h3&gt;
&lt;div class="p-grid p-fluid"&gt;
&lt;div class="p-col-12 p-md-3"&gt;
Stacked
&lt;InputNumber v-model="value17" showButtons mode="currency" currency="USD" /&gt;
&lt;div class="p-field p-col-12 p-md-3"&gt;
&lt;label for="stacked"&gt;Stacked&lt;/label&gt;
&lt;InputNumber id="stacked" v-model="value17" showButtons mode="currency" currency="USD" /&gt;
&lt;/div&gt;
&lt;div class="p-col-12 p-md-3"&gt;
Horizontal with Step
&lt;InputNumber v-model="value18" showButtons buttonLayout="horizontal" spinnerMode="horizontal" :step="0.25"
decrementButtonclass="p-button-danger" incrementButtonclass="p-button-success" incrementButtonIcon="pi pi-plus" decrementButtonIcon="pi pi-minus" mode="currency" currency="EUR" /&gt;
&lt;div class="p-field p-col-12 p-md-3"&gt;
&lt;label for="horizontal"&gt;Horizontal with Step&lt;/label&gt;
&lt;InputNumber id="horizontal" v-model="value18" showButtons buttonLayout="horizontal" spinnerMode="horizontal" :step="0.25"
decrementButtonClass="p-button-danger" incrementButtonClass="p-button-success" incrementButtonIcon="pi pi-plus" decrementButtonIcon="pi pi-minus" mode="currency" currency="EUR" /&gt;
&lt;/div&gt;
&lt;div class="p-col-12 p-md-3"&gt;
&lt;div&gt;Vertical&lt;/div&gt;
&lt;InputNumber v-model="value19" mode="decimal" showButtons buttonLayout="vertical" spinnerMode="vertical"
&lt;div class="p-field p-col-12 p-md-3"&gt;
&lt;label for="vertical"&gt;Vertical&lt;/label&gt;
&lt;InputNumber id="vertical" v-model="value19" mode="decimal" showButtons buttonLayout="vertical" spinnerMode="vertical"
decrementButtonClass="p-button-secondary" incrementButtonClass="p-button-secondary" incrementButtonIcon="pi pi-plus" decrementButtonIcon="pi pi-minus" /&gt;
&lt;/div&gt;
&lt;div class="p-col-12 p-md-3"&gt;
Min-Max Boundaries
&lt;InputNumber v-model="value20" mode="decimal" showButtons :min="0" :max="100" /&gt;
&lt;div class="p-field p-col-12 p-md-3"&gt;
&lt;label for="minmax-buttons"&gt;Min-Max Boundaries&lt;/label&gt;
&lt;InputNumber id="minmax-buttons" v-model="value20" mode="decimal" showButtons :min="0" :max="100" /&gt;
&lt;/div&gt;
&lt;/div&gt;
</template>

27
src/views/radiobutton/RadioButtonDemo.vue
View File

@ -8,34 +8,30 @@
</div>
<div class="content-section implementation">
<h3 class="first">Basic</h3>
<div class="p-grid">
<div class="p-col-12">
<h3>Basic</h3>
<div class="p-field-radiobutton">
<RadioButton id="city1" name="city" value="Chicago" v-model="city" />
<label for="city1">Chicago</label>
</div>
<div class="p-col-12">
<div class="p-field-radiobutton">
<RadioButton id="city2" name="city" value="Los Angeles" v-model="city" />
<label for="city2">Los Angeles</label>
</div>
<div class="p-col-12">
<div class="p-field-radiobutton">
<RadioButton id="city3" name="city" value="New York" v-model="city" />
<label for="city3">New York</label>
</div>
<div class="p-col-12">
<div class="p-field-radiobutton">
<RadioButton id="city4" name="city" value="San Francisco" v-model="city" />
<label for="city4">San Francisco</label>
</div>
</div>
<p>Selected City: <span style="font-weight: bold">{{this.city}}</span></p>
<h3>Dynamic Values, Preselection, Value Binding and Disabled Option</h3>
<div class="p-grid">
<div v-for="theme of themes" :key="theme.key" class="p-col-12">
<div v-for="theme of themes" :key="theme.key" class="p-field-radiobutton">
<RadioButton :id="theme.key" name="theme" :value="theme" v-model="selectedTheme" :disabled="theme.key === 'U'" />
<label :for="theme.key">{{theme.name}}</label>
</div>
</div>
<p>Selected Theme: <span style="font-weight: bold">{{this.selectedTheme}}</span></p>
</div>
@ -62,14 +58,3 @@ export default {
}
}
</script>
<style scoped>
.p-col-12 {
display: flex;
align-items: center;
}
label {
margin-left: .5rem;
}
</style>

24
src/views/radiobutton/RadioButtonDoc.vue
View File

@ -138,32 +138,28 @@ export default {
<CodeHighlight>
<template v-pre>
&lt;h3&gt;Basic&lt;/h3&gt;
&lt;div class="p-grid"&gt;
&lt;div class="p-col-12"&gt;
&lt;div class="p-field-radiobutton"&gt;
&lt;RadioButton id="city1" name="city" value="Chicago" v-model="city" /&gt;
&lt;label for="city1" class="p-radiobutton-label"&gt;Chicago&lt;/label&gt;
&lt;label for="city1"&gt;Chicago&lt;/label&gt;
&lt;/div&gt;
&lt;div class="p-col-12"&gt;
&lt;div class="p-field-radiobutton"&gt;
&lt;RadioButton id="city2" name="city" value="Los Angeles" v-model="city" /&gt;
&lt;label for="city2" class="p-radiobutton-label"&gt;Los Angeles&lt;/label&gt;
&lt;label for="city2"&gt;Los Angeles&lt;/label&gt;
&lt;/div&gt;
&lt;div class="p-col-12"&gt;
&lt;div class="p-field-radiobutton"&gt;
&lt;RadioButton id="city3" name="city" value="New York" v-model="city" /&gt;
&lt;label for="city3" class="p-radiobutton-label"&gt;New York&lt;/label&gt;
&lt;label for="city3"&gt;New York&lt;/label&gt;
&lt;/div&gt;
&lt;div class="p-col-12"&gt;
&lt;div class="p-field-radiobutton"&gt;
&lt;RadioButton id="city4" name="city" value="San Francisco" v-model="city" /&gt;
&lt;label for="city4" class="p-radiobutton-label"&gt;San Francisco&lt;/label&gt;
&lt;/div&gt;
&lt;label for="city4"&gt;San Francisco&lt;/label&gt;
&lt;/div&gt;
&lt;p&gt;Selected City: &lt;span style="font-weight: bold"&gt;{{this.city}}&lt;/span&gt;&lt;/p&gt;
&lt;h3&gt;Dynamic Values, Preselection, Value Binding and Disabled Option&lt;/h3&gt;
&lt;div class="p-grid"&gt;
&lt;div v-for="theme of themes" :key="theme.key" class="p-col-12"&gt;
&lt;div v-for="theme of themes" :key="theme.key" class="p-field-radiobutton"&gt;
&lt;RadioButton :id="theme.key" name="theme" :value="theme" v-model="selectedTheme" :disabled="theme.key === 'U'" /&gt;
&lt;label :for="theme.key" class="p-radiobutton-label"&gt;{{theme.name}}&lt;/label&gt;
&lt;/div&gt;
&lt;label :for="theme.key"&gt;{{theme.name}}&lt;/label&gt;
&lt;/div&gt;
&lt;p&gt;Selected Theme: &lt;span style="font-weight: bold"&gt;{{this.selectedTheme}}&lt;/span&gt;&lt;/p&gt;
</template>

4
src/views/togglebutton/ToggleButtonDemo.vue
View File

@ -10,11 +10,11 @@
<div class="content-section implementation">
<h3 class="first">Basic</h3>
<ToggleButton v-model="checked1" onIcon="pi pi-check" offIcon="pi pi-times" />
<p style="font-weight: bold">{{checked1}}</p>
<p>{{checked1}}</p>
<h3>Customized</h3>
<ToggleButton v-model="checked2" onLabel="I confirm" offLabel="I reject" onIcon="pi pi-check" offIcon="pi pi-times" style="width: 10em" />
<p style="font-weight: bold">{{checked2}}</p>
<p>{{checked2}}</p>
</div>
<ToggleButtonDoc/>

4
src/views/togglebutton/ToggleButtonDoc.vue
View File

@ -168,11 +168,11 @@ export default {
<template v-pre>
&lt;h3&gt;Basic&lt;/h3&gt;
&lt;ToggleButton v-model="checked1" onIcon="pi pi-check" offIcon="pi pi-times" /&gt;
&lt;p style="font-weight: bold"&gt;{{checked1}}&lt;/p&gt;
&lt;p&gt;{{checked1}}&lt;/p&gt;
&lt;h3&gt;Customized&lt;/h3&gt;
&lt;ToggleButton v-model="checked2" onLabel="I confirm" offLabel="I reject" onIcon="pi pi-check" offIcon="pi pi-times" style="width: 10em" /&gt;
&lt;p style="font-weight: bold"&gt;{{checked2}}&lt;/p&gt;
&lt;p&gt;{{checked2}}&lt;/p&gt;
</template>
</CodeHighlight>

17
src/views/tristatecheckbox/TriStateCheckboxDemo.vue
View File

@ -8,15 +8,12 @@
</div>
<div class="content-section implementation">
<div class="p-grid">
<div class="p-col-12">
<div class="p-field-checkbox">
<TriStateCheckbox v-model="value" />
<label>{{value == null ? 'null' : value}}</label>
</div>
</div>
</div>
<TriStateCheckboxDoc/>
</div>
</template>
@ -35,15 +32,3 @@ export default {
}
}
</script>
<style scoped>
.p-col-12 {
display: flex;
align-items: center;
}
label {
font-weight: bold;
margin-left: .5rem;
}
</style>

4
src/views/tristatecheckbox/TriStateCheckboxDoc.vue
View File

@ -123,8 +123,10 @@ import TriStateCheckbox from 'primevue/tristatecheckbox';
</a>
<CodeHighlight>
<template v-pre>
&lt;div class="p-field-checkbox"&gt;
&lt;TriStateCheckbox v-model="value" /&gt;
&lt;span &gt;{{value == null ? 'null' : value}}&lt;/span&gt;
&lt;label&gt;{{value == null ? 'null' : value}}&lt;/label&gt;
&lt;/div&gt;
</template>
</CodeHighlight>