Fixed #4924, Icons for SelectButton

primefaces · Jan 29, 2018 · d081a74 · d081a74
1 parent cc99e99
commit d081a74
Show file tree

Hide file tree

Showing 4 changed files with 79 additions and 15 deletions.
diff --git a/src/app/components/common/selectitem.ts b/src/app/components/common/selectitem.ts
@@ -1,5 +1,7 @@
 export interface SelectItem {
-    label: string;
+    label?: string;
     value: any;
     styleClass?: string;
+    icon?: string;
+    title?: string;
 }
diff --git a/src/app/components/selectbutton/selectbutton.ts b/src/app/components/selectbutton/selectbutton.ts
@@ -15,8 +15,10 @@ export const SELECTBUTTON_VALUE_ACCESSOR: any = {
     template: `
         <div [ngClass]="'ui-selectbutton ui-buttonset ui-widget ui-corner-all ui-buttonset-' + options.length" [ngStyle]="style" [class]="styleClass">
             <div *ngFor="let option of options; let i = index" class="ui-button ui-widget ui-state-default ui-button-text-only {{option.styleClass}}"
-                [ngClass]="{'ui-state-active':isSelected(option), 'ui-state-disabled':disabled, 'ui-state-focus': cbox == focusedItem}" (click)="onItemClick($event,option,cbox,i)">
-                <span class="ui-button-text ui-clickable">{{option.label}}</span>
+                [ngClass]="{'ui-state-active':isSelected(option), 'ui-state-disabled':disabled, 'ui-state-focus': cbox == focusedItem, 
+                'ui-button-text-icon-left': (option.icon != null), 'ui-button-icon-only': (option.icon && !option.label)}" (click)="onItemClick($event,option,cbox,i)" [attr.title]="option.title">
+                <span [ngClass]="['ui-clickable', 'ui-button-icon-left']" [class]="option.icon" *ngIf="option.icon"></span>
+                <span class="ui-button-text ui-clickable">{{option.label||'ui-btn'}}</span>
                 <div class="ui-helper-hidden-accessible">
                     <input #cbox type="checkbox" [checked]="isSelected(option)" (focus)="onFocus($event)" (blur)="onBlur($event)" [attr.tabindex]="tabindex" [attr.disabled]="disabled">
                 </div>

diff --git a/src/app/showcase/components/selectbutton/selectbuttondemo.html b/src/app/showcase/components/selectbutton/selectbuttondemo.html
@@ -15,6 +15,10 @@ <h3>Multiple</h3>
     <p-selectButton [options]="types" [(ngModel)]="selectedTypes" multiple="multiple"></p-selectButton>
     <p>Selected Types: <span *ngFor="let type of selectedTypes">{{type}} </span></p>
 
+    <h3>Icon Only</h3>
+    <p-selectButton [options]="modes" [(ngModel)]="selectedModes" multiple="multiple"></p-selectButton>
+    <p>Selected Modes: <span *ngFor="let mode of selectedModes">{{mode}} </span></p>
+
     <hr />
 
     <button type="button" (click)="clear()" pButton icon="fa-close" label="Clear"></button>
@@ -121,6 +125,33 @@ <h3>Model Driven Forms</h3>
 </code>
 </pre>
 
+            <h3>Icons</h3>
+            <p>Button options can display icons using the icon property of the SelectItem API.</p>
+<pre>
+<code class="language-markup" pCode ngNonBindable>
+&lt;p-selectButton [options]="selectedType" [(ngModel)]="types"&gt;&lt;/p-selectButton&gt;
+</code>
+</pre>
+
+<pre>
+<code class="language-typescript" pCode ngNonBindable>
+export class SelectButtonDemo &#123;
+
+    types: SelectItem[];
+
+    selectedType: string;
+
+    constructor() &#123;
+        this.types = [];
+        this.types.push(&#123;title: 'Paypal', value: 'PayPal', icon: 'fa fa-fw fa-cc-paypal'&#125;);
+        this.types.push(&#123;title: 'Visa', value: 'Visa', icon: 'fa fa-fw fa-cc-visa'&#125;);
+        this.types.push(&#123;title: 'MasterCard', value: 'MasterCard', icon: 'fa fa-fw fa-cc-mastercard'&#125;);
+    &#125;
+&#125;
+</code>
+</pre>
+
+
             <h3>Properties</h3>
             <div class="doc-tablewrapper">
                 <table class="doc-table">
@@ -223,11 +254,15 @@ <h3>Dependencies</h3>
 &lt;h3 class="first"&gt;Single&lt;/h3&gt;
 &lt;p-selectButton [options]="types" [(ngModel)]="selectedType"&gt;&lt;/p-selectButton&gt;
 
-&lt;p&gt;Selected Type: {{selectedType}}&lt;/p&gt;
+&lt;p&gt;Selected Type: &#123;&#123;selectedType&#125;&#125;&lt;/p&gt;
 
 &lt;h3&gt;Multiple&lt;/h3&gt;
 &lt;p-selectButton [options]="types" [(ngModel)]="selectedTypes" multiple="multiple"&gt;&lt;/p-selectButton&gt;
-&lt;p&gt;Selected Types: &lt;span *ngFor="let type of selectedTypes"&gt;{{type}} &lt;/span&gt;&lt;/p&gt;
+&lt;p&gt;Selected Types: &lt;span *ngFor="let type of selectedTypes"&gt;&#123;&#123;type&#125;&#125; &lt;/span&gt;&lt;/p&gt;
+
+&lt;h3&gt;Icon Only&lt;/h3&gt;
+&lt;p-selectButton [options]="modes" [(ngModel)]="selectedMode" multiple="multiple"&gt;&lt;/p-selectButton&gt;
+&lt;p&gt;Selected Modes: &lt;span *ngFor="let mode of selectedMode"&gt;&#123;&#123;mode&#125;&#125; &lt;/span&gt;&lt;/p&gt;
 
 &lt;hr /&gt;
 
@@ -243,19 +278,32 @@ <h3>Dependencies</h3>
 
     selectedType: string;
 
-    selectedTypes: string[] = ['Apartment','Studio'];
+    selectedTypes: string[] = ['PayPal','MasterCard'];
+
+    selectedModes: string[];
+
+    modes: SelectItem[];
 
     constructor() &#123;
-        this.types = [];
-        this.types.push(&#123;label: 'Apartment', value: 'Apartment'&#125;);
-        this.types.push(&#123;label: 'House', value: 'House'&#125;);
-        this.types.push(&#123;label: 'Studio', value: 'Studio'&#125;);
+        this.types = [
+            &#123;label: 'Paypal', value: 'PayPal', icon: 'fa fa-fw fa-cc-paypal'&#125;,
+            &#123;label: 'Visa', value: 'Visa', icon: 'fa fa-fw fa-cc-visa'&#125;,
+            &#123;label: 'MasterCard', value: 'MasterCard', icon: 'fa fa-fw fa-cc-mastercard'&#125;
+        ];
+
+        this.modes = [
+            &#123;value: 'Bold', title: 'Bold', icon: 'fa fa-fw fa-bold'&#125;,
+            &#123;value: 'Italic', title: 'Italic', icon: 'fa fa-fw fa-italic'&#125;,
+            &#123;value: 'Underline', title: 'Underline', icon: 'fa fa-fw fa-underline'&#125;
+        ];
     &#125;
 
     clear() &#123;
         this.selectedType = null;
         this.selectedTypes = [];
+        this.selectedModes = [];
     &#125;
+
 &#125;
 </code>
 </pre>

diff --git a/src/app/showcase/components/selectbutton/selectbuttondemo.ts b/src/app/showcase/components/selectbutton/selectbuttondemo.ts
@@ -10,17 +10,29 @@ export class SelectButtonDemo {
 
     selectedType: string;
 
-    selectedTypes: string[] = ['Apartment','Studio'];
+    selectedTypes: string[] = ['PayPal','MasterCard'];
+
+    selectedModes: string[];
+
+    modes: SelectItem[];
 
     constructor() {
-        this.types = [];
-        this.types.push({label: 'Apartment', value: 'Apartment'});
-        this.types.push({label: 'House', value: 'House'});
-        this.types.push({label: 'Studio', value: 'Studio'});
+        this.types = [
+            {label: 'Paypal', value: 'PayPal', icon: 'fa fa-fw fa-cc-paypal'},
+            {label: 'Visa', value: 'Visa', icon: 'fa fa-fw fa-cc-visa'},
+            {label: 'MasterCard', value: 'MasterCard', icon: 'fa fa-fw fa-cc-mastercard'}
+        ];
+
+        this.modes = [
+            {value: 'Bold', title: 'Bold', icon: 'fa fa-fw fa-bold'},
+            {value: 'Italic', title: 'Italic', icon: 'fa fa-fw fa-italic'},
+            {value: 'Underline', title: 'Underline', icon: 'fa fa-fw fa-underline'}
+        ];
     }
 
     clear() {
         this.selectedType = null;
         this.selectedTypes = [];
+        this.selectedModes = [];
     }
 }