JenniferSoft Design Docs

Appearance

RadioButtonCard ​

일반적인 라디오 버튼보다 더 직관적이고 시각적으로 풍부한 선택 경험을 제공하는 카드형 선택 컴포넌트입니다. 각 RadioButtonCard는 제목, 설명, 선택 상태를 포함할 수 있으며, 선택 항목의 의미를 보다 명확히 전달하기 위해 추가적인 콘텐츠를 포함할 수 있습니다.

Title ​

Cheese Pizza
Potato Pizza
Bulgogi Pizza
Pepperoni Pizza
vue
<script setup lang="ts">
import { ref } from 'vue';
import { CheckboxCard } from '@jennifersoft/vue-components-v2';
const pizzaValue = ref('Cheese');
</script>
<template>
    <div class="flex flex-col gap-2">
        <div class="flex items-center gap-2">
            <radio-button-card
                class="w-52"
                v-model="pizzaValue"
                name="pizza"
                value="Cheese"
                title="Cheese Pizza"
            />
            <radio-button-card
                class="w-52"
                v-model="pizzaValue"
                name="pizza"
                value="Potato"
                title="Potato Pizza"
            />
        </div>
        <div class="flex items-center gap-2">
            <radio-button-card
                class="w-52"
                v-model="pizzaValue"
                name="pizza"
                value="Bulgogi"
                title="Bulgogi Pizza"
            />
            <radio-button-card
                class="w-52"
                v-model="pizzaValue"
                name="pizza"
                value="Pepperoni"
                title="Pepperoni Pizza"
            />
        </div>
    </div>
</template>

Title + Description ​

Cheese Pizza
풍부한 모짜렐라 치즈가 듬뿍 올라가 부드럽고 고소한 맛이 일품인 피자의 기본 중의 기본
Potato Pizza
담백한 감자 토핑과 베이컨이 어우러져 포만감이 높고 아이들에게도 인기 많은 한국적 피자
Bulgogi Pizza
달콤한 양념의 한국식 불고기와 채소가 조화롭게 어우러져 한국인의 입맛에 딱 맞는 퓨전 피자
Pepperoni Pizza
얇게 썬 매콤한 페퍼로니 소시지가 특징으로, 고소한 치즈와 함께 클래식한 미국식 피자의 대표주자
vue
<script setup lang="ts">
import { ref } from 'vue';
import { CheckboxCard } from '@jennifersoft/vue-components-v2';
const pizzaValue = ref('Cheese');
</script>
<template>
    <div class="flex flex-col gap-2">
        <div class="flex items-center gap-2">
            <radio-button-card
                class="w-60"
                v-model="pizzaValue"
                name="pizza"
                value="Cheese"
                title="Cheese Pizza"
                description="풍부한 모짜렐라 치즈가 듬뿍 올라가 부드럽고 고소한 맛이 일품인 피자의 기본 중의 기본"
            />
            <radio-button-card
                class="w-60"
                v-model="pizzaValue"
                name="pizza"
                value="Potato"
                title="Potato Pizza"
                description="담백한 감자 토핑과 베이컨이 어우러져 포만감이 높고 아이들에게도 인기 많은 한국적 피자"
            />
        </div>
        <div class="flex items-center gap-2">
            <radio-button-card
                class="w-60"
                v-model="pizzaValue"
                name="pizza"
                value="Bulgogi"
                title="Bulgogi Pizza"
                description="달콤한 양념의 한국식 불고기와 채소가 조화롭게 어우러져 한국인의 입맛에 딱 맞는 퓨전 피자"
            />
            <radio-button-card
                class="w-60"
                v-model="pizzaValue"
                name="pizza"
                value="Pepperoni"
                title="Pepperoni Pizza"
                description="얇게 썬 매콤한 페퍼로니 소시지가 특징으로, 고소한 치즈와 함께 클래식한 미국식 피자의 대표주자"
            />
        </div>
    </div>
</template>

disabled ​

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