accordion

accordion is an object within the theme property for overriding accordion styles.

<Vizzly.Dashboard
  // ...
  theme={{
    accordion: {
      iconColor: '#3074D9',
      button: {
        fontWeight: 400,
        fontSize: 13,
        color: '#3074D9',
      },
    },
  }}
/>

Accordions

Accordions are featured within <Vizzly.Dashboard/> in the following loctions:

  • Within Dashboard Filters, accordions are used to show/hide 'Advanced Options'for including time ranges.
  • In the View Editor, accordions are used to show/hide 'Advanced Options' for 'Data' tab.
  • In the View Editor, accordions are used to show/hide 'Advanced Options' within the 'Percentage Custom Metric' modal.

Default Values

import Vizzly, { type VizzlyTheming } from '@vizzly/dashboard';
 
export function Dashboard() {
  const theme: VizzlyTheming.Base = {
    accordion: {
      // Default Values
      iconColor: '#2f81f7',
      button: {
        fontWeight: 300,
        fontSize: 14,
        color: '#2f81f7',
      },
    },
  };
 
  return (
    <Vizzly.Dashboard
      // ...
      theme={theme}
    />
  );
}