Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 45a75a4

Browse files
taqishah1214taqishah1214
committed
Added DUI Ripple
- added DUI ripple - updated Button docs
1 parent 763f626 commit 45a75a4

File tree

9 files changed

+173
-19
lines changed

9 files changed

+173
-19
lines changed

‎projects/consumer/src/app/docs/features/button/button.component.html

Lines changed: 80 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
<div class="mb-12">
2-
32
<div id="button-main" class="group flex items-center">
43
<a
54
href="#button-main"
@@ -21,30 +20,38 @@
2120
</svg>
2221
</a>
2322
<h1
24-
class="block antialiased tracking-normal font-sans text-3xl font-bold leading-snug !mb-2 text-black"
25-
>
26-
Tailwind CSS Button with Angular
27-
</h1>
23+
class="block antialiased tracking-normal font-sans text-3xl font-bold leading-snug !mb-2 text-black"
24+
>
25+
Tailwind CSS Button with Angular
26+
</h1>
2827
</div>
2928

3029
<p
3130
class="block antialiased font-sans text-base leading-relaxed text-inherit !mb-4 !font-normal !text-gray-600"
3231
>
33-
Use our Tailwind CSS Button built with Angular to enable user actions on your website or applications.
32+
Use our Tailwind CSS Button built with Angular to enable user actions on
33+
your website or applications.
3434
</p>
3535
<p
3636
class="block antialiased font-sans text-base leading-relaxed text-inherit !mb-4 !font-normal !text-gray-600"
3737
>
38-
The avatar is one of the most important UI components used by web designers to allow user interaction with a website or application. When clicked, a button can initiate various functions, from submitting a form or going to another page, to enabling a feature on and off. For a good user experience, buttons should provide feedback to indicate the initiation: have a change in color, make an animation, or a sound.
38+
The avatar is one of the most important UI components used by web designers
39+
to allow user interaction with a website or application. When clicked, a
40+
button can initiate various functions, from submitting a form or going to
41+
another page, to enabling a feature on and off. For a good user experience,
42+
buttons should provide feedback to indicate the initiation: have a change in
43+
color, make an animation, or a sound.
3944
</p>
4045

4146
<p
4247
class="block antialiased font-sans text-base leading-relaxed text-inherit !mb-4 !font-normal !text-gray-600"
4348
>
44-
Below we present you our Angular Button example crafted with Tailwind CSS that will help you build enterprise-level applications with ease. Customize the component or add it directly to your project!
49+
Below we present you our Angular Button example crafted with Tailwind CSS
50+
that will help you build enterprise-level applications with ease. Customize
51+
the component or add it directly to your project!
4552
</p>
4653
<p
47-
class="block antialiased font-sans text-base leading-relaxed text-inherit !mb-4 !font-normal !text-gray-600"
54+
class="block antialiased font-sans text-base leading-relaxed text-inherit !mb-4 !font-normal !text-gray-600"
4855
>
4956
You first need to import the DUIButton Module into your application module
5057
</p>
@@ -92,14 +99,17 @@
9299
<div class="code-snippet-area mt-10">
93100
<feature-preview>
94101
<dui-button size="md" variant="filled" color="gray">Filled</dui-button>
95-
<dui-button size="md" variant="outlined" color="gray">Outlined</dui-button>
102+
<dui-button size="md" variant="outlined" color="gray"
103+
>Outlined</dui-button
104+
>
96105
<dui-button size="md" variant="text" color="gray">Text</dui-button>
97-
<dui-button size="md" variant="gradient" color="gray">Gradient</dui-button>
106+
<dui-button size="md" variant="gradient" color="gray"
107+
>Gradient</dui-button
108+
>
98109
</feature-preview>
99110
<code-previewer [Code]="outlinedButton"> </code-previewer>
100111
</div>
101112

102-
103113
<div class="mt-6">
104114
<div id="button-size" class="group flex items-center">
105115
<a
@@ -188,4 +198,62 @@
188198
</feature-preview>
189199
<code-previewer [Code]="butoonColorCode"> </code-previewer>
190200
</div>
201+
202+
<!-- Block Level button -->
203+
<div class="mt-6">
204+
<div id="button-block" class="group flex items-center">
205+
<a
206+
href="#button-block"
207+
class="absolute z-50 -ml-10 mb-2.5 rounded-md border border-blue-gray-50 bg-blue-gray-50/50 p-1 opacity-0 hover:opacity-100 group-hover:opacity-100"
208+
><svg
209+
xmlns="http://www.w3.org/2000/svg"
210+
fill="none"
211+
viewBox="0 0 24 24"
212+
stroke-width="2.5"
213+
stroke="currentColor"
214+
aria-hidden="true"
215+
class="pointer-events-none h-3.5 w-3.5 rounded-lg"
216+
>
217+
<path
218+
stroke-linecap="round"
219+
stroke-linejoin="round"
220+
d="M5.25 8.25h15m-16.5 7.5h15m-1.8-13.5l-3.9 19.5m-2.1-19.5l-3.9 19.5"
221+
></path>
222+
</svg>
223+
</a>
224+
<h2
225+
class="block antialiased tracking-normal font-sans text-2xl font-bold leading-snug !mb-2 text-black"
226+
>
227+
Block Level Button
228+
</h2>
229+
</div>
230+
<p
231+
class="block antialiased font-sans text-base leading-relaxed text-inherit !mb-4 !font-normal !text-gray-600"
232+
>
233+
A
234+
<code
235+
class="rounded-md px-1 font-sans font-semibold bg-gray-900/[0.1] text-gray-900 text-sm"
236+
>Button</code
237+
>
238+
could be a block-level component as well that gets all the available space
239+
in a row. You can render a
240+
<code
241+
class="rounded-md px-1 font-sans font-semibold bg-gray-900/[0.1] text-gray-900 text-sm"
242+
>Button</code
243+
>
244+
as a block-level element using the
245+
<code
246+
class="rounded-md px-1 font-sans font-semibold bg-gray-900/[0.1] text-gray-900 text-sm"
247+
>fullWidhh</code
248+
>
249+
prop.
250+
</p>
251+
</div>
252+
253+
<div class="code-snippet-area mt-10">
254+
<feature-preview>
255+
<dui-button size="md" class="w-full" [fullWidth]="true" color="gray">Button</dui-button>
256+
</feature-preview>
257+
<code-previewer [Code]="buttonBlockCode"> </code-previewer>
258+
</div>
191259
</div>

‎projects/consumer/src/app/docs/features/button/button.component.ts

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,13 @@ export class ButtonComponent {
2121
<dui-button size="md" color="gray"> Button </dui-button>
2222
`;
2323

24+
buttonBlockCode =
25+
` <!-- Use DUI Button in html file -->
26+
<dui-button size="md" class="w-full" [fullWidth]="true" color="gray">
27+
Button
28+
</dui-button>
29+
`;
30+
2431
outlinedButton =
2532
`<!-- Use DUI Button in html file -->
2633
<dui-button size="md" variant="filled" color="gray">Filled</dui-button>

‎projects/consumer/src/app/shared/model/sidebar-item.model.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -124,6 +124,7 @@ export const SidebarData: SidebarItem[] = [
124124
{ id: 'button-variant', label: 'Button Variant' },
125125
{ id: 'button-size', label: 'Button Sizes' },
126126
{ id: 'button-colors', label: 'Button Colors' },
127+
{ id: 'button-block', label: 'Block Level Button' },
127128
],
128129
isActive: true
129130
},

‎projects/david-ui-angular/src/lib/components/button/button.component.html

Lines changed: 17 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,17 @@
1-
<button
2-
class="{{buttonClass}}"
3-
>
4-
<ng-content></ng-content>
5-
</button>
1+
<ng-container *ngIf="ripple; then ripple; else withoutRipple"> </ng-container>
2+
3+
<ng-template #ripple>
4+
<button dui-ripple [ripple-theme]="this.variant == 'outlined' || this.variant == 'text' || this.color == 'white' ? 'dark': 'light'" class="{{ buttonClass }}">
5+
<ng-container [ngTemplateOutlet]="content"></ng-container>
6+
</button>
7+
</ng-template>
8+
9+
<ng-template #withoutRipple>
10+
<button class="{{ buttonClass }}">
11+
<ng-container [ngTemplateOutlet]="content"></ng-container>
12+
</button>
13+
</ng-template>
14+
15+
<ng-template #content>
16+
<ng-content></ng-content>
17+
</ng-template>

‎projects/david-ui-angular/src/lib/components/button/button.component.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ export class ButtonComponent extends DUITheme implements OnInit {
2727
@Input() fullWidth!: fullWidth;
2828
@Input() className!: className;
2929
@Input() rounded!: boolean;
30+
@Input() ripple!: boolean;
3031

3132
public buttonClass!: string;
3233

@@ -35,6 +36,7 @@ export class ButtonComponent extends DUITheme implements OnInit {
3536
this.variant = this.variant ?? DefaultButton.variant;
3637
this.size = this.size ?? DefaultButton.size;
3738
this.color = this.color ?? DefaultButton.color;
39+
this.ripple = this.ripple ?? DefaultButton.ripple
3840
}
3941

4042
ngOnInit(): void {

‎projects/david-ui-angular/src/lib/components/button/button.module.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,11 @@ import { FormsModule } from '@angular/forms';
44

55
import { ButtonComponent } from './button.component';
66
import { DUIIcon } from '../../shared/components/dui-icon/dui-icon.component';
7+
import { DuiRipple } from '../../shared/directive/dui-ripple.directive';
78

89
@NgModule({
910
declarations: [ButtonComponent],
10-
imports: [CommonModule,FormsModule,DUIIcon],
11+
imports: [CommonModule,FormsModule,DUIIcon,DuiRipple],
1112
exports: [ButtonComponent],
1213
})
1314
export class DUIButton {}

‎projects/david-ui-angular/src/lib/shared/directive/dui-ripple.directive.ts

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
import { Directive, ElementRef, HostListener, Input, Renderer2 } from '@angular/core';
2+
3+
@Directive({
4+
selector: '[dui-ripple]',
5+
standalone: true,
6+
})
7+
export class DuiRipple {
8+
9+
@Input({alias: 'ripple-theme'}) theme! : 'dark' | 'light';
10+
11+
constructor(private el: ElementRef, private renderer: Renderer2) {}
12+
13+
@HostListener('click', ['$event']) onClick(event: MouseEvent) {
14+
const ripple = this.renderer.createElement('div');
15+
const rect = this.el.nativeElement.getBoundingClientRect();
16+
17+
const size = Math.max(rect.width, rect.height);
18+
const x = event.clientX - rect.left - size / 2;
19+
const y = event.clientY - rect.top - size / 2;
20+
21+
this.renderer.setStyle(this.el.nativeElement,'position','relative')
22+
this.renderer.setStyle(this.el.nativeElement,'overflow','hidden')
23+
24+
this.renderer.addClass(ripple, 'ripple');
25+
26+
this.renderer.setStyle(ripple, 'width', `${size}px`);
27+
this.renderer.setStyle(ripple, 'height', `${size}px`);
28+
this.renderer.setStyle(ripple, 'top', `${y}px`);
29+
this.renderer.setStyle(ripple, 'left', `${x}px`);
30+
this.renderer.setStyle(ripple, 'position', `absolute`);
31+
this.renderer.setStyle(ripple, 'pointerEvents', `none`);
32+
this.renderer.setStyle(ripple, 'borderRadius', `50%`);
33+
34+
let bgColor = this.theme === 'dark' ? 'rgba(0,0,0, 0.2)': 'rgba(255,255,255, 0.3)';
35+
this.renderer.setStyle(ripple, 'backgroundColor', `${bgColor}`);
36+
37+
38+
this.renderer.appendChild(this.el.nativeElement, ripple);
39+
40+
setTimeout(() => {
41+
this.renderer.removeChild(this.el.nativeElement, ripple);
42+
}, 1000);
43+
}
44+
}

‎projects/david-ui-angular/src/lib/styles/styles.scss

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,3 +3,22 @@
33
@tailwind utilities;
44
// Your custom styles here
55

6+
.ripple {
7+
position: absolute;
8+
border-radius: 50%;
9+
background: rgba(255, 255, 255, 0.6);
10+
transform: scale(0);
11+
animation: ripple-animation 1s linear;
12+
pointer-events: none;
13+
}
14+
15+
@keyframes ripple-animation {
16+
from {
17+
transform: scale(0);
18+
opacity : 1;
19+
}
20+
to {
21+
transform: scale(4);
22+
opacity: 0;
23+
}
24+
}

‎projects/david-ui-angular/src/lib/types/componentTypes/button.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ export const DefaultButton: Button = {
2929
size: 'md',
3030
color: 'blue',
3131
fullWidth: false,
32-
ripple: false,
32+
ripple: true,
3333
className: '',
3434
};
3535

0 commit comments

Comments
 (0)