There are following components included:
Panel
- side panel elementName | Type | Default | Description |
---|---|---|---|
backdrop | boolean | true | Enables Panel backdrop (dark semi transparent layer behind) |
colors | object | Object with Tailwind CSS colors classes | |
colors.bg | string | 'bg-white dark:bg-black' | Panel bg color |
component | string | 'div' | Component's HTML Element |
floating | boolean | false | When enabled opened panel will have extra spaces from sides |
opened | boolean | false | Allows to open/close Panel and set its initial state |
side | 'left' | 'right' | 'left' | Panel side |
size | string | 'w-72 h-screen' | Tailwind CSS size classes |
onBackdropClick | function(e) | Click handler on backdrop element |
import React, { useState } from 'react';import {Page,Navbar,NavbarBackLink,Panel,BlockTitle,Block,Link,Button,} from 'konsta/react';export default function SidePanelsPage() {const [leftPanelOpened, setLeftPanelOpened] = useState(false);const [rightPanelOpened, setRightPanelOpened] = useState(false);const [leftFloatingPanelOpened, setLeftFloatingPanelOpened] = useState(false);const [rightFloatingPanelOpened, setRightFloatingPanelOpened] =useState(false);return (<Page><Navbartitle="Panel / Side Panel"/><Block strongIos outlineIos className="space-y-4"><p>Konsta UI comes with 2 panels (on left and on right), both areoptional. You can put absolutely anything inside: data lists, forms,custom content, etc.</p></Block><BlockstrongIosoutlineIosclassName="flex space-x-4 rtl:space-x-reverse"><Button rounded onClick={() => setLeftPanelOpened(true)}>Left Panel</Button><Button rounded onClick={() => setRightPanelOpened(true)}>Right Panel</Button></Block><BlockTitle>Floating Panels</BlockTitle><BlockstrongIosoutlineIosclassName="flex space-x-4 rtl:space-x-reverse"><Button rounded onClick={() => setLeftFloatingPanelOpened(true)}>Left Panel</Button><Button rounded onClick={() => setRightFloatingPanelOpened(true)}>Right Panel</Button></Block><Panelside="left"opened={leftPanelOpened}onBackdropClick={() => setLeftPanelOpened(false)}><Page><Navbartitle="Left Panel"right={<Link navbar onClick={() => setLeftPanelOpened(false)}>Close</Link>}/><Block className="space-y-4"><p>Here comes left panel.</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.Suspendisse faucibus mauris leo, eu bibendum neque congue non. Utleo mauris, eleifend eu commodo a, egestas ac urna. Maecenas inlacus faucibus, viverra ipsum pulvinar, molestie arcu. Etiamlacinia venenatis dignissim. Suspendisse non nisl semper tellusmalesuada suscipit eu et eros. Nulla eu enim quis quam elementumvulputate. Mauris ornare consequat nunc viverra pellentesque.Aenean semper eu massa sit amet aliquam. Integer et neque sedlibero mollis elementum at vitae ligula. Vestibulum pharetra sedlibero sed porttitor. Suspendisse a faucibus lectus.</p></Block></Page></Panel><Panelside="right"opened={rightPanelOpened}onBackdropClick={() => setRightPanelOpened(false)}><Page><Navbartitle="Right Panel"right={<Link navbar onClick={() => setRightPanelOpened(false)}>Close</Link>}/><Block className="space-y-4"><p>Here comes right panel.</p><p>Duis ut mauris sollicitudin, venenatis nisi sed, luctus ligula.Phasellus blandit nisl ut lorem semper pharetra. Nullam tortornibh, suscipit in consequat vel, feugiat sed quam. Nam risuslibero, auctor vel tristique ac, malesuada ut ante. Sed molestie,est in eleifend sagittis, leo tortor ullamcorper erat, atvulputate eros sapien nec libero. Mauris dapibus laoreet nibh quisbibendum. Fusce dolor sem, suscipit in iaculis id, pharetra aturna. Pellentesque tempor congue massa quis faucibus. Vestibulumnunc eros, convallis blandit dui sit amet, gravida adipiscinglibero.</p></Block></Page></Panel><Panelside="left"floatingopened={leftFloatingPanelOpened}onBackdropClick={() => setLeftFloatingPanelOpened(false)}><Page className="no-safe-areas-top no-safe-areas-bottom"><Navbartitle="Left Panel"right={<Link navbar onClick={() => setLeftFloatingPanelOpened(false)}>Close</Link>}/><Block className="space-y-4"><p>Here comes left panel.</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.Suspendisse faucibus mauris leo, eu bibendum neque congue non. Utleo mauris, eleifend eu commodo a, egestas ac urna. Maecenas inlacus faucibus, viverra ipsum pulvinar, molestie arcu. Etiamlacinia venenatis dignissim. Suspendisse non nisl semper tellusmalesuada suscipit eu et eros. Nulla eu enim quis quam elementumvulputate. Mauris ornare consequat nunc viverra pellentesque.Aenean semper eu massa sit amet aliquam. Integer et neque sedlibero mollis elementum at vitae ligula. Vestibulum pharetra sedlibero sed porttitor. Suspendisse a faucibus lectus.</p></Block></Page></Panel><Panelside="right"floatingopened={rightFloatingPanelOpened}onBackdropClick={() => setRightFloatingPanelOpened(false)}><Page className="no-safe-areas-top no-safe-areas-bottom"><Navbartitle="Right Panel"right={<Link navbar onClick={() => setRightFloatingPanelOpened(false)}>Close</Link>}/><Block className="space-y-4"><p>Here comes right panel.</p><p>Duis ut mauris sollicitudin, venenatis nisi sed, luctus ligula.Phasellus blandit nisl ut lorem semper pharetra. Nullam tortornibh, suscipit in consequat vel, feugiat sed quam. Nam risuslibero, auctor vel tristique ac, malesuada ut ante. Sed molestie,est in eleifend sagittis, leo tortor ullamcorper erat, atvulputate eros sapien nec libero. Mauris dapibus laoreet nibh quisbibendum. Fusce dolor sem, suscipit in iaculis id, pharetra aturna. Pellentesque tempor congue massa quis faucibus. Vestibulumnunc eros, convallis blandit dui sit amet, gravida adipiscinglibero.</p></Block></Page></Panel></Page>);}SidePanelsPage.title = 'Panel / Side Panels';