JenniferSoft Design Docs

Appearance

Chips ​

기본 ​

Default ​

default
default-slot
vue
<script setup lang="ts">
import { Chip, ICON_TYPE } from '@jennifersoft/vue-components-v2';
</script>
<template>
    <chip text="default" />
    <chip> default-slot </chip>
</template>

Size ​

Large
Default
Medium
Default
Small
Default
vue
<script setup lang="ts">
import { Chip, ICON_TYPE } from '@jennifersoft/vue-components-v2';
</script>
<template>
    <div class="flex flex-col items-center gap-2">
        <div class="flex items-center h-12 gap-2">
            <span>Large</span>
            <chip text="Default" size="large">
                <template v-slot:left>
                    <btn
                        size="medium"
                        shape="circle"
                        type="text"
                        :leading-icon="ICON_TYPE.arrowBack"
                        @click.stop
                    />
                </template>
                <template v-slot:right>
                    <btn
                        size="medium"
                        shape="circle"
                        type="text"
                        :leading-icon="ICON_TYPE.arrowDropDown"
                        @click.stop
                    />
                </template>
            </chip>
        </div>
        <div class="flex items-center h-12 gap-2">
            <span>Medium</span>
            <chip text="Default" size="medium">
                <template v-slot:left>
                    <btn
                        size="small"
                        shape="circle"
                        type="text"
                        :leading-icon="ICON_TYPE.arrowBack"
                        @click.stop
                    />
                </template>
                <template v-slot:right>
                    <btn
                        size="small"
                        shape="circle"
                        type="text"
                        :leading-icon="ICON_TYPE.arrowDropDown"
                        @click.stop
                    />
                </template>
            </chip>
        </div>
        <div class="flex items-center h-12 gap-2">
            <span>Small</span>
            <chip text="Default" size="small">
                <template v-slot:left>
                    <btn
                        size="mini"
                        shape="circle"
                        type="text"
                        :leading-icon="ICON_TYPE.arrowBack"
                        @click.stop
                    />
                </template>
                <template v-slot:right>
                    <btn
                        size="mini"
                        shape="circle"
                        type="text"
                        :leading-icon="ICON_TYPE.arrowDropDown"
                        @click.stop
                    />
                </template>
            </chip>
        </div>
    </div>
</template>

Filter, Disabled ​

태그나 단어등 콘텐츠를 필터링하는데 사용합니다. 토글 버튼이나 체크박스의 대안으로 사용할 수 있습니다.

기본 ​

Chip
Chip selected
Chip disabled
vue
<script setup lang="ts">
import {
    Btn,
    Chip,
    ICON_TYPE,
    BadgeDigit,
} from '@jennifersoft/vue-components-v2';
</script>
<template>
    <chip :text="'Chip'" />
    <chip :text="'Chip selected'" :selected="true" />
    <chip :text="'Chip disabled'" :disabled="true" />
</template>

구성 ​

Filter Chip
Filter Chip
Filter Chip
10
Filter Chip
vue
<script setup lang="ts">
import { Chip, ICON_TYPE } from '@jennifersoft/vue-components-v2';
</script>
<template>
    <chip :text="'Filter Chip'">
        <template v-slot:left>
            <btn
                size="small"
                shape="circle"
                type="text"
                :leading-icon="ICON_TYPE.check"
                @click.stop
            />
        </template>
    </chip>
    <chip :text="'Filter Chip'">
        <template v-slot:right>
            <btn
                size="small"
                shape="circle"
                type="text"
                :leading-icon="ICON_TYPE.arrowDropDown"
                @click.stop
            />
        </template>
    </chip>
    <chip :text="'Filter Chip'">
        <template v-slot:left>
            <btn
                size="small"
                shape="circle"
                type="text"
                :leading-icon="ICON_TYPE.arrowBack"
                @click.stop
            />
            <btn
                size="small"
                shape="circle"
                type="text"
                :leading-icon="ICON_TYPE.check"
                @click.stop
            />
        </template>
        <template v-slot:right>
            <btn
                size="small"
                shape="circle"
                type="text"
                :leading-icon="ICON_TYPE.arrowDropDown"
                @click.stop
            />
        </template>
    </chip>
    <chip :text="'Filter Chip'">
        <template v-slot:left>
            <badge-digit color="blue" :value="10" />
        </template>
    </chip>
</template>

성능 브라우저 ​

성능 브라우저에서 조회 조건을 remove, off 로 변경 할 수 있습니다.

CPU Usage
CPU Request
Memory Usage
vue
<script setup lang="ts">
import { Chip, ICON_TYPE, ToggleSwitch } from '@jennifersoft/vue-components-v2';
const colorChecked1 = ref(true);
const colorChecked2 = ref(true);
const colorChecked3 = ref(true);
</script>
<template>
    <chip :text="'CPU Usage'">
        <template v-slot:left>
            <toggle-switch
                size="small"
                v-model="colorChecked1"
                :style="{ '--custom-switch-color': '#497EFF' }"
                @click.stop
            />
        </template>
        <template v-slot:right>
            <btn
                size="small"
                shape="circle"
                type="text"
                :leading-icon="ICON_TYPE.arrowDownward"
                @click.stop
            />
            <btn
                size="small"
                shape="circle"
                type="text"
                :leading-icon="ICON_TYPE.close"
                @click.stop
            />
        </template>
    </chip>
    <chip :text="'CPU Request'">
        <template v-slot:left>
            <toggle-switch
                size="small"
                v-model="colorChecked2"
                :style="{ '--custom-switch-color': '#92D8FF' }"
                @click.stop
            />
        </template>
        <template v-slot:right>
            <btn
                size="small"
                shape="circle"
                type="text"
                :leading-icon="ICON_TYPE.arrowDownward"
                @click.stop
            />
            <btn
                size="small"
                shape="circle"
                type="text"
                :leading-icon="ICON_TYPE.close"
                @click.stop
            />
        </template>
    </chip>
    <chip :text="'Memory Usage'">
        <template v-slot:left>
            <toggle-switch
                size="small"
                v-model="colorChecked3"
                :style="{ '--custom-switch-color': '#CC48DD' }"
                @click.stop
            />
        </template>
        <template v-slot:right>
            <btn
                size="small"
                shape="circle"
                type="text"
                :leading-icon="ICON_TYPE.arrowDownward"
                @click.stop
            />
            <btn
                size="small"
                shape="circle"
                type="text"
                :leading-icon="ICON_TYPE.close"
                @click.stop
            />
        </template>
    </chip>
</template>