Demo update

pull/12/head
cagataycivici 2019-05-22 19:29:30 +03:00
parent baa322b16e
commit a05b0a5758
4 changed files with 22 additions and 22 deletions

View File

@ -9,25 +9,25 @@
<div class="content-section implementation"> <div class="content-section implementation">
<h3 class="first">Basic</h3> <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> <label for="binary" class="p-checkbox-label" style="font-weight: bold">{{checked}}</label>
<h3>Multiple</h3> <h3>Multiple</h3>
<div class="p-grid"> <div class="p-grid">
<div class="p-col-12"> <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> <label for="city1" class="p-checkbox-label">Chicago</label>
</div> </div>
<div class="p-col-12"> <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> <label for="city2" class="p-checkbox-label">Los Angeles</label>
</div> </div>
<div class="p-col-12"> <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> <label for="city3" class="p-checkbox-label">New York</label>
</div> </div>
<div class="p-col-12"> <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> <label for="city4" class="p-checkbox-label">San Francisco</label>
</div> </div>
</div> </div>
@ -36,7 +36,7 @@
<h3>Dynamic Values, Preselection, Value Binding and Disabled Option</h3> <h3>Dynamic Values, Preselection, Value Binding and Disabled Option</h3>
<div class="p-grid"> <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-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> <label :for="theme.key" class="p-checkbox-label">{{theme.name}}</label>
</div> </div>
</div> </div>

View File

@ -156,25 +156,25 @@ export default {
&lt;div class=&quot;content-section implementation&quot;&gt; &lt;div class=&quot;content-section implementation&quot;&gt;
&lt;h3 class=&quot;first&quot;&gt;Basic&lt;/h3&gt; &lt;h3 class=&quot;first&quot;&gt;Basic&lt;/h3&gt;
&lt;Checkbox id=&quot;binary&quot; inputId=&quot;binary&quot; v-model=&quot;checked&quot; :binary="true"/&gt; &lt;Checkbox id=&quot;binary&quot; v-model=&quot;checked&quot; :binary="true"/&gt;
&lt;label for=&quot;binary&quot; class=&quot;p-checkbox-label&quot; style=&quot;font-weight: bold&quot;&gt;{{checked}}&lt;/label&gt; &lt;label for=&quot;binary&quot; class=&quot;p-checkbox-label&quot; style=&quot;font-weight: bold&quot;&gt;{{checked}}&lt;/label&gt;
&lt;h3&gt;Multiple&lt;/h3&gt; &lt;h3&gt;Multiple&lt;/h3&gt;
&lt;div class=&quot;p-grid&quot;&gt; &lt;div class=&quot;p-grid&quot;&gt;
&lt;div class=&quot;p-col-12&quot;&gt; &lt;div class=&quot;p-col-12&quot;&gt;
&lt;Checkbox id=&quot;city1&quot; inputId=&quot;city1&quot; name=&quot;city&quot; value=&quot;Chicago&quot; v-model=&quot;cities&quot; /&gt; &lt;Checkbox id=&quot;city1&quot; name=&quot;city&quot; value=&quot;Chicago&quot; v-model=&quot;cities&quot; /&gt;
&lt;label for=&quot;city1&quot; class=&quot;p-checkbox-label&quot;&gt;Chicago&lt;/label&gt; &lt;label for=&quot;city1&quot; class=&quot;p-checkbox-label&quot;&gt;Chicago&lt;/label&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;div class=&quot;p-col-12&quot;&gt; &lt;div class=&quot;p-col-12&quot;&gt;
&lt;Checkbox id=&quot;city2&quot; inputId=&quot;city2&quot; name=&quot;city&quot; value=&quot;Los Angeles&quot; v-model=&quot;cities&quot; /&gt; &lt;Checkbox id=&quot;city2&quot; name=&quot;city&quot; value=&quot;Los Angeles&quot; v-model=&quot;cities&quot; /&gt;
&lt;label for=&quot;city2&quot; class=&quot;p-checkbox-label&quot;&gt;Los Angeles&lt;/label&gt; &lt;label for=&quot;city2&quot; class=&quot;p-checkbox-label&quot;&gt;Los Angeles&lt;/label&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;div class=&quot;p-col-12&quot;&gt; &lt;div class=&quot;p-col-12&quot;&gt;
&lt;Checkbox id=&quot;city3&quot; inputId=&quot;city3&quot; name=&quot;city&quot; value=&quot;New York&quot; v-model=&quot;cities&quot; /&gt; &lt;Checkbox id=&quot;city3&quot; name=&quot;city&quot; value=&quot;New York&quot; v-model=&quot;cities&quot; /&gt;
&lt;label for=&quot;city3&quot; class=&quot;p-checkbox-label&quot;&gt;New York&lt;/label&gt; &lt;label for=&quot;city3&quot; class=&quot;p-checkbox-label&quot;&gt;New York&lt;/label&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;div class=&quot;p-col-12&quot;&gt; &lt;div class=&quot;p-col-12&quot;&gt;
&lt;Checkbox id=&quot;city4&quot; inputId=&quot;city4&quot; name=&quot;city&quot; value=&quot;San Francisco&quot; v-model=&quot;cities&quot; /&gt; &lt;Checkbox id=&quot;city4&quot; name=&quot;city&quot; value=&quot;San Francisco&quot; v-model=&quot;cities&quot; /&gt;
&lt;label for=&quot;city4&quot; class=&quot;p-checkbox-label&quot;&gt;San Francisco&lt;/label&gt; &lt;label for=&quot;city4&quot; class=&quot;p-checkbox-label&quot;&gt;San Francisco&lt;/label&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
@ -183,7 +183,7 @@ export default {
&lt;h3&gt;Dynamic Values, Preselection, Value Binding and Disabled Option&lt;/h3&gt; &lt;h3&gt;Dynamic Values, Preselection, Value Binding and Disabled Option&lt;/h3&gt;
&lt;div class=&quot;p-grid&quot;&gt; &lt;div class=&quot;p-grid&quot;&gt;
&lt;div v-for=&quot;theme of themes&quot; :key=&quot;theme.key&quot; class=&quot;p-col-12&quot;&gt; &lt;div v-for=&quot;theme of themes&quot; :key=&quot;theme.key&quot; class=&quot;p-col-12&quot;&gt;
&lt;Checkbox :inputId=&quot;theme.key&quot; name=&quot;theme&quot; :value=&quot;theme&quot; v-model=&quot;selectedThemes&quot; :disabled=&quot;theme.key === 'U'&quot;/&gt; &lt;Checkbox :id=&quot;theme.key&quot; name=&quot;theme&quot; :value=&quot;theme&quot; v-model=&quot;selectedThemes&quot; :disabled=&quot;theme.key === 'U'&quot;/&gt;
&lt;label :for=&quot;theme.key&quot; class=&quot;p-checkbox-label&quot;&gt;{{theme.name}}&lt;/label&gt; &lt;label :for=&quot;theme.key&quot; class=&quot;p-checkbox-label&quot;&gt;{{theme.name}}&lt;/label&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;

View File

@ -11,19 +11,19 @@
<h3 class="first">Basic</h3> <h3 class="first">Basic</h3>
<div class="p-grid"> <div class="p-grid">
<div class="p-col-12"> <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> <label for="city1" class="p-radiobutton-label">Chicago</label>
</div> </div>
<div class="p-col-12"> <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> <label for="city2" class="p-radiobutton-label">Los Angeles</label>
</div> </div>
<div class="p-col-12"> <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> <label for="city3" class="p-radiobutton-label">New York</label>
</div> </div>
<div class="p-col-12"> <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> <label for="city4" class="p-radiobutton-label">San Francisco</label>
</div> </div>
</div> </div>
@ -32,7 +32,7 @@
<h3>Dynamic Values, Preselection, Value Binding and Disabled Option</h3> <h3>Dynamic Values, Preselection, Value Binding and Disabled Option</h3>
<div class="p-grid"> <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-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> <label :for="theme.key" class="p-radiobutton-label">{{theme.name}}</label>
</div> </div>
</div> </div>

View File

@ -150,19 +150,19 @@ export default {
&lt;h3 class=&quot;first&quot;&gt;Basic&lt;/h3&gt; &lt;h3 class=&quot;first&quot;&gt;Basic&lt;/h3&gt;
&lt;div class=&quot;p-grid&quot;&gt; &lt;div class=&quot;p-grid&quot;&gt;
&lt;div class=&quot;p-col-12&quot;&gt; &lt;div class=&quot;p-col-12&quot;&gt;
&lt;RadioButton inputId=&quot;city1&quot; name=&quot;city&quot; value=&quot;Chicago&quot; v-model=&quot;city&quot; /&gt; &lt;RadioButton id=&quot;city1&quot; name=&quot;city&quot; value=&quot;Chicago&quot; v-model=&quot;city&quot; /&gt;
&lt;label for=&quot;city1&quot; class=&quot;p-radiobutton-label&quot;&gt;Chicago&lt;/label&gt; &lt;label for=&quot;city1&quot; class=&quot;p-radiobutton-label&quot;&gt;Chicago&lt;/label&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;div class=&quot;p-col-12&quot;&gt; &lt;div class=&quot;p-col-12&quot;&gt;
&lt;RadioButton inputId=&quot;city2&quot; name=&quot;city&quot; value=&quot;Los Angeles&quot; v-model=&quot;city&quot; /&gt; &lt;RadioButton id=&quot;city2&quot; name=&quot;city&quot; value=&quot;Los Angeles&quot; v-model=&quot;city&quot; /&gt;
&lt;label for=&quot;city2&quot; class=&quot;p-radiobutton-label&quot;&gt;Los Angeles&lt;/label&gt; &lt;label for=&quot;city2&quot; class=&quot;p-radiobutton-label&quot;&gt;Los Angeles&lt;/label&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;div class=&quot;p-col-12&quot;&gt; &lt;div class=&quot;p-col-12&quot;&gt;
&lt;RadioButton inputId=&quot;city3&quot; name=&quot;city&quot; value=&quot;New York&quot; v-model=&quot;city&quot; /&gt; &lt;RadioButton id=&quot;city3&quot; name=&quot;city&quot; value=&quot;New York&quot; v-model=&quot;city&quot; /&gt;
&lt;label for=&quot;city3&quot; class=&quot;p-radiobutton-label&quot;&gt;New York&lt;/label&gt; &lt;label for=&quot;city3&quot; class=&quot;p-radiobutton-label&quot;&gt;New York&lt;/label&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;div class=&quot;p-col-12&quot;&gt; &lt;div class=&quot;p-col-12&quot;&gt;
&lt;RadioButton inputId=&quot;city4&quot; name=&quot;city&quot; value=&quot;San Francisco&quot; v-model=&quot;city&quot; /&gt; &lt;RadioButton id=&quot;city4&quot; name=&quot;city&quot; value=&quot;San Francisco&quot; v-model=&quot;city&quot; /&gt;
&lt;label for=&quot;city4&quot; class=&quot;p-radiobutton-label&quot;&gt;San Francisco&lt;/label&gt; &lt;label for=&quot;city4&quot; class=&quot;p-radiobutton-label&quot;&gt;San Francisco&lt;/label&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
@ -171,7 +171,7 @@ export default {
&lt;h3&gt;Dynamic Values, Preselection, Value Binding and Disabled Option&lt;/h3&gt; &lt;h3&gt;Dynamic Values, Preselection, Value Binding and Disabled Option&lt;/h3&gt;
&lt;div class=&quot;p-grid&quot;&gt; &lt;div class=&quot;p-grid&quot;&gt;
&lt;div v-for=&quot;theme of themes&quot; :key=&quot;theme.key&quot; class=&quot;p-col-12&quot;&gt; &lt;div v-for=&quot;theme of themes&quot; :key=&quot;theme.key&quot; class=&quot;p-col-12&quot;&gt;
&lt;RadioButton :inputId=&quot;theme.key&quot; name=&quot;theme&quot; :value=&quot;theme&quot; v-model=&quot;selectedTheme&quot; :disabled=&quot;theme.key === 'U'&quot; /&gt; &lt;RadioButton :id=&quot;theme.key&quot; name=&quot;theme&quot; :value=&quot;theme&quot; v-model=&quot;selectedTheme&quot; :disabled=&quot;theme.key === 'U'&quot; /&gt;
&lt;label :for=&quot;theme.key&quot; class=&quot;p-radiobutton-label&quot;&gt;{{theme.name}}&lt;/label&gt; &lt;label :for=&quot;theme.key&quot; class=&quot;p-radiobutton-label&quot;&gt;{{theme.name}}&lt;/label&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;