syidaxdesign system
홈 가격 내 정보
ComponentsPickers

Date Picker

날짜, 시간 또는 기간을 직접 입력하거나 달력에서 선택합니다.

<sy-datepicker>설치 안내 기본 사용법
Live preview
컴포넌트를 조작하면 여기에 결과가 표시됩니다.
코드 보기
HTML
<sy-datepicker
  variant="date"
  mode="day"
  placeholder="날짜 선택"
  format="yyyy-MM-dd"
  year="2026"
  month="10"
  day="15"
  hour="09"
  minute="30"
  second="00"
  name="date"
  id="sample"
  aria-label="날짜 선택"
></sy-datepicker>

사용 가이드

#

날짜·시간을 고를 때 사용합니다. 입력할 값의 범위에 맞춰 variant를 선택하세요.

  1. 오류 문구는 error 슬롯에 작성합니다.

    컴포넌트 안에 <span slot="error">오류 메시지</span>을 넣으세요. 글자뿐 아니라 링크 등 필요한 안내도 넣을 수 있습니다. noNativeValidity를 지원하는 입력은 이를 켜면 브라우저 팝업 대신 이 안내를 표시합니다. Switch는 항상 컴포넌트 아래에 오류를 표시합니다.

  2. 업무 규칙의 실패는 setCustomError()로 알립니다.

    예를 들어 서버가 중복된 값을 거절하면 error 슬롯의 문구를 바꾸고 setCustomError()를 호출하세요. 이 메서드에는 메시지 인자를 전달하지 않습니다. 사용자 지정 오류가 있으면 폼 제출도 차단됩니다.

  3. 해결 후 해제하고 제출 가능 여부를 확인합니다.

    clearCustomError()로 업무 규칙 오류를 해제하세요. required나 입력 형식 검사까지 해제되지는 않습니다. await checkValidity()는 true/false를, reportValidity()는 검사 결과와 오류 표시를 함께 제공합니다. name을 지정한 유효한 값은 제출 시 FormData로 읽습니다.

날짜

date를 사용합니다. mode로 일·월·연도 선택 단위를 정하세요.

날짜와 시간

datetime으로 날짜와 시각을 함께 선택합니다.

기간

range로 시작일과 종료일을 받습니다.

시간

time으로 날짜 없이 시각만 선택합니다.

표시와 폼 연결
format은 yyyy·MM·dd·hh·mm·ss를 사용합니다. name·required로 폼에 연결하고, selected는 확정 선택, changed는 입력 변화로 구분하세요.

예제

#

날짜와 초기값

2026년 10월 15일을 초기값으로 표시합니다. 달력 또는 텍스트 입력으로 날짜를 바꾸세요.

코드 보기
HTML
<sy-datepicker
  year="2026"
  month="10"
  day="15"
  hour="09"
  minute="30"
  second="00"
  format="yyyy-MM-dd"
  placeholder="날짜 선택"
></sy-datepicker>

날짜와 시간

달력에서 날짜를 고르고 시간까지 설정합니다.

코드 보기
HTML
<sy-datepicker
  year="2026"
  month="10"
  day="15"
  hour="09"
  minute="30"
  second="00"
  variant="datetime"
  format="yyyy-MM-dd hh:mm:ss"
></sy-datepicker>

기간 선택

시작일과 종료일을 각각 선택합니다. 범위의 양 끝을 설정해 결과를 확인하세요.

코드 보기
HTML
<sy-datepicker
  variant="range"
  format="yyyy-MM-dd"
  placeholder="기간 선택"
></sy-datepicker>

시간만 선택

날짜를 표시하지 않고 시·분·초를 입력하거나 목록에서 선택합니다.

코드 보기
HTML
<sy-datepicker
  year="2026"
  month="10"
  day="15"
  hour="09"
  minute="30"
  second="00"
  variant="time"
  format="hh:mm:ss"
  placeholder="시간 선택"
></sy-datepicker>

월과 연도 선택

집계 기간처럼 날짜까지 필요하지 않은 경우 선택 단위와 표시 형식을 함께 바꿉니다.

코드 보기
HTML
<div style="display:grid;gap:16px;width:100%">
  <sy-datepicker
    year="2026"
    month="10"
    day="15"
    hour="09"
    minute="30"
    second="00"
    mode="month"
    format="yyyy-MM"
    placeholder="월 선택"
  ></sy-datepicker>
  <sy-datepicker
    year="2026"
    month="10"
    day="15"
    hour="09"
    minute="30"
    second="00"
    mode="year"
    format="yyyy"
    placeholder="연도 선택"
  ></sy-datepicker>
</div>

업무일 중심의 달력

월요일부터 시작하고 주말을 숨깁니다. 요일 문구는 일요일부터 토요일 순서의 문자열로 전달합니다.

코드 보기
HTML
<sy-datepicker
  year="2026"
  month="10"
  day="15"
  hour="09"
  minute="30"
  second="00"
  format="yyyy-MM-dd"
  mondaystart
  hideweekend
  datenames="일,월,화,수,목,금,토"
></sy-datepicker>

달력을 화면에 배치

sy-calendar를 직접 배치할 때는 위치를 relative로 지정합니다. 하위 Calendar의 month는 0부터 시작합니다.

코드 보기
HTML
<sy-calendar
  year="2026"
  month="9"
  day="15"
  mondaystart
  style="position:relative;align-self:center"
></sy-calendar>

비활성화와 읽기 전용

날짜를 표시하면서 선택과 편집을 제한합니다.

코드 보기
HTML
<div style="display:grid;gap:16px;width:100%">
  <sy-datepicker
    year="2026"
    month="10"
    day="15"
    hour="09"
    minute="30"
    second="00"
    format="yyyy-MM-dd"
    disabled
  ></sy-datepicker>
  <sy-datepicker
    year="2026"
    month="10"
    day="15"
    hour="09"
    minute="30"
    second="00"
    format="yyyy-MM-dd"
    readonly
  ></sy-datepicker>
</div>

이벤트와 전달 값

컴포넌트를 조작하고 최근 이벤트의 이름과 detail 값을 확인하세요. 코드에는 이 컴포넌트와 하위 구성 요소가 보내는 이벤트의 구독 방법이 모두 포함되어 있습니다.

코드 보기
HTML
<sy-datepicker
  variant="date"
  mode="day"
  placeholder="날짜 선택"
  format="yyyy-MM-dd"
  year="2026"
  month="10"
  day="15"
  hour="09"
  minute="30"
  second="00"
  name="date"
  id="sample"
  aria-label="날짜 선택"
></sy-datepicker>
<output id="demo-events" aria-live="polite">컴포넌트를 조작하면 최근 이벤트와 전달 값이 표시됩니다.
</output>

<script type="module">
  const describeResult = value => JSON.stringify(value, (_key, item) => {
    if (item instanceof File) return {
      name: item.name,
      size: item.size,
      type: item.type
    };
    if (item instanceof Element) return `<${item.localName}>`;
    return item;
  }) ?? '완료';
  for (const name of ["changed", "selected", "closed", "entered", "mode-changed"]) {
    document.addEventListener(name, event => {
      document.querySelector('#demo-events').textContent =
        `${event.target.localName} · ${name}: ${describeResult(event.detail)}`;
    });
  }
</script>

달력에 기간 표시

하위 Calendar를 직접 배치하면 rangestart와 rangeend를 객체로 전달할 수 있습니다. Calendar 계열의 month는 0부터 시작합니다. active는 현재 편집 중인 start 또는 end입니다.

코드 보기
HTML
<sy-calendar
  year="2026"
  month="9"
  day="15"
  active="start"
  variant="range"
  id="sample"
  style="position:relative"
></sy-calendar>

<script type="module">
  const component1 = document.querySelector("#sample");
  Object.assign(component1, {
    "rangestart": {
      "year": 2026,
      "month": 9,
      "day": 10
    },
    "rangeend": {
      "year": 2026,
      "month": 9,
      "day": 20
    }
  });
</script>

시간 구분자와 확인 버튼

Timepicker를 직접 사용할 때 timeSeparator로 시·분·초 사이의 기호를 지정하고 hideButton으로 확인 버튼을 숨길 수 있습니다.

코드 보기
HTML
<sy-timepicker
  hour="9"
  minute="30"
  second="0"
  timeseparator="."
  hidebutton
  style="position:relative"
></sy-timepicker>

폼과 유효성 검사

날짜가 없으면 제출할 수 없습니다. 날짜를 선택한 뒤 제출되는 값과 사용자 지정 오류를 확인하세요.

코드 보기
HTML
<form style="display:grid;gap:16px">
  <sy-datepicker
    name="schedule"
    required
    format="yyyy-MM-dd"
    placeholder="필수 날짜"
    id="sample"
  ><span slot="error">날짜를 선택하세요.</span></sy-datepicker>
  <div style="display:flex;flex-wrap:wrap;gap:8px">
    <sy-button type="submit" variant="primary">제출</sy-button>
    <sy-button type="reset">초기화</sy-button>
  </div>
</form>
<div class="demo-actions"
  style="display:flex;flex-wrap:wrap;gap:8px;margin-top:16px"
>
  <sy-button id="action-0" size="small">유효성 확인</sy-button>
  <sy-button id="action-1" size="small">오류 표시</sy-button>
  <sy-button id="action-2" size="small">오류 해제</sy-button>
</div>
<output id="demo-result" aria-live="polite"></output>

<script type="module">
  const describeResult = value => JSON.stringify(value, (_key, item) => {
    if (item instanceof File) return {
      name: item.name,
      size: item.size,
      type: item.type
    };
    if (item instanceof Element) return `<${item.localName}>`;
    return item;
  }) ?? '완료';
  const actionTarget0 = document.querySelector("#sample");
  document.querySelector('#action-0').addEventListener('click', async () => {
    const result = await actionTarget0.checkValidity();
    document.querySelector('#demo-result').textContent = describeResult(result);
  });
  const actionTarget1 = document.querySelector("#sample");
  document.querySelector('#action-1').addEventListener('click', async () => {
    const result = await actionTarget1.setCustomError();
    document.querySelector('#demo-result').textContent = describeResult(result);
  });
  const actionTarget2 = document.querySelector("#sample");
  document.querySelector('#action-2').addEventListener('click', async () => {
    const result = await actionTarget2.clearCustomError();
    document.querySelector('#demo-result').textContent = describeResult(result);
  });
  document.querySelector('form').addEventListener('submit', event => {
    event.preventDefault();
    document.querySelector('#demo-result').textContent = describeResult([...new FormData(event
      .currentTarget)]);
  });
</script>

검사 결과와 오류 상태 읽기

제출 전에 검사하거나 오류를 화면에 표시할 수 있습니다. 필수 값을 비워 두고 검사한 다음, 값을 채워 반환 값이 어떻게 달라지는지 확인하세요. 상태 조회는 사용자 지정 오류와 필수 입력 오류를 구분하는 데 사용합니다.

코드 보기
HTML
<form style="display:grid;gap:16px">
  <sy-datepicker
    name="schedule"
    required
    format="yyyy-MM-dd"
    placeholder="필수 날짜"
    id="sample"
  ><span slot="error">날짜를 선택하세요.</span></sy-datepicker>
  <div style="display:flex;flex-wrap:wrap;gap:8px">
    <sy-button type="submit" variant="primary">제출</sy-button>
    <sy-button type="reset">초기화</sy-button>
  </div>
</form>
<div class="demo-actions"
  style="display:flex;flex-wrap:wrap;gap:8px;margin-top:16px"
>
  <sy-button id="action-0" size="small">유효성 확인</sy-button>
  <sy-button id="action-1" size="small">오류 표시</sy-button>
  <sy-button id="action-2" size="small">오류 해제</sy-button>
  <sy-button id="action-3" size="small">오류와 함께 검사</sy-button>
  <sy-button id="action-4" size="small">검증 상태 조회</sy-button>
</div>
<output id="demo-result" aria-live="polite"></output>

<script type="module">
  const describeResult = value => JSON.stringify(value, (_key, item) => {
    if (item instanceof File) return {
      name: item.name,
      size: item.size,
      type: item.type
    };
    if (item instanceof Element) return `<${item.localName}>`;
    return item;
  }) ?? '완료';
  const actionTarget0 = document.querySelector("#sample");
  document.querySelector('#action-0').addEventListener('click', async () => {
    const result = await actionTarget0.checkValidity();
    document.querySelector('#demo-result').textContent = describeResult(result);
  });
  const actionTarget1 = document.querySelector("#sample");
  document.querySelector('#action-1').addEventListener('click', async () => {
    const result = await actionTarget1.setCustomError();
    document.querySelector('#demo-result').textContent = describeResult(result);
  });
  const actionTarget2 = document.querySelector("#sample");
  document.querySelector('#action-2').addEventListener('click', async () => {
    const result = await actionTarget2.clearCustomError();
    document.querySelector('#demo-result').textContent = describeResult(result);
  });
  const actionTarget3 = document.querySelector("#sample");
  document.querySelector('#action-3').addEventListener('click', async () => {
    const result = await actionTarget3.reportValidity();
    document.querySelector('#demo-result').textContent = describeResult(result);
  });
  const actionTarget4 = document.querySelector("#sample");
  document.querySelector('#action-4').addEventListener('click', async () => {
    const result = await actionTarget4.getStatus();
    document.querySelector('#demo-result').textContent = describeResult(result);
  });
  document.querySelector('form').addEventListener('submit', event => {
    event.preventDefault();
    document.querySelector('#demo-result').textContent = describeResult([...new FormData(event
      .currentTarget)]);
  });
</script>

사용자 지정 오류 메시지

서버 중복 검사나 업무 규칙에 맞지 않을 때 오류 문구를 직접 표시합니다. 아래 문구를 바꿔 보고 제출을 눌러 차단되는지 확인하세요. 오류 해제 후에는 필수 입력 조건까지 만족해야 제출됩니다.

코드 보기
HTML
<label for="error-message">표시할 오류 메시지</label><input
  id="error-message"
  value="서버에서 이 값을 승인하지 않았습니다. 내용을 확인해 주세요."
  type="text"
>
<form style="display:grid;gap:16px">
  <sy-datepicker
    no-native-validity
    name="schedule"
    required
    format="yyyy-MM-dd"
    placeholder="필수 날짜"
    id="sample"
  ><span slot="error">날짜를 선택하세요.</span></sy-datepicker>
  <div style="display:flex;flex-wrap:wrap;gap:8px">
    <sy-button type="submit" variant="primary">제출</sy-button>
    <sy-button type="reset">초기화</sy-button>
  </div>
</form>
<div class="demo-actions">
  <sy-button id="show-custom-error" variant="primary">오류 표시</sy-button>
  <sy-button id="clear-custom-error">오류 해제</sy-button>
</div>
<output id="custom-error-result" aria-live="polite"></output>
<output id="demo-result" aria-live="polite"></output>

<script type="module">
  const describeResult = value => JSON.stringify(value, (_key, item) => {
    if (item instanceof File) return {
      name: item.name,
      size: item.size,
      type: item.type
    };
    if (item instanceof Element) return `<${item.localName}>`;
    return item;
  }) ?? '완료';
  await (async function customErrorSetup(root) {
    const field = root.querySelector('#sample');
    const message = root.querySelector('[slot="error"]');
    const input = root.querySelector('#error-message');
    const output = root.querySelector('#custom-error-result');
    const update = async () => {
      message.textContent = input.value.trim() || _msg("m_4eea8cef81c6");
      await field.setCustomError();
      output.textContent = _msg("m_e00bd46236d3", [message.textContent]);
    };
    input.addEventListener('input', update);
    root.querySelector('#show-custom-error').addEventListener('click', update);
    root.querySelector('#clear-custom-error').addEventListener('click', async () => {
      await field.clearCustomError();
      output.textContent = await field.checkValidity() ? _msg("m_c454251167b2") : _msg(
        "m_5b8cb48627e5");
    });
    root.querySelector('form').addEventListener('invalid', () => {
      output.textContent = _msg("m_c702c7778166");
    }, true);
    root.querySelector('form').addEventListener('reset', () => {
      output.textContent = _msg("m_b90c2b4dc30f");
    });
    await update();
  })(document);
  document.querySelector('form').addEventListener('submit', event => {
    event.preventDefault();
    document.querySelector('#demo-result').textContent = describeResult([...new FormData(event
      .currentTarget)]);
  });
</script>

API reference

#

이름에 마우스를 올리거나 키보드로 선택하면 적용 코드를 확인할 수 있습니다. 터치 화면에서는 이름을 누르세요.

<sy-datepicker>

Properties

Attribute / PropertyTypeDefaultDescription
'day' | 'month' | 'year''day'날짜 선택 단위입니다: day·month·year.
'date' | 'datetime' | 'range' | 'time''date'날짜·날짜와 시간·기간·시간 중 선택 유형입니다.
booleanfalse사용자 조작과 키보드 포커스를 차단합니다.
booleanfalse현재 값을 보여주면서 사용자 수정을 막습니다.
booleanfalse값이 없으면 폼 검증을 실패시킵니다.
stringundefined연도입니다.
stringundefined월입니다. Date Picker는 1~12, 하위 Calendar는 0~11을 사용합니다.
stringundefined월 안의 날짜입니다.
stringundefined시간(0~23)입니다.
stringundefined분(0~59)입니다.
stringundefined초(0~59)입니다.
string'Su,Mo,Tu,We,Th,Fr,Sa'일요일부터 토요일 순서로 쉼표로 구분한 요일 이름입니다.
booleanfalse한 주를 월요일부터 표시합니다.
booleanfalse달력에서 토요일과 일요일을 숨깁니다.
string''값이 비어 있을 때 표시할 안내 문구입니다.
string'yyyy-MM-dd hh:mm:ss'yyyy·MM·dd·hh·mm·ss 토큰을 조합한 표시 형식입니다.
string''FormData에 사용되는 필드 이름입니다.
booleanfalse브라우저의 기본 오류 표시 대신 앱의 오류 UI를 사용할 때 지정합니다. checkValidity 검사 자체는 유지됩니다.

Events

EventDetailDescription
CustomEvent<unknown>값 또는 선택 상태가 바뀔 때 발생합니다.
CustomEvent<unknown>사용자가 항목을 선택했을 때 발생합니다.

Methods

MethodReturnsDescription
Promise<string>현재 유효성 검사 상태를 반환합니다.
Promise<void>사용자 지정 오류 상태를 설정합니다.
Promise<void>사용자 지정 오류 상태를 해제합니다.
Promise<boolean>현재 제약 조건에 맞으면 true, 아니면 false를 반환합니다.
Promise<boolean>현재 값을 검사하고 오류를 사용자에게 표시합니다.

Slots

SlotDescription
유효성 검사 오류 메시지입니다.

<sy-calendar>

Properties

Attribute / PropertyTypeDefaultDescription
'day' | 'month' | 'year''day'날짜 선택 단위입니다: day·month·year.
'date' | 'datetime' | 'range' | 'time''date'날짜·날짜와 시간·기간·시간 중 표시할 패널입니다.
string'hh:mm:ss'값을 표시하고 해석할 형식입니다. 사용 가이드의 토큰 또는 형식 값을 확인하세요.
stringundefined기간에서 현재 편집 중인 start 또는 end입니다.
numberundefined연도입니다.
numberundefined월입니다. Date Picker는 1~12, 하위 Calendar는 0~11을 사용합니다.
numberundefined월 안의 날짜입니다.
numberundefined시간(0~23)입니다.
numberundefined분(0~59)입니다.
numberundefined초(0~59)입니다.
{year: number, month: number, day: number }undefined선택 범위의 시작 날짜입니다. month는 0부터 시작합니다.

객체·배열 값은 JavaScript 프로퍼티로 전달합니다.

{year: number, month: number, day: number }undefined선택 범위의 끝 날짜입니다. month는 0부터 시작합니다.

객체·배열 값은 JavaScript 프로퍼티로 전달합니다.

string'Su,Mo,Tu,We,Th,Fr,Sa'일요일부터 토요일 순서로 쉼표로 구분한 요일 이름입니다.
booleanfalse한 주를 월요일부터 표시합니다.
booleanfalse달력에서 토요일과 일요일을 숨깁니다.

Events

EventDetailDescription
CustomEvent<unknown>사용자가 항목을 선택했을 때 발생합니다.
CustomEvent<unknown>이벤트의 detail에서 결과를 확인하세요.

<sy-date-calendar>

Properties

Attribute / PropertyTypeDefaultDescription
'day' | 'month' | 'year' | 'decade'undefined날짜·월·연도·10년 단위 표시입니다.
{year: number, month: number, day: number, hour: number, minute: number, second: number}{ year: new Date().getFullYear(), month: new Date().getMonth(), day: new Date().getDate(), hour: new Date().getHours(), minute: new Date().getMinutes(), second: new Date().getSeconds() }연·월·일·시·분·초를 가진 객체입니다. month는 0부터 시작합니다.

객체·배열 값은 JavaScript 프로퍼티로 전달합니다.

'start' | 'end'undefined기간 선택에서 start 또는 end 역할을 지정합니다.
stringundefined기간에서 현재 편집 중인 start 또는 end입니다.
{year: number, month: number, day: number }undefined선택 범위의 시작 날짜입니다. month는 0부터 시작합니다.

객체·배열 값은 JavaScript 프로퍼티로 전달합니다.

{year: number, month: number, day: number }undefined선택 범위의 끝 날짜입니다. month는 0부터 시작합니다.

객체·배열 값은 JavaScript 프로퍼티로 전달합니다.

stringundefined범위 선택 중 포인터가 가리키는 날짜입니다.
string'Su,Mo,Tu,We,Th,Fr,Sa'일요일부터 토요일 순서로 쉼표로 구분한 요일 이름입니다.
booleanfalse한 주를 월요일부터 표시합니다.
booleanfalse달력에서 토요일과 일요일을 숨깁니다.
Datenew Date()현재 달력 화면의 기준 날짜입니다. Date 객체로 전달합니다.

객체·배열 값은 JavaScript 프로퍼티로 전달합니다.

Events

EventDetailDescription
CustomEvent<unknown>값 또는 선택 상태가 바뀔 때 발생합니다.
CustomEvent<unknown>사용자가 항목을 선택했을 때 발생합니다.
CustomEvent<unknown>이벤트의 detail에서 결과를 확인하세요.
CustomEvent<unknown>이벤트의 detail에서 결과를 확인하세요.

<sy-date-time-calendar>

Properties

Attribute / PropertyTypeDefaultDescription
'day' | 'month' | 'year' | 'decade''day'날짜·월·연도·10년 단위 표시입니다.
{year: number, month: number, day: number, hour: number, minute: number, second: number}{ year: new Date().getFullYear(), month: new Date().getMonth(), day: new Date().getDate(), hour: new Date().getHours(), minute: new Date().getMinutes(), second: new Date().getSeconds() }연·월·일·시·분·초를 가진 객체입니다. month는 0부터 시작합니다.

객체·배열 값은 JavaScript 프로퍼티로 전달합니다.

string'Su,Mo,Tu,We,Th,Fr,Sa'일요일부터 토요일 순서로 쉼표로 구분한 요일 이름입니다.
booleanfalse한 주를 월요일부터 표시합니다.
booleanfalse달력에서 토요일과 일요일을 숨깁니다.

Events

EventDetailDescription
CustomEvent<unknown>사용자가 항목을 선택했을 때 발생합니다.

<sy-range-calendar>

Properties

Attribute / PropertyTypeDefaultDescription
'day' | 'month' | 'year'undefined날짜·월·연도 단위 표시입니다.
stringundefined현재 편집 중인 start 또는 end입니다.
{year: number, month: number, day: number, hour: number, minute: number, second: number}undefined연·월·일·시·분·초를 가진 객체입니다. month는 0부터 시작합니다.

객체·배열 값은 JavaScript 프로퍼티로 전달합니다.

{ year: number, month: number, day: number }undefined선택 범위의 시작 날짜입니다. month는 0부터 시작합니다.

객체·배열 값은 JavaScript 프로퍼티로 전달합니다.

{ year: number, month: number, day: number }undefined선택 범위의 끝 날짜입니다. month는 0부터 시작합니다.

객체·배열 값은 JavaScript 프로퍼티로 전달합니다.

string'Su,Mo,Tu,We,Th,Fr,Sa'일요일부터 토요일 순서로 쉼표로 구분한 요일 이름입니다.
booleanfalse한 주를 월요일부터 표시합니다.
booleanfalse달력에서 토요일과 일요일을 숨깁니다.

Events

EventDetailDescription
CustomEvent<unknown>사용자가 항목을 선택했을 때 발생합니다.

<sy-timepicker>

Properties

Attribute / PropertyTypeDefaultDescription
number0시간(0~23)입니다.
number0분(0~59)입니다.
number0초(0~59)입니다.
booleanfalse시간 선택 패널의 확인 버튼을 숨깁니다.
string':'시간 단위 사이에 표시할 구분 문자입니다.
string'hh:mm:ss'값을 표시하고 해석할 형식입니다. 사용 가이드의 토큰 또는 형식 값을 확인하세요.

Events

EventDetailDescription
CustomEvent<unknown>사용자가 항목을 선택했을 때 발생합니다.
CustomEvent<unknown>값 또는 선택 상태가 바뀔 때 발생합니다.
Design SystemTab 이동 Enter 열기