Demo updated on displaying selected values

src/views/checkbox/CheckboxDemo.vue

@@ -10,7 +10,7 @@
         <div class="content-section implementation">
             <h3 class="first">Basic</h3>
             <p-checkbox inputId="binary" v-model="checked" />
-            <label for="binary" class="p-checkbox-label">{{checked}}</label>
+            <label for="binary" class="p-checkbox-label" style="font-weight: bold">{{checked}}</label>
 
             <h3>Multiple</h3>
             <div class="p-grid">
@@ -31,7 +31,7 @@
                     <label for="city4" class="p-checkbox-label">San Francisco</label>
                 </div>
             </div>
-            Selected Cities : {{cities}}
+            <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">
@@ -40,7 +40,7 @@
                     <label :for="theme.key" class="p-checkbox-label">{{theme.name}}</label>
                 </div>
             </div>
-            Selected Themes : {{this.selectedThemes}}
+            <p>Selected Themes: <span style="font-weight: bold">{{this.selectedThemes}}</span></p>
         </div>
     </div>
 </template>

src/views/radiobutton/RadioButtonDemo.vue

@@ -27,7 +27,7 @@
                     <label for="city4" class="p-radiobutton-label">San Francisco</label>
                 </div>
             </div>
-            Selected City : {{this.city}}
+            <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">
@@ -36,7 +36,7 @@
                     <label :for="theme.key" class="p-radiobutton-label">{{theme.name}}</label>
                 </div>
             </div>
-            Selected Theme : {{this.selectedTheme}}
+           <p>Selected Theme: <span style="font-weight: bold">{{this.selectedTheme}}</span></p>
         </div>
     </div>
 </template>

src/views/selectbutton/SelectButtonDemo.vue

@@ -10,11 +10,11 @@
         <div class="content-section implementation">
             <h3 class="first">Single</h3>
             <p-selectButton v-model="selectedCity" :options="cities" optionLabel="name" />
-            <p>Selected City: {{selectedCity}}</p>
+            <p>Selected City: <span style="font-weight: bold">{{selectedCity}}</span></p>
 
             <h3>Multiple</h3>
             <p-selectButton v-model="selectedCars" :options="cars" optionLabel="brand" :multiple="true" />
-            <p>Selected Cars: {{selectedCars}}</p>
+            <p>Selected Cars: <span style="font-weight: bold">{{selectedCars}}</span></p>
 
             <h3>Custom Content</h3>
             <p-selectButton v-model="selectedCar" :options="cars" optionLabel="brand">
@@ -25,7 +25,7 @@
                     </div>
                 </template>
             </p-selectButton>
-            <p>Selected Car: {{selectedCar}}</p>
+            <p>Selected Car: <span style="font-weight: bold">{{selectedCar}}</span></p>
         </div>
     </div>
 </template>

src/views/togglebutton/ToggleButtonDemo.vue

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