mirror of
https://github.com/DavidHDev/vue-bits.git
synced 2026-03-07 06:29:30 -07:00
86 lines
2.5 KiB
Vue
86 lines
2.5 KiB
Vue
<template>
|
|
<TabbedLayout>
|
|
<template #preview>
|
|
<div class="demo-container overflow-hidden h-[400px]">
|
|
<StarBorder as="button" :color="color" :speed="speedProp" :thickness="thickness">Star Border</StarBorder>
|
|
</div>
|
|
|
|
<Customize>
|
|
<PreviewSelect title="Color" v-model="color" :options="colorOptions" />
|
|
<PreviewSlider title="Thickness" v-model="thickness" :min="0.5" :max="8" :step="0.5" value-unit="px" />
|
|
<PreviewSlider title="Speed" v-model="speed" :min="1" :max="10" :step="0.5" value-unit="s" />
|
|
</Customize>
|
|
|
|
<PropTable :data="propData" />
|
|
</template>
|
|
|
|
<template #code>
|
|
<CodeExample :code-object="starBorder" />
|
|
</template>
|
|
|
|
<template #cli>
|
|
<CliInstallation :command="starBorder.cli" />
|
|
</template>
|
|
</TabbedLayout>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, watch } from 'vue';
|
|
import TabbedLayout from '../../components/common/TabbedLayout.vue';
|
|
import PropTable from '../../components/common/PropTable.vue';
|
|
import CliInstallation from '../../components/code/CliInstallation.vue';
|
|
import CodeExample from '../../components/code/CodeExample.vue';
|
|
import Customize from '../../components/common/Customize.vue';
|
|
import PreviewSlider from '../../components/common/PreviewSlider.vue';
|
|
import PreviewSelect from '../../components/common/PreviewSelect.vue';
|
|
import StarBorder from '../../content/Animations/StarBorder/StarBorder.vue';
|
|
import { starBorder } from '@/constants/code/Animations/starBorderCode';
|
|
|
|
const thickness = ref<number>(3);
|
|
const speed = ref<number>(6);
|
|
const speedProp = ref<string>('6s');
|
|
const color = ref<string>('magenta');
|
|
const colorOptions = [
|
|
{ label: 'Magenta', value: 'magenta' },
|
|
{ label: 'Cyan', value: 'cyan' },
|
|
{ label: 'white', value: 'white' }
|
|
];
|
|
|
|
watch(speed, () => {
|
|
speedProp.value = speed.value.toString() + 's';
|
|
});
|
|
|
|
const propData = [
|
|
{
|
|
name: 'as',
|
|
type: 'string',
|
|
default: 'button',
|
|
description: 'Allows specifying the type of the parent component to be rendered.'
|
|
},
|
|
{
|
|
name: 'customClass',
|
|
type: 'string',
|
|
default: '',
|
|
description: 'Allows adding custom classes to the component.'
|
|
},
|
|
{
|
|
name: 'color',
|
|
type: 'string',
|
|
default: 'white',
|
|
description: 'Changes the main color of the border (fades to transparent)'
|
|
},
|
|
{
|
|
name: 'speed',
|
|
type: 'string',
|
|
default: '6s',
|
|
description: 'Changes the speed of the animation.'
|
|
},
|
|
{
|
|
name: 'thickness',
|
|
type: 'number',
|
|
default: '3',
|
|
description: 'Controls the thickness of the star border effect.'
|
|
}
|
|
];
|
|
</script>
|