Web Components 스낵바

Ignite UI for Web Components Snackbar 구성 요소는 화면 하단에 간단한 메시지를 표시하여 작업에 대한 피드백을 제공하는 데 사용됩니다.

Ignite UI for Web Components 스낵바 예제

이 샘플은 IgcSnackbarComponent 구성 요소를 만드는 방법을 보여줍니다.

import {defineComponents, IgcSnackbarComponent } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

defineComponents(IgcSnackbarComponent);
export class SnackbarOverview {
    constructor() {
    }
}

new SnackbarOverview();
ts

<!DOCTYPE html>
<html>

<head>
  <title>Snackbar Overview</title>
  <meta charset="UTF-8" />

  <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
  <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
</head>

<body>
  <div id="root">
    <div class="container sample center">
      <igc-button onclick="snackbar.show()" variant="contained">Show Snackbar</igc-button>
      <igc-snackbar id="snackbar">Snackbar Message</igc-snackbar>
    </div>
  </div>

  <!-- This script is needed only for parcel and it will be excluded for webpack -->
  <% if (false) { %>
    <script src="src/index.ts"></script>
    <% } %>

</body>

</html>html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

이 샘플이 마음에 드시나요? 당사의 완전한 Ignite UI for Web Components 툴킷에 액세스하여 몇 분 만에 나만의 앱을 빌드하기 시작하세요. 무료로 다운로드하세요.

용법

먼저 다음 명령을 실행하여 Ignite UI for Web Components 설치해야 합니다.

npm install igniteui-webcomponents
cmd

import { defineComponents, IgcSnackbarComponent } from 'igniteui-webcomponents';

defineComponents(IgcSnackbarComponent);
ts

Ignite UI for Web Components에 대한 전체 소개를 보려면 시작하기 항목을 읽어보세요.

스낵바 구성요소를 표시하는 가장 간단한 방법은 show 메소드를 사용하고 버튼 클릭 시 호출하는 것입니다.

<igc-button onclick="snackbar.show()" variant="contained">Show Snackbar</igc-button>
<igc-snackbar id="snackbar">Snackbar Message</igc-snackbar>
html

예

표시 시간

스낵바 구성요소가 표시되는 기간을 구성하려면 displayTime 속성을 사용하세요. 기본적으로 4000밀리초로 설정되어 있습니다.

import {defineComponents, IgcSnackbarComponent } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

defineComponents(IgcSnackbarComponent);
export class SnackbarDisplayTime {
    constructor() {
    }
}

new SnackbarDisplayTime();
ts

<!DOCTYPE html>
<html>

<head>
  <title>Snackbar Display Time</title>
  <meta charset="UTF-8" />

  <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
  <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
</head>

<body>
  <div id="root">
    <div class="container sample center">
      <igc-button onclick="snackbar.show()" variant="contained">Show Snackbar</igc-button>
      <igc-snackbar id="snackbar" display-time="6000">Snackbar with different display time</igc-snackbar>
    </div>
  </div>

  <!-- This script is needed only for parcel and it will be excluded for webpack -->
  <% if (false) { %>
    <script src="src/index.ts"></script>
    <% } %>

</body>

</html>html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

액션 텍스트

기본적으로 스낵바 구성요소는 displayTime에 지정된 기간이 지나면 자동으로 숨겨집니다. keepOpen 속성을 사용하여 이 동작을 변경할 수 있습니다. 이렇게 하면 스낵바가 계속 표시됩니다. 스낵바 actionText 사용하면 구성 요소 내부에 작업 버튼을 표시할 수 있습니다.

import {defineComponents, IgcSnackbarComponent } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

defineComponents(IgcSnackbarComponent);
export class SnackbarActionText {
    constructor() {
        const snackbar = document.querySelector('igc-snackbar') as IgcSnackbarComponent;

        document.addEventListener('igcAction', () => {
            snackbar.hide();
        });
    }
}

new SnackbarActionText();
ts

<!DOCTYPE html>
<html>

<head>
  <title>Snackbar Action Text</title>
  <meta charset="UTF-8" />

  <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
  <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
</head>

<body>
  <div id="root">
    <div class="container sample center">
      <igc-button onclick="snackbar.show()" variant="contained">Show Snackbar</igc-button>
      <igc-snackbar id="snackbar" keep-open action-text="Close">Snackbar with enabled keep-open option</igc-snackbar>
    </div>
  </div>

  <!-- This script is needed only for parcel and it will be excluded for webpack -->
  <% if (false) { %>
    <script src="src/index.ts"></script>
    <% } %>

</body>

</html>html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

스타일링

구성 요소는 IgcSnackbarComponent 스타일을 완전히 제어할 수 있도록 여러 CSS 부분을 노출합니다.

이름	설명
`base`	스낵바 구성 요소의 기본 래퍼입니다.
`message`	스낵바 메시지입니다.
`action`	기본 스낵바 작업 버튼입니다.
`action-container`	액션이 있는 영역입니다.

igc-snackbar::part(base) {
  background: var(--ig-primary-500);
  border-color: var(--ig-primary-800);
  color: white;
}
css

import {defineComponents, IgcSnackbarComponent } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
import './SnackbarStyling.css';

defineComponents(IgcSnackbarComponent);
export class SnackbarStyling {
    constructor() {
    }
}

new SnackbarStyling();
ts

<!DOCTYPE html>
<html>

<head>
  <title>Snackbar Styling</title>
  <meta charset="UTF-8" />

  <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
  <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
</head>

<body>
  <div id="root">
    <div class="container sample center">
      <igc-button onclick="snackbar.show()" variant="contained">Show Snackbar</igc-button>
      <igc-snackbar id="snackbar">Styled snackbar</igc-snackbar>
    </div>
  </div>

  <!-- This script is needed only for parcel and it will be excluded for webpack -->
  <% if (false) { %>
    <script src="src/index.ts"></script>
    <% } %>

</body>

</html>html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

igc-snackbar::part(base) {
    background: #0d6efd;
    border-color: #0d6efd;
    color: white;
}css

Web Components 스낵바

Ignite UI for Web Components 스낵바 예제

용법

예

표시 시간

액션 텍스트

스타일링

API 참조

추가 리소스