Appearance
Sliding Panel
The FTSlidingPanel component replaces the standard html button with a design theme and a multitude of options.
Usage
Buttons in their simplest form contain uppercase text, a slight elevation, hover effect, and a ripple effect on click.
Composition api (script setup)
vue
<script setup lang="ts">
import { FTSlidingPanel } from '@fasttrack-solutions/vue-components-lib';
</script><script setup lang="ts">
import { FTSlidingPanel } from '@fasttrack-solutions/vue-components-lib';
</script>Options api
vue
<script>
import { FTSlidingPanel } from '@fasttrack-solutions/vue-components-lib';
export default {
components: {
FTSlidingPanel
}
}
</script><script>
import { FTSlidingPanel } from '@fasttrack-solutions/vue-components-lib';
export default {
components: {
FTSlidingPanel
}
}
</script>INFO
vue
<script>
<FTSlidingPanel
title="My panel"
:show="showPanel"
@close="showPanelWithConfirmClose = false" >
</FTslidingPanel>
</script><script>
<FTSlidingPanel
title="My panel"
:show="showPanel"
@close="showPanelWithConfirmClose = false" >
</FTslidingPanel>
</script>Confirm closing
INFO
vue
<script>
<FTSlidingPanel
title="My panel"
:show="showPanel"
@close="showPanel = false"
:confirm-close="true">
<template #body>
Panel content
</template>
</FTslidingPanel>
</script><script>
<FTSlidingPanel
title="My panel"
:show="showPanel"
@close="showPanel = false"
:confirm-close="true">
<template #body>
Panel content
</template>
</FTslidingPanel>
</script>Advanced usage
INFO
vue
<script>
<FTSlidingPanel
title="My panel"
:show="showPanel"
@close="showPanel = false">
<template #header-body>
<FTInput modelValue="Automation - ATP-104 - verify the versions in each status"></FTInput>
</template>
<template #actions>
<FTButton primary>Save</FTButton>
</template>
<template #body>
Panel content
</template>
<template #footer>
This is where you can put footer content
</template>
</FTslidingPanel>
</script><script>
<FTSlidingPanel
title="My panel"
:show="showPanel"
@close="showPanel = false">
<template #header-body>
<FTInput modelValue="Automation - ATP-104 - verify the versions in each status"></FTInput>
</template>
<template #actions>
<FTButton primary>Save</FTButton>
</template>
<template #body>
Panel content
</template>
<template #footer>
This is where you can put footer content
</template>
</FTslidingPanel>
</script>My panel
Panel content Small
My panel
Resizable panel
My panel
Panel content Wide
My panel
Panel content
My panel
Panel content
My panel
Panel content
Props
| Name | Default | Description |
|---|---|---|
title | empty | Title string |
show | false | Property to show panel or not |
wide | false | For when you need a wider panel |
small | false | For when you need a small panel |
confirmClose | false | Confirm before closing panel |
resizable | false | Make the panel resizable |
minWidth | 0 | Set a min with for the panel |
maxWidth | Infinity | Set a max width for panel |
saveWidth | true | Remember width of panel |
Slots
| Name | Description |
|---|---|
header | For when you need to have a totally custom header |
header-body | Will take all the space after title |
actions | Slot in the right corner of the title |
body | The main body of the panel |
footer | Optional footer slot |