docs update
parent
37ce8d1bdd
commit
f4728de319
|
@ -12,25 +12,25 @@
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<h5>Basic</h5>
|
<h5>Basic</h5>
|
||||||
<div class="field-radiobutton">
|
<div class="field-radiobutton">
|
||||||
<RadioButton id="city1" name="city" value="Chicago" v-model="city" />
|
<RadioButton inputId="city1" name="city" value="Chicago" v-model="city" />
|
||||||
<label for="city1">Chicago</label>
|
<label for="city1">Chicago</label>
|
||||||
</div>
|
</div>
|
||||||
<div class="field-radiobutton">
|
<div class="field-radiobutton">
|
||||||
<RadioButton id="city2" name="city" value="Los Angeles" v-model="city" />
|
<RadioButton inputId="city2" name="city" value="Los Angeles" v-model="city" />
|
||||||
<label for="city2">Los Angeles</label>
|
<label for="city2">Los Angeles</label>
|
||||||
</div>
|
</div>
|
||||||
<div class="field-radiobutton">
|
<div class="field-radiobutton">
|
||||||
<RadioButton id="city3" name="city" value="New York" v-model="city" />
|
<RadioButton inputId="city3" name="city" value="New York" v-model="city" />
|
||||||
<label for="city3">New York</label>
|
<label for="city3">New York</label>
|
||||||
</div>
|
</div>
|
||||||
<div class="field-radiobutton">
|
<div class="field-radiobutton">
|
||||||
<RadioButton id="city4" name="city" value="San Francisco" v-model="city" />
|
<RadioButton inputId="city4" name="city" value="San Francisco" v-model="city" />
|
||||||
<label for="city4">San Francisco</label>
|
<label for="city4">San Francisco</label>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h5>Dynamic Values, Preselection, Value Binding and Disabled Option</h5>
|
<h5>Dynamic Values, Preselection, Value Binding and Disabled Option</h5>
|
||||||
<div v-for="category of categories" :key="category.key" class="field-radiobutton">
|
<div v-for="category of categories" :key="category.key" class="field-radiobutton">
|
||||||
<RadioButton :id="category.key" name="category" :value="category.name" v-model="selectedCategory" :disabled="category.key === 'R'" />
|
<RadioButton :inputId="category.key" name="category" :value="category.name" v-model="selectedCategory" :disabled="category.key === 'R'" />
|
||||||
<label :for="category.key">{{category.name}}</label>
|
<label :for="category.key">{{category.name}}</label>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -143,7 +143,7 @@ export default {
|
||||||
|
|
||||||
<pre v-code><code>
|
<pre v-code><code>
|
||||||
<label for="rb1">One</label>
|
<label for="rb1">One</label>
|
||||||
<RadioButton id="rb1" />
|
<RadioButton inputId="rb1" />
|
||||||
|
|
||||||
<span id="rb2">Two</span>
|
<span id="rb2">Two</span>
|
||||||
<RadioButton aria-labelledby="rb2" />
|
<RadioButton aria-labelledby="rb2" />
|
||||||
|
@ -210,25 +210,25 @@ export default {
|
||||||
<div>
|
<div>
|
||||||
<h5>Basic</h5>
|
<h5>Basic</h5>
|
||||||
<div class="field-radiobutton">
|
<div class="field-radiobutton">
|
||||||
<RadioButton id="city1" name="city" value="Chicago" v-model="city" />
|
<RadioButton inputId="city1" name="city" value="Chicago" v-model="city" />
|
||||||
<label for="city1">Chicago</label>
|
<label for="city1">Chicago</label>
|
||||||
</div>
|
</div>
|
||||||
<div class="field-radiobutton">
|
<div class="field-radiobutton">
|
||||||
<RadioButton id="city2" name="city" value="Los Angeles" v-model="city" />
|
<RadioButton inputId="city2" name="city" value="Los Angeles" v-model="city" />
|
||||||
<label for="city2">Los Angeles</label>
|
<label for="city2">Los Angeles</label>
|
||||||
</div>
|
</div>
|
||||||
<div class="field-radiobutton">
|
<div class="field-radiobutton">
|
||||||
<RadioButton id="city3" name="city" value="New York" v-model="city" />
|
<RadioButton inputId="city3" name="city" value="New York" v-model="city" />
|
||||||
<label for="city3">New York</label>
|
<label for="city3">New York</label>
|
||||||
</div>
|
</div>
|
||||||
<div class="field-radiobutton">
|
<div class="field-radiobutton">
|
||||||
<RadioButton id="city4" name="city" value="San Francisco" v-model="city" />
|
<RadioButton inputId="city4" name="city" value="San Francisco" v-model="city" />
|
||||||
<label for="city4">San Francisco</label>
|
<label for="city4">San Francisco</label>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h5>Dynamic Values, Preselection, Value Binding and Disabled Option</h5>
|
<h5>Dynamic Values, Preselection, Value Binding and Disabled Option</h5>
|
||||||
<div v-for="category of categories" :key="category.key" class="field-radiobutton">
|
<div v-for="category of categories" :key="category.key" class="field-radiobutton">
|
||||||
<RadioButton :id="category.key" name="category" :value="category.name" v-model="selectedCategory" :disabled="category.key === 'R'" />
|
<RadioButton :inputId="category.key" name="category" :value="category.name" v-model="selectedCategory" :disabled="category.key === 'R'" />
|
||||||
<label :for="category.key">{{category.name}}</label>
|
<label :for="category.key">{{category.name}}</label>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -262,25 +262,25 @@ export default {
|
||||||
<div>
|
<div>
|
||||||
<h5>Basic</h5>
|
<h5>Basic</h5>
|
||||||
<div class="field-radiobutton">
|
<div class="field-radiobutton">
|
||||||
<RadioButton id="city1" name="city" value="Chicago" v-model="city" />
|
<RadioButton inputId="city1" name="city" value="Chicago" v-model="city" />
|
||||||
<label for="city1">Chicago</label>
|
<label for="city1">Chicago</label>
|
||||||
</div>
|
</div>
|
||||||
<div class="field-radiobutton">
|
<div class="field-radiobutton">
|
||||||
<RadioButton id="city2" name="city" value="Los Angeles" v-model="city" />
|
<RadioButton inputId="city2" name="city" value="Los Angeles" v-model="city" />
|
||||||
<label for="city2">Los Angeles</label>
|
<label for="city2">Los Angeles</label>
|
||||||
</div>
|
</div>
|
||||||
<div class="field-radiobutton">
|
<div class="field-radiobutton">
|
||||||
<RadioButton id="city3" name="city" value="New York" v-model="city" />
|
<RadioButton inputId="city3" name="city" value="New York" v-model="city" />
|
||||||
<label for="city3">New York</label>
|
<label for="city3">New York</label>
|
||||||
</div>
|
</div>
|
||||||
<div class="field-radiobutton">
|
<div class="field-radiobutton">
|
||||||
<RadioButton id="city4" name="city" value="San Francisco" v-model="city" />
|
<RadioButton inputId="city4" name="city" value="San Francisco" v-model="city" />
|
||||||
<label for="city4">San Francisco</label>
|
<label for="city4">San Francisco</label>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h5>Dynamic Values, Preselection, Value Binding and Disabled Option</h5>
|
<h5>Dynamic Values, Preselection, Value Binding and Disabled Option</h5>
|
||||||
<div v-for="category of categories" :key="category.key" class="field-radiobutton">
|
<div v-for="category of categories" :key="category.key" class="field-radiobutton">
|
||||||
<RadioButton :id="category.key" name="category" :value="category.name" v-model="selectedCategory" :disabled="category.key === 'R'" />
|
<RadioButton :inputId="category.key" name="category" :value="category.name" v-model="selectedCategory" :disabled="category.key === 'R'" />
|
||||||
<label :for="category.key">{{category.name}}</label>
|
<label :for="category.key">{{category.name}}</label>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -312,25 +312,25 @@ export default {
|
||||||
content: `<div id="app">
|
content: `<div id="app">
|
||||||
<h5>Basic</h5>
|
<h5>Basic</h5>
|
||||||
<div class="field-radiobutton">
|
<div class="field-radiobutton">
|
||||||
<p-radiobutton id="city1" name="city" value="Chicago" v-model="city"></p-radiobutton>
|
<p-radiobutton inputId="city1" name="city" value="Chicago" v-model="city"></p-radiobutton>
|
||||||
<label for="city1">Chicago</label>
|
<label for="city1">Chicago</label>
|
||||||
</div>
|
</div>
|
||||||
<div class="field-radiobutton">
|
<div class="field-radiobutton">
|
||||||
<p-radiobutton id="city2" name="city" value="Los Angeles" v-model="city"></p-radiobutton>
|
<p-radiobutton inputId="city2" name="city" value="Los Angeles" v-model="city"></p-radiobutton>
|
||||||
<label for="city2">Los Angeles</label>
|
<label for="city2">Los Angeles</label>
|
||||||
</div>
|
</div>
|
||||||
<div class="field-radiobutton">
|
<div class="field-radiobutton">
|
||||||
<p-radiobutton id="city3" name="city" value="New York" v-model="city"></p-radiobutton>
|
<p-radiobutton inputId="city3" name="city" value="New York" v-model="city"></p-radiobutton>
|
||||||
<label for="city3">New York</label>
|
<label for="city3">New York</label>
|
||||||
</div>
|
</div>
|
||||||
<div class="field-radiobutton">
|
<div class="field-radiobutton">
|
||||||
<p-radiobutton id="city4" name="city" value="San Francisco" v-model="city"></p-radiobutton>
|
<p-radiobutton inputId="city4" name="city" value="San Francisco" v-model="city"></p-radiobutton>
|
||||||
<label for="city4">San Francisco</label>
|
<label for="city4">San Francisco</label>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h5>Dynamic Values, Preselection, Value Binding and Disabled Option</h5>
|
<h5>Dynamic Values, Preselection, Value Binding and Disabled Option</h5>
|
||||||
<div v-for="category of categories" :key="category.key" class="field-radiobutton">
|
<div v-for="category of categories" :key="category.key" class="field-radiobutton">
|
||||||
<p-radiobutton :id="category.key" name="category" :value="category.name" v-model="selectedCategory" :disabled="category.key === 'R'"></p-radiobutton>
|
<p-radiobutton :inputId="category.key" name="category" :value="category.name" v-model="selectedCategory" :disabled="category.key === 'R'"></p-radiobutton>
|
||||||
<label :for="category.key">{{category.name}}</label>
|
<label :for="category.key">{{category.name}}</label>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
Loading…
Reference in New Issue