Skip to content

Commit 2ca1b36

Browse files
MGREMYMGREMY
authored
feat(accordion): add custom icon support (#97)
## PR Checklist Please check if your PR fulfills the following requirements: <!--- [ ] Tests for the changes have been added (for bug fixes/features)--> - [x] Docs have been added/updated (for bug fixes/features) ## PR Type What kind of change does this PR introduce? <!-- Please check the one that applies to this PR using "x". --> - [ ] Bugfix - [x] Feature - [ ] Code style update (formatting, local variables) - [ ] Refactoring (no functional changes, no API changes) - [ ] Build related changes - [ ] CI-related changes - [ ] Documentation content changes - [ ] Other... Please describe: ## Issue Number <!-- Bugs and features must be linked to an issue. --> Issue Number: #95 ## Does this PR introduce a breaking change? <!-- If this PR contains a breaking change, please describe the impact and migration path for existing applications below. --> - [ ] Yes - [x] No ## Other information <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **New Features** - Added a demo section for the new accordion component in the documentation. - **Documentation** - Updated documentation to include a new "Arrow style" section with code snippets for the accordion component. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
2 parents fe25ed8 + 5b184dd commit 2ca1b36

File tree

5 files changed

+147
-6
lines changed

5 files changed

+147
-6
lines changed

‎apps/docs/docs/components/accordion/_arrow-style.component.html

+85
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
<flowbite-accordion>
2+
<flowbite-accordion-panel [isOpen]="true">
3+
<flowbite-accordion-title [icon]="no_arrow">What is Flowbite ?</flowbite-accordion-title>
4+
<flowbite-accordion-content>
5+
<div class="p-5">
6+
<p class="text-base font-normal text-gray-600 dark:text-gray-400">
7+
Flowbite is an open-source library of interactive components built on top of Tailwind CSS
8+
including buttons, dropdowns, modals, navbars, and more.
9+
</p>
10+
<p class="text-base font-normal text-gray-600 dark:text-gray-400">
11+
Check out this guide to learn how to
12+
<a
13+
class="text-base font-medium underline text-gray-600 dark:text-gray-400 decoration-primary-600 dark:decoration-primary-500"
14+
href="https://flowbite.com/docs/getting-started/introduction/">
15+
Get started
16+
</a>
17+
and start developing websites even faster with components on top of Tailwind CSS.
18+
</p>
19+
</div>
20+
</flowbite-accordion-content>
21+
</flowbite-accordion-panel>
22+
<flowbite-accordion-panel>
23+
<flowbite-accordion-title [icon]="question_mark_arrow">
24+
Is there a Figma file available ?
25+
</flowbite-accordion-title>
26+
<flowbite-accordion-content>
27+
<div class="p-5">
28+
<p class="text-base font-normal text-gray-600 dark:text-gray-400">
29+
Flowbite is first conceptualized and designed using the Figma software so everything you
30+
see in the library has a design equivalent in our Figma file.
31+
</p>
32+
<p class="text-base font-normal text-gray-600 dark:text-gray-400">
33+
Check out the
34+
<a href="https://flowbite.com/figma/">Figma design system</a>
35+
based on the utility classes from Tailwind CSS and components from Flowbite.
36+
</p>
37+
</div>
38+
</flowbite-accordion-content>
39+
</flowbite-accordion-panel>
40+
<flowbite-accordion-panel>
41+
<flowbite-accordion-title>
42+
What are the differences between Flowbite and Tailwind UI ?
43+
</flowbite-accordion-title>
44+
<flowbite-accordion-content>
45+
<div class="p-5">
46+
<p class="text-base font-normal text-gray-600 dark:text-gray-400">
47+
The main difference is that the core components from Flowbite are open source under the
48+
MIT license, whereas Tailwind UI is a paid product. Another difference is that Flowbite
49+
relies on smaller and standalone components, whereas Tailwind UI offers sections of pages.
50+
</p>
51+
<p class="text-base font-normal text-gray-600 dark:text-gray-400">
52+
However, we actually recommend using both Flowbite, Flowbite Pro, and even Tailwind UI as
53+
there is no technical reason stopping you from using the best of two worlds.
54+
</p>
55+
<p class="text-base font-normal text-gray-600 dark:text-gray-400">
56+
Learn more about these technologies :
57+
</p>
58+
<ul class="text-base font-normal text-gray-600 dark:text-gray-400 list-disc list-inside">
59+
<li>
60+
<a
61+
class="text-base font-medium underline text-gray-600 dark:text-gray-400 decoration-primary-600 dark:decoration-primary-500"
62+
href="https://flowbite.com/pro/">
63+
Flowbite Pro
64+
</a>
65+
</li>
66+
<li>
67+
<a
68+
class="text-base font-medium underline text-gray-600 dark:text-gray-400 decoration-primary-600 dark:decoration-primary-500"
69+
href="https://tailwindui.com/"
70+
rel="nofollow">
71+
Tailwind UI
72+
</a>
73+
</li>
74+
</ul>
75+
</div>
76+
</flowbite-accordion-content>
77+
</flowbite-accordion-panel>
78+
</flowbite-accordion>
79+
80+
<ng-template #no_arrow />
81+
<ng-template #question_mark_arrow>
82+
<flowbite-icon
83+
svgIcon="outline:question-circle"
84+
class="h-6 w-6 shrink-0" />
85+
</ng-template>

‎apps/docs/docs/components/accordion/_arrow-style.component.ts

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import {
2+
AccordionComponent,
3+
AccordionContentComponent,
4+
AccordionPanelComponent,
5+
AccordionTitleComponent,
6+
} from 'flowbite-angular/accordion';
7+
import { IconComponent } from 'flowbite-angular/icon';
8+
9+
import { Component } from '@angular/core';
10+
11+
@Component({
12+
selector: 'flowbite-demo-accordion-arrow-style',
13+
standalone: true,
14+
imports: [
15+
AccordionComponent,
16+
AccordionTitleComponent,
17+
AccordionContentComponent,
18+
AccordionPanelComponent,
19+
IconComponent,
20+
],
21+
templateUrl: './_arrow-style.component.html',
22+
})
23+
export class FlowbiteArrowStyleComponent {}

‎apps/docs/docs/components/accordion/index.md

+12
Original file line numberDiff line numberDiff line change
@@ -49,3 +49,15 @@ keyword: AccordionPage
4949
```angular-ts file="./_flush.component.ts"#L1-L6 group="flush" name="typescript"
5050
5151
```
52+
53+
## Arrow style
54+
55+
{{ NgDocActions.demo('flowbiteArrowStyleComponent', {container: false}) }}
56+
57+
```angular-html file="./_arrow-style.component.html" group="arrow-style" name="html"
58+
59+
```
60+
61+
```angular-ts file="./_arrow-style.component.ts"#L1-L7 group="arrow-style" name="typescript"
62+
63+
```

‎apps/docs/docs/components/accordion/ng-doc.page.ts

+2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import ComponentCategory from '../ng-doc.category';
22
import { FlowbiteAlwaysOpenComponent } from './_always-open.component';
3+
import { FlowbiteArrowStyleComponent } from './_arrow-style.component';
34
import { FlowbiteColorOptionComponent } from './_color-option.component';
45
import { FlowbiteDefaultComponent } from './_default.component';
56
import { FlowbiteFlushComponent } from './_flush.component';
@@ -21,6 +22,7 @@ const Accordion: NgDocPage = {
2122
flowbiteAlwaysOpenComponent: FlowbiteAlwaysOpenComponent,
2223
flowbiteColorOptionComponent: FlowbiteColorOptionComponent,
2324
flowbiteFlushComponent: FlowbiteFlushComponent,
25+
flowbiteArrowStyleComponent: FlowbiteArrowStyleComponent,
2426
},
2527
};
2628

‎libs/flowbite-angular/accordion/accordion-title.component.ts

+25-6
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,8 @@ import type { DeepPartial } from 'flowbite-angular';
88
import { IconComponent, IconRegistry } from 'flowbite-angular/icon';
99
import { CHEVRON_DOWN_SVG_ICON } from 'flowbite-angular/utils';
1010

11-
import type { OnInit } from '@angular/core';
11+
import { NgTemplateOutlet } from '@angular/common';
12+
import type { OnInit, TemplateRef } from '@angular/core';
1213
import {
1314
ChangeDetectionStrategy,
1415
Component,
@@ -20,11 +21,19 @@ import {
2021
} from '@angular/core';
2122
import { DomSanitizer } from '@angular/platform-browser';
2223

24+
export const FLOWBITE_ACCORDION_TITLE_ICON_DEFAULT_VALUE = new InjectionToken<
25+
TemplateRef<unknown> | undefined
26+
>('FLOWBITE_ACCORDION_TITLE_ICON_DEFAULT_VALUE');
27+
2328
export const FLOWBITE_ACCORDION_TITLE_CUSTOM_STYLE_DEFAULT_VALUE = new InjectionToken<
2429
DeepPartial<AccordionTitleTheme>
2530
>('FLOWBITE_ACCORDION_TITLE_CUSTOM_STYLE_DEFAULT_VALUE');
2631

2732
export const accordionTitleDefaultValueProvider = makeEnvironmentProviders([
33+
{
34+
provide: FLOWBITE_ACCORDION_TITLE_ICON_DEFAULT_VALUE,
35+
useValue: undefined,
36+
},
2837
{
2938
provide: FLOWBITE_ACCORDION_TITLE_CUSTOM_STYLE_DEFAULT_VALUE,
3039
useValue: {},
@@ -36,16 +45,20 @@ export const accordionTitleDefaultValueProvider = makeEnvironmentProviders([
3645
*/
3746
@Component({
3847
standalone: true,
39-
imports: [IconComponent],
48+
imports: [IconComponent, NgTemplateOutlet],
4049
selector: 'flowbite-accordion-title',
4150
template: `
4251
<h2 [class]="contentClasses().textClass">
4352
<ng-content />
4453
</h2>
45-
<flowbite-icon
46-
svgIcon="flowbite-angular:chevron-down"
47-
class="h-6 w-6 shrink-0 duration-200"
48-
[class.rotate-180]="accordionPanelComponent.isOpen()" />
54+
@if (icon()) {
55+
<ng-container [ngTemplateOutlet]="icon()!" />
56+
} @else {
57+
<flowbite-icon
58+
svgIcon="flowbite-angular:chevron-down"
59+
class="h-6 w-6 shrink-0 duration-300"
60+
[class.rotate-180]="accordionPanelComponent.isOpen()" />
61+
}
4962
`,
5063
host: {
5164
'(click)': 'onClick()',
@@ -78,6 +91,12 @@ export class AccordionTitleComponent extends BaseComponent<AccordionTitleClass>
7891
* @default `AccordionPanelComponents`'s color
7992
*/
8093
public color = model<keyof AccordionColors>(this.accordionPanelComponent.color());
94+
/**
95+
* Set the accordion title icon
96+
*
97+
* @default undefined
98+
*/
99+
public icon = model(inject(FLOWBITE_ACCORDION_TITLE_ICON_DEFAULT_VALUE));
81100
/**
82101
* Set the custom style for this accordion title
83102
*/

0 commit comments

Comments
 (0)