텍스트 버튼
텍스트만 포함된 스타일 버튼입니다.
#text #link
HTML
<button type="button" class="krds-btn small text">텍스트 버튼</button>
<button type="button" class="krds-btn xsmall text">찜하기 <i class="svg-icon ico-like"></i></button>
<button type="button" class="krds-btn small text">주민등록표초본 <i class="svg-icon ico-angle right"></i></button>
<button type="button" class="krds-btn medium text">검색 <i class="svg-icon ico-sch"></i></button>
<button type="button" class="krds-btn xlarge text">자세히 보기 <i class="svg-icon ico-more"></i></button>
<button type="button" class="krds-btn text">파일다운로드 <i class="svg-icon ico-down"></i></button>
<button type="button" class="krds-btn text" disabled>필터 <i class="svg-icon ico-filter"></i></button>Vue 컴포넌트
<template>
<button type="button" class="krds-btn small text">텍스트 버튼</button>
<button type="button" class="krds-btn xsmall text">찜하기 <i class="svg-icon ico-like"></i></button>
<button type="button" class="krds-btn small text">주민등록표초본 <i class="svg-icon ico-angle right"></i></button>
<button type="button" class="krds-btn medium text">검색 <i class="svg-icon ico-sch"></i></button>
<button type="button" class="krds-btn xlarge text">자세히 보기 <i class="svg-icon ico-more"></i></button>
<button type="button" class="krds-btn text">파일다운로드 <i class="svg-icon ico-down"></i></button>
<button type="button" class="krds-btn text" disabled>필터 <i class="svg-icon ico-filter"></i></button>
</template>
<script setup lang="ts">
// 텍스트 버튼 컴포넌트
// 텍스트만 포함된 스타일 버튼입니다.
import { ref } from 'vue'
// 필요한 상태 및 메서드 정의
const isActive = ref(false)
const handleClick = () => {
isActive.value = !isActive.value
}
</script>컴포넌트 정보
- 파일명
- button_text.html
- 카테고리
- 버튼
- 난이도
- 쉬움