Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: added accordion component #89

Open
wants to merge 3 commits into
base: angular-19
Choose a base branch
from
Open

feat: added accordion component #89

wants to merge 3 commits into from

Conversation

kalyani-epam
Copy link
Collaborator

No description provided.

@kalyani-epam kalyani-epam self-assigned this Mar 4, 2025
Copy link
Collaborator

@aamialkovich aamialkovich left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could you please implement it in way so it will be used somehow:

<app-accordion [title]="'Experiment description'">
  <div>Some content here</div>
</app-accordion>

@@ -0,0 +1,50 @@
.example-accordion {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could you please get rid of example prefix as it is common component.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I believe we should focus on Tailwind-based development to maintain a consistent codebase.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Seems it is not needed as package.json wasn't updated.

@kalyani-epam kalyani-epam requested a review from serhatkaya March 10, 2025 06:10
</button>
@if(accordionItem.expanded) {
<div class="p-4" role="region" [style.display]="accordionItem.expanded ? '' : 'none'"
[attr.id]="'accordion-body-' + index" [attr.aria-labelledby]="'accordion-header-' + index" [innerHTML]="item.description">
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please get rid of innerHTML and use angular content projection like in modal.component

templateUrl: './accordion.component.html'
})
export class AccordionComponent {
items = [{title: 'Item 1', description: '<table><thead><tr><th>Header 1</th><th>Header 2</th><th>Header 3</th></tr></thead><tbody><tr><td>Data 1</td><td>Data 2</td><td>Data 3</td></tr></tbody></table>'},
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No need to put items here. As this is single accordion component, we can rely only on title as angular input here and content which will be passed to this accordion.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants