syidaxdesign system
홈 가격 내 정보
ComponentsOverlays

Popconfirm

동작 요소 가까이에서 짧은 확인을 받습니다.

<sy-popconfirm>설치 안내 기본 사용법
Live preview
컴포넌트를 조작하면 여기에 결과가 표시됩니다.
코드 보기
HTML
<div style="display:inline-flex;align-self:center;margin:70px 0">
  <sy-button>보관하기<sy-popconfirm
      position="bottom"
      confirmtext="보관"
      canceltext="취소"
      arrow
      animation="none"
      id="sample"
    ><span>이 예제 항목을 보관할까요?</span></sy-popconfirm>
  </sy-button>
</div>

사용 가이드

#

삭제·초기화처럼 짧은 확인 후 실행할 동작에 사용합니다. 긴 설명이나 입력이 필요하면 Modal이 알맞습니다.

  1. 동작 버튼 안에 배치

    기본 슬롯에 질문을 넣고 confirmText·cancelText로 선택 결과를 명확하게 적으세요.

  2. 확인 결과 구분

    selected.detail의 ok·cancel을 확인합니다.

  3. 확인한 경우에만 실행

    ok를 받은 뒤에만 실제 동작을 수행하세요. 버튼의 최초 클릭에서 바로 실행하지 마세요.

예제

#

동작 확인

보관 또는 취소를 선택하고 결과를 확인합니다.

코드 보기
HTML
<div style="display:inline-flex;align-self:center;margin:70px 0">
  <sy-button>보관하기<sy-popconfirm
      position="bottom"
      confirmtext="보관"
      canceltext="취소"
      arrow
      id="sample"
    ><span>이 예제 항목을 보관할까요?</span></sy-popconfirm>
  </sy-button>
</div>

표시 방향

동작 요소의 위쪽에 확인을 배치합니다.

코드 보기
HTML
<div style="display:inline-flex;align-self:center;margin:70px 0">
  <sy-button>보관하기<sy-popconfirm
      position="top"
      confirmtext="보관"
      canceltext="취소"
      arrow
      id="sample"
    ><span>이 예제 항목을 보관할까요?</span></sy-popconfirm>
  </sy-button>
</div>

닫기 허용

확인·취소 외에 닫기 버튼을 제공합니다.

코드 보기
HTML
<div style="display:inline-flex;align-self:center;margin:70px 0">
  <sy-button>보관하기<sy-popconfirm
      position="bottom"
      confirmtext="보관"
      canceltext="취소"
      arrow
      closable
      id="sample"
    ><span>이 예제 항목을 보관할까요?</span></sy-popconfirm>
  </sy-button>
</div>

직접 제어

자동 트리거를 끄고 메서드로 제어합니다.

코드 보기
HTML
<div style="display:inline-flex;align-self:center;margin:70px 0">
  <sy-button>보관하기<sy-popconfirm
      position="bottom"
      confirmtext="보관"
      canceltext="취소"
      arrow
      trigger="none"
      id="sample"
    ><span>이 예제 항목을 보관할까요?</span></sy-popconfirm>
  </sy-button>
</div>
<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>
</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.setOpen();
    document.querySelector('#demo-result').textContent = describeResult(result);
  });
  const actionTarget1 = document.querySelector("#sample");
  document.querySelector('#action-1').addEventListener('click', async () => {
    const result = await actionTarget1.setClose();
    document.querySelector('#demo-result').textContent = describeResult(result);
  });
</script>

이벤트와 전달 값

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

코드 보기
HTML
<div style="display:inline-flex;align-self:center;margin:70px 0">
  <sy-button>보관하기<sy-popconfirm
      position="bottom"
      confirmtext="보관"
      canceltext="취소"
      arrow
      animation="none"
      id="sample"
    ><span>이 예제 항목을 보관할까요?</span></sy-popconfirm>
  </sy-button>
</div>
<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 ["visibleChanged", "selected"]) {
    document.addEventListener(name, event => {
      document.querySelector('#demo-events').textContent =
        `${event.target.localName} · ${name}: ${describeResult(event.detail)}`;
    });
  }
</script>

화살표 없는 확인 팝업

확인과 취소 버튼을 유지하고 팝업의 화살표를 제거합니다.

코드 보기
HTML
<div style="display:inline-flex;align-self:center;margin:70px 0">
  <sy-button>보관하기<sy-popconfirm
      position="bottom"
      confirmtext="보관"
      canceltext="취소"
      animation="none"
      id="sample"
    ><span>이 예제 항목을 보관할까요?</span></sy-popconfirm>
  </sy-button>
</div>

<script type="module">
  const component1 = document.querySelector("#sample");
  Object.assign(component1, {
    "arrow": false
  });
</script>

API reference

#

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

<sy-popconfirm>

Properties

Attribute / PropertyTypeDefaultDescription
booleanfalse트리거를 가리키는 화살표를 표시합니다.
booleanfalse닫기 버튼을 표시합니다.
'top' | 'bottom' | 'left' | 'right' | 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight' | 'leftTop' | 'leftBottom' | 'rightTop' | 'rightBottom''top'트리거를 기준으로 팝업을 표시할 방향입니다.
'click' | 'none''click'목록 또는 팝업을 여는 사용자 동작입니다.
number0열기 지연 시간(ms)입니다.
number0닫기 지연 시간(ms)입니다.
string'OK'확인 버튼 문구입니다.
string'Cancel'취소 버튼 문구입니다.
booleanfalse가장 가까운 스크롤 영역의 상단에 고정합니다.
| 'none' | 'fade' | 'fade-scale' | 'zoom' | 'pop' | 'slide-top' | 'slide-bottom' | 'slide-left' | 'slide-right' | 'slide-fade-top' | 'slide-fade-bottom' | 'slide-fade-left' | 'slide-fade-right' | 'reveal-top' | 'reveal-bottom' | 'reveal-left' | 'reveal-right' | 'flip-x' | 'flip-y' | 'bounce' | 'spin''none'Enter/exit animation type. `none` (default) toggles instantly.
'x-fast' | 'fast' | 'medium' | 'slow' | 'x-slow''fast'Animation playback speed token. Maps to `--transition-*` global tokens.

Events

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

Methods

MethodReturnsDescription
Promise<void>하위 메뉴를 펼칩니다.
Promise<void>항목을 닫습니다.

Slots

SlotDescription
컴포넌트의 본문 또는 자식 항목입니다.
Design SystemTab 이동 Enter 열기