Layout
Components ยท 9 pages
- DraggablePanelDraggablePanel is a panel that can be dragged and resized. It supports pinning, fixed or floating mode, placement in four directions, minimum width and height, expandable or not, default and customizable size, and destroy on close. It also provides a handler for expanding and collapsing the panel.
- FlexFlexible layout components based on Flexbox
- FooterThe Footer component is used to display a website footer. It supports various customization options like column layout, bottom content, and theme selection.
- GridGrid is a responsive layout component that arranges child elements in a grid pattern. It automatically adjusts the number of columns based on available space.
- HeaderThe Header component is a customizable header section with a logo, navigation, and actions. It is responsive and adapts to mobile and desktop screens.
- LayoutThe Layout component is used to create a basic layout structure with header, footer, sidebar and content areas. It provides customizable props such as headerHeight, asideWidth and tocWidth to adjust the size of each area. It also includes sub-components such as LayoutHeader, LayoutMain, LayoutSidebar, LayoutToc and LayoutFooter, which can be used independently for more flexibility. The component is responsive to different screen sizes with the help of useResponsive hook.
- MaskShadowMaskShadow is a component that adds a gradient shadow effect to indicate content overflow in a specific direction. It's commonly used for scrollable containers to provide a visual cue that more content is available.
- ScrollAreaA native scroll container with custom scrollbars and gradient scroll fade.
- ScrollShadowScrollShadow is a component that adds shadow indicators to scrollable content to show overflow in different directions. It automatically detects scroll status and shows or hides shadows accordingly.