Install
npm i @accurasoft/homepage-component
Component List
Component | Description |
---|---|
CenteringEffect | Upon appearing on the screen, exhibits a centering effect, aligning itself to the middle of the screen. Implemented for both desktop and mobile versions. |
FadeAnimation | Applies a fade-in effect upon appearing on the screen. Once triggered, it won't reappear until a page refresh. |
HeaderModalButton | Upon button press, a zoom-in effect occurs, expanding the circle to fill the entire screen. You can fill the inside of the modal. <slot name="inside-modal" /> Close button implemented. |
ListDeco | Creates aesthetically pleasing list items (li) by automatically numbering strings or elements in an array. Implemented for both desktop and mobile versions. |
SlidePlayPause | Carousel component with forward and backward navigation buttons, Pause and play. Adjustable interval timing. Touch event control. Implemented for both desktop and mobile versions. Add slide effect |
SlideControl | Control Carousel. Forward and backward navigation buttons. Pause and play. Adjustable interval timing. |
SlideScroll | Carousel component with range-slider controlled. Touch event control is available. Implemented for both desktop and mobile versions. |
TextShow | Text rotation and appearance effect. Adjustable interval timing. |
TextTyping | Text typing effect. Adjustable interval timing. |
Usage
CenteringEffect
import CenteringEffect from "@accurasoft/homepage-component";
const List = [
{
title: "Title1",
details:
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. \nNam at nulla placerat, eleifend ipsum tincidunt, dapibus ante.",
},
{
title: "Title2",
details:
"Proin vestibulum augue sit amet nunc scelerisque tincidunt.\nInteger sagittis eros id consectetur vestibulum.",
},
{
title: "Title3",
details:
"Pellentesque fringilla lorem venenatis, scelerisque dolor vel, tempus ipsum.\nInteger sagittis nibh quis mauris facilisis, in egestas sapien viverra.",
},
{
title: "Title4",
details:
"Mauris pretium sem non ligula malesuada mattis nec quis magna.\nCurabitur nec est sed risus sollicitudin tempus at ut purus.",
},
];
<CenteringEffect :list="List" title="TITLE">
<template #default="{ item }">
<div>
<p class="text-4xl font-bold">
{{ item.title }}
</p>
<p class="service-details whitespace-pre-wrap">
{{ item.details }}
</p>
</div>
</template>
</CenteringEffect>
props
interface CenterringListType {
title: string;
description?: string;
details: string;
}
const props = defineProps({
list: {
type: Array<CenterringListType>,
requred: true,
validator: (value) => {
if (!Array.isArray(value) || value.length !== 4) {
console.error("list props : 4가지 항목 Array");
return false;
}
return true;
},
default() {
return [];
},
},
title: {
type: String,
requred: false,
default: "title",
},
});
FadeAnimation
import { FadeAnimation } from "@accurasoft/homepage-component";
<FadeAnimation :transition-duration-ms="800" :transition-delay-ms="200">
<p>
Hello
</p>
</FadeAnimation>
props
const props = defineProps({
transitionDurationMs: {
type: Number,
default: 700,
required: false,
},
transitionDelayMs: {
type: Number,
default: 300,
required: false,
},
});
HeaderHamburgerButton
import { HeaderHamburgerButton } from "@accurasoft/homepage-component";
<HeaderHamburgerButton>
<template #inside-modal>
<p class="text-3xl text-center text-white">
inside slot
</p>
</template>
</HeaderHamburgerButton>
ListDeco
import { ListDeco } from "@accurasoft/homepage-component";
const mokList = [
{ contents: "동해물과 백두산이 마르고 닳도록" },
{ contents: "하느님이 보우하사 우리나라 만세" },
{ contents: "무궁화 삼천리 화려강산" },
{ contents: "대한사람 대한으로 길이 보전하세" },
];
<ListDeco :list="mokList" />
props
export interface ListListType {
contents: string;
}
const props = defineProps<{
list: ListListType[] | string[];
}>();
SlidePlayPause
import { SlidePlayPause } from "@accurasoft/homepage-component";
const index = ref(0);
const exemple = [
{ title: "title1111111111", contents: "1111111111111111111111111111111111" },
{ title: "title2222222222", contents: "2222222222222222222222222222222222" },
{ title: "title3333333333", contents: "3333333333333333333333333333333333" },
];
<SlidePlayPause
v-model:slideIndex="index"
:interval-ms="2000"
:list-length="exemple.length"
height="10rem"
>
<template #slideContents>
<div
v-for="(item, i) in exemple"
:key="i"
:class="{ active: CurrentSlideIndex === i }"
class="rounded-2xl border-[0.063rem] xl:min-h-[14rem] max-w-full w-full p-8 relative flex justify-center" // If the element is larger than the viewport, add [relative flex justify-center]
>
<div class="absolute"> // If the element is larger than the viewport, add [absolute]
<h2 class="text-3xl">
{{ item.title }}
</h2>
<p class="">
{{ item.contents }}
</p>
</div>
</div>
</template>
</SlidePlayPause>
props
const props = defineProps({
listLength: {
type: Number,
default: 3,
required: true,
},
intervalMs: {
type: Number,
default: 2000,
required: false,
},
height: {
// :style="{ height: `${props.height}` }"
type: String,
default: "18rem",
required: false,
},
});
const slideIndex = defineModel<number>("slideIndex", { default: 0 });
SlideControl
import { SlideControl } from "@accurasoft/homepage-component";
const index = ref(0);
const exemple = [
{ title: "title1111111111", contents: "1111111111111111111111111111111111" },
{ title: "title2222222222", contents: "2222222222222222222222222222222222" },
{ title: "title3333333333", contents: "3333333333333333333333333333333333" },
];
<h2>
{{ exemple[index]?.title }}
</h2>
<p>
{{ exemple[index]?.contents }}
</p>
<SlideControl
v-model:count="index"
:list-length="exemple.length"
:interval-ms="1000"
/>
props
const props = defineProps({
listLength: {
type: Number,
required: true,
},
intervalMs: {
type: Number,
default: 2000,
required: false,
},
});
const slideIndex = defineModel<number>("slideIndex", { default: 0 });
SlideScroll
import { SlideScroll } from "@accurasoft/homepage-component";
const history = [
{
key: 2021,
contents: [
"111111",
"22222222",
"33333333",
"444444444",
"555555555",
"666666666",
],
},
{
key: 2020,
contents: ["111111", "22222222", "33333333", "444444444", "555555555"],
},
{ key: 2019, contents: ["111111", "22222222", "33333333", "444444444"] },
{ key: 2018, contents: ["111111", "22222222", "33333333", "444444444"] },
{ key: 2017, contents: ["111111", "22222222", "33333333"] },
{ key: 2016, contents: ["111111", "22222222", "33333333"] },
];
<SlideScroll :list="history" />
props
const props = defineProps({
listLength: {
type: Number,
default: 3,
required: true,
},
intervalMs: {
type: Number,
default: 2000,
required: false,
},
height: {
type: String,
default: "18rem",
required: false,
},
});
TextShow
import { TextShow } from "@accurasoft/homepage-component";
<TextShow text="HELLO WORLD" :interval-ms="300" class="text-2xl" />
props
const props = defineProps<{
text: string;
intervalMs?: number; // default: 200
}>();
TextTyping
import { TextTyping } from "@accurasoft/homepage-component";
<TextTyping text="HELLO WORLD" :interval-ms="300" class="text-2xl" />
props
const props = defineProps<{
text: string;
intervalMs?: number; // default: 100
}>();