[{"data":1,"prerenderedAt":266},["Reactive",2],{"$KyeTl6nybl":3,"page-data":4,"page-tree":246},[],{"_path":5,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":9,"description":10,"components":11,"icon":13,"body":15,"_type":241,"_id":242,"_source":243,"_file":244,"_extension":245},"/documentation/guides/panels","guides",false,"","Panels","Tairo panels allow to display additional data and details in animated left or right drawers.",[12],"TairoPanels",{"src":14,"srcDark":14},"/img/illustrations/components/logo-icon.svg",{"type":16,"children":17,"toc":238},"root",[18,118,151,179,207],{"type":19,"tag":20,"props":21,"children":23},"element","doc-component-demo",{"title":22},"Register panels",[24,40,57,70,84,105],{"type":19,"tag":25,"props":26,"children":27},"p",{},[28,31,38],{"type":29,"value":30},"text","In order to use panels, you need to create a component in ",{"type":19,"tag":32,"props":33,"children":35},"code",{"className":34},[],[36],{"type":29,"value":37},"\u003Capp>/components/global",{"type":29,"value":39}," folder to make them available in your app.",{"type":19,"tag":41,"props":42,"children":43},"code-group",{},[44],{"type":19,"tag":45,"props":46,"children":52},"pre",{"className":47,"code":49,"filename":50,"language":51,"meta":8},[48],"language-vue","\u003Cscript setup lang=\"ts\">\n// You can add props to the component\nconst props = withDefaults(\n  defineProps\u003C{\n    color?: 'default' | 'primary' | 'secondary'\n    projects?: any[]\n  }>(),\n  {\n    color: 'default',\n    projects: () => [],\n  },\n)\n\n// Eiter define events\nconst emits = defineEmits\u003C{\n  save: [info: any]\n}>()\n\n// And use panels utils\nconst { close } = usePanels()\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CBaseButtonGroup>\n    \u003CBaseButton @click=\"() => emits('save', { selected: props.projects[0] })\">ذخیره\u003C/BaseButton>\n    \u003CBaseButton @click=\"() => close()\">لغو\u003C/BaseButton>\n  \u003C/BaseButtonGroup>\n\u003C/template>\n","\u003Capp>/components/global/PanelComponent.vue","vue",[53],{"type":19,"tag":32,"props":54,"children":55},{"__ignoreMap":8},[56],{"type":29,"value":49},{"type":19,"tag":25,"props":58,"children":59},{},[60,62,68],{"type":29,"value":61},"Then you need to\nregister the panel in your ",{"type":19,"tag":32,"props":63,"children":65},{"className":64},[],[66],{"type":29,"value":67},"\u003Capp>/app.config.ts",{"type":29,"value":69}," file.",{"type":19,"tag":41,"props":71,"children":72},{},[73],{"type":19,"tag":45,"props":74,"children":79},{"className":75,"code":77,"filename":67,"language":78,"meta":8},[76],"language-ts","export default defineAppConfig({\n  tairo: {\n    panels: [\n      {\n        // Unique name of the panel, used to open it\n        name: 'panel-name',\n        component: { \n          // The component name of the panel and default props\n          name: 'PanelComponent', \n          props: {\n            color: 'primary',\n          } \n        },\n        // The position of the panel\n        position: 'left',\n        // Whether to show an overlay when the panel is open\n        overlay: false,\n      },\n    ],\n  },\n})\n","ts",[80],{"type":19,"tag":32,"props":81,"children":82},{"__ignoreMap":8},[83],{"type":29,"value":77},{"type":19,"tag":25,"props":85,"children":86},{},[87,89,95,97,103],{"type":29,"value":88},"Once you have registered the panel, you can open it using the ",{"type":19,"tag":32,"props":90,"children":92},{"className":91},[],[93],{"type":29,"value":94},"open",{"type":29,"value":96}," function from the ",{"type":19,"tag":32,"props":98,"children":100},{"className":99},[],[101],{"type":29,"value":102},"usePanels",{"type":29,"value":104}," composable.",{"type":19,"tag":41,"props":106,"children":107},{},[108],{"type":19,"tag":45,"props":109,"children":113},{"className":110,"code":111,"filename":112,"language":51,"meta":8},[48],"\u003Cscript setup lang=\"ts\">\nconst { open, close } = usePanels()\n\nfunction onSomeEvent() {\n  // close all panels first\n  close()\n\n  // open a panel by name\n  open('panel-name', {\n    // panel component props\n    color: 'secondary',\n    projects: [\n      { name: 'Project 1' },\n      { name: 'Project 2' },\n      { name: 'Project 3' },\n      { name: 'Project 4' },\n    ],\n    // panel component events, should be prefixed with `on`\n    onSave (info) {\n      console.log(info)\n      // logs { selected: { name: 'Project 1' }\n    }\n  })\n}\n\u003C/script>\n","\u003Capp>/components/MyComponent.vue",[114],{"type":19,"tag":32,"props":115,"children":116},{"__ignoreMap":8},[117],{"type":29,"value":111},{"type":19,"tag":20,"props":119,"children":122},{"title":120,"demo":121},"Activity panel","#examples/panel/activity.vue",[123],{"type":19,"tag":25,"props":124,"children":125},{},[126,128,133,135,141,143,149],{"type":29,"value":127},"Panels can be opened using the ",{"type":19,"tag":32,"props":129,"children":131},{"className":130},[],[132],{"type":29,"value":94},{"type":29,"value":134}," function. You can define the panels you use inside the ",{"type":19,"tag":32,"props":136,"children":138},{"className":137},[],[139],{"type":29,"value":140},"app.config.ts",{"type":29,"value":142}," file in your project. You can also pass ",{"type":19,"tag":32,"props":144,"children":146},{"className":145},[],[147],{"type":29,"value":148},"props",{"type":29,"value":150}," to panels using the same function. Click below for an activity panel example.",{"type":19,"tag":20,"props":152,"children":155},{"title":153,"demo":154},"Language panel","#examples/panel/language.vue",[156],{"type":19,"tag":25,"props":157,"children":158},{},[159,160,165,166,171,172,177],{"type":29,"value":127},{"type":19,"tag":32,"props":161,"children":163},{"className":162},[],[164],{"type":29,"value":94},{"type":29,"value":134},{"type":19,"tag":32,"props":167,"children":169},{"className":168},[],[170],{"type":29,"value":140},{"type":29,"value":142},{"type":19,"tag":32,"props":173,"children":175},{"className":174},[],[176],{"type":29,"value":148},{"type":29,"value":178}," to panels using the same function. Click below for a language panel example.",{"type":19,"tag":20,"props":180,"children":183},{"title":181,"demo":182},"پنل جستجو","#examples/panel/search.vue",[184],{"type":19,"tag":25,"props":185,"children":186},{},[187,188,193,194,199,200,205],{"type":29,"value":127},{"type":19,"tag":32,"props":189,"children":191},{"className":190},[],[192],{"type":29,"value":94},{"type":29,"value":134},{"type":19,"tag":32,"props":195,"children":197},{"className":196},[],[198],{"type":29,"value":140},{"type":29,"value":142},{"type":19,"tag":32,"props":201,"children":203},{"className":202},[],[204],{"type":29,"value":148},{"type":29,"value":206}," to panels using the same function. Click below for a search panel example.",{"type":19,"tag":20,"props":208,"children":211},{"title":209,"demo":210},"Task panel","#examples/panel/task.vue",[212,224,233],{"type":19,"tag":25,"props":213,"children":214},{},[215,217,222],{"type":29,"value":216},"Panels can be used to show dynamic data using ",{"type":19,"tag":32,"props":218,"children":220},{"className":219},[],[221],{"type":29,"value":148},{"type":29,"value":223},". Pass props to a panel using the  props object as the second function parameter:",{"type":19,"tag":25,"props":225,"children":226},{},[227],{"type":19,"tag":32,"props":228,"children":230},{"className":229},[],[231],{"type":29,"value":232},"open('name', { key: value })",{"type":19,"tag":25,"props":234,"children":235},{},[236],{"type":29,"value":237},"Click below for a task panel example.",{"title":8,"searchDepth":239,"depth":239,"links":240},2,[],"markdown","content:documentation:50.guides:2.panels.md","content","documentation/50.guides/2.panels.md","md",[247,253,260],{"_path":248,"_dir":8,"_draft":7,"_partial":7,"_locale":8,"title":249,"description":8,"toc":250,"_type":241,"_id":251,"_source":243,"_file":252,"_extension":245},"/documentation","مرکز مستندات",true,"content:documentation:1.index.md","documentation/1.index.md",{"_path":254,"_dir":6,"_draft":7,"_partial":250,"_locale":8,"title":255,"_id":256,"_type":257,"_source":243,"_file":258,"_extension":259},"/documentation/guides/_dir","Guides","content:documentation:50.guides:_dir.yml","yaml","documentation/50.guides/_dir.yml","yml",{"_path":261,"_dir":262,"_draft":7,"_partial":7,"_locale":8,"title":8,"description":263,"navigation":7,"redirect":5,"_type":241,"_id":264,"_source":243,"_file":265,"_extension":245},"/documentation/guides","documentation","Redirecting to panels...","content:documentation:50.guides:1.index.md","documentation/50.guides/1.index.md",1779173519479]