panels

panels is an object within the theme property for overriding styles wrappers for Views.

<Vizzly.Dashboard
  // ...
  theme={{
    panels: {
      background: "#fff",
      borderRadius: "8px",
      padding: "0.75rem 1rem",
    },
  }}
/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc posuere ligula a rutrum sagittis. Duis at libero fermentum, eleifend dui vitae, auctor dui. Nunc pharetra metus eros, sit amet congue urna condimentum et. Vestibulum sodales mi at magna lacinia facilisis. Morbi vitae vehicula est.

Panels

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

  • All filled dashboard cells (Views) are within a panels wrapper.
  • In the View Library, all saved Views are within a panels wrapper.

Default Values

import Vizzly, { type VizzlyTheming } from "@vizzly/dashboard"
 
export function Dashboard() {
  const theme: VizzlyTheming.Base = {
    panels: {
      // Default Values
      border: "0",
      background: "#fff",
      boxShadow:
        "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
      borderRadius: "8px",
      padding: "0.75rem 1rem",
    },
  }
 
  return (
    <Vizzly.Dashboard
      // ...
      theme={theme}
    />
  )
}