Components

va-accordion

Accordion is a component which organizes content within collapsable items. Accordions can toggle through a number of text blocks with a single click.

  1.       <va-accordion>
  2.         <va-collapse>
  3.           <span slot="header"> Expand This Block </span>
  4.           <div slot="body">
  5.             <div>
  6.               Expand first content
  7.             </div>
  8.           </div>
  9.         </va-collapse>
  10.         <va-collapse withBackground>
  11.           <span slot="header">Accordeon with background</span>
  12.           <div slot="body">
  13.             <div>
  14.               Expand three content
  15.             </div>
  16.           </div>
  17.         </va-collapse>
  18.         <va-collapse customHeader>
  19.           <span slot="header">
  20.             <va-button>
  21.               No-header collapse
  22.             </va-button>
  23.           </span>
  24.           <div slot="body">
  25.             <div>
  26.               Expand three content
  27.             </div>
  28.           </div>
  29.         </va-collapse>    
  30.       </va-accordion>

va-collapse

Collapse is a component which provides possibility to toggle the visibility of content across your project.

  1.         <va-collapse>
  2.           <span slot="header"> Expand This Block </span>
  3.           <div slot="body">
  4.             <div>
  5.               Expand first content
  6.             </div>
  7.           </div>
  8.         </va-collapse>

Props

  • isOpenDefault - Boolean (default: false) - open collapse by default
  • withBackground - Boolean (default: false) - add background color to collapse content
  • customHeader - Boolean (default: false) - add possibility to set your custom header (for example button)
    Find DEMOs here!