Skip to content
SHINSEGAE V UI

TextBox

텍스트 표시 컴포넌트입니다. 폰트, 두께, 말줄임 처리 등을 쉽게 적용할 수 있습니다.

Astro

---
import TextBox from "@shared/ui/text-box/TextBox.astro";
---


<TextBox text="텍스트 내용" />
<TextBox text="제목" tag="h2" font="serif" weight="bold" />
<TextBox text="긴 텍스트는 말줄임 처리됩니다..." lines={2} />
<TextBox>슬롯으로도 사용 가능</TextBox>

Props:

  • text?: string: 텍스트 내용 (<br> 태그 지원)
  • tag?: keyof HTMLElementTagNameMap: HTML 태그 (default: "div")
  • font?: "pretendard" | "sans" | "gloock" | "serif": 폰트
  • weight?: "regular" | "bold" | "black": 폰트 두께
  • lines?: number: 말줄임 처리할 줄 수

유틸리티 함수

import { toTextContent, getFontClass, getFontWeightClass, getLineClampClass } from "@shared/ui/text-box/TextBox.astro";


// 문자열 또는 TextContent 객체를 TextContent로 변환
toTextContent("텍스트"); // { text: "텍스트" }
toTextContent({ text: "텍스트", lines: 2 }); // { text: "텍스트", lines: 2 }


// 폰트 클래스
getFontClass("sans"); // "v-font-sans"
getFontClass("serif"); // "v-font-serif"


// 폰트 두께 클래스
getFontWeightClass("bold"); // "v-font-bold"
getFontWeightClass("black"); // "v-font-black"


// 말줄임 클래스
getLineClampClass(1); // "v-truncate"
getLineClampClass(2); // "v-line-clamp-2"

Code

<!-- 기본 -->
<div>텍스트 내용</div>


<!-- 폰트 및 두께 적용 -->
<h2 class="v-font-serif v-font-bold">제목</h2>


<!-- 말줄임 처리 -->
<div class="v-line-clamp-2">긴 텍스트는 말줄임 처리됩니다...</div>


<!-- 한 줄 말줄임 -->
<div class="v-truncate">한 줄 말줄임</div>

Preview

기본 텍스트
Serif 폰트
Bold 텍스트
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.