Demo update
parent
baa322b16e
commit
a05b0a5758
|
@ -9,25 +9,25 @@
|
|||
|
||||
<div class="content-section implementation">
|
||||
<h3 class="first">Basic</h3>
|
||||
<Checkbox id="binary" inputId="binary" v-model="checked" :binary="true" />
|
||||
<Checkbox id="binary" v-model="checked" :binary="true" />
|
||||
<label for="binary" class="p-checkbox-label" style="font-weight: bold">{{checked}}</label>
|
||||
|
||||
<h3>Multiple</h3>
|
||||
<div class="p-grid">
|
||||
<div class="p-col-12">
|
||||
<Checkbox id="city1" inputId="city1" name="city" value="Chicago" v-model="cities" />
|
||||
<Checkbox id="city1" name="city" value="Chicago" v-model="cities" />
|
||||
<label for="city1" class="p-checkbox-label">Chicago</label>
|
||||
</div>
|
||||
<div class="p-col-12">
|
||||
<Checkbox id="city2" inputId="city2" name="city" value="Los Angeles" v-model="cities" />
|
||||
<Checkbox id="city2" name="city" value="Los Angeles" v-model="cities" />
|
||||
<label for="city2" class="p-checkbox-label">Los Angeles</label>
|
||||
</div>
|
||||
<div class="p-col-12">
|
||||
<Checkbox id="city3" inputId="city3" name="city" value="New York" v-model="cities" />
|
||||
<Checkbox id="city3" name="city" value="New York" v-model="cities" />
|
||||
<label for="city3" class="p-checkbox-label">New York</label>
|
||||
</div>
|
||||
<div class="p-col-12">
|
||||
<Checkbox id="city4" inputId="city4" name="city" value="San Francisco" v-model="cities" />
|
||||
<Checkbox id="city4" name="city" value="San Francisco" v-model="cities" />
|
||||
<label for="city4" class="p-checkbox-label">San Francisco</label>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -36,7 +36,7 @@
|
|||
<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">
|
||||
<Checkbox :inputId="theme.key" name="theme" :value="theme" v-model="selectedThemes" :disabled="theme.key === 'U'"/>
|
||||
<Checkbox :id="theme.key" name="theme" :value="theme" v-model="selectedThemes" :disabled="theme.key === 'U'"/>
|
||||
<label :for="theme.key" class="p-checkbox-label">{{theme.name}}</label>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -156,25 +156,25 @@ export default {
|
|||
|
||||
<div class="content-section implementation">
|
||||
<h3 class="first">Basic</h3>
|
||||
<Checkbox id="binary" inputId="binary" v-model="checked" :binary="true"/>
|
||||
<Checkbox id="binary" v-model="checked" :binary="true"/>
|
||||
<label for="binary" class="p-checkbox-label" style="font-weight: bold">{{checked}}</label>
|
||||
|
||||
<h3>Multiple</h3>
|
||||
<div class="p-grid">
|
||||
<div class="p-col-12">
|
||||
<Checkbox id="city1" inputId="city1" name="city" value="Chicago" v-model="cities" />
|
||||
<Checkbox id="city1" name="city" value="Chicago" v-model="cities" />
|
||||
<label for="city1" class="p-checkbox-label">Chicago</label>
|
||||
</div>
|
||||
<div class="p-col-12">
|
||||
<Checkbox id="city2" inputId="city2" name="city" value="Los Angeles" v-model="cities" />
|
||||
<Checkbox id="city2" name="city" value="Los Angeles" v-model="cities" />
|
||||
<label for="city2" class="p-checkbox-label">Los Angeles</label>
|
||||
</div>
|
||||
<div class="p-col-12">
|
||||
<Checkbox id="city3" inputId="city3" name="city" value="New York" v-model="cities" />
|
||||
<Checkbox id="city3" name="city" value="New York" v-model="cities" />
|
||||
<label for="city3" class="p-checkbox-label">New York</label>
|
||||
</div>
|
||||
<div class="p-col-12">
|
||||
<Checkbox id="city4" inputId="city4" name="city" value="San Francisco" v-model="cities" />
|
||||
<Checkbox id="city4" name="city" value="San Francisco" v-model="cities" />
|
||||
<label for="city4" class="p-checkbox-label">San Francisco</label>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -183,7 +183,7 @@ export default {
|
|||
<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">
|
||||
<Checkbox :inputId="theme.key" name="theme" :value="theme" v-model="selectedThemes" :disabled="theme.key === 'U'"/>
|
||||
<Checkbox :id="theme.key" name="theme" :value="theme" v-model="selectedThemes" :disabled="theme.key === 'U'"/>
|
||||
<label :for="theme.key" class="p-checkbox-label">{{theme.name}}</label>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -11,19 +11,19 @@
|
|||
<h3 class="first">Basic</h3>
|
||||
<div class="p-grid">
|
||||
<div class="p-col-12">
|
||||
<RadioButton inputId="city1" name="city" value="Chicago" v-model="city" />
|
||||
<RadioButton id="city1" name="city" value="Chicago" v-model="city" />
|
||||
<label for="city1" class="p-radiobutton-label">Chicago</label>
|
||||
</div>
|
||||
<div class="p-col-12">
|
||||
<RadioButton inputId="city2" name="city" value="Los Angeles" v-model="city" />
|
||||
<RadioButton id="city2" name="city" value="Los Angeles" v-model="city" />
|
||||
<label for="city2" class="p-radiobutton-label">Los Angeles</label>
|
||||
</div>
|
||||
<div class="p-col-12">
|
||||
<RadioButton inputId="city3" name="city" value="New York" v-model="city" />
|
||||
<RadioButton id="city3" name="city" value="New York" v-model="city" />
|
||||
<label for="city3" class="p-radiobutton-label">New York</label>
|
||||
</div>
|
||||
<div class="p-col-12">
|
||||
<RadioButton inputId="city4" name="city" value="San Francisco" v-model="city" />
|
||||
<RadioButton id="city4" name="city" value="San Francisco" v-model="city" />
|
||||
<label for="city4" class="p-radiobutton-label">San Francisco</label>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -32,7 +32,7 @@
|
|||
<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">
|
||||
<RadioButton :inputId="theme.key" name="theme" :value="theme" v-model="selectedTheme" :disabled="theme.key === 'U'" />
|
||||
<RadioButton :id="theme.key" name="theme" :value="theme" v-model="selectedTheme" :disabled="theme.key === 'U'" />
|
||||
<label :for="theme.key" class="p-radiobutton-label">{{theme.name}}</label>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -150,19 +150,19 @@ export default {
|
|||
<h3 class="first">Basic</h3>
|
||||
<div class="p-grid">
|
||||
<div class="p-col-12">
|
||||
<RadioButton inputId="city1" name="city" value="Chicago" v-model="city" />
|
||||
<RadioButton id="city1" name="city" value="Chicago" v-model="city" />
|
||||
<label for="city1" class="p-radiobutton-label">Chicago</label>
|
||||
</div>
|
||||
<div class="p-col-12">
|
||||
<RadioButton inputId="city2" name="city" value="Los Angeles" v-model="city" />
|
||||
<RadioButton id="city2" name="city" value="Los Angeles" v-model="city" />
|
||||
<label for="city2" class="p-radiobutton-label">Los Angeles</label>
|
||||
</div>
|
||||
<div class="p-col-12">
|
||||
<RadioButton inputId="city3" name="city" value="New York" v-model="city" />
|
||||
<RadioButton id="city3" name="city" value="New York" v-model="city" />
|
||||
<label for="city3" class="p-radiobutton-label">New York</label>
|
||||
</div>
|
||||
<div class="p-col-12">
|
||||
<RadioButton inputId="city4" name="city" value="San Francisco" v-model="city" />
|
||||
<RadioButton id="city4" name="city" value="San Francisco" v-model="city" />
|
||||
<label for="city4" class="p-radiobutton-label">San Francisco</label>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -171,7 +171,7 @@ export default {
|
|||
<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">
|
||||
<RadioButton :inputId="theme.key" name="theme" :value="theme" v-model="selectedTheme" :disabled="theme.key === 'U'" />
|
||||
<RadioButton :id="theme.key" name="theme" :value="theme" v-model="selectedTheme" :disabled="theme.key === 'U'" />
|
||||
<label :for="theme.key" class="p-radiobutton-label">{{theme.name}}</label>
|
||||
</div>
|
||||
</div>
|
||||
|
|
Loading…
Reference in New Issue