tabs

tabs is an object within the theme property for overriding tab styles within the View Editor.

<Vizzly.Dashboard
  // ...
  theme={{
    tabs: {
      borderBottom: "none",
      selected: {
        background: "transparent",
        borderBottom: "3px solid #3683f5",
      },
      unselected: {
        background: "transparent",
        borderBottom: "1px solid #ebeced",
      },
    },
  }}
/>

Pellentesque ac neque convallis augue ultricies egestas. Donec est ligula, tincidunt sit amet justo a, rutrum pellentesque turpis. Donec sapien metus, feugiat eget quam ut, laoreet dapibus mi.

Tabs

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

In the View Editor, tabs are used to change between 'Data' and 'Format'.
In the View 'Add Parameters' modal, tabs are used to change between 'Metrics' and 'Groups'.

Default Values

import Vizzly, { type VizzlyTheming } from "@vizzly/dashboard"
 
export function Dashboard() {
  const theme: VizzlyTheming.Base = {
    tabs: {
      // Default Values
      borderBottom: "none",
      selected: {
        background: "transparent",
        borderBottom: "3px solid #3683f5",
        borderLeft: "none",
        borderRadius: "0",
        borderRight: "none",
        borderTop: "none",
        boxShadow: "unset",
        color: "inherit",
        fontSize: "14px",
        fontWeight: "initial",
        narrowPadding: "padding",
        padding: "11.5px 16px",
        "&:hover": {
          background: "transparent",
          borderRadius: "6px 6px 0 0",
          boxShadow: "unset",
          color: "#202223",
          fontWeight: "initial",
          opacity: "1",
        },
        "&:disabled": {
          background: "transparent",
          borderRadius: "6px 6px 0 0",
          boxShadow: "unset",
          color: "#rgba(16, 16, 16, 0.3)",
          fontWeight: "initial",
          opacity: "1",
        },
        "&:hover:disabled": {
          background: "transparent",
          borderRadius: "6px 6px 0 0",
          boxShadow: "unset",
          color: "#202223",
          fontWeight: "initial",
          opacity: "1",
        },
      },
      unselected: {
        background: "transparent",
        borderBottom: "1px solid #ebeced",
        borderLeft: "none",
        borderRadius: "0",
        borderRight: "none",
        borderTop: "none",
        boxShadow: "unset",
        color: "#6d7175",
        fontSize: "14px",
        fontWeight: "initial",
        narrowPadding: "padding",
        padding: "11.5px 16px 13.5px",
        "&:hover": {
          background: "transparent",
          borderRadius: "6px 6px 0 0",
          boxShadow: "unset",
          color: "#202223",
          fontWeight: "initial",
          opacity: "1",
        },
        "&:disabled": {
          background: "transparent",
          borderRadius: "6px 6px 0 0",
          boxShadow: "unset",
          color: "#6d7175",
          fontWeight: "initial",
          opacity: "1",
        },
        "&:hover:disabled": {
          background: "transparent",
          borderRadius: "6px 6px 0 0",
          boxShadow: "unset",
          color: "#202223",
          fontWeight: "initial",
          opacity: "1",
        },
      },
    },
  }
 
  return (
    <Vizzly.Dashboard
      // ...
      theme={theme}
    />
  )
}