[{"data":1,"prerenderedAt":967},["Reactive",2],{"$KyeTl6nybl":3,"page-data":4,"page-tree":283,"doc-page-nav":303,"doc-nav":308},[],{"_path":5,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":9,"description":8,"body":10,"_type":278,"_id":279,"_source":280,"_file":281,"_extension":282},"/documentation/layers/collapse","layers",false,"","Collapse layer",{"type":11,"children":12,"toc":275},"root",[13,98,264,269],{"type":14,"tag":15,"props":16,"children":18},"element","doc-component-demo",{"title":17},"Collapse presentation",[19,26,33],{"type":14,"tag":20,"props":21,"children":22},"p",{},[23],{"type":24,"value":25},"text","The collapse layout focuses on a single sidebar with a list of menu links, ideal for smaller apps if you don't have enough content or pages to use a more complex layout like the sidebar layout.",{"type":14,"tag":27,"props":28,"children":32},"doc-heading",{"label":29,"className":30},"Layout features",[31],"mb-4",[],{"type":14,"tag":34,"props":35,"children":36},"ul",{},[37,53,68,83],{"type":14,"tag":38,"props":39,"children":40},"li",{},[41,47],{"type":14,"tag":42,"props":43,"children":44},"strong",{},[45],{"type":24,"value":46},"Navigation (expanded):",{"type":14,"tag":48,"props":49,"children":52},"doc-image",{"src":50,"srcDark":51},"/img/apps/tairo-layout-collapse.png","/img/apps/tairo-layout-collapse-dark.png",[],{"type":14,"tag":38,"props":54,"children":55},{},[56,61,63],{"type":14,"tag":42,"props":57,"children":58},{},[59],{"type":24,"value":60},"Navigation (collapsed):",{"type":24,"value":62},"  The collapse layout can be folded into an icon sidebar. The collapse layout can have single menu links or submenu links. Clicking on a submenu link will revert the sidebar to its uncollapsed state",{"type":14,"tag":48,"props":64,"children":67},{"src":65,"srcDark":66},"/img/apps/tairo-layout-collapse-collapsed.png","/img/apps/tairo-layout-collapse-collapsed-dark.png",[],{"type":14,"tag":38,"props":69,"children":70},{},[71,76,78],{"type":14,"tag":42,"props":72,"children":73},{},[74],{"type":24,"value":75},"Toolbar:",{"type":24,"value":77}," The toolbar is displayed at the top of the main content area. It can be used to display the current page title and a set of quick actions.",{"type":14,"tag":48,"props":79,"children":82},{"src":80,"srcDark":81},"/img/apps/tairo-toolbar.png","/img/apps/tairo-toolbar-dark.png",[],{"type":14,"tag":38,"props":84,"children":85},{},[86,91,93],{"type":14,"tag":42,"props":87,"children":88},{},[89],{"type":24,"value":90},"Circular menu:",{"type":24,"value":92}," When scrolling down, the circular menu is displayed at the top right of the screen. It can be used to display a set of quick actions.",{"type":14,"tag":48,"props":94,"children":97},{"src":95,"srcDark":96},"/img/apps/tairo-layout-collapse-circular-menu.png","/img/apps/tairo-layout-collapse-circular-menu-dark.png",[],{"type":14,"tag":15,"props":99,"children":101},{"title":100},"Collapse configuration",[102,116,143,155,167,171,184,189,194,214,226,231,236,248,252],{"type":14,"tag":20,"props":103,"children":104},{},[105,107,114],{"type":24,"value":106},"First you need to enable the collapse layout layer in the ",{"type":14,"tag":108,"props":109,"children":111},"code",{"className":110},[],[112],{"type":24,"value":113},"\u003Capp>/nuxt.config.ts",{"type":24,"value":115}," file.",{"type":14,"tag":117,"props":118,"children":119},"code-group",{},[120,133],{"type":14,"tag":121,"props":122,"children":128},"pre",{"className":123,"code":125,"filename":126,"language":127,"meta":8},[124],"language-ts","export default defineNuxtConfig({\n  extends: [\n    // enable the collapse layout layer\n    [\"gh:cssninjaStudio/tairo/layers/tairo-layout-collapse#1.5.0\", {\n      install: true,\n      auth: import.meta.env.GITHUB_TOKEN,\n    }],\n\n    // required base layer\n    [\"gh:cssninjaStudio/tairo/layers/tairo#1.5.0\", {\n      install: true,\n      auth: import.meta.env.GITHUB_TOKEN,\n    }],\n  ]\n})\n","\u003Capp>/nuxt.config.ts (github layers)","ts",[129],{"type":14,"tag":108,"props":130,"children":131},{"__ignoreMap":8},[132],{"type":24,"value":125},{"type":14,"tag":121,"props":134,"children":138},{"className":135,"code":136,"filename":137,"language":127,"meta":8},[124],"export default defineNuxtConfig({\n  extends: [\n    // enable the collapse layout layer\n    '../layers/tairo-layout-collapse',\n\n    // required base layer\n    '../layers/tairo',\n  ]\n})\n","\u003Capp>/nuxt.config.ts (source)",[139],{"type":14,"tag":108,"props":140,"children":141},{"__ignoreMap":8},[142],{"type":24,"value":136},{"type":14,"tag":20,"props":144,"children":145},{},[146,148,154],{"type":24,"value":147},"Then you can configure the collapse layout in the ",{"type":14,"tag":108,"props":149,"children":151},{"className":150},[],[152],{"type":24,"value":153},"\u003Capp>/app.config.ts",{"type":24,"value":115},{"type":14,"tag":117,"props":156,"children":157},{},[158],{"type":14,"tag":121,"props":159,"children":162},{"className":160,"code":161,"filename":153,"language":127,"meta":8},[124],"export default defineAppConfig({\n  tairo: {\n    collapse: {\n      // collapse config\n    },\n  },\n})\n",[163],{"type":14,"tag":108,"props":164,"children":165},{"__ignoreMap":8},[166],{"type":24,"value":161},{"type":14,"tag":27,"props":168,"children":170},{"label":169},"Default configuration",[],{"type":14,"tag":117,"props":172,"children":173},{},[174],{"type":14,"tag":121,"props":175,"children":179},{"className":176,"code":177,"filename":178,"language":127,"meta":8},[124],"export default defineAppConfig({\n  tairo: {\n    collapse: {\n      circularMenu: {\n        enabled: true,\n        tools: [],\n      },\n      toolbar: {\n        enabled: true,\n        showTitle: false,\n        showNavBurger: false,\n        tools: [],\n      },\n      navigation: {\n        enabled: true,\n        header: {\n          component: '',\n        },\n        footer: {\n          component: '',\n        },\n        items: [],\n      },\n    },\n  },\n})\n","layers/tairo-layout-collapse/app.config.ts",[180],{"type":14,"tag":108,"props":181,"children":182},{"__ignoreMap":8},[183],{"type":24,"value":177},{"type":14,"tag":20,"props":185,"children":186},{},[187],{"type":24,"value":188},"You don't need to specify all the properties, only the ones you want to override.",{"type":14,"tag":27,"props":190,"children":193},{"label":191,"className":192},"Tools",[31],[],{"type":14,"tag":20,"props":195,"children":196},{},[197,199,205,207,212],{"type":24,"value":198},"To add ",{"type":14,"tag":108,"props":200,"children":202},{"className":201},[],[203],{"type":24,"value":204},"tools",{"type":24,"value":206}," to the toolbar or the circular menu, you have to create global components, and add them to the ",{"type":14,"tag":108,"props":208,"children":210},{"className":209},[],[211],{"type":24,"value":204},{"type":24,"value":213}," array.",{"type":14,"tag":117,"props":215,"children":216},{},[217],{"type":14,"tag":121,"props":218,"children":221},{"className":219,"code":220,"filename":153,"language":127,"meta":8},[124],"export default defineAppConfig({\n  tairo: {\n    collapse: {\n      toolbar: {\n        tools: [\n          {\n            // Use a global component\n            component: 'DemoThemeToggle',\n            // Define the component props, if any\n            props: {\n              disableTransitions: true,\n            },\n          },\n        ],\n      },\n    },\n  },\n})\n",[222],{"type":14,"tag":108,"props":223,"children":224},{"__ignoreMap":8},[225],{"type":24,"value":220},{"type":14,"tag":27,"props":227,"children":230},{"label":228,"className":229},"Navigation Header",[31],[],{"type":14,"tag":20,"props":232,"children":233},{},[234],{"type":24,"value":235},"You can add a header or/and a footer to the navigation sidebar. You can use a global component or a local component.",{"type":14,"tag":117,"props":237,"children":238},{},[239],{"type":14,"tag":121,"props":240,"children":243},{"className":241,"code":242,"filename":153,"language":127,"meta":8},[124],"export default defineAppConfig({\n  tairo: {\n    collapse: {\n      navigation: {\n        header: {\n          component: 'DemoCollapseNavigationHeader',\n        },\n        footer: {\n          component: 'DemoCollapseNavigationFooter',\n        },\n      },\n    },\n  },\n})\n",[244],{"type":14,"tag":108,"props":245,"children":246},{"__ignoreMap":8},[247],{"type":24,"value":242},{"type":14,"tag":27,"props":249,"children":251},{"label":250},"Navigation items",[],{"type":14,"tag":117,"props":253,"children":254},{},[255],{"type":14,"tag":121,"props":256,"children":259},{"className":257,"code":258,"filename":153,"language":127,"meta":8},[124],"export default defineAppConfig({\n  tairo: {\n    collapse: {\n      navigation: {\n        items: [\n          {\n            name: 'ویجت‌های لیستی',\n            icon: { name: 'ph:chat-circle-duotone', class: 'w-5 h-5' },\n            to: '/dashboards/',\n          },\n          {\n            name: \"مستندات\",\n            icon: { name: 'ph:app-window-duotone', class: 'w-5 h-5' },\n            activePath: '/documentation',\n            children: [\n              {\n                name: 'Collapse',\n                to: '/documentation/shuriken-ui/forms/listbox',\n                icon: { name: 'ph:sidebar-duotone', class: 'w-4 h-4' },\n              },\n              {\n                name: 'Collapse 2 ',\n                to: '/documentation/shuriken-ui/forms/input',\n                icon: { name: 'ph:sidebar-duotone', class: 'w-4 h-4' },\n              },\n            ],\n          },\n          {\n            name: 'جستجو',\n            icon: { name: 'ph:magnifying-glass-duotone', class: 'w-5 h-5' },\n            click: () => {\n              const { open } = usePanels()\n              open('search')\n            },\n          },\n          {\n            name: 'جدا کننده',\n            divider: true,\n          },\n          {\n            name: 'تنظیمات',\n            icon: { name: 'ph:gear-six-duotone', class: 'w-5 h-5' },\n            to: '/dashboards/analytics',\n          },\n        ],\n      },\n    },\n  },\n})\n",[260],{"type":14,"tag":108,"props":261,"children":262},{"__ignoreMap":8},[263],{"type":24,"value":258},{"type":14,"tag":265,"props":266,"children":268},"doc-component-list",{"prefix":267},"TairoCollapse",[],{"type":14,"tag":270,"props":271,"children":274},"doc-nav",{"next":272,"prev":273},"/documentation/layers/topnav","/documentation/layers/sidebar",[],{"title":8,"searchDepth":276,"depth":276,"links":277},2,[],"markdown","content:documentation:20.layers:3.collapse.md","content","documentation/20.layers/3.collapse.md","md",[284,290,297],{"_path":285,"_dir":8,"_draft":7,"_partial":7,"_locale":8,"title":286,"description":8,"toc":287,"_type":278,"_id":288,"_source":280,"_file":289,"_extension":282},"/documentation","مرکز مستندات",true,"content:documentation:1.index.md","documentation/1.index.md",{"_path":291,"_dir":6,"_draft":7,"_partial":287,"_locale":8,"title":292,"_id":293,"_type":294,"_source":280,"_file":295,"_extension":296},"/documentation/layers/_dir","Layers","content:documentation:20.layers:_dir.yml","yaml","documentation/20.layers/_dir.yml","yml",{"_path":298,"_dir":299,"_draft":7,"_partial":7,"_locale":8,"title":300,"description":8,"_type":278,"_id":301,"_source":280,"_file":302,"_extension":282},"/documentation/layers","documentation","Tairo base layer","content:documentation:20.layers:1.index.md","documentation/20.layers/1.index.md",[304,306],{"_path":273,"title":305},"Sidebar layer",{"_path":272,"title":307},"Topnav layer",[309,310,313,316,319,322,325,328,331,334,335,336,337,338,339,342,345,348,351,354,357,360,363,366,369,372,380,384,388,391,394,397,400,403,406,409,416,423,430,437,444,451,458,465,472,481,488,495,502,509,515,522,529,537,544,551,557,564,571,578,586,594,601,607,613,620,626,631,638,644,652,659,665,672,681,688,695,698,704,711,717,727,733,739,746,753,763,769,778,785,792,794,800,807,818,826,832,834,840,847,853,858,860,866,872,877,883,885,891,897,902,907,910,917,923,929,932,940,949,954,962],{"_path":285,"title":286,"description":8},{"_path":311,"title":312},"/documentation/setup/_dir","Setup",{"_path":314,"title":315,"description":8},"/documentation/setup","Prerequisites",{"_path":317,"title":318,"description":8},"/documentation/setup/nuxt-layers-and-tairo","Nuxt, Layers, and Tairo",{"_path":320,"title":321,"description":8},"/documentation/setup/installation","Installation",{"_path":323,"title":324,"description":8},"/documentation/setup/add-a-layout","Add a layout",{"_path":326,"title":327,"description":8},"/documentation/setup/first-page","Your first page",{"_path":329,"title":330,"description":8},"/documentation/setup/first-api-route","Your first API route",{"_path":332,"title":333,"description":8},"/documentation/setup/configuration","Configuration",{"_path":291,"title":292},{"_path":298,"title":300,"description":8},{"_path":273,"title":305,"description":8},{"_path":5,"title":9,"description":8},{"_path":272,"title":307,"description":8},{"_path":340,"title":341,"description":8},"/documentation/layers/iconnav","Iconnav layer",{"_path":343,"title":344,"description":8},"/documentation/layers/extending-layers","Extending Tairo Layers",{"_path":346,"title":347},"/documentation/tailwindcss/_dir","Tailwind CSS",{"_path":349,"title":350,"description":8},"/documentation/tailwindcss","Tailwind, and Tairo",{"_path":352,"title":353,"description":8},"/documentation/tailwindcss/config","Customizing Tailwind",{"_path":355,"title":356,"description":8},"/documentation/tailwindcss/shuriken-ui","رابط کاربری شوریکن",{"_path":358,"title":359,"description":8},"/documentation/tailwindcss/colors","Colors",{"_path":361,"title":362,"description":8},"/documentation/tailwindcss/fonts","Fonts",{"_path":364,"title":365,"description":8},"/documentation/tailwindcss/tooltip","Tooltip",{"_path":367,"title":368},"/documentation/guides/_dir","Guides",{"_path":370,"title":8,"description":371},"/documentation/guides","Redirecting to panels...",{"_path":373,"title":374,"description":375,"components":376,"icon":378},"/documentation/guides/panels","Panels","Tairo panels allow to display additional data and details in animated left or right drawers.",[377],"TairoPanels",{"src":379,"srcDark":379},"/img/illustrations/components/logo-icon.svg",{"_path":381,"title":382,"description":383},"/documentation/guides/form-validation","Form validation","Form validation is a way to check if the data entered by the user is valid. Tairo provides a simple way to validate forms using the `veevalidate` and `zod` libraries.",{"_path":385,"title":386,"description":387},"/documentation/guides/mutli-step-forms","Multi step forms","Utils to create stepper forms in multiple pages",{"_path":389,"title":390,"description":8},"/documentation/guides/pnpm-workspace","Pnpm workspace",{"_path":392,"title":393,"description":8},"/documentation/guides/deployment","Deployment",{"_path":395,"title":396,"description":8},"/documentation/guides/typescript","Typescript",{"_path":398,"title":399,"description":8},"/documentation/guides/troubleshooting","Troubleshooting",{"_path":401,"title":402},"/documentation/reference/_dir","Reference",{"_path":404,"title":405,"description":8},"/documentation/reference","All components",{"_path":407,"title":408},"/documentation/reference/base/_dir","UI Components",{"_path":410,"title":411,"description":412,"components":413,"icon":414},"/documentation/reference/base/accordion","BaseAccordion","Display content in a collapsible and expandable format.",[411],{"src":415,"srcDark":415},"/img/illustrations/components/accordion-icon.svg",{"_path":417,"title":418,"description":419,"components":420,"icon":421},"/documentation/reference/base/avatar-group","BaseAvatarGroup","Use avatars groups to represent groups of persons, technologies, companies or anything else with a logo or an image.",[418],{"src":422,"srcDark":422},"/img/illustrations/components/avatar-group-icon.svg",{"_path":424,"title":425,"description":426,"components":427,"icon":428},"/documentation/reference/base/avatar","BaseAvatar","Use avatars to represent entities with an image, icon, or initials. Discover multiple variations and options.",[425],{"src":429,"srcDark":429},"/img/illustrations/components/avatar-icon.svg",{"_path":431,"title":432,"description":433,"components":434,"icon":435},"/documentation/reference/base/breadcrumb","BaseBreadcrumb","Don't let users get lost inside your application. Automatically generate breadcrumbs based on the current route.",[432],{"src":436,"srcDark":436},"/img/illustrations/components/breadcrumb-icon.svg",{"_path":438,"title":439,"description":440,"components":441,"icon":442},"/documentation/reference/base/button-action","BaseButtonAction","Use actions to interact within or to navigate to a new page. Explore the different button types and their variations.",[439],{"src":443,"srcDark":443},"/img/illustrations/components/button-icon.svg",{"_path":445,"title":446,"description":447,"components":448,"icon":449},"/documentation/reference/base/button-close","BaseButtonClose","Use close buttons for all your custom elements that need to have a close handle, like for modals, dialogs and alerts.",[446],{"src":450,"srcDark":450},"/img/illustrations/components/button-close-icon.svg",{"_path":452,"title":453,"description":454,"components":455,"icon":456},"/documentation/reference/base/button-icon","BaseButtonIcon","Use icon buttons to interact within or to navigate to a new page. Explore the different button types and their variations.",[453],{"src":457,"srcDark":457},"/img/illustrations/components/button-action-icon.svg",{"_path":459,"title":460,"description":461,"components":462,"icon":464},"/documentation/reference/base/button","BaseButton","Use buttons to trigger actions or to navigate to a new page. Explore the different button types and their variations.",[460,463],"BaseButtonGroup",{"src":443,"srcDark":443},{"_path":466,"title":467,"description":468,"components":469,"icon":470},"/documentation/reference/base/card","BaseCard","Cards are used to group related content and present it in an elegant and efficient way. Explore the available options.",[467],{"src":471,"srcDark":471},"/img/illustrations/components/card-icon.svg",{"_path":473,"title":474,"description":475,"components":476,"icon":479},"/documentation/reference/base/dropdown","BaseDropdown","Dropdown are used to display multiple options after a user interaction. Customize how they look and feel using the available props.",[474,477,478],"BaseDropdownItem","BaseDropdownDivider",{"src":480,"srcDark":480},"/img/illustrations/components/dropdown-icon.svg",{"_path":482,"title":483,"description":484,"components":485,"icon":486},"/documentation/reference/base/focus-loop","BaseFocusLoop","Use the focus loop when you want to group several elements inside a same container and make them easily focusable.",[483],{"src":487,"srcDark":487},"/img/illustrations/components/focus-loop-icon.svg",{"_path":489,"title":490,"description":491,"components":492,"icon":493},"/documentation/reference/base/icon-box","BaseIconBox","Display a box with an icon and a title. Use this to raise attention to a specific feature.",[490],{"src":494,"srcDark":494},"/img/illustrations/components/iconbox-icon.svg",{"_path":496,"title":497,"description":498,"components":499,"icon":501},"/documentation/reference/base/list","BaseList","Tairo provides ready to use typography components such as heading, paragraphs and text, with many customization options.",[497,500],"BaseListItem",{"src":415,"srcDark":415},{"_path":503,"title":504,"description":505,"components":506,"icon":507},"/documentation/reference/base/message","BaseMessage","Use messages to inform users about important interactions or events that occur inside your application.",[504],{"src":508,"srcDark":508},"/img/illustrations/components/message-icon.svg",{"_path":510,"title":511,"description":484,"components":512,"icon":513},"/documentation/reference/base/pagination","BasePagination",[511],{"src":514,"srcDark":514},"/img/illustrations/components/pagination-icon.svg",{"_path":516,"title":517,"description":518,"components":519,"icon":520},"/documentation/reference/base/placeholder","BasePlaceholderPage","Use placeholders when your pages are empty. It can be because there is no data yet to display or because the user has no access to the content.",[517],{"src":521,"srcDark":521},"/img/illustrations/components/placeholder-icon.svg",{"_path":523,"title":524,"description":525,"components":526,"icon":527},"/documentation/reference/base/placeload","BasePlaceload","Use placeloads to show a loading state on your page. Placeloads can be customized to mimic the content structure of your page.",[524],{"src":528,"srcDark":528},"/img/illustrations/components/placeload-icon.svg",{"_path":530,"title":531,"description":532,"components":533,"icon":535},"/documentation/reference/base/progress","BaseProgress","Display the progress of a task in a linear or circular way. Use the different options to customize the look and feel of the progress bars.",[531,534],"BaseProgressCircle",{"src":536,"srcDark":536},"/img/illustrations/components/progress-icon.svg",{"_path":538,"title":539,"description":540,"components":541,"icon":542},"/documentation/reference/base/prose","BaseProse","Use the prose component, which is an implementation of the Tailwind CSS typography plugin, made ready to use for your content driven pages.",[539],{"src":543,"srcDark":543},"/img/illustrations/components/prose-icon.svg",{"_path":545,"title":546,"description":547,"components":548,"icon":549},"/documentation/reference/base/snack","BaseSnack","Snacks are used to display an interactive message to the user. They are used to display information in a compact way.",[546],{"src":550,"srcDark":550},"/img/illustrations/components/snack-icon.svg",{"_path":552,"title":553,"description":554,"components":555,"icon":556},"/documentation/reference/base/tabs-slider","BaseTabSlider","Use tab sliders to display fancy sliding tabs that you can use anywhere in your app, components and pages.",[553],{"src":487,"srcDark":487},{"_path":558,"title":559,"description":560,"components":561,"icon":562},"/documentation/reference/base/tabs","BaseTabs","Use navtabs to organize content into different sections. Explore the different options to customize the look and feel of your tabs.",[559],{"src":563,"srcDark":563},"/img/illustrations/components/tabs-icon.svg",{"_path":565,"title":566,"description":567,"components":568,"icon":569},"/documentation/reference/base/tag","BaseTag","Tags are used to display information in a compact and synthetic way. Many color and shape options are available to customize them.",[566],{"src":570,"srcDark":570},"/img/illustrations/components/tag-icon.svg",{"_path":572,"title":573,"description":574,"components":575,"icon":577},"/documentation/reference/base/theme-toggle","BaseThemeToggle","Tairo ships with a ready to use theme switcher that you can include anywhere to toggle between light and dark mode.",[573,576],"BaseThemeSwitch",{"src":487,"srcDark":487},{"_path":579,"title":580,"description":498,"components":581,"icon":585},"/documentation/reference/base/typography","BaseHeading",[580,582,583,584],"BaseParagraph","BaseText","BaseLink",{"src":487,"srcDark":487},{"_path":587,"title":588,"description":589,"components":590,"icon":592},"/documentation/reference/forms/autocomplete","BaseAutocomplete","Tairo ships with ready to use autocomplete that render different kinds of lists, ranging from text to complex media objects.",[588,591],"BaseAutocompleteItem",{"src":593,"srcDark":593},"/img/illustrations/components/autocomplete-icon.svg",{"_path":595,"title":596,"description":597,"components":598,"icon":599},"/documentation/reference/forms/checkbox-animated","BaseCheckboxAnimated","Use animated checkboxes to display fancy svg circle and check animations, which are ideal to engage your audience.",[596],{"src":600,"srcDark":600},"/img/illustrations/components/checkbox-icon.svg",{"_path":602,"title":603,"description":604,"components":605,"icon":606},"/documentation/reference/forms/checkbox-headless","BaseCheckboxHeadless","Create a custom checkbox using the the base checkbox element and designing yourself the exterior look of it.",[603],{"src":600,"srcDark":600},{"_path":608,"title":609,"description":610,"components":611,"icon":612},"/documentation/reference/forms/checkbox","BaseCheckbox","A checkbox is a form element that allows the user to select one or more options from a predefined set of data.",[609],{"src":600,"srcDark":600},{"_path":614,"title":615,"description":616,"components":617,"icon":618},"/documentation/reference/forms/dropfile","BaseFullscreenDropfile","Tairo fullscreen drop file is a component that handles drag and drop file uploads. It works in conjunction with the `BaseInputFileHeadless` component.",[615],{"src":619,"srcDark":619},"/img/illustrations/components/input-file-icon.svg",{"_path":621,"title":622,"description":623,"components":624,"icon":625},"/documentation/reference/forms/file-headless","BaseInputFileHeadless","Use file inputs in your form to allow the user to upload files from their computer. Many customization options are available.",[622],{"src":619,"srcDark":619},{"_path":627,"title":628,"description":623,"components":629,"icon":630},"/documentation/reference/forms/file","BaseInputFile",[628],{"src":619,"srcDark":619},{"_path":632,"title":633,"description":634,"components":635,"icon":636},"/documentation/reference/forms/input-number","BaseInputNumber","An input dedicated to numeric data. Explore the available options.",[633],{"src":637,"srcDark":637},"/img/illustrations/components/input-icon.svg",{"_path":639,"title":640,"description":641,"components":642,"icon":643},"/documentation/reference/forms/input","BaseInput","An input is a form element that allows the user to enter text or numeric data from the keyboard. Explore the available options.",[640],{"src":637,"srcDark":637},{"_path":645,"title":646,"description":647,"components":648,"icon":650},"/documentation/reference/forms/listbox","BaseListbox","Tairo ships with ready to use listbox select that render different kinds of lists, ranging from text to complex media objects.",[646,649],"BaseListboxItem",{"src":651,"srcDark":651},"/img/illustrations/components/listbox-icon.svg",{"_path":653,"title":654,"description":655,"components":656,"icon":657},"/documentation/reference/forms/radio-headless","BaseRadioHeadless","Create a completely custom radio button using the the base radio element and designing yourself the exterior look of it.",[654],{"src":658,"srcDark":658},"/img/illustrations/components/radio-icon.svg",{"_path":660,"title":661,"description":662,"components":663,"icon":664},"/documentation/reference/forms/radio","BaseRadio","A radio button is a form element that allows the user to select a single option from a predefined set.",[661],{"src":658,"srcDark":658},{"_path":666,"title":667,"description":668,"components":669,"icon":670},"/documentation/reference/forms/select","BaseSelect","Use the Tairo select form element when you wan to display a mobile friendly selection box. Explore the available customization options.",[667],{"src":671,"srcDark":671},"/img/illustrations/components/select-icon.svg",{"_path":673,"title":674,"description":675,"components":676,"icon":679},"/documentation/reference/forms/switch","BaseSwitch","A switch is a binary input that can be either on or off. It is used to toggle between two states. Check out the thin and the ball versions.",[677,678],"BaseSwitchThin","BaseSwitchBall",{"src":680,"srcDark":680},"/img/illustrations/components/switch-thin-icon.svg",{"_path":682,"title":683,"description":684,"components":685,"icon":686},"/documentation/reference/forms/textarea","BaseTextarea","A textarea is a form element that allows the user to enter long text data from the keyboard. Explore the available customization options.",[683],{"src":687,"srcDark":687},"/img/illustrations/components/textarea-icon.svg",{"_path":689,"title":690,"description":691,"components":692,"icon":694},"/documentation/reference/forms/treeselect","BaseTreeSelect","Display data tree in collapsible items. Can be used to select node in tree.",[690,693],"BaseTreeSelectItem",{"src":687,"srcDark":687},{"_path":696,"title":697},"/documentation/reference/tairo/_dir","Tairo layer",{"_path":699,"title":700,"description":701,"components":702,"icon":703},"/documentation/reference/tairo/check-animated","TairoCheckAnimated","Tairo animated check icon can be used to show a checkmark animation when a user accomplishes an action.",[700],{"src":600,"srcDark":600},{"_path":705,"title":706,"description":707,"components":708,"icon":710},"/documentation/reference/tairo/content-wrapper","TairoContentWrapper","Tairo content wrapper wraps the page content. It provides slots and allows you to control the horizontal flow of the page.",[706,709],"TairoContentWrapperTabbed",{"src":379,"srcDark":379},{"_path":712,"title":713,"description":714,"components":715,"icon":716},"/documentation/reference/tairo/error","TairoError","Tairo provides a simple way to show errors to the user. It uses the `TairoError` component to show the error.",[713],{"src":450,"srcDark":450},{"_path":718,"title":719,"description":720,"components":721,"icon":725},"/documentation/reference/tairo/flex-table","TairoFlexTable","Flex tables are an alternative way to display tabular data. They behave responsively on smaller screens.",[719,722,723,724],"TairoFlexTableHeading","TairoFlexTableRow","TairoFlexTableCell",{"src":726,"srcDark":726},"/img/illustrations/components/table-icon.svg",{"_path":728,"title":729,"description":730,"components":731,"icon":732},"/documentation/reference/tairo/form-group","TairoFormGroup","Tairo form groups are used to hold some form elements together. They are used to show a label and a description for a group of form elements.",[729],{"src":450,"srcDark":450},{"_path":734,"title":735,"description":736,"components":737,"icon":738},"/documentation/reference/tairo/form-save","TairoFormSave","Tairo form save is a customizable set of fixed buttons that are used to save or cancel a form.",[735],{"src":457,"srcDark":457},{"_path":740,"title":741,"description":742,"components":743,"icon":745},"/documentation/reference/tairo/logo","TairoLogo","The Tairo logo is an inline and customizable svg logo component that can be used to display your app logo.",[741,744],"TairoLogoText",{"src":379,"srcDark":379},{"_path":747,"title":748,"description":749,"components":750,"icon":751},"/documentation/reference/tairo/modal","TairoModal","Modals are popups that you can use to force an interaction before the user can continue using the application.",[748],{"src":752,"srcDark":752},"/img/illustrations/components/modal-icon.svg",{"_path":754,"title":755,"description":756,"components":757,"icon":761},"/documentation/reference/tairo/popover","TairoPopover","A flexible popover that you can use to make simple text based popovers or more complex UI interactions.",[755,758,759,760],"TairoPopoverContentHelp","TairoPopoverContentDual","TairoPopoverContentMedia",{"src":762,"srcDark":762},"/img/illustrations/components/popover-icon.svg",{"_path":764,"title":765,"description":766,"components":767,"icon":768},"/documentation/reference/tairo/sidebar-tools","TairoSidebarTools","Tairo sidebar tools is a component that lets you reuse the main toolbar buttons anywhere in your app.",[765],{"src":457,"srcDark":457},{"_path":770,"title":771,"description":772,"components":773,"icon":777},"/documentation/reference/tairo/table","TairoTable","Tairo tables are a quick shortcut to render lists and collections using the native HTML5 table element.",[771,774,775,776],"TairoTableHeading","TairoTableRow","TairoTableCell",{"src":487,"srcDark":487},{"_path":779,"title":780,"description":781,"components":782,"icon":783},"/documentation/reference/tairo/toaster","TairoToaster","Tairo toasters are used to display notifications and messages to the user.",[780],{"src":784,"srcDark":784},"/img/illustrations/components/sidebar-icon.svg",{"_path":786,"title":787,"description":788,"components":789,"icon":791},"/documentation/reference/tairo/toc","TairoToc","Tairo's table of contents component provides an easy way to display the page content using the anchors on the page.",[787,790],"TairoTocAnchor",{"src":784,"srcDark":784},{"_path":793,"title":305},"/documentation/reference/sidebar/_dir",{"_path":795,"title":796,"description":797,"components":798,"icon":799},"/documentation/reference/sidebar/layout","TairoSidebarLayout","The sidebar layout is a double sided navigation layout. It has a sidebar with a list of menu links and a subsidebar with a list of submenu links.",[796,741],{"src":784,"srcDark":784},{"_path":801,"title":802,"description":803,"components":804,"icon":806},"/documentation/reference/sidebar/navigation","TairoSidebarNavigation","The sidebar navigation is a double sided navigation layout. It has a sidebar with a list of menu links and a subsidebar with a list of submenu links.",[802,805],"TairoSidebarNavigationItem",{"src":784,"srcDark":784},{"_path":808,"title":809,"description":810,"components":811,"icon":817},"/documentation/reference/sidebar/subsidebar","TairoSubsidebar","The subsidebar works as a submenu element for the TairoSidebarNavigation component",[809,812,813,814,815,816],"TairoSubsidebarHeader","TairoSubsidebarMenu","TairoSubsidebarMenuCollapseLinks","TairoSubsidebarMenuDivider","TairoSubsidebarMenuLink",{"src":784,"srcDark":784},{"_path":819,"title":820,"description":821,"components":822,"icon":824},"/documentation/reference/sidebar/toolbar","TairoSidebarToolbar","The Tairo toolbar provides a smart way to handle menu items that are displayed at the top of the page.",[820,823],"TairoSidebarBurger",{"src":825,"srcDark":825},"/img/illustrations/components/anchor-icon.svg",{"_path":827,"title":828,"description":829,"components":830,"icon":831},"/documentation/reference/sidebar/circular-menu","TairoSidebarCircularMenu","Tairo's circular menu is a flying button that can be expanded to display the toolbar menu, when not visible.",[828],{"src":825,"srcDark":825},{"_path":833,"title":9},"/documentation/reference/collapse/_dir",{"_path":835,"title":836,"description":837,"components":838,"icon":839},"/documentation/reference/collapse/layout","TairoCollapseLayout","The collapse layout focuses on a single sidebar with a list of menu links.",[836],{"src":784,"srcDark":784},{"_path":841,"title":842,"description":843,"components":844,"icon":846},"/documentation/reference/collapse/navigation","TairoCollapseNavigation","The collapse navigation focuses on a single sidebar with a list of menu links.",[842,845],"TairoCollapseNavigationCollapseLinks",{"src":784,"srcDark":784},{"_path":848,"title":849,"description":821,"components":850,"icon":852},"/documentation/reference/collapse/toolbar","TairoCollapseToolbar",[849,851],"TairoCollapseBurger",{"src":825,"srcDark":825},{"_path":854,"title":855,"description":829,"components":856,"icon":857},"/documentation/reference/collapse/circular-menu","TairoCollapseCircularMenu",[855],{"src":825,"srcDark":825},{"_path":859,"title":307},"/documentation/reference/topnav/_dir",{"_path":861,"title":862,"description":863,"components":864,"icon":865},"/documentation/reference/topnav/layout","TairoTopnavLayout","The Topnav layout focuses on a single top navbar with a list of menu links.",[862],{"src":415,"srcDark":415},{"_path":867,"title":868,"description":869,"components":870,"icon":871},"/documentation/reference/topnav/navigation","TairoTopnavNavigation","The Topnav navigation provides a slot for the header as well as a toolbar.",[868],{"src":415,"srcDark":415},{"_path":873,"title":874,"description":829,"components":875,"icon":876},"/documentation/reference/topnav/circular-menu","TairoTopnavCircularMenu",[874],{"src":825,"srcDark":825},{"_path":878,"title":879,"description":880,"components":881,"icon":882},"/documentation/reference/topnav/footer","TairoTopnavFooter","Tairo's top nav footer is a minimal footer that you can include to provide additional navigation links.",[879],{"src":825,"srcDark":825},{"_path":884,"title":341},"/documentation/reference/iconnav/_dir",{"_path":886,"title":887,"description":888,"components":889,"icon":890},"/documentation/reference/iconnav/layout","TairoIconnavLayout","The Iconnav layout focuses on a double top navbar with a list of menu links.",[887],{"src":415,"srcDark":415},{"_path":892,"title":893,"description":894,"components":895,"icon":896},"/documentation/reference/iconnav/navigation","TairoIconnavNavigation","The Iconnav navigation provides a slot for the header as well as a toolbar.",[893],{"src":415,"srcDark":415},{"_path":898,"title":899,"description":829,"components":900,"icon":901},"/documentation/reference/iconnav/circular-menu","TairoIconnavCircularMenu",[899],{"src":825,"srcDark":825},{"_path":903,"title":904,"description":880,"components":905,"icon":906},"/documentation/reference/iconnav/footer","TairoIconnavFooter",[904],{"src":825,"srcDark":825},{"_path":908,"title":909},"/documentation/reference/advanced/_dir","Advanced",{"_path":911,"title":912,"description":913,"components":914,"icon":915},"/documentation/reference/advanced/input-password","AddonInputPassword","Secure password input field with password visibility toggle.",[912],{"src":916,"srcDark":916},"/img/illustrations/components/markdown-icon.svg",{"_path":918,"title":919,"description":920,"components":921,"icon":922},"/documentation/reference/advanced/input-phone","AddonInputPhone","International phone number input field with country code dropdown.",[919],{"src":916,"srcDark":916},{"_path":924,"title":925,"description":926,"components":927,"icon":928},"/documentation/reference/advanced/markdown","AddonMarkdownRemark","Convert markdown to HTML client-side using the unified remak/rehype and shiki. Use the built-in component to render markdown content.",[925],{"src":916,"srcDark":916},{"_path":930,"title":931},"/documentation/reference/integration/_dir","Integration",{"_path":933,"title":934,"description":935,"components":936,"icon":938},"/documentation/reference/integration/apexcharts","Apexcharts","Tairo ships with the Apexcharts data visualization library customized for Vue and Nuxt. Use the component to render charts and graphs.",[937],"AddonApexcharts",{"src":939,"srcDark":939},"/img/illustrations/components/apexcharts-icon.svg",{"_path":941,"title":942,"description":943,"components":944,"icon":947},"/documentation/reference/integration/carousel","Carousel","Tairo ships with the swiper module for Nuxt. Use the component to display fancy and highly customizable carousels.",[945,946],"AddonCarouselTeam","AddonCarouselIcons",{"src":948,"srcDark":948},"/img/illustrations/components/carousel-icon.svg",{"_path":950,"title":951,"description":8,"components":952},"/documentation/reference/integration/icons","Icons",[953],"Icon",{"_path":955,"title":956,"description":957,"components":958,"icon":960},"/documentation/reference/integration/mapbox","Mapbox","Tairo ships with a Mapbox integration, allowing you to display maps anywhere you want. Explore the mapbox panel for a concrete example.",[959],"AddonMapboxPanel",{"src":961,"srcDark":961},"/img/illustrations/components/map-icon.svg",{"_path":963,"title":964,"description":965,"icon":966},"/documentation/reference/integration/slider","Sliders","Tairo ships with the powerful vueform slider component. Use it to render fancy sliders with or without tooltips and the ability to merge them.",{"src":422,"srcDark":422},1779173533084]