Panel
Wrapper panel for content with vibrancy and border.My favouritesLorem ipsum dolor sit, amet consectetur adipisicing elit. Cum tempora
magni quaerat libero recusandae itaque quod. Unde a, ratione quas nihil,
at sapiente ducimus fugit ex quasi minus corporis commodi.
Anatomy
import { Panel } from "@lualtek/react-components";
export default () => {
return (
<Panel bordered vibrancy="strong" vibrancyColor="mid">
...
</Panel>
);
};
API Reference
export type PanelProps = {
/**
* Enable or disable the vibrant effect. Add translucent and blurred background.
*
* @defaultValue false
*/
vibrant?: boolean;
/**
* Set the vibrancy level of the panel.
*
* @defayltValue "strong"
*/
vibrancyLevel?: "strong" | "soft";
/**
* Change the background color of the card.
*/
vibrancyColor?: "soft" | "background" | "mid" | "hard";
/**
* Change the saturation of the elements behind the vibrancy effect.
*
* @defaultValue "standard"
*/
vibrancySaturation?: "standard" | "high";
/**
* Show a border around the panel.
*/
bordered?: boolean;
/**
* Define the edge radius of the card.
*/
radius?: TokensTypes["radius"];
/**
* Enable border on a specific side.
* @defaultValue 'all'
*/
borderSide?: "all" | "top" | "right" | "bottom" | "left";
/**
* Set the horizontal padding (left/right)
*/
hPadding?: TokensTypes["space"];
/**
* Set the vertical padding (top/bottom)
*/
vPadding?: TokensTypes["space"];
};