CheckBox 체크박스

여러 항목 중에서 원하는 것들을 골라서 선택할 수 있는 체크박스 컴포넌트예요.

출처: 문서

본문

언제 사용하나요

1. 여러 옵션 가운데서 원하는 항목을 여러 개 선택할 때 사용해요;
2. 단독으로 사용하면 두 상태 사이를 전환한다는 의미가 되고, 제출 동작과 함께 사용할 수도 있어요.

기본 사용법

:::demo

<template>
  <div class="checkbox-basic-demo">
    <d-checkbox label="Checked" :isShowTitle="false" v-model="checked" />
    <d-checkbox label="Not checked" :isShowTitle="false" v-model="unchecked" />
    <d-checkbox label="Custom title" :isShowTitle="true" title="my title" v-model="unchecked2" />
    <d-checkbox label="No Animation" :isShowTitle="false" v-model="checked2" :showAnimation="false" />
    <d-checkbox label="Disabled" :isShowTitle="false" v-model="checked" :disabled="true" />
    <d-checkbox label="Disabled" :isShowTitle="false" v-model="unchecked" :disabled="true" />
    <d-checkbox label="Half-checked" :isShowTitle="false" :half-checked="halfCheck" v-model="allCheck" @change="onHalfCheckboxChange" />
    <d-checkbox
      label="Half-checked"
      :isShowTitle="false"
      :half-checked="halfCheck"
      v-model="allCheck"
      @change="onHalfCheckboxChange"
      :disabled="true"
    />
    <d-checkbox label="Custom color" :isShowTitle="false" v-model="customCheck" color="RGB(255, 193, 7)" />
    <d-checkbox
      label="Half-checked"
      :isShowTitle="false"
      :half-checked="halfCheck2"
      v-model="allCheck2"
      @change="onHalfCheckboxChange2"
      color="RGB(255, 193, 7)"
    />
    <d-checkbox :isShowTitle="false" v-model="unchecked3">
      <div class="inline-row" style="display: inline-flex">
        <d-select v-model="value1" :options="[1, 2, 3, 4]" size="sm" @click="handleChange"></d-select>
        <span>Custom label template</span>
      </div>
    </d-checkbox>
  </div>
</template>
<script>
import { defineComponent, ref } from 'vue';
export default defineComponent({
  setup() {
    const checked = ref(true);
    const checked2 = ref(true);
    const unchecked = ref(false);
    const unchecked2 = ref(false);
    const unchecked3 = ref(false);
    const halfCheck = ref(true);
    const halfCheck2 = ref(true);
    const allCheck = ref(false);
    const allCheck2 = ref(false);
    const customCheck = ref(true);
    const value1 = ref(null);

    const onHalfCheckboxChange = (value) => {
      halfCheck.value = !allCheck.value;
      console.log('halfCheckbox checked:', value);
    };
    const onHalfCheckboxChange2 = (value) => {
      halfCheck2.value = !allCheck2.value;
      console.log('halfCheckbox checked:', value);
    };
    const handleChange = ($event) => {
      $event.preventDefault();
      $event.stopPropagation();
    };
    return {
      checked,
      checked2,
      unchecked,
      unchecked2,
      unchecked3,
      halfCheck,
      halfCheck2,
      allCheck,
      allCheck2,
      onHalfCheckboxChange,
      customCheck,
      onHalfCheckboxChange2,
      handleChange,
      value1,
    };
  },
});
</script>
<style>
.checkbox-basic-demo .devui-checkbox {
  margin-bottom: 10px;
}

.checkbox-basic-demo .inline-row .devui-select {
  width: 150px;
  margin-right: 10px;
}
</style>

:::

CheckBoxGroup 사용하기

:::demo

<template>
  <div class="checkbox-group-demo">
    <h4 class="title">Input Object Array</h4>
    <d-checkbox-group v-model="values1" :options="options1" direction="row"></d-checkbox-group>

    <h4 class="title">Input String Array</h4>
    <d-checkbox-group v-model="values2" :options="options2" :isShowTitle="false" direction="row"></d-checkbox-group>

    <h4 class="title">Disabled Group</h4>
    <d-checkbox-group v-model="values2" :options="options2" :isShowTitle="false" direction="row" :disabled="true"
    ></d-checkbox-group>

    <h4 class="title">Custom Selected Color</h4>
    <d-checkbox-group
      v-model="values3"
      :options="options3"
      :isShowTitle="false"
      direction="row"
      color="RGB(255, 193, 7)"
    ></d-checkbox-group>

    <h4 class="title">Set showAnimation false</h4>
    <d-checkbox-group v-model="values4" :options="options3" :isShowTitle="false" direction="row" :showAnimation="false"
    ></d-checkbox-group>

    <h4 class="title">Multi-line Checkbox</h4>
    <d-checkbox-group v-model="values5" :options="options5" :isShowTitle="false" direction="row" :itemWidth="94"
    ></d-checkbox-group>

    <h4 class="title">可选项目数量的限制</h4>
    <d-checkbox-group
      v-model="values6"
      :options="options5"
      :isShowTitle="false"
      direction="row"
      :itemWidth="94"
      :max="3"
    ></d-checkbox-group>
    <h4 class="title">插槽方式</h4>
    <d-checkbox-group v-model="values7" :isShowTitle="false" direction="row" :itemWidth="94" :max="3">
      <d-checkbox v-for="item in options1" :key="item.value" :label="item.name" :value="item.value"></d-checkbox>
    </d-checkbox-group>
  </div>
</template>
<script>
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const options1 = ref([
      { name: 'data1', disabled: true, value: '1', id: 1 },
      { name: 'data2', value: '2', id: 2 },
      { name: 'data3', value: '3', id: 3 },
    ]);
    const values1 = ref([{ name: 'data2', value: '2', id: 2 }]);
    const options2 = ref(['data1', 'data2', 'data3', 'data4', 'data5', 'data6', 'data7']);
    const values2 = ref(['data1', 'data2']);
    const options3 = ref(['data1', 'data2', 'data3', 'data4', 'data5', 'data6', 'data7']);
    const values3 = ref(['data1', 'data2']);
    const values4 = ref(['data2', 'data3']);
    const options5 = ref([
      'data00000000000000001',
      'data2',
      'data3',
      'data4',
      'data5',
      'data6',
      'data7',
      'data8',
      'data9',
      'data10',
      'data11',
      'data12',
      'data13',
      'data14',
      'data15',
    ]);
    const values5 = ref(['data2', 'data3']);
    const values6 = ref(['data2', 'data3']);
    const values7 = ref(['2', '3']);
    return {
      options1,
      values1,
      options2,
      values2,
      options3,
      values3,
      values4,
      options5,
      values5,
      values6,
      values7,
    };
  },
});
</script>
<style>
.checkbox-group-demo .title {
  margin: 20px 0;
}
</style>

:::

크기와 테두리

:::demo

<template>
  <h4>Small</h4>
  <d-checkbox-group v-model="borderSizeValues1" :options="borderSizeOptions1" direction="row" size="sm" border
  ></d-checkbox-group>

  <h4>Middle</h4>
  <d-checkbox-group v-model="borderSizeValues2" :options="borderSizeOptions1" direction="row" size="md" border
  ></d-checkbox-group>

  <h4>Large</h4>
  <d-checkbox-group v-model="borderSizeValues3" :options="borderSizeOptions1" direction="row" size="lg" border
  ></d-checkbox-group>
</template>
<script>
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const borderSizeOptions1 = ref([
      { name: 'Summer', value: '1', id: 1 },
      { name: 'Spring', disabled: true, value: '2', id: 2 },
    ]);
    const borderSizeValues1 = ref([{ name: 'Summer', value: '1', id: 1 }]);
    const borderSizeValues2 = ref([{ name: 'Summer', value: '1', id: 1 }]);
    const borderSizeValues3 = ref([{ name: 'Summer', value: '1', id: 1 }]);

    return {
      borderSizeValues1,
      borderSizeValues2,
      borderSizeValues3,
      borderSizeOptions1,
    };
  },
});
</script>

:::

버튼 형태

d-checkbox를 d-checkbox-button으로 바꾸기만 하면 돼요. 배열 소스는 일반 배열이나 객체 배열 등 어떤 것이든 쓸 수 있어요.

:::demo

<template>
  <h4>禁用</h4>
  <d-checkbox-group v-model="buttonValues1" size="sm" direction="row">
    <d-checkbox-button
      v-for="item in buttonOptions1"
      :label="item.label"
      :value="item.value"
      :key="item.value"
      :disabled="item.disabled"
    >
    </d-checkbox-button>
  </d-checkbox-group>

  <h4>默认</h4>
  <d-checkbox-group v-model="buttonValues2" direction="row">
    <d-checkbox-button v-for="item in buttonOptions1" :label="item.label" :value="item.value" :key="item.value"
    ></d-checkbox-button>
  </d-checkbox-group>

  <h4>自定义填充颜色、文字颜色</h4>
  <d-checkbox-group v-model="buttonValues3" size="lg" is-show-title color="#FA9841" text-color="#fff" direction="row">
    <d-checkbox-button
      v-for="item in buttonOptions1"
      :label="item.label"
      :value="item.value"
      :key="item.value"
      :title="item.title"
    >
    </d-checkbox-button>
  </d-checkbox-group>
</template>
<script>
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const buttonOptions1 = ref([
      { label: '选项1', disabled: true, value: 2, id: 1, title: '自定义title1' },
      { label: '选项2', value: 3, id: 2, title: '自定义title2' },
      { label: '选项3', value: 4, id: 3, title: '自定义title3' },
    ]);
    const buttonValues1 = ref([2]);
    const buttonValues2 = ref([2]);
    const buttonValues3 = ref([2]);

    return {
      buttonValues1,
      buttonValues2,
      buttonValues3,
      buttonOptions1,
    };
  },
});
</script>

:::

checkbox 조건에 따라 상태 전환 막기

조건을 판단해서, label이 '조건 판단 콜백으로 선택 금지'에 해당하는 checkbox는 상태 전환을 멈춰요. :::demo

<template>
  <div style="margin-bottom: 10px">
    <d-checkbox
      label="Conditional Callback Allowed"
      :isShowTitle="false"
      v-model="checkboxChecked1"
      @change="onCheckboxEndChange"
      :beforeChange="endBeforeChange"
    />
  </div>
  <div>
    <d-checkbox
      label="Conditional Judgment Callback Interception Selected"
      :isShowTitle="false"
      v-model="checkboxChecked2"
      @change="onCheckboxEndChange"
      :beforeChange="endBeforeChange"
    />
  </div>
</template>
<script>
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const checkboxChecked1 = ref(true);
    const checkboxChecked2 = ref(false);

    const onCheckboxEndChange = (value) => {
      console.log('checkbox1 checked:', value);
    };

    const endBeforeChange = (isChecked, label) => {
      return label === 'Conditional Callback Allowed';
    };
    return {
      checkboxChecked1,
      checkboxChecked2,
      onCheckboxEndChange,
      endBeforeChange,
    };
  },
});
</script>

:::

checkbox-group 조건에 따라 상태 전환 막기

옵션에 'intercept'(차단) 문자열이 포함된 checkbox는 상태를 전환할 수 없어요. :::demo

<template>
  <div>
    <d-checkbox-group
      v-model="interceptValues"
      :options="interceptOptions"
      :isShowTitle="false"
      direction="row"
      @change="onCheckboxInterceptChange"
      :beforeChange="interceptBeforeChange"
    />
  </div>
</template>
<script>
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const interceptOptions = ref(['data1', 'data2', 'intercept', 'intercept2', 'data5', 'data6', 'data7']);
    const interceptValues = ref(['data2', 'intercept']);
    const onCheckboxInterceptChange = (value) => {
      console.log('checkbox1 checked:', value);
    };

    const interceptBeforeChange = (isChecked, label) => {
      return !label.includes('intercept');
    };

    return {
      interceptOptions,
      interceptValues,
      onCheckboxInterceptChange,
      interceptBeforeChange,
    };
  },
});
</script>

:::

Checkbox 파라미터

Checkbox 이벤트

CheckboxGroup 파라미터

CheckboxGroup 이벤트

CheckboxButton 파라미터

Checkbox 타입 정의

ICheckboxSize

type ICheckboxSize = 'lg' | 'md' | 'sm';

더 알아보기 (Learn more)

d-checkbox와 d-checkbox-group을 조합하면 여러 개 선택 폼을 손쉽게 만들 수 있어요. 더 자세한 내용은 DevUI 공식 문서를 참고해 보세요.