syidaxdesign system
홈 가격 내 정보
ComponentsFeedback

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가 알맞습니다.

  1. 대상 요소 안에 배치

    트리거가 되는 부모 안에 넣습니다. 메시지는 본문에 포털로 표시되지만 위치는 해당 부모를 따릅니다.

  2. 내용과 동작 연결

    message로 내용을 전달하고 btnLabel 또는 action 슬롯으로 후속 동작을 제공하세요.

  3. 표시 시점 정하기

    클릭·포커스 이탈 또는 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>

API reference

#

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

<sy-inline-message>

Properties

Attribute / PropertyTypeDefaultDescription
'informational' | 'info' | 'success' | 'warning' | 'error''informational'컴포넌트의 표시 스타일입니다.
string'Inline message'입력 상태에 대한 안내 문구입니다.
booleantrue상태 아이콘을 표시합니다.
booleanundefined상태 아이콘을 표시합니다.
booleanfalse안내에 동작 버튼을 표시합니다.
booleanfalse맥락 안내 팝업을 표시합니다.
'click' | 'focusout''click'click은 부모 클릭으로 열고 닫습니다. focusout은 부모에서 포커스가 나갈 때 표시합니다.
string''동작 버튼의 문구입니다.
'top' | 'bottom' | 'left' | 'right''bottom'트리거를 기준으로 한 팝업의 선호 위치입니다.
'top' | 'bottom' | 'left' | 'right'undefined항목 배치 방향입니다.
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<MouseEvent>이벤트의 detail에서 결과를 확인하세요.
CustomEvent<MouseEvent>이벤트의 detail에서 결과를 확인하세요.
CustomEvent<void>이벤트의 detail에서 결과를 확인하세요.

Methods

MethodReturnsDescription
Promise<void>알림을 표시합니다.
Promise<void>표시 중인 알림을 숨깁니다.

Slots

SlotDescription
action 영역에 표시할 내용입니다.
Design SystemTab 이동 Enter 열기