docs(splitbutton): update docs.

TemainfoSoftware · Aug 27, 2019 · e68e142 · e68e142
1 parent 0b1781b
commit e68e142
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 17 deletions.
diff --git a/src/app/components/splitbutton/splitbuttondemo-dataproperties.json.ts b/src/app/components/splitbutton/splitbuttondemo-dataproperties.json.ts
@@ -72,10 +72,10 @@ export const dataProperties2 = [
     options: 'ion-printer | fa fa-home | any'
   },
   {
-    name: 'separator',
+    name: 'disabled',
     type: 'boolean',
     default: 'false',
-    description: 'Creates a separator below action label if set to true.',
+    description: 'Disables the button if set to true.',
     options: 'true | false'
-  }
+  },
 ];
diff --git a/src/app/components/splitbutton/splitbuttondemo.component.html b/src/app/components/splitbutton/splitbuttondemo.component.html
@@ -8,14 +8,14 @@
             <app-card>
               <div class="col-md-6">
                 <h6>Basic</h6>
-                <tl-split-button [text]="'Button'" (buttonClick)="onButtonClick($event)">
+                <tl-split-button [text]="'Button'" (click)="onButtonClick($event)">
                   <tl-split-button-action [label]="'Action 1'"></tl-split-button-action>
                   <tl-split-button-action [label]="'Action 2'"></tl-split-button-action>
                   <tl-split-button-action [label]="'Action 3'"></tl-split-button-action>
                 </tl-split-button>
                 <div class="spacer"></div>
 <textarea highlight-js [options]="{'tabReplace': ''}" [lang]="'html'">
-<tl-split-button [text]="'Button'" (buttonClick)="onButtonClick($event)">
+<tl-split-button [text]="'Button'" (click)="onButtonClick($event)">
   <tl-split-button-action [label]="'Action 1'"></tl-split-button-action>
   <tl-split-button-action [label]="'Action 2'"></tl-split-button-action>
   <tl-split-button-action [label]="'Action 3'"></tl-split-button-action>
@@ -41,20 +41,18 @@ <h6>With Action Icons</h6>
             </app-card>
             <app-card>
               <div class="col-md-6">
-                <h6>With Action Separator</h6>
-                <tl-split-button [text]="'Button'">
-                  <tl-split-button-action [label]="'Action 1'" [separator]="true"></tl-split-button-action>
-                  <tl-split-button-action [label]="'Action 2'"></tl-split-button-action>
-                  <tl-split-button-action [label]="'Action 3'" [separator]="true"></tl-split-button-action>
-                  <tl-split-button-action [label]="'Action 4'"></tl-split-button-action>
+                <h6>Disabled</h6>
+                <tl-split-button [disabled]="true" [text]="'Button'">
+                  <tl-split-button-action [disabled]="true" [label]="'Action 1'"></tl-split-button-action>
+                  <tl-split-button-action [disabled]="true" [label]="'Action 2'"></tl-split-button-action>
+                  <tl-split-button-action [disabled]="true" [label]="'Action 3'"></tl-split-button-action>
                 </tl-split-button>
                 <div class="spacer"></div>
 <textarea highlight-js [options]="{'tabReplace': ''}" [lang]="'html'">
-<tl-split-button [text]="'Button'">
-  <tl-split-button-action [label]="'Action 1'" [separator]="true"></tl-split-button-action>
-  <tl-split-button-action [label]="'Action 2'"></tl-split-button-action>
-  <tl-split-button-action [label]="'Action 3'" [separator]="true"></tl-split-button-action>
-  <tl-split-button-action [label]="'Action 4'"></tl-split-button-action>
+<tl-split-button [disabled]="true" [text]="'Button'">
+  <tl-split-button-action [disabled]="true" [label]="'Action 1'"></tl-split-button-action>
+  <tl-split-button-action [disabled]="true" [label]="'Action 2'"></tl-split-button-action>
+  <tl-split-button-action [disabled]="true" [label]="'Action 3'"></tl-split-button-action>
 </tl-split-button>
 </textarea>
               </div>
@@ -72,10 +70,25 @@ <h6>With Click Event</h6>
   <tl-split-button-action [label]="'Action 2'" (click)="callBackDemo($event)"></tl-split-button-action>
   <tl-split-button-action [label]="'Action 3'" (click)="callBackDemo($event)"></tl-split-button-action>
 </tl-split-button>
+</textarea>
+              </div>
+              <div class="col-md-6">
+                <h6>Color</h6>
+                <tl-split-button [text]="'Button'" [color]="'primary'">
+                  <tl-split-button-action [label]="'Action 1'"></tl-split-button-action>
+                  <tl-split-button-action [label]="'Action 2'"></tl-split-button-action>
+                  <tl-split-button-action [label]="'Action 3'"></tl-split-button-action>
+                </tl-split-button>
+                <div class="spacer"></div>
+                <textarea highlight-js [options]="{'tabReplace': ''}" [lang]="'html'">
+<tl-split-button [text]="'Button'" [color]="'primary'">
+  <tl-split-button-action [label]="'Action 1'"></tl-split-button-action>
+  <tl-split-button-action [label]="'Action 2'"></tl-split-button-action>
+  <tl-split-button-action [label]="'Action 3'"></tl-split-button-action>
+</tl-split-button>
 </textarea>
               </div>
             </app-card>
-
           </app-showcase-card>
         </div>
       </div>