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