mirror of
https://github.com/directus/directus.git
synced 2026-02-15 11:15:03 -05:00
c2e7c85bbd
* move component docs to documentation * update app docs tables for components * update docs * Add components to docs sidebar * fix generated tables * fix tables * rename transitions * update tables * update nested components * update tables * update tables * update tables * update v-table table * add basic documentation to each component * remove all stories of storybook * add missing documentation * undate tables * update tables * update docs sidebar * update app docs * remove unused references * add general readme * update docs * make reference titiles smaller * add reference tag * improve docs * update order of tabs in sidebar * remove all readmes and stories from interfaces/displays * Cleanup menu * Remove storybook Co-authored-by: rijkvanzanten <rijkvanzanten@me.com>
55 lines
1.2 KiB
Markdown
55 lines
1.2 KiB
Markdown
# Transition Expand
|
|
|
|
Use around a `v-if` or `v-show` component to have it expand in and out of view.
|
|
|
|
```html
|
|
<template>
|
|
<div>
|
|
<v-button @click="toggle">Click me!</v-button>
|
|
|
|
<transition-expand>
|
|
<div v-if="active">More content</div>
|
|
</transition-expand>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { defineComponent, ref } from '@vue/composition-api';
|
|
|
|
export default defineComponent({
|
|
setup(props) {
|
|
const active = ref<boolean>(false);
|
|
|
|
return { active, toggle };
|
|
|
|
function toggle() {
|
|
active.value = !active.value;
|
|
}
|
|
},
|
|
});
|
|
</script>
|
|
```
|
|
|
|
## Reference
|
|
|
|
#### Props
|
|
|
|
| Prop | Description | Default | Type |
|
|
| ----------------------- | -------------------------------------------------- | ------- | --------- |
|
|
| `x-axis` | Expand on the horizontal instead vertical axis | `false` | `Boolean` |
|
|
| `expanded-parent-class` | Add a custom class to the element that is expanded | `''` | `String` |
|
|
|
|
#### Slots
|
|
|
|
| Slot | Description | Data |
|
|
| --------- | ---------------------------------------- | ---- |
|
|
| _default_ | Elements that should be animated go here | |
|
|
|
|
#### Events
|
|
|
|
n/a
|
|
|
|
#### CSS Variables
|
|
|
|
n/a
|