Skip to content

Commit

Permalink
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Updated:Drawer component Api for documentation.
Browse files Browse the repository at this point in the history
moshiur01 committed Nov 3, 2024
1 parent a2555cf commit a0e74f2
Showing 4 changed files with 62 additions and 18 deletions.
17 changes: 0 additions & 17 deletions components/content/docs/components/drawer/DrawerApi.vue

This file was deleted.

37 changes: 37 additions & 0 deletions components/content/docs/components/drawer/api/DrawerApi.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
<script lang="ts" setup>
const drawerAPIData = [
{
id: 1,
propsName: "defaultOpen",
propsType: "boolean",
propsDescription:
"The open state of the popover when it is initially rendered. Use when you do not need to control its open state.",
default: "false",
},
{
id: 2,
propsName: "modal",
propsType: "boolean",
propsDescription:
"The modality of the popover. When set to true, interaction with outside elements will be disabled and only popover content will be visible to screen readers.",
default: "false",
},
{
id: 3,
propsName: "open",
propsType: "boolean",
propsDescription: "The controlled open state of the popover.",
},
{
id: 4,
propsName: "position",
propsType: ["left", "top", "right", "bottom"],
propsDescription: "Drawer position",
default: "bottom",
},
];
</script>

<template>
<ComponentApiTable :data="drawerAPIData" />
</template>
16 changes: 16 additions & 0 deletions components/content/docs/components/drawer/api/DrawerContentApi.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
<script lang="ts" setup>
const drawerContentAPIData = [
{
id: 1,
propsName: "disable-outside-pointer-events",
propsType: "boolean",
propsDescription:
"When true, hover/focus/click interactions will be disabled on elements outside the DismissableLayer. Users will need to click twice on outside elements to interact with them: once to close the DismissableLayer, and again to trigger the element",
default: "false",
},
];
</script>

<template>
<ComponentApiTable :data="drawerContentAPIData" />
</template>
10 changes: 9 additions & 1 deletion content/docs/components/drawer.md
Original file line number Diff line number Diff line change
@@ -17,6 +17,14 @@ You can position the drawer in a specific direction, such as `left`, `right`, `t

## API Reference

Here is a list of the props that you can pass to the drawer component
Explore the available props for the ``drawer component` component.
::DrawerApi
::

Explore the available props for the `Drawer Content` component.
::DrawerContentApi
::

## Reference

To learn more about the Drawer and its attributes, please see the documentation of [Vaul Vue](https://github.com/unovue/vaul-vue).

0 comments on commit a0e74f2

Please sign in to comment.