@forter/accordion

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