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
}>();