popoverMenu

popoverMenu is an object within the theme property for overriding all pop over menus.

<Vizzly.Dashboard
  // ...
  theme={{
    popoverMenu: {
      background: "#f9f7fa",
      color: "inherit",
      separatorBorder: "none",
      "&:hover": {
        background: "#ffffff",
        color: "inherit",
      },
    },
  }}
/>
Vizzly Dashboard Pop Over Menus

Pop Over Menus

Pop Over Menus are featured within <Vizzly.Dashboard/> in the following loctions:

  • Dropdowns shown on click of more buttons, shown to the right of dashboard cells.
  • Dropdowns shown on click of table header cells.
  • Dropdowns shown on click of more buttons, shown to the right of Views in the View Library.
  • Dropdowns shown on click of the local filters funnel icon, shown on Views.

Default Values

import Vizzly, { type VizzlyTheming } from "@vizzly/dashboard"
 
export function Dashboard() {
  const theme: VizzlyTheming.Base = {
    popoverMenu: {
      // Default Values
      background: "#f9f7fa",
      color: "inherit",
      boxShadow: "0 0 #0000, 0 0 #0000, 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)",
      fontSize: "14px",
      fontWeight: "inherit",
      separatorBorder: "none",
      borderRadius: "8px",
      padding: "0.35rem 0.75rem",
      "&:hover": {
        background: "#ffffff",
        fontWeight: "inherit",
        color: "inherit",
      },
    },
  }
 
  return (
    <Vizzly.Dashboard
      // ...
      theme={theme}
    />
  )
}