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