fc-accordion

An element by Forter

Usage

<script>
   import '@forter/accordion';
</script>

<fc-accordion>
   <fc-accordion-category label="galaxy">
     S10
     S20
   </fc-accordion-category>
   <fc-accordion-category label="iphone">
     X
     XS
   </fc-accordion-category>
</fc-accordion>

• Examples

<!-- section example open -->
<fc-accordion>
   <fc-accordion-section open>
     <section slot="label" style="display: flex; align-items: center;">
       <fc-counter-circle completed="2" total="4" style="margin-right: 15px;">
       </fc-counter-circle>
       <span style="font-size: 22px;">Integration Overview</span>
     </section>
     <div part="content">
       <fc-card>
         Accordion Content
       </fc-card>
       <fc-card>
         Accordion Content
       </fc-card>
     </div>
   </fc-accordion-section>
</fc-accordion>

<!-- section example -->
<fc-accordion>
   <fc-accordion-section>
     <section slot="label" style="display: flex; align-items: center;">
       <fc-counter-circle completed="12" total="16" style="margin-right: 15px;">
       </fc-counter-circle>
       <span style="font-size: 22px;">Phase 1</span>
     </section>
     <div part="content">
       <fc-card>
         Accordion Content
       </fc-card>
       <fc-card>
         Accordion Content
       </fc-card>
     </div>
   </fc-accordion-section>
</fc-accordion>

<!-- disabled section example -->
<fc-accordion>
   <fc-accordion-section disabled>
     <section slot="label" style="display: flex; align-items: center;">
       <fc-counter-circle completed="0" total="4" style="margin-right: 15px;">
       </fc-counter-circle>
       <span style="font-size: 22px;">Phase 2</span>
     </section>
     <div part="content">
     </div>
   </fc-accordion-section>
</fc-accordion>

CSS Custom Properties

| Property | Description | |------------------------------------------------|--------------------------------------------------| | --fc-accordion-section-background-color | header background color. example: var(--pink-1) | | --fc-accordion-section-border-color | border color. example: var(--cyan-2) | | --fc-accordion-section-border-radius | border-radius. example: 10px | | --fc-accordion-section-disabled-color | disabled font color. example: var(--red-1) | | --fc-accordion-section-font-color | header font color. example: var(--indigo-9) | | --fc-accordion-section-icon-color | arrow icon color. example: var(--indigo-7) | | --fc-accordion-section-open-background-color | open background color. example: var(--indigo-1) | | --fc-accordion-section-padding | section padding. example: 10px |