[{"data":1,"prerenderedAt":929},["Reactive",2],{"$KyeTl6nybl":3,"page-data":4,"page-tree":245,"doc-page-nav":265,"doc-nav":270},[],{"_path":5,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":9,"description":8,"body":10,"_type":240,"_id":241,"_source":242,"_file":243,"_extension":244},"/documentation/layers/topnav","layers",false,"","Topnav layer",{"type":11,"children":12,"toc":237},"root",[13,83,226,231],{"type":14,"tag":15,"props":16,"children":18},"element","doc-component-demo",{"title":17},"Topnav presentation",[19,26,33],{"type":14,"tag":20,"props":21,"children":22},"p",{},[23],{"type":24,"value":25},"text","The topnav layout focuses on a single topnavbar with a list of single links, ideal for smaller apps if you don't have enough content or pages to use a more complex layout like the sidebar or the collapse 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],{"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:",{"type":14,"tag":48,"props":49,"children":52},"doc-image",{"src":50,"srcDark":51},"/img/apps/tairo-layout-topnav.png","/img/apps/tairo-layout-topnav-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},"Workspaces:",{"type":24,"value":62}," The top navigation layout provides a navbar header slot that we used to add a workspace selection dropdown. You can replace it with any component of your own.",{"type":14,"tag":48,"props":64,"children":67},{"src":65,"srcDark":66},"/img/apps/tairo-layout-topnav-workspaces.png","/img/apps/tairo-layout-topnav-workspaces-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},"Circular menu:",{"type":24,"value":77}," When scrolling down, the circular menu is displayed at the bottom right of the screen. It can be used to display a set of quick actions.",{"type":14,"tag":48,"props":79,"children":82},{"src":80,"srcDark":81},"/img/apps/tairo-layout-topnav-circular-menu.png","/img/apps/tairo-layout-topnav-circular-menu-dark.png",[],{"type":14,"tag":15,"props":84,"children":86},{"title":85},"Topnav configuration",[87,101,127,139,151,155,168,173,178,198,210,214],{"type":14,"tag":20,"props":88,"children":89},{},[90,92,99],{"type":24,"value":91},"First you need to enable the topnav layout layer in the ",{"type":14,"tag":93,"props":94,"children":96},"code",{"className":95},[],[97],{"type":24,"value":98},"\u003Capp>/nuxt.config.ts",{"type":24,"value":100}," file.",{"type":14,"tag":102,"props":103,"children":104},"code-group",{},[105,118],{"type":14,"tag":106,"props":107,"children":113},"pre",{"className":108,"code":110,"filename":111,"language":112,"meta":8},[109],"language-ts","export default defineNuxtConfig({\n  extends: [\n    // enable the topnav layout layer\n    [\"gh:cssninjaStudio/tairo/layers/tairo-layout-topnav#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",[114],{"type":14,"tag":93,"props":115,"children":116},{"__ignoreMap":8},[117],{"type":24,"value":110},{"type":14,"tag":106,"props":119,"children":122},{"className":120,"code":121,"filename":98,"language":112,"meta":8},[109],"export default defineNuxtConfig({\n  extends: [\n    // enable the topnav layout layer\n    '../layers/tairo-layout-topnav',\n\n    // required base layer\n    '../layers/tairo',\n  ]\n})\n",[123],{"type":14,"tag":93,"props":124,"children":125},{"__ignoreMap":8},[126],{"type":24,"value":121},{"type":14,"tag":20,"props":128,"children":129},{},[130,132,138],{"type":24,"value":131},"Then you can configure the topnav layout in the ",{"type":14,"tag":93,"props":133,"children":135},{"className":134},[],[136],{"type":24,"value":137},"\u003Capp>/app.config.ts",{"type":24,"value":100},{"type":14,"tag":102,"props":140,"children":141},{},[142],{"type":14,"tag":106,"props":143,"children":146},{"className":144,"code":145,"filename":137,"language":112,"meta":8},[109],"export default defineAppConfig({\n  tairo: {\n    topnav: {\n      // topnav config\n    },\n  },\n})\n",[147],{"type":14,"tag":93,"props":148,"children":149},{"__ignoreMap":8},[150],{"type":24,"value":145},{"type":14,"tag":27,"props":152,"children":154},{"label":153},"Default configuration",[],{"type":14,"tag":102,"props":156,"children":157},{},[158],{"type":14,"tag":106,"props":159,"children":163},{"className":160,"code":161,"filename":162,"language":112,"meta":8},[109],"export default defineAppConfig({\n  tairo: {\n    topnav: {\n      circularMenu: {\n        enabled: true,\n        tools: [],\n      },\n      toolbar: {\n        enabled: true,\n        showTitle: false,\n        tools: [],\n      },\n      navigation: {\n        enabled: true,\n        items: [],\n      },\n    },\n  },\n})\n","layers/tairo-layout-topnav/app.config.ts",[164],{"type":14,"tag":93,"props":165,"children":166},{"__ignoreMap":8},[167],{"type":24,"value":161},{"type":14,"tag":20,"props":169,"children":170},{},[171],{"type":24,"value":172},"You don't need to specify all the properties, only the ones you want to override.",{"type":14,"tag":27,"props":174,"children":177},{"label":175,"className":176},"Tools",[31],[],{"type":14,"tag":20,"props":179,"children":180},{},[181,183,189,191,196],{"type":24,"value":182},"To add ",{"type":14,"tag":93,"props":184,"children":186},{"className":185},[],[187],{"type":24,"value":188},"tools",{"type":24,"value":190}," to the toolbar or the circular menu, you have to create global components, and add them to the ",{"type":14,"tag":93,"props":192,"children":194},{"className":193},[],[195],{"type":24,"value":188},{"type":24,"value":197}," array.",{"type":14,"tag":102,"props":199,"children":200},{},[201],{"type":14,"tag":106,"props":202,"children":205},{"className":203,"code":204,"filename":137,"language":112,"meta":8},[109],"export default defineAppConfig({\n  tairo: {\n    topnav: {\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",[206],{"type":14,"tag":93,"props":207,"children":208},{"__ignoreMap":8},[209],{"type":24,"value":204},{"type":14,"tag":27,"props":211,"children":213},{"label":212},"Navigation items",[],{"type":14,"tag":102,"props":215,"children":216},{},[217],{"type":14,"tag":106,"props":218,"children":221},{"className":219,"code":220,"filename":137,"language":112,"meta":8},[109],"export default defineAppConfig({\n  tairo: {\n    topnav: {\n      navigation: {\n        items: [\n          {\n            name: 'داشبورد',\n            icon: { name: 'ph:gauge-duotone', class: 'w-6 h-6' },\n            activePath: '/dashboards/sales',\n            to: '/dashboards/sales',\n          },\n          {\n            name: 'پروژه‌ها',\n            icon: { name: 'ph:suitcase-duotone', class: 'w-6 h-6' },\n            activePath: '/layouts/projects/project-list-3',\n            to: '/layouts/projects/project-list-3',\n          },\n          {\n            name: 'فریلنسرها',\n            icon: { name: 'ph:users-duotone', class: 'w-6 h-6' },\n            activePath: '/layouts/flex-list-1',\n            to: '/layouts/flex-list-1',\n          },\n          {\n            name: 'فایل‌ها',\n            icon: { name: 'ph:note-duotone', class: 'w-6 h-6' },\n            activePath: '/layouts/table-list-3',\n            to: '/layouts/table-list-3',\n          },\n        ],\n      },\n    },\n  },\n})\n",[222],{"type":14,"tag":93,"props":223,"children":224},{"__ignoreMap":8},[225],{"type":24,"value":220},{"type":14,"tag":227,"props":228,"children":230},"doc-component-list",{"prefix":229},"TairoTopnav",[],{"type":14,"tag":232,"props":233,"children":236},"doc-nav",{"next":234,"prev":235},"/documentation/layers/iconnav","/documentation/layers/collapse",[],{"title":8,"searchDepth":238,"depth":238,"links":239},2,[],"markdown","content:documentation:20.layers:4.topnav.md","content","documentation/20.layers/4.topnav.md","md",[246,252,259],{"_path":247,"_dir":8,"_draft":7,"_partial":7,"_locale":8,"title":248,"description":8,"toc":249,"_type":240,"_id":250,"_source":242,"_file":251,"_extension":244},"/documentation","مرکز مستندات",true,"content:documentation:1.index.md","documentation/1.index.md",{"_path":253,"_dir":6,"_draft":7,"_partial":249,"_locale":8,"title":254,"_id":255,"_type":256,"_source":242,"_file":257,"_extension":258},"/documentation/layers/_dir","Layers","content:documentation:20.layers:_dir.yml","yaml","documentation/20.layers/_dir.yml","yml",{"_path":260,"_dir":261,"_draft":7,"_partial":7,"_locale":8,"title":262,"description":8,"_type":240,"_id":263,"_source":242,"_file":264,"_extension":244},"/documentation/layers","documentation","Tairo base layer","content:documentation:20.layers:1.index.md","documentation/20.layers/1.index.md",[266,268],{"_path":235,"title":267},"Collapse layer",{"_path":234,"title":269},"Iconnav layer",[271,272,275,278,281,284,287,290,293,296,297,298,301,302,303,304,307,310,313,316,319,322,325,328,331,334,342,346,350,353,356,359,362,365,368,371,378,385,392,399,406,413,420,427,434,443,450,457,464,471,477,484,491,499,506,513,519,526,533,540,548,556,563,569,575,582,588,593,600,606,614,621,627,634,643,650,657,660,666,673,679,689,695,701,708,715,725,731,740,747,754,756,762,769,780,788,794,796,802,809,815,820,822,828,834,839,845,847,853,859,864,869,872,879,885,891,894,902,911,916,924],{"_path":247,"title":248,"description":8},{"_path":273,"title":274},"/documentation/setup/_dir","Setup",{"_path":276,"title":277,"description":8},"/documentation/setup","Prerequisites",{"_path":279,"title":280,"description":8},"/documentation/setup/nuxt-layers-and-tairo","Nuxt, Layers, and Tairo",{"_path":282,"title":283,"description":8},"/documentation/setup/installation","Installation",{"_path":285,"title":286,"description":8},"/documentation/setup/add-a-layout","Add a layout",{"_path":288,"title":289,"description":8},"/documentation/setup/first-page","Your first page",{"_path":291,"title":292,"description":8},"/documentation/setup/first-api-route","Your first API route",{"_path":294,"title":295,"description":8},"/documentation/setup/configuration","Configuration",{"_path":253,"title":254},{"_path":260,"title":262,"description":8},{"_path":299,"title":300,"description":8},"/documentation/layers/sidebar","Sidebar layer",{"_path":235,"title":267,"description":8},{"_path":5,"title":9,"description":8},{"_path":234,"title":269,"description":8},{"_path":305,"title":306,"description":8},"/documentation/layers/extending-layers","Extending Tairo Layers",{"_path":308,"title":309},"/documentation/tailwindcss/_dir","Tailwind CSS",{"_path":311,"title":312,"description":8},"/documentation/tailwindcss","Tailwind, and Tairo",{"_path":314,"title":315,"description":8},"/documentation/tailwindcss/config","Customizing Tailwind",{"_path":317,"title":318,"description":8},"/documentation/tailwindcss/shuriken-ui","رابط کاربری شوریکن",{"_path":320,"title":321,"description":8},"/documentation/tailwindcss/colors","Colors",{"_path":323,"title":324,"description":8},"/documentation/tailwindcss/fonts","Fonts",{"_path":326,"title":327,"description":8},"/documentation/tailwindcss/tooltip","Tooltip",{"_path":329,"title":330},"/documentation/guides/_dir","Guides",{"_path":332,"title":8,"description":333},"/documentation/guides","Redirecting to panels...",{"_path":335,"title":336,"description":337,"components":338,"icon":340},"/documentation/guides/panels","Panels","Tairo panels allow to display additional data and details in animated left or right drawers.",[339],"TairoPanels",{"src":341,"srcDark":341},"/img/illustrations/components/logo-icon.svg",{"_path":343,"title":344,"description":345},"/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":347,"title":348,"description":349},"/documentation/guides/mutli-step-forms","Multi step forms","Utils to create stepper forms in multiple pages",{"_path":351,"title":352,"description":8},"/documentation/guides/pnpm-workspace","Pnpm workspace",{"_path":354,"title":355,"description":8},"/documentation/guides/deployment","Deployment",{"_path":357,"title":358,"description":8},"/documentation/guides/typescript","Typescript",{"_path":360,"title":361,"description":8},"/documentation/guides/troubleshooting","Troubleshooting",{"_path":363,"title":364},"/documentation/reference/_dir","Reference",{"_path":366,"title":367,"description":8},"/documentation/reference","All components",{"_path":369,"title":370},"/documentation/reference/base/_dir","UI Components",{"_path":372,"title":373,"description":374,"components":375,"icon":376},"/documentation/reference/base/accordion","BaseAccordion","Display content in a collapsible and expandable format.",[373],{"src":377,"srcDark":377},"/img/illustrations/components/accordion-icon.svg",{"_path":379,"title":380,"description":381,"components":382,"icon":383},"/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.",[380],{"src":384,"srcDark":384},"/img/illustrations/components/avatar-group-icon.svg",{"_path":386,"title":387,"description":388,"components":389,"icon":390},"/documentation/reference/base/avatar","BaseAvatar","Use avatars to represent entities with an image, icon, or initials. Discover multiple variations and options.",[387],{"src":391,"srcDark":391},"/img/illustrations/components/avatar-icon.svg",{"_path":393,"title":394,"description":395,"components":396,"icon":397},"/documentation/reference/base/breadcrumb","BaseBreadcrumb","Don't let users get lost inside your application. Automatically generate breadcrumbs based on the current route.",[394],{"src":398,"srcDark":398},"/img/illustrations/components/breadcrumb-icon.svg",{"_path":400,"title":401,"description":402,"components":403,"icon":404},"/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.",[401],{"src":405,"srcDark":405},"/img/illustrations/components/button-icon.svg",{"_path":407,"title":408,"description":409,"components":410,"icon":411},"/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.",[408],{"src":412,"srcDark":412},"/img/illustrations/components/button-close-icon.svg",{"_path":414,"title":415,"description":416,"components":417,"icon":418},"/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.",[415],{"src":419,"srcDark":419},"/img/illustrations/components/button-action-icon.svg",{"_path":421,"title":422,"description":423,"components":424,"icon":426},"/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.",[422,425],"BaseButtonGroup",{"src":405,"srcDark":405},{"_path":428,"title":429,"description":430,"components":431,"icon":432},"/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.",[429],{"src":433,"srcDark":433},"/img/illustrations/components/card-icon.svg",{"_path":435,"title":436,"description":437,"components":438,"icon":441},"/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.",[436,439,440],"BaseDropdownItem","BaseDropdownDivider",{"src":442,"srcDark":442},"/img/illustrations/components/dropdown-icon.svg",{"_path":444,"title":445,"description":446,"components":447,"icon":448},"/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.",[445],{"src":449,"srcDark":449},"/img/illustrations/components/focus-loop-icon.svg",{"_path":451,"title":452,"description":453,"components":454,"icon":455},"/documentation/reference/base/icon-box","BaseIconBox","Display a box with an icon and a title. Use this to raise attention to a specific feature.",[452],{"src":456,"srcDark":456},"/img/illustrations/components/iconbox-icon.svg",{"_path":458,"title":459,"description":460,"components":461,"icon":463},"/documentation/reference/base/list","BaseList","Tairo provides ready to use typography components such as heading, paragraphs and text, with many customization options.",[459,462],"BaseListItem",{"src":377,"srcDark":377},{"_path":465,"title":466,"description":467,"components":468,"icon":469},"/documentation/reference/base/message","BaseMessage","Use messages to inform users about important interactions or events that occur inside your application.",[466],{"src":470,"srcDark":470},"/img/illustrations/components/message-icon.svg",{"_path":472,"title":473,"description":446,"components":474,"icon":475},"/documentation/reference/base/pagination","BasePagination",[473],{"src":476,"srcDark":476},"/img/illustrations/components/pagination-icon.svg",{"_path":478,"title":479,"description":480,"components":481,"icon":482},"/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.",[479],{"src":483,"srcDark":483},"/img/illustrations/components/placeholder-icon.svg",{"_path":485,"title":486,"description":487,"components":488,"icon":489},"/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.",[486],{"src":490,"srcDark":490},"/img/illustrations/components/placeload-icon.svg",{"_path":492,"title":493,"description":494,"components":495,"icon":497},"/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.",[493,496],"BaseProgressCircle",{"src":498,"srcDark":498},"/img/illustrations/components/progress-icon.svg",{"_path":500,"title":501,"description":502,"components":503,"icon":504},"/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.",[501],{"src":505,"srcDark":505},"/img/illustrations/components/prose-icon.svg",{"_path":507,"title":508,"description":509,"components":510,"icon":511},"/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.",[508],{"src":512,"srcDark":512},"/img/illustrations/components/snack-icon.svg",{"_path":514,"title":515,"description":516,"components":517,"icon":518},"/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.",[515],{"src":449,"srcDark":449},{"_path":520,"title":521,"description":522,"components":523,"icon":524},"/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.",[521],{"src":525,"srcDark":525},"/img/illustrations/components/tabs-icon.svg",{"_path":527,"title":528,"description":529,"components":530,"icon":531},"/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.",[528],{"src":532,"srcDark":532},"/img/illustrations/components/tag-icon.svg",{"_path":534,"title":535,"description":536,"components":537,"icon":539},"/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.",[535,538],"BaseThemeSwitch",{"src":449,"srcDark":449},{"_path":541,"title":542,"description":460,"components":543,"icon":547},"/documentation/reference/base/typography","BaseHeading",[542,544,545,546],"BaseParagraph","BaseText","BaseLink",{"src":449,"srcDark":449},{"_path":549,"title":550,"description":551,"components":552,"icon":554},"/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.",[550,553],"BaseAutocompleteItem",{"src":555,"srcDark":555},"/img/illustrations/components/autocomplete-icon.svg",{"_path":557,"title":558,"description":559,"components":560,"icon":561},"/documentation/reference/forms/checkbox-animated","BaseCheckboxAnimated","Use animated checkboxes to display fancy svg circle and check animations, which are ideal to engage your audience.",[558],{"src":562,"srcDark":562},"/img/illustrations/components/checkbox-icon.svg",{"_path":564,"title":565,"description":566,"components":567,"icon":568},"/documentation/reference/forms/checkbox-headless","BaseCheckboxHeadless","Create a custom checkbox using the the base checkbox element and designing yourself the exterior look of it.",[565],{"src":562,"srcDark":562},{"_path":570,"title":571,"description":572,"components":573,"icon":574},"/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.",[571],{"src":562,"srcDark":562},{"_path":576,"title":577,"description":578,"components":579,"icon":580},"/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.",[577],{"src":581,"srcDark":581},"/img/illustrations/components/input-file-icon.svg",{"_path":583,"title":584,"description":585,"components":586,"icon":587},"/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.",[584],{"src":581,"srcDark":581},{"_path":589,"title":590,"description":585,"components":591,"icon":592},"/documentation/reference/forms/file","BaseInputFile",[590],{"src":581,"srcDark":581},{"_path":594,"title":595,"description":596,"components":597,"icon":598},"/documentation/reference/forms/input-number","BaseInputNumber","An input dedicated to numeric data. Explore the available options.",[595],{"src":599,"srcDark":599},"/img/illustrations/components/input-icon.svg",{"_path":601,"title":602,"description":603,"components":604,"icon":605},"/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.",[602],{"src":599,"srcDark":599},{"_path":607,"title":608,"description":609,"components":610,"icon":612},"/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.",[608,611],"BaseListboxItem",{"src":613,"srcDark":613},"/img/illustrations/components/listbox-icon.svg",{"_path":615,"title":616,"description":617,"components":618,"icon":619},"/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.",[616],{"src":620,"srcDark":620},"/img/illustrations/components/radio-icon.svg",{"_path":622,"title":623,"description":624,"components":625,"icon":626},"/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.",[623],{"src":620,"srcDark":620},{"_path":628,"title":629,"description":630,"components":631,"icon":632},"/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.",[629],{"src":633,"srcDark":633},"/img/illustrations/components/select-icon.svg",{"_path":635,"title":636,"description":637,"components":638,"icon":641},"/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.",[639,640],"BaseSwitchThin","BaseSwitchBall",{"src":642,"srcDark":642},"/img/illustrations/components/switch-thin-icon.svg",{"_path":644,"title":645,"description":646,"components":647,"icon":648},"/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.",[645],{"src":649,"srcDark":649},"/img/illustrations/components/textarea-icon.svg",{"_path":651,"title":652,"description":653,"components":654,"icon":656},"/documentation/reference/forms/treeselect","BaseTreeSelect","Display data tree in collapsible items. Can be used to select node in tree.",[652,655],"BaseTreeSelectItem",{"src":649,"srcDark":649},{"_path":658,"title":659},"/documentation/reference/tairo/_dir","Tairo layer",{"_path":661,"title":662,"description":663,"components":664,"icon":665},"/documentation/reference/tairo/check-animated","TairoCheckAnimated","Tairo animated check icon can be used to show a checkmark animation when a user accomplishes an action.",[662],{"src":562,"srcDark":562},{"_path":667,"title":668,"description":669,"components":670,"icon":672},"/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.",[668,671],"TairoContentWrapperTabbed",{"src":341,"srcDark":341},{"_path":674,"title":675,"description":676,"components":677,"icon":678},"/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.",[675],{"src":412,"srcDark":412},{"_path":680,"title":681,"description":682,"components":683,"icon":687},"/documentation/reference/tairo/flex-table","TairoFlexTable","Flex tables are an alternative way to display tabular data. They behave responsively on smaller screens.",[681,684,685,686],"TairoFlexTableHeading","TairoFlexTableRow","TairoFlexTableCell",{"src":688,"srcDark":688},"/img/illustrations/components/table-icon.svg",{"_path":690,"title":691,"description":692,"components":693,"icon":694},"/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.",[691],{"src":412,"srcDark":412},{"_path":696,"title":697,"description":698,"components":699,"icon":700},"/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.",[697],{"src":419,"srcDark":419},{"_path":702,"title":703,"description":704,"components":705,"icon":707},"/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.",[703,706],"TairoLogoText",{"src":341,"srcDark":341},{"_path":709,"title":710,"description":711,"components":712,"icon":713},"/documentation/reference/tairo/modal","TairoModal","Modals are popups that you can use to force an interaction before the user can continue using the application.",[710],{"src":714,"srcDark":714},"/img/illustrations/components/modal-icon.svg",{"_path":716,"title":717,"description":718,"components":719,"icon":723},"/documentation/reference/tairo/popover","TairoPopover","A flexible popover that you can use to make simple text based popovers or more complex UI interactions.",[717,720,721,722],"TairoPopoverContentHelp","TairoPopoverContentDual","TairoPopoverContentMedia",{"src":724,"srcDark":724},"/img/illustrations/components/popover-icon.svg",{"_path":726,"title":727,"description":728,"components":729,"icon":730},"/documentation/reference/tairo/sidebar-tools","TairoSidebarTools","Tairo sidebar tools is a component that lets you reuse the main toolbar buttons anywhere in your app.",[727],{"src":419,"srcDark":419},{"_path":732,"title":733,"description":734,"components":735,"icon":739},"/documentation/reference/tairo/table","TairoTable","Tairo tables are a quick shortcut to render lists and collections using the native HTML5 table element.",[733,736,737,738],"TairoTableHeading","TairoTableRow","TairoTableCell",{"src":449,"srcDark":449},{"_path":741,"title":742,"description":743,"components":744,"icon":745},"/documentation/reference/tairo/toaster","TairoToaster","Tairo toasters are used to display notifications and messages to the user.",[742],{"src":746,"srcDark":746},"/img/illustrations/components/sidebar-icon.svg",{"_path":748,"title":749,"description":750,"components":751,"icon":753},"/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.",[749,752],"TairoTocAnchor",{"src":746,"srcDark":746},{"_path":755,"title":300},"/documentation/reference/sidebar/_dir",{"_path":757,"title":758,"description":759,"components":760,"icon":761},"/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.",[758,703],{"src":746,"srcDark":746},{"_path":763,"title":764,"description":765,"components":766,"icon":768},"/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.",[764,767],"TairoSidebarNavigationItem",{"src":746,"srcDark":746},{"_path":770,"title":771,"description":772,"components":773,"icon":779},"/documentation/reference/sidebar/subsidebar","TairoSubsidebar","The subsidebar works as a submenu element for the TairoSidebarNavigation component",[771,774,775,776,777,778],"TairoSubsidebarHeader","TairoSubsidebarMenu","TairoSubsidebarMenuCollapseLinks","TairoSubsidebarMenuDivider","TairoSubsidebarMenuLink",{"src":746,"srcDark":746},{"_path":781,"title":782,"description":783,"components":784,"icon":786},"/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.",[782,785],"TairoSidebarBurger",{"src":787,"srcDark":787},"/img/illustrations/components/anchor-icon.svg",{"_path":789,"title":790,"description":791,"components":792,"icon":793},"/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.",[790],{"src":787,"srcDark":787},{"_path":795,"title":267},"/documentation/reference/collapse/_dir",{"_path":797,"title":798,"description":799,"components":800,"icon":801},"/documentation/reference/collapse/layout","TairoCollapseLayout","The collapse layout focuses on a single sidebar with a list of menu links.",[798],{"src":746,"srcDark":746},{"_path":803,"title":804,"description":805,"components":806,"icon":808},"/documentation/reference/collapse/navigation","TairoCollapseNavigation","The collapse navigation focuses on a single sidebar with a list of menu links.",[804,807],"TairoCollapseNavigationCollapseLinks",{"src":746,"srcDark":746},{"_path":810,"title":811,"description":783,"components":812,"icon":814},"/documentation/reference/collapse/toolbar","TairoCollapseToolbar",[811,813],"TairoCollapseBurger",{"src":787,"srcDark":787},{"_path":816,"title":817,"description":791,"components":818,"icon":819},"/documentation/reference/collapse/circular-menu","TairoCollapseCircularMenu",[817],{"src":787,"srcDark":787},{"_path":821,"title":9},"/documentation/reference/topnav/_dir",{"_path":823,"title":824,"description":825,"components":826,"icon":827},"/documentation/reference/topnav/layout","TairoTopnavLayout","The Topnav layout focuses on a single top navbar with a list of menu links.",[824],{"src":377,"srcDark":377},{"_path":829,"title":830,"description":831,"components":832,"icon":833},"/documentation/reference/topnav/navigation","TairoTopnavNavigation","The Topnav navigation provides a slot for the header as well as a toolbar.",[830],{"src":377,"srcDark":377},{"_path":835,"title":836,"description":791,"components":837,"icon":838},"/documentation/reference/topnav/circular-menu","TairoTopnavCircularMenu",[836],{"src":787,"srcDark":787},{"_path":840,"title":841,"description":842,"components":843,"icon":844},"/documentation/reference/topnav/footer","TairoTopnavFooter","Tairo's top nav footer is a minimal footer that you can include to provide additional navigation links.",[841],{"src":787,"srcDark":787},{"_path":846,"title":269},"/documentation/reference/iconnav/_dir",{"_path":848,"title":849,"description":850,"components":851,"icon":852},"/documentation/reference/iconnav/layout","TairoIconnavLayout","The Iconnav layout focuses on a double top navbar with a list of menu links.",[849],{"src":377,"srcDark":377},{"_path":854,"title":855,"description":856,"components":857,"icon":858},"/documentation/reference/iconnav/navigation","TairoIconnavNavigation","The Iconnav navigation provides a slot for the header as well as a toolbar.",[855],{"src":377,"srcDark":377},{"_path":860,"title":861,"description":791,"components":862,"icon":863},"/documentation/reference/iconnav/circular-menu","TairoIconnavCircularMenu",[861],{"src":787,"srcDark":787},{"_path":865,"title":866,"description":842,"components":867,"icon":868},"/documentation/reference/iconnav/footer","TairoIconnavFooter",[866],{"src":787,"srcDark":787},{"_path":870,"title":871},"/documentation/reference/advanced/_dir","Advanced",{"_path":873,"title":874,"description":875,"components":876,"icon":877},"/documentation/reference/advanced/input-password","AddonInputPassword","Secure password input field with password visibility toggle.",[874],{"src":878,"srcDark":878},"/img/illustrations/components/markdown-icon.svg",{"_path":880,"title":881,"description":882,"components":883,"icon":884},"/documentation/reference/advanced/input-phone","AddonInputPhone","International phone number input field with country code dropdown.",[881],{"src":878,"srcDark":878},{"_path":886,"title":887,"description":888,"components":889,"icon":890},"/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.",[887],{"src":878,"srcDark":878},{"_path":892,"title":893},"/documentation/reference/integration/_dir","Integration",{"_path":895,"title":896,"description":897,"components":898,"icon":900},"/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.",[899],"AddonApexcharts",{"src":901,"srcDark":901},"/img/illustrations/components/apexcharts-icon.svg",{"_path":903,"title":904,"description":905,"components":906,"icon":909},"/documentation/reference/integration/carousel","Carousel","Tairo ships with the swiper module for Nuxt. Use the component to display fancy and highly customizable carousels.",[907,908],"AddonCarouselTeam","AddonCarouselIcons",{"src":910,"srcDark":910},"/img/illustrations/components/carousel-icon.svg",{"_path":912,"title":913,"description":8,"components":914},"/documentation/reference/integration/icons","Icons",[915],"Icon",{"_path":917,"title":918,"description":919,"components":920,"icon":922},"/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.",[921],"AddonMapboxPanel",{"src":923,"srcDark":923},"/img/illustrations/components/map-icon.svg",{"_path":925,"title":926,"description":927,"icon":928},"/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":384,"srcDark":384},1779173523527]