JenniferSoft Design Docs

Appearance

CheckboxCard ​

일반적인 체크박스보다 더 직관적이고 시각적으로 풍부한 선택 경험을 제공하는 카드형 선택 컴포넌트입니다. 각 CheckboxCard는 제목, 설명, 선택 상태를 포함할 수 있으며, 체크박스 위치도 카드 내부에서 조절할 수 있습니다.

Interactive Playground ​

아래에서 제목, 설명, 비활성화 여부, 체크박스 위치를 직접 바꿔가며 컴포넌트를 확인해보세요.

Props 설정
top-right
미리보기
Cheese Pizza
풍부한 모짜렐라 치즈가 듬뿍 올라가 부드럽고 고소한 맛이 일품인 피자의 기본 중의 기본
checked: false
vue
<script setup lang="ts">
import { ref } from 'vue';
import { CheckboxCard } from '@jennifersoft/vue-components-v2';

const checked = ref(false);
</script>

<template>
    <CheckboxCard
        v-model="checked"
        name="pizza"
        value="Cheese"
        title="Cheese Pizza"
        description="풍부한 모짜렐라 치즈가 듬뿍 올라가 부드럽고 고소한 맛이 일품인 피자의 기본 중의 기본"
        checkboxPosition="top-right"
    />
</template>

Props ​

Prop타입필수기본값설명
modelValueboolean | Array<string | number>--체크 상태 또는 다중 선택 값
titlestring✓-카드 제목
descriptionstring--설명 텍스트
namestring--네이티브 input의 name
valuestring | number✓-체크/선택 시 사용할 값
disabledboolean-false비활성화 여부
checkboxPosition'top-left' | 'left' | 'bottom-left' | 'top-right' | 'right' | 'bottom-right'-'top-right'체크박스 위치

Slots ​

Slot설명
right카드 우측에 badge, chip 같은 보조 UI를 배치할 때 사용

Multiple Selection ​

여러 개의 CheckboxCard를 같은 배열에 바인딩하면 다중 선택 방식으로 사용할 수 있습니다.

Cheese Pizza
Potato Pizza
Bulgogi Pizza
Pepperoni Pizza
selected: Cheese
vue
<script setup lang="ts">
import { ref } from 'vue';
import { CheckboxCard } from '@jennifersoft/vue-components-v2';

const pizzaValues = ref<Array<string | number>>(['Cheese']);
</script>

<template>
    <CheckboxCard
        v-model="pizzaValues"
        name="pizza"
        value="Cheese"
        title="Cheese Pizza"
    />
    <CheckboxCard
        v-model="pizzaValues"
        name="pizza"
        value="Potato"
        title="Potato Pizza"
    />
</template>

Checkbox Position ​

checkboxPosition 값에 따라 체크박스를 카드의 좌우 및 상하 정렬 위치로 조정할 수 있습니다.

top-left
top-right
left
right
bottom-left
bottom-right

Right Slot ​

우측 슬롯을 사용하면 카드 오른쪽에 상태 badge나 보조 정보를 함께 표시할 수 있습니다.

시스템 관리자
모든 설정과 사용자 권한을 관리
어드민
기본
vue
<script setup lang="ts">
import { ref } from 'vue';
import { Badge, CheckboxCard } from '@jennifersoft/vue-components-v2';

const checked = ref(true);
</script>

<template>
    <CheckboxCard
        v-model="checked"
        name="role"
        value="admin"
        title="시스템 관리자"
        description="모든 설정과 사용자 권한을 관리"
        checkboxPosition="left"
    >
        <template #right>
            <div class="flex gap-2">
                <Badge size="large" text="어드민" color="blue-light" />
                <Badge size="large" text="기본" color="gray-light" />
            </div>
        </template>
    </CheckboxCard>
</template>

Disabled ​

Cheese Pizza
풍부한 모짜렐라 치즈가 듬뿍 올라가 부드럽고 고소한 맛이 일품인 피자의 기본 중의 기본