React Snackbar
Ignite UI for React 화면 하단에 간단한 메시지를 표시하여 작업에 대한 피드백을 제공하는 데 사용됩니다.
Ignite UI for React Snackbar Example
이 샘플은 IgrSnackbar
구성 요소를 만드는 방법을 보여줍니다.
Usage
먼저 다음 명령을 실행하여 Ignite UI for React 설치해야 합니다.
npm install igniteui-react
그런 다음 필요한 CSS인 IgrSnackbar
가져와서 다음과 같이 모듈을 등록해야 합니다.
import { IgrSnackbarModule, IgrSnackbar } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
IgrSnackbarModule.register();
Ignite UI for React 에 대한 전체 소개는 시작하기 항목을 참조하세요.
스낵바 구성요소를 표시하는 가장 간단한 방법은 show
메소드를 사용하고 버튼 클릭 시 호출하는 것입니다.
<IgrButton variant="contained" clicked={this.onShowButtonClicked}>
<span>Show Snackbar</span>
</IgrButton>
<IgrSnackbar ref={this.onSnackbarRef}>
<span>Snackbar Message</span>
</IgrSnackbar>
public onSnackbarRef(snackbar: IgrSnackbar) {
if (!snackbar) { return; }
this.snackbarRef = snackbar;
}
public onShowButtonClicked() {
if (this.snackbarRef) {
this.snackbarRef.show();
}
}
Examples
Display Time
스낵바 구성요소가 표시되는 기간을 구성하려면 displayTime
속성을 사용하세요. 기본적으로 4000밀리초로 설정되어 있습니다.
Action Text
기본적으로 스낵바 구성요소는 displayTime
에 지정된 기간이 지나면 자동으로 숨겨집니다. keepOpen
속성을 사용하여 이 동작을 변경할 수 있습니다. 이렇게 하면 스낵바가 계속 표시됩니다. 스낵바 actionText
사용하면 구성 요소 내부에 작업 버튼을 표시할 수 있습니다.
Styling
스낵바 구성 요소는 여러 CSS 부분(base
, message
및 action
)을 노출하여 스타일을 완벽하게 제어할 수 있습니다.
igc-snackbar::part(base) {
background: #0d6efd;
border-color: #0d6efd;
color: white;
}