Tairo panels allow to display additional data and details in animated left or right drawers.
To create a panel component, you only need to register close event. You can also define props to pass data to the panel or add custom data to close event to get back when opening the panel.
<script setup lang="ts">
interface Project {
name: string
}
// Props are optional, you will be able to pass them when opening the panel
const props = withDefaults(
defineProps<{
color?: 'default' | 'primary' | 'secondary'
projects?: Project[]
}>(),
{
color: 'default',
projects: () => [],
},
)
// Define close event, you will be able to get back the selected data from the panel
const emits = defineEmits<{
close: [selected?: Project]
}>()
</script>
<template>
<div>
<BaseButton
@click="() => emits('close', {
selected: props.projects[0],
})"
>
Select project
</BaseButton>
<BaseButton @click="() => emits('close')">
Cancel
</BaseButton>
</div>
</template>
Once you have created your panel component, you can open it using the open function from the usePanels composable.
<script setup lang="ts">
import { PanelComponent } from '#components'
const { open, close } = usePanels()
function onSomeEvent() {
// open a panel and wait for close event
const [selected] = await open(
// component to open
PanelComponent,
// panel component props
{
color: 'secondary',
projects: [
{ name: 'Project 1' },
{ name: 'Project 2' },
{ name: 'Project 3' },
{ name: 'Project 4' },
],
},
// panel options
{
position: 'left',
size: 'md',
overlay: true,
}
)
console.log(selected)
}
</script>