Inline Message

입력이나 동작 요소 가까이에 맥락에 맞는 피드백을 표시합니다.

<sy-inline-message>설치 안내 기본 사용법

Live preview

컴포넌트를 조작하면 여기에 결과가 표시됩니다.

상태안내 문구표시 방향동작 문구

아이콘 표시처음부터 표시

코드 보기

HTML

<div style="display:inline-flex;align-self:center;margin:35px 0">
  <sy-button>안내 보기</sy-button>
  <sy-inline-message
    message="변경 내용을 저장한 뒤 계속하세요."
    variant="informational"
    placement="bottom"
    icon
    btnlabel="확인"
    id="sample"
  ></sy-inline-message>
</div>

사용 가이드

입력 오류나 보조 안내를 관련 요소 가까이에 보여줍니다. 전체 공지에는 Banner, 짧은 완료 알림에는 Toast가 알맞습니다.

대상 요소 안에 배치
트리거가 되는 부모 안에 넣습니다. 메시지는 본문에 포털로 표시되지만 위치는 해당 부모를 따릅니다.
내용과 동작 연결
message로 내용을 전달하고 btnLabel 또는 action 슬롯으로 후속 동작을 제공하세요.
표시 시점 정하기
클릭·포커스 이탈 또는 show()·hide()로 표시를 관리합니다. 바깥을 누르면 닫힙니다.

예제

주변에 안내 표시

버튼을 누르면 가까운 위치에 안내가 열립니다.

코드 보기

HTML

<div style="display:inline-flex;align-self:center;margin:35px 0">
  <sy-button>안내 보기</sy-button>
  <sy-inline-message message="변경 내용을 저장한 뒤 계속하세요." id="sample">
  </sy-inline-message>
</div>

입력 오류

안내 버튼에 관련된 오류를 가까이에 표시합니다.

코드 보기

HTML

<div style="display:inline-flex;align-self:center;margin:35px 0">
  <sy-button>안내 보기</sy-button>
  <sy-inline-message
    message="필수 정보를 입력해 주세요."
    variant="error"
    btnlabel="확인"
    id="sample"
  ></sy-inline-message>
</div>

표시 방향

여유 공간이 부족하면 화면 안으로 위치를 조절합니다.

코드 보기

HTML

<div style="display:inline-flex;align-self:center;margin:35px 0">
  <sy-button>안내 보기</sy-button>
  <sy-inline-message
    message="관련 안내를 옆에 표시합니다."
    placement="right"
    id="sample"
  ></sy-inline-message>
</div>

외부에서 열고 닫기

show와 hide는 팝업 상태를 직접 제어합니다.

코드 보기

HTML

<div style="display:inline-flex;align-self:center;margin:35px 0">
  <sy-button>안내 보기</sy-button>
  <sy-inline-message message="변경 내용을 저장한 뒤 계속하세요." id="sample">
  </sy-inline-message>
</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.show();
    document.querySelector('#demo-result').textContent = describeResult(result);
  });
  const actionTarget1 = document.querySelector("#sample");
  document.querySelector('#action-1').addEventListener('click', async () => {
    const result = await actionTarget1.hide();
    document.querySelector('#demo-result').textContent = describeResult(result);
  });
</script>

간결한 안내

아이콘을 생략하고 문구에 집중합니다.

코드 보기

HTML

<div style="display:inline-flex;align-self:center;margin:35px 0">
  <sy-button>안내 보기</sy-button>
  <sy-inline-message
    message="최대 20자까지 입력할 수 있습니다."
    icon="false"
    id="sample"
  ></sy-inline-message>
</div>

이벤트와 전달 값

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

코드 보기

HTML

<div style="display:inline-flex;align-self:center;margin:35px 0">
  <sy-button>안내 보기</sy-button>
  <sy-inline-message
    message="변경 내용을 저장한 뒤 계속하세요."
    variant="informational"
    placement="bottom"
    icon
    btnlabel="확인"
    id="sample"
  ></sy-inline-message>
</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 ["actionClick", "btnClick", "dismiss"]) {
    document.addEventListener(name, event => {
      document.querySelector('#demo-events').textContent =
        `${event.target.localName} · ${name}: ${describeResult(event.detail)}`;
    });
  }
</script>

메시지의 후속 동작

action을 켜고 action 슬롯에 버튼을 배치해 오류 복구나 추가 안내를 연결합니다. 예제 버튼을 누르면 복구 결과를 표시합니다.

코드 보기

HTML

<div style="display:inline-flex;align-self:center;margin:35px 0">
  <sy-button>안내 보기</sy-button>
  <sy-inline-message
    message="변경 내용을 저장한 뒤 계속하세요."
    variant="informational"
    placement="bottom"
    icon
    btnlabel="확인"
    open
    action
    showicon
    id="sample"
  ></sy-inline-message>
</div>

<script type="module">
  const component1 = document.querySelector("#sample");
  Object.assign(component1, {
    "action": true,
    "showIcon": true,
    "open": true
  });
  await (root => {
    const message = root.querySelector('sy-inline-message'),
      button = document.createElement('sy-button');
    button.slot = 'action';
    button.textContent = _msg("m_86cebcee7e8f");
    button.addEventListener('click', () => {
      message.message = _msg("m_c0d096f60949");
    });
    message.append(button);
  })(document);
</script>

저장 성공 안내

변경 사항을 저장한 뒤 성공 메시지를 표시합니다.

코드 보기

HTML

<div style="display:inline-flex;align-self:center;margin:35px 0">
  <sy-button>안내 보기</sy-button>
  <sy-inline-message
    message="변경 사항을 저장했습니다."
    variant="success"
    placement="bottom"
    icon
    btnlabel="확인"
    open
    id="sample"
  ></sy-inline-message>
</div>

<script type="module">
  const component1 = document.querySelector("#sample");
  Object.assign(component1, {
    "variant": "success",
    "open": true,
    "message": "변경 사항을 저장했습니다."
  });
</script>

기능별 예제

12개 주제에서 필요한 기능을 선택하세요. 속성 설정, 메서드 호출, 이벤트 결과와 슬롯 구성을 실행 화면과 코드로 확인할 수 있습니다.

기능 찾기

사용 예제 · Overview

선택한 예제를 직접 조작해 보세요. 여러 구성이 있는 주제는 세부 예제를 바꿀 수 있습니다.

코드 보기

HTML

예제를 불러오고 있습니다.