@forter/accordion NPM

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`