1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[835],{1996:(e,t,l)=>{(window.__NEXT_P=window.__NEXT_P||[]).push(["/click-ui/flyout",function(){return l(50605)}])},50605:(e,t,l)=>{"use strict";l.r(t),l.d(t,{FlyoutDemo:()=>g,FormFlyoutDemo:()=>j,LeftFlyoutDemo:()=>p,SettingsFlyoutDemo:()=>f,default:()=>b,useTOC:()=>F});var n=l(37876),o=l(71807),i=l(54625),r=l(89707),s=l(79954),a=l(60098),d=l(27836),u=l(82922),h=l(79406),c=l(90960),y=l(45398),x=l(97084),m=l(99142);function g(){return(0,n.jsxs)(s.m,{children:[(0,n.jsx)(s.m.Trigger,{children:(0,n.jsx)(a.$,{type:"primary",label:"Open Flyout"})}),(0,n.jsxs)(s.m.Content,{strategy:"fixed",align:"end",size:"default",showOverlay:!0,children:[(0,n.jsx)(s.m.Header,{title:"Flyout title",description:"Useful description"}),(0,n.jsx)(s.m.Body,{align:"default",children:(0,n.jsx)(s.m.Element,{children:(0,n.jsx)(d.E,{children:"This is the body of the Flyout. Put any content you like here."})})}),(0,n.jsxs)(s.m.Footer,{children:[(0,n.jsx)(s.m.Close,{label:"Cancel"}),(0,n.jsx)(a.$,{type:"primary",label:"Save"})]})]})]})}function j(){return(0,n.jsxs)(s.m,{children:[(0,n.jsx)(s.m.Trigger,{children:(0,n.jsx)(a.$,{type:"primary",label:"Add Item"})}),(0,n.jsxs)(s.m.Content,{strategy:"fixed",align:"end",size:"default",showOverlay:!0,children:[(0,n.jsx)(s.m.Header,{title:"Add new item",description:"Fill in the details below"}),(0,n.jsx)(s.m.Body,{children:(0,n.jsx)(s.m.Element,{children:(0,n.jsx)(d.E,{children:"Form content goes here"})})}),(0,n.jsxs)(s.m.Footer,{children:[(0,n.jsx)(s.m.Close,{label:"Cancel"}),(0,n.jsx)(a.$,{type:"primary",label:"Save"})]})]})]})}function f(){return(0,n.jsxs)(s.m,{children:[(0,n.jsx)(s.m.Trigger,{children:(0,n.jsx)(a.$,{type:"secondary",label:"Settings"})}),(0,n.jsxs)(s.m.Content,{strategy:"fixed",align:"end",size:"narrow",showOverlay:!0,children:[(0,n.jsx)(s.m.Header,{title:"Settings",description:"Configure your preferences"}),(0,n.jsx)(s.m.Body,{children:(0,n.jsx)(s.m.Element,{children:(0,n.jsx)(d.E,{children:"Settings content goes here"})})}),(0,n.jsx)(s.m.Footer,{children:(0,n.jsx)(s.m.Close,{label:"Close"})})]})]})}function p(){return(0,n.jsxs)(s.m,{children:[(0,n.jsx)(s.m.Trigger,{children:(0,n.jsx)(a.$,{type:"primary",label:"Left Flyout"})}),(0,n.jsxs)(s.m.Content,{strategy:"fixed",align:"start",size:"default",showOverlay:!0,children:[(0,n.jsx)(s.m.Header,{title:"Flyout title",description:"Useful description"}),(0,n.jsx)(s.m.Body,{children:(0,n.jsx)(s.m.Element,{children:(0,n.jsx)(d.E,{children:"This flyout opens from the left side."})})}),(0,n.jsxs)(s.m.Footer,{children:[(0,n.jsx)(s.m.Close,{label:"Cancel"}),(0,n.jsx)(a.$,{type:"primary",label:"Save"})]})]})]})}function F(e){return[{value:"Example",id:"example",depth:2},{value:"Props",id:"props",depth:2},{value:"Quick start",id:"quick-start",depth:2},{value:"Related components",id:"related-components",depth:2},{value:"Common use cases",id:"common-use-cases",depth:2},{value:"Form flyout",id:"form-flyout",depth:3},{value:"Settings flyout",id:"settings-flyout",depth:3},{value:"Left-aligned flyout",id:"left-aligned-flyout",depth:3}]}let b=(0,o.e)(function(e){let{toc:t=F(e)}=e,l={h1:"h1",h2:"h2",h3:"h3",li:"li",strong:"strong",ul:"ul",...(0,r.R)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(l.h1,{children:"Flyout"}),"\n",(0,n.jsx)(u.h,{size:"sm"}),"\n",(0,n.jsx)(d.E,{size:"lg",children:"The Flyout component is a panel that slides in from the left or right edge of the screen and contains contextual information or actions. We use this most often for modals and forms for adding or editing table data."}),"\n",(0,n.jsx)(u.h,{size:"lg"}),"\n",(0,n.jsx)(l.h2,{id:t[0].id,children:t[0].value}),"\n","\n",(0,n.jsx)(h.Z,{hasBorder:!0,children:(0,n.jsx)(g,{})}),"\n",(0,n.jsx)(u.h,{size:"lg"}),"\n",(0,n.jsx)(l.h2,{id:t[1].id,children:t[1].value}),"\n",(0,n.jsx)(m.A,{rows:[{id:"showOverlay",items:[{label:"showOverlay"},{label:(0,n.jsx)(c.q,{children:"boolean"})},{label:(0,n.jsx)(c.q,{children:"false"})},{label:"Whether to show the backdrop overlay behind the flyout"}]},{id:"size",items:[{label:"size"},{label:(0,n.jsx)(c.q,{children:'"default" | "narrow" | "wide" | "widest"'})},{label:(0,n.jsx)(c.q,{children:'"default"'})},{label:"Width size variant of the flyout panel"}]},{id:"type",items:[{label:"type"},{label:(0,n.jsx)(c.q,{children:'"default" | "inline"'})},{label:(0,n.jsx)(c.q,{children:'"default"'})},{label:"Display type - default (overlay) or inline (within page flow)"}]},{id:"strategy",items:[{label:"strategy"},{label:(0,n.jsx)(c.q,{children:'"relative" | "absolute" | "fixed"'})},{label:(0,n.jsx)(c.q,{children:'"relative"'})},{label:"CSS positioning strategy for the flyout panel"}]},{id:"align",items:[{label:"align"},{label:(0,n.jsx)(c.q,{children:'"start" | "end"'})},{label:(0,n.jsx)(c.q,{children:'"end"'})},{label:"Alignment of the flyout - start (left) or end (right)"}]},{id:"closeOnInteractOutside",items:[{label:"closeOnInteractOutside"},{label:(0,n.jsx)(c.q,{children:"boolean"})},{label:(0,n.jsx)(c.q,{children:"false"})},{label:"Whether clicking outside the flyout should close it"}]},{id:"width",items:[{label:"width"},{label:(0,n.jsx)(c.q,{children:"string"})},{label:(0,n.jsx)(c.q,{children:"undefined"})},{label:'Custom width for the flyout (e.g., "400px", "50%"). Overrides size when specified.'}]},{id:"hasShadow",items:[{label:"hasShadow"},{label:(0,n.jsx)(c.q,{children:"boolean"})},{label:(0,n.jsx)(c.q,{children:"true"})},{label:"Whether to show a drop shadow on the flyout panel. Set false to remove it."}]}],snippet:'import { Flyout, Button } from \'@clickhouse/click-ui\'\n\n<Flyout>\n<Flyout.Trigger>\n <Button type="primary" label="Open Flyout" />\n</Flyout.Trigger>\n<Flyout.Content showOverlay={true} align="end" strategy="fixed">\n <Flyout.Header title="Flyout title" description="Useful description" />\n <Flyout.Body>\n <Flyout.Element>\n Content goes here\n </Flyout.Element>\n </Flyout.Body>\n <Flyout.Footer>\n <Flyout.Close label="Cancel" />\n <Button type="primary" label="Save" />\n </Flyout.Footer>\n</Flyout.Content>\n</Flyout>'}),"\n",(0,n.jsx)(u.h,{size:"lg"}),"\n",(0,n.jsx)(l.h2,{id:t[2].id,children:t[2].value}),"\n",(0,n.jsx)(y.N,{language:"tsx",children:'import { Flyout, Button, Text } from \'@clickhouse/click-ui\'\n\nfunction MyFlyout() {\nreturn (\n <Flyout>\n <Flyout.Trigger>\n <Button type="primary" label="Open Flyout" />\n </Flyout.Trigger>\n <Flyout.Content showOverlay={true} align="end" strategy="fixed">
1\n <Flyout.Header title="Flyout title" description="Description" />\n <Flyout.Body>\n <Flyout.Element>\n <Text>Content goes here</Text>\n </Flyout.Element>\n </Flyout.Body>\n <Flyout.Footer>\n <Flyout.Close label="Cancel" />\n <Button type="primary" label="Save" />\n </Flyout.Footer>\n </Flyout.Content>\n </Flyout>\n)\n}'}),"\n",(0,n.jsx)(u.h,{size:"lg"}),"\n",(0,n.jsx)(l.h2,{id:t[3].id,children:t[3].value}),"\n",(0,n.jsxs)(l.ul,{children:["\n",(0,n.jsxs)(l.li,{children:[(0,n.jsx)(l.strong,{children:(0,n.jsx)(x.N,{href:"/click-ui/dialog",children:"Dialog"})}),": For centered modal dialogs instead of side panels."]}),"\n",(0,n.jsxs)(l.li,{children:[(0,n.jsx)(l.strong,{children:(0,n.jsx)(x.N,{href:"/click-ui/popover",children:"Popover"})}),": For smaller contextual content without full panels."]}),"\n",(0,n.jsxs)(l.li,{children:[(0,n.jsx)(l.strong,{children:(0,n.jsx)(x.N,{href:"/click-ui/button",children:"Button"})}),": Commonly used as a flyout trigger."]}),"\n"]}),"\n",(0,n.jsx)(u.h,{size:"lg"}),"\n",(0,n.jsx)(l.h2,{id:t[4].id,children:t[4].value}),"\n",(0,n.jsx)(l.h3,{id:t[5].id,children:t[5].value}),"\n","\n",(0,n.jsx)(h.Z,{hasBorder:!0,children:(0,n.jsx)(j,{})}),"\n",(0,n.jsx)(y.N,{language:"tsx",children:'import { Flyout, Button, Text } from \'@clickhouse/click-ui\'\n\nfunction FormFlyout() {\nreturn (\n <Flyout>\n <Flyout.Trigger>\n <Button type="primary" label="Add Item" />\n </Flyout.Trigger>\n <Flyout.Content strategy="fixed" align="end" showOverlay={true}>\n <Flyout.Header title="Add new item" description="Fill in the details" />\n <Flyout.Body>
1\n <Flyout.Element>\n <Text>Form content</Text>\n </Flyout.Element>\n </Flyout.Body>\n <Flyout.Footer>\n <Flyout.Close label="Cancel" />\n <Button type="primary" label="Save" />\n </Flyout.Footer>\n </Flyout.Content>\n </Flyout>\n)\n}'}),"\n",(0,n.jsx)(u.h,{size:"lg"}),"\n",(0,n.jsx)(l.h3,{id:t[6].id,children:t[6].value}),"\n","\n",(0,n.jsx)(h.Z,{hasBorder:!0,children:(0,n.jsx)(f,{})}),"\n",(0,n.jsx)(y.N,{language:"tsx",children:'import { Flyout, Button, Text } from \'@clickhouse/click-ui\'\n\nfunction SettingsFlyout() {\nreturn (\n <Flyout>\n <Flyout.Trigger>\n <Button type="secondary" label="Settings" />\n </Flyout.Trigger>\n <Flyout.Content strategy="fixed" align="end" size="narrow" showOverlay={true}>\n <Flyout.Header title="Settings" description="Configure preferences" />\n <Flyout.Body>\n <Flyout.Element>\n <Text>Settings content</Text>\n </Flyout.Element>\n </Flyout.Body>\n <Flyout.Footer>\n <Flyout.Close label="Close" />\n </Flyout.Footer>\n </Flyout.Content>\n </Flyout>\n)\n}'}),"\n",(0,n.jsx)(u.h,{size:"lg"}),"\n",(0,n.jsx)(l.h3,{id:t[7].id,children:t[7].value}),"\n","\n",(0,n.jsx)(h.Z,{hasBorder:!0,children:(0,n.jsx)(p,{})})]})},"/click-ui/flyout",{filePath:"pages/click-ui/flyout.mdx",timestamp:1788971614e3,pageMap:i.O,frontMatter:{title:"Flyout",description:"The Flyout component is a panel that slides in from the left or right edge of the screen and contains contextual information or actions.",category:"Overlays",related:["Dialog","Popover","Button"],commonPatterns:["form-flyout","settings-flyout","detail-flyout"]},title:"Flyout"},"undefined"==typeof RemoteContent?F:RemoteContent.useTOC)},99142:(e,t,l)=>{"use strict";l.d(t,{A:()=>c});var n=l(37876),o=l(90960),i=l(51792),r=l(82922),s=l(15440),a=l(27836),d=l(45398);let u=[{label:"Prop"},{label:"Type"},{label:"Default value"},{label:"Description"}],h=[{id:"row-1",items:[{label:"Demo Prop"},{label:(0,n.jsx)(o.q,{children:"string"})},{label:(0,n.jsx)(o.q,{children:"default"})}]}],c=e=>{let{rows:t=h,snippet:l,hasRequiredFields:o}=e;return(0,n.jsxs)(i.t,{defaultValue:"tab1",onValueChange:e=>console.log(e),children:[(0,n.jsxs)(i.t.TriggersList,{children:[(0,n.jsx)(i.t.Trigger,{value:"tab1",children:"Props"}),l?(0,n.jsx)(i.t.Trigger,{value:"tab2",children:"Code snippet"}):null]}),(0,n.jsxs)(i.t.Content,{value:"tab1",children:[(0,n.jsx)(r.h,{}),(0,n.jsx)(s.X,{headers:u,rows:t}),o?(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(r.h,{size:"sm"}),(0,n.jsx)(a.E,{color:"danger",align:"right",children:"* denotes required field"})]}):null]}),(0,n.jsxs)(i.t.Content,{value:"tab2",children:[(0,n.jsx)(r.h,{}),(0,n.jsx)(d.N,{showLineNumbers:!0,language:"tsx",children:l||""})]})]})}}},e=>{e.O(0,[1807,63,5398,58,7006,636,6593,8792],()=>e(e.s=1996)),_N_E=e.O()}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.