Snackbar
사용자의 행동에 대한 간결한 피드백을 제공하는 일시적인 알림입니다. 주로 화면 하단에 나타나 사용자의 작업 흐름을 방해하지 않으며, 실행 취소 같은 단순한 상호작용 버튼을 포함할 수 있습니다.
간단한 메시지와 상호작용을 안내할 때 사용합니다.
useSnackbar 훅을 사용하면 더 간편하게 사용할 수 있습니다.
RegionConfig 컴포넌트를 활용하여 노출되는 위치를 조정할 수 있습니다.
import { Snackbar, SnackbarContent, SnackbarHeading, SnackbarDescription, SnackbarAction } from '@wanteddev/wds';
const Demo = () => {
return (
<Snackbar open disablePortal disableAnimation>
<SnackbarContent>
<SnackbarHeading>Heading</SnackbarHeading>
<SnackbarDescription>Description</SnackbarDescription>
</SnackbarContent>
<SnackbarAction>Action</SnackbarAction>
</Snackbar>
)
}
export default Demo;Snackbar 는 여러 컴포넌트를 조합해서 사용합니다.
기본 구성은 아래와 같습니다.
SnackbarContent 의 extraContent 속성으로 컨텐츠를 추가할 수 있습니다.
import { Snackbar, SnackbarContent, SnackbarHeading, SnackbarDescription, SnackbarExtraContent, SnackbarAction } from '@wanteddev/wds';
import { IconBlank } from '@wanteddev/wds-icon';
const Demo = () => {
return (
<Snackbar open disablePortal disableAnimation>
<SnackbarContent
extraContent={(
<SnackbarExtraContent>
<IconBlank />
</SnackbarExtraContent>
)}
>
<SnackbarHeading>Heading</SnackbarHeading>
<SnackbarDescription>Description</SnackbarDescription>
</SnackbarContent>
<SnackbarAction>Action</SnackbarAction>
</Snackbar>
)
}
export default Demo;SnackbarCloseButton 을 사용하여 닫기 버튼을 추가할 수 있습니다.
import { Snackbar, SnackbarContent, SnackbarHeading, SnackbarDescription, SnackbarAction, SnackbarCloseButton } from '@wanteddev/wds';
const Demo = () => {
return (
<Snackbar open disablePortal disableAnimation>
<SnackbarContent>
<SnackbarHeading>Heading</SnackbarHeading>
<SnackbarDescription>Description</SnackbarDescription>
</SnackbarContent>
<SnackbarAction>Action</SnackbarAction>
<SnackbarCloseButton />
</Snackbar>
)
}
export default Demo;duration 옵션을 통해 노출 시간을 조정할 수 있습니다.
Infinity로 설정하면 무한히 노출됩니다.short,long의 시멘틱 값을 사용할 수 있습니다.
import { Button, Snackbar, SnackbarContent, SnackbarHeading, SnackbarDescription, SnackbarAction } from '@wanteddev/wds';
import { useState } from 'react';
const Demo = () => {
const [open, setOpen] = useState(false);
return (
<>
<Snackbar open={open} onOpenChange={setOpen} duration="short">
<SnackbarContent>
<SnackbarHeading>Heading</SnackbarHeading>
<SnackbarDescription>Description</SnackbarDescription>
</SnackbarContent>
</Snackbar>
<Button onClick={() => setOpen(true)}>Click me</Button>
</>
)
}
export default Demo;