feat(tailwind-styles):add tailwind styling samples

Author: didimmova

src/app/data-display/data-display-routes-data.ts

@@ -18,6 +18,7 @@ export const dataDisplayRoutesData = {
     "icon-sample-1": { displayName: "Simple Icons", parentName: "Icon" },
     "icon-service": { displayName: "Icon Service", parentName: "Icon" },
     "icon-styling": { displayName: "Icon Styling", parentName: "Icon" },
+    "icon-tailwind-styling": { displayName: "Icon Tailwind Styling", parentName: "Icon" },
     "svg-icon-sample": { displayName: "SVG Icons", parentName: "Icon" },
     "material-symbols": { displayName: "Material Symbols", parentName: "Icon" },
     "material-icons-extended": { displayName: "Material Icons Extended", parentName: "Icon" },

src/app/data-display/data-display.routes.ts

@@ -18,6 +18,7 @@ import { IconSample3Component } from './icon/icon-sample-3/icon-sample-3.compone
 import { IconSample4Component } from './icon/icon-sample-4/icon-sample-4.component';
 import { IconSample5Component } from './icon/icon-sample-5/icon-sample-5.component';
 import { IconStylingSampleComponent } from './icon/icon-styling-sample/icon-styling-sample.component';
+import { IconTailwindStylingSampleComponent } from './icon/icon-tailwind-styling-sample/icon-tailwind-styling-sample.component';
 import { IconServiceSampleComponent } from './icon/icon-service-sample/icon-service-sample.component';
 import { SvgIconSampleComponent } from './icon/svg-icon-sample/svg-icon-sample.component';
 import { IgxForComponent } from './igxFor/igxFor.component';
@@ -215,6 +216,11 @@ export const DataDisplayRoutes: Routes = [
         data: dataDisplayRoutesData['icon-styling'],
         path: 'icon-styling'
     },
+    {
+        component: IconTailwindStylingSampleComponent,
+        data: dataDisplayRoutesData['icon-tailwind-styling'],
+        path: 'icon-tailwind-styling'
+    },
     {
         component: ChipStylingSampleComponent,
         data: dataDisplayRoutesData['chip-styling'],

src/app/data-display/icon/icon-tailwind-styling-sample/icon-tailwind-styling-sample.component.html

@@ -0,0 +1 @@
+<igx-icon class="!material-icon-color-[#7B9E89] ![--size:48px]">person</igx-icon>

src/app/data-display/icon/icon-tailwind-styling-sample/icon-tailwind-styling-sample.component.scss

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+import { IgxIconComponent } from 'igniteui-angular';
+
+@Component({
+    selector: 'app-icon-tailwind-styling-sample',
+    styleUrls: ['./icon-tailwind-styling-sample.component.scss'],
+    templateUrl: './icon-tailwind-styling-sample.component.html',
+    imports: [IgxIconComponent]
+})
+export class IconTailwindStylingSampleComponent { }

src/app/data-display/icon/icon-tailwind-styling-sample/icon-tailwind-styling-sample.component.ts

@@ -48,28 +48,33 @@ export const dataEntriesRoutesData = {
     "svg-icon-button": { displayName: "SVG Icon Button", parentName: "Icon Buttons" },
     "icon-button-size": { displayName: "Icon Button Size", parentName: "Icon Buttons" },
     "icon-button-styling": { displayName: "Icon Button Styling", parentName: "Icon Buttons" },
+    "icon-button-tailwind-styling": { displayName: "Icon Button Tailwind Styling", parentName: "Icon Buttons" },
     "input-group-sample-1": { displayName: "Simple Input Group", parentName: "Input Group" },
     "input-group-sample-2": { displayName: "Input Required", parentName: "Input Group" },
     "input-group-sample-3": { displayName: "Input Group Prefix and Sufix", parentName: "Input Group" },
     "input-group-sample-4": { displayName: "Input Group Hint", parentName: "Input Group" },
     "input-group-sample-5": { displayName: "Input Group Types", parentName: "Input Group" },
     "input-group-sample-6": { displayName: "Input Group Full Form", parentName: "Input Group" },
     "input-group-style": { displayName: "Input Group Style", parentName: "Input Group" },
+    "input-group-tailwind-style": { displayName: "Input Group Tailwind Style", parentName: "Input Group" },
     "reactive-forms": { displayName: "Reactive Forms Overview", parentName: "Angular Reactive Forms" },
     "radio-sample-1": { displayName: "Simple Radio Buttons", parentName: "Radio" },
     "radio-sample-2": { displayName: "Radio Button Binding", parentName: "Radio" },
     "radio-sample-3": { displayName: "Radio Label Position", parentName: "Radio" },
     "radio-group-sample": { displayName: "Radio Group", parentName: "Radio" },
     "radio-group-vertical": { displayName: "Vertical Radio Group", parentName: "Radio" },
     "radio-styling-sample": { displayName: "Styling Radio Buttons", parentName: "Radio" },
+    "radio-tailwind-styling-sample": { displayName: "Tailwind Styling Radio Buttons", parentName: "Radio" },
     "rating-form": { displayName: "Rating in Form", parentName: "Rating" },
     "switch-sample-1": { displayName: "Switch Overview", parentName: "Switch" },
     "switch-sample-2": { displayName: "Multiple Switches", parentName: "Switch" },
     "switch-styling": { displayName: "Styled Switches", parentName: "Switch" },
+    "switch-tailwind-styling": { displayName: "Tailwind Styled Switches", parentName: "Switch" },
     "select-sample-1": { displayName: "Simple Select", parentName: "Select" },
     "select-sample-2": { displayName: "Select With Groups", parentName: "Select" },
     "select-sample-4": { displayName: "Custom Overlay Settings", parentName: "Select" },
     "select-styling": { displayName: "Select Styling", parentName: "Select" },
+    "select-tailwind-styling": { displayName: "Select Tailwind Styling", parentName: "Select" },
     "select-input-directives": { displayName: "Select Input Directives", parentName: "Select" },
     "select-header-footer": { displayName: "Select with Header&Footer Templates", parentName: "Select" },
     "input-text-selection": { displayName: "Input with Text Selection", parentName: "Input Group" },

src/app/data-entries/data-entries-routes-data.ts

@@ -46,6 +46,7 @@ import { InputGroupSample4Component } from './input-group/input-group-sample-4/i
 import { InputGroupSample5Component } from './input-group/input-group-sample-5/input-group-sample-5.component';
 import { InputGroupSample6Component } from './input-group/input-group-sample-6/input-group-sample-6.component';
 import { InputGroupStyleComponent } from './input-group/input-group-styling/input-group-styling.component';
+import { InputGroupTailwindStyleComponent } from './input-group/input-group-tailwind-styling/input-group-tailwind-styling.component';
 import { InputTextSelectionComponent } from './input-group/input-text-selection/input-text-selection.component';
 import { TypedFormComponent } from './input-group/typed-form/typed-form.component';
 import { ReactiveFormsSampleComponent } from '../how-to/reactive-forms/reactive-forms.component';
@@ -55,15 +56,18 @@ import { RadioSample1Component } from './radio/radio-sample-1/radio-sample-1.com
 import { RadioSample2Component } from './radio/radio-sample-2/radio-sample-2.component';
 import { RadioSample3Component } from './radio/radio-sample-3/radio-sample-3.component';
 import { RadioStylingSampleComponent } from './radio/radio-styling-sample/radio-styling-sample.component';
+import { RadioTailwindStylingSampleComponent } from './radio/radio-tailwind-styling-sample/radio-tailwind-styling-sample.component';
 import { SelectHeaderFooterComponent } from './select/select-header-footer/select-header-footer.component';
 import { SelectInputDirectivesComponent } from './select/select-input-directives/select-input-directives';
 import { SelectSample1Component } from './select/select-sample-1/select-sample-1.component';
 import { SelectSample2Component } from './select/select-sample-2/select-sample-2.component';
 import { SelectSample4Component } from './select/select-sample-4/select-sample-4.component';
 import { SelectStylingComponent } from './select/select-styling/select-styling.component';
+import { SelectTailwindStylingComponent } from './select/select-tailwind-styling/select-tailwind-styling.component';
 import { SwitchSample1Component } from './switch/switch-sample-1/switch-sample-1.component';
 import { SwitchSample2Component } from './switch/switch-sample-2/switch-sample-2.component';
 import { SwitchStylingComponent } from './switch/switch-styling/switch-styling.component';
+import { SwitchTailwindStylingComponent } from './switch/switch-tailwind-styling/switch-tailwind-styling.component';
 import { RatingInFormComponent } from './rating/rating-form/rating-form.component';
 import { TemplateDrivenFormValidationComponent } from './input-group/template-driven-form-validation/template-driven-form-validation.component';
 import { ReactiveFormValidationComponent } from './input-group/reactive-form-validation/reactive-form-validation.component';
@@ -76,6 +80,7 @@ import { DisabledIconButtonComponent } from './icon-button/disabled-icon-button/
 import { SVGIconButtonComponent } from './icon-button/svg-icon-button/svg-icon-button.component';
 import { IconButtonSizeComponent } from './icon-button/icon-button-size/icon-button-size.component';
 import { IconButtonStylingComponent } from './icon-button/icon-button-styling/icon-button-styling.component';
+import { IconButtonTailwindStylingComponent } from './icon-button/icon-button-tailwind-styling/icon-button-tailwind-styling.component';
 
 export const DataEntriesRoutes: Routes = [
     {
@@ -313,6 +318,11 @@ export const DataEntriesRoutes: Routes = [
         data: dataEntriesRoutesData['icon-button-styling'],
         path: 'icon-button-styling'
     },
+    {
+        component: IconButtonTailwindStylingComponent,
+        data: dataEntriesRoutesData['icon-button-tailwind-styling'],
+        path: 'icon-button-tailwind-styling'
+    },
     {
         component: InputGroupSample1Component,
         data: dataEntriesRoutesData['input-group-sample-1'],
@@ -348,6 +358,11 @@ export const DataEntriesRoutes: Routes = [
         data: dataEntriesRoutesData['input-group-style'],
         path: 'input-group-style'
     },
+    {
+        component: InputGroupTailwindStyleComponent,
+        data: dataEntriesRoutesData['input-group-tailwind-style'],
+        path: 'input-group-tailwind-style'
+    },
     {
         component: ReactiveFormsSampleComponent,
         data: dataEntriesRoutesData['reactive-forms'],
@@ -383,6 +398,11 @@ export const DataEntriesRoutes: Routes = [
         data: dataEntriesRoutesData['radio-styling-sample'],
         path: 'radio-styling-sample'
     },
+    {
+        component: RadioTailwindStylingSampleComponent,
+        data: dataEntriesRoutesData['radio-tailwind-styling-sample'],
+        path: 'radio-tailwind-styling-sample'
+    },
     {
         component: RatingInFormComponent,
         data: dataEntriesRoutesData['rating-in-form'],
@@ -403,6 +423,11 @@ export const DataEntriesRoutes: Routes = [
         data: dataEntriesRoutesData['switch-styling'],
         path: 'switch-styling'
     },
+    {
+        component: SwitchTailwindStylingComponent,
+        data: dataEntriesRoutesData['switch-tailwind-styling'],
+        path: 'switch-tailwind-styling'
+    },
     {
         component: SelectSample1Component,
         data: dataEntriesRoutesData['select-sample-1'],
@@ -422,6 +447,11 @@ export const DataEntriesRoutes: Routes = [
         component: SelectStylingComponent,
         data: dataEntriesRoutesData['select-styling'],
         path: 'select-styling'
+    },
+     {
+        component: SelectTailwindStylingComponent,
+        data: dataEntriesRoutesData['select-tailwind-styling'],
+        path: 'select-tailwind-styling'
     },
     {
         component: SelectInputDirectivesComponent,

src/app/data-entries/data-entries.routes.ts

@@ -0,0 +1,17 @@
+<div class="wrapper">
+    <div class="button-sample">
+        <button class="!material-flat-icon-button-color-[#7B9E89]" igxIconButton="flat">
+            <igx-icon>home</igx-icon>
+        </button>
+    </div>
+    <div class="button-sample">
+        <button class="!material-contained-icon-button-color-[#7B9E89] ![--active-background:#4F6A5A]" igxIconButton="contained">
+            <igx-icon>home</igx-icon>
+        </button>
+    </div>
+    <div class="button-sample">
+        <button class="!material-outlined-icon-button-color-[#7B9E89]" igxIconButton="outlined">
+            <igx-icon>home</igx-icon>
+        </button>
+    </div>
+</div>

src/app/data-entries/icon-button/icon-button-tailwind-styling/icon-button-tailwind-styling.component.html

@@ -0,0 +1,13 @@
+.wrapper {
+  display: flex;
+  flex-flow: row wrap;
+}
+
+.button-sample {
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: center;
+  align-items: center;
+  flex: 1 0 30%;
+  margin: 16px 0;
+}

src/app/data-entries/icon-button/icon-button-tailwind-styling/icon-button-tailwind-styling.component.scss

@@ -0,0 +1,11 @@
+
+import { Component } from '@angular/core';
+import { IgxIconButtonDirective, IgxIconComponent } from 'igniteui-angular';
+
+@Component({
+    selector: 'app-icon-button-tailwind-styling',
+    styleUrls: ['./icon-button-tailwind-styling.component.scss'],
+    templateUrl: './icon-button-tailwind-styling.component.html',
+    imports: [IgxIconButtonDirective, IgxIconComponent]
+})
+export class IconButtonTailwindStylingComponent { }