Home-theater-designers
알림은 사용자에게 중요한 정보를 전달하기 위해 웹사이트/웹 애플리케이션에 표시되는 메시지입니다. 웹 애플리케이션에서 중요한 역할을 합니다. React에서 알림을 생성하는 방법에는 여러 가지가 있습니다. Chakra UI는 프로세스를 쉽고 효율적으로 만듭니다.
Chakra UI는 사용자 지정 가능하고 액세스 가능한 UI 구성 요소 집합을 제공하는 인기 있는 React용 구성 요소 라이브러리입니다.
오늘의 메이크업 비디오 콘텐츠를 계속하려면 스크롤하세요.
차크라 UI 설치
Chakra UI 라이브러리를 사용하려면, 많은 반응 구성 요소 라이브러리 중 하나 , 먼저 설치해야 합니다. node.js 프로젝트의 디렉토리에서 다음 터미널 명령을 실행하여 설치할 수 있습니다.
npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion
또는 Yarn을 사용하여 Chakra UI를 설치할 수 있습니다. 이렇게 하려면 다음 명령을 실행합니다.
yarn add @chakra-ui/react @emotion/react @emotion/styled framer-motion
Chakra UI 설정
Chakra UI를 설치한 후 애플리케이션에서 사용할 수 있도록 해야 합니다. 이렇게 하려면 다음을 설정해야 합니다. 차크라 제공자 요소.
그만큼 차크라 제공자 component는 Chakra UI 라이브러리가 제공하는 최상위 구성 요소입니다. 전체 응용 프로그램을 래핑하고 모든 구성 요소에 테마 및 스타일 지정 컨텍스트를 제공합니다.
설정하려면 차크라 제공자 구성요소, 가져오기 @chakra-ui/반응 :
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import { ChakraProvider } from '@chakra-ui/react'
ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
<React.StrictMode>
<ChakraProvider>
<App />
</ChakraProvider>
</React.StrictMode>
)
그만큼 차크라 제공자 구성 요소는 주제 소품. 통과 주제 에 소품 차크라 제공자 구성 요소는 애플리케이션의 모든 Chakra UI 구성 요소가 제공된 테마 및 스타일 지정 컨텍스트에 액세스할 수 있도록 합니다. 그만큼 주제 소품은 선택 사항입니다. 통과하지 않으면 Chakra UI는 기본 테마를 사용합니다.
알림 구성 요소를 사용하여 사용자 지정 알림 만들기
Chakra UI는 사용자 지정 알림을 생성할 수 있는 네 가지 구성 요소를 제공합니다. 알리다 , 알림 아이콘 , 경고 제목 , 그리고 알림 설명 .
경고 메시지를 생성하려면 Chakra UI 라이브러리에서 이러한 구성 요소를 가져와서 다음과 같이 사용하십시오.
import React from 'react';
import {Alert, AlertIcon, AlertDescription, AlertTitle} from '@chakra-ui/react'
function App() {
return (
<div>
<Alert status='success'>
<AlertIcon />
<AlertTitle>Welcome!!!</AlertTitle>
<AlertDescription>Its nice to have you here</AlertDescription>
</Alert>
</div>
)
}
export default App
구성 요소를 가져온 후 알리다 구성 요소는 사용자에게 메시지를 표시합니다. 그것은 상태 메시지가 성공 메시지임을 나타내는 'success'로 설정된 prop.
'정보', '오류' 및 '경고'의 세 가지 다른 상태가 있습니다. 알림이 사용하는 색 구성표와 아이콘은 메시지 상태에 따라 다릅니다.
그만큼 알리다 구성 요소에는 다음 세 가지 하위 항목이 포함됩니다. 알림 아이콘 , 경고 제목 , 그리고 알림 설명 . 그만큼 알림 아이콘 구성 요소는 메시지 옆에 작은 아이콘을 표시합니다. 경고 제목 주요 메시지를 표시하고 알림 설명 메시지에 대한 자세한 설명을 표시합니다.
이전 코드 블록은 다음과 같은 경고를 생성합니다.
두 개의 Facebook 계정을 결합하는 방법
Variant Prop을 사용하여 경고 메시지 사용자 지정
경고 메시지의 모양을 사용자 지정하려면 변종 의 소품 알리다 요소. 그만큼 변종 prop은 경고 메시지의 시각적 모양을 정의하고 메시지에 전달하는 값을 기반으로 메시지의 색 구성표, 아이콘 및 글꼴 두께를 결정합니다.
그만큼 변종 prop은 다음과 같은 여러 문자열 값을 허용합니다. 미묘한 , 단단한 , 왼쪽 악센트 , 최고 악센트 , 오른쪽 악센트 , 그리고 악센트 . 각 값은 경고 메시지의 다른 시각적 스타일을 나타냅니다.
iso에서 부팅 가능한 USB 만들기
다음은 변형이 다른 4가지 경고 구성 요소의 예입니다.
import React from 'react';
import {Alert, AlertIcon, AlertDescription, AlertTitle, Flex} from '@chakra-ui/react'
function App() {
return (
<div>
<Flex justify='center' gap='3' direction='column' mt='4'>
<Alert status='success' variant='solid'>
<AlertIcon />
<AlertTitle>Welcome!!!</AlertTitle>
<AlertDescription>Its nice to have you here</AlertDescription>
</Alert>
<Alert status='success' variant='subtle'>
<AlertIcon />
<AlertTitle>Welcome!!!</AlertTitle>
<AlertDescription>Its nice to have you here</AlertDescription>
</Alert>
<Alert status='success' variant='top-accent'>
<AlertIcon />
<AlertTitle>Welcome!!!</AlertTitle>
<AlertDescription>Its nice to have you here</AlertDescription>
</Alert>
<Alert status='success' variant='left-accent'>
<AlertIcon />
<AlertTitle>Welcome!!!</AlertTitle>
<AlertDescription>Its nice to have you here</AlertDescription>
</Alert>
</Flex>
</div>
)
}
export default App
위의 코드 블록을 렌더링하면 다음과 같은 사용자 지정 경고가 표시됩니다.
className 소품을 사용하여 경고 메시지 사용자 지정
경고 메시지의 기본 모양을 고수하는 대신 다음을 사용하여 사용자 정의할 수 있습니다. 클래스 이름 소품. 당신은 클래스 이름 CSS 클래스를 정의하고 사용자 정의 스타일을 경고 메시지에 적용하는 소품.
예를 들어:
import React from 'react';
import {Alert, AlertIcon, AlertDescription, AlertTitle} from '@chakra-ui/react'
function App() {
return (
<div>
<Alert status='success' className='alert'>
<AlertIcon />
<AlertTitle>Welcome!!!</AlertTitle>
<AlertDescription>Its nice to have you here</AlertDescription>
</Alert>
</div>
)
}
export default App;
이 예에서 경고 구성 요소에는 CSS 클래스 '경고'가 있습니다. CSS 클래스를 정의한 후 CSS 파일에서 스타일을 정의할 수 있습니다.
이렇게:
.alert {
color: red;
font-family: cursive;
display: flex;
flex-direction: column;
gap: 0.4rem;
}
위의 코드는 경고 구성 요소에 CSS 스타일을 적용합니다. Chakra UI 스타일 소품에 익숙하다면 이를 사용하여 경고 메시지의 스타일을 지정해야 합니다. 클래스 이름 소품.
위의 CSS 스타일을 적용하면 아래 이미지와 같이 경고 구성 요소가 표시됩니다.
사용자 이벤트에 대한 응답으로 경고 메시지 트리거
화면에 지속적으로 경고 메시지를 표시하는 경고 구성 요소를 만들었습니다. 그러나 사용자 경험을 향상시키기 위해 사용자가 시작한 특정 이벤트에 대한 응답으로 경고 메시지를 트리거할 수 있습니다. JavaScript 이벤트 리스너 사용 . 이러한 이벤트에는 버튼 클릭, 양식 제출 또는 오류 발생이 포함될 수 있습니다.
이벤트에 대한 응답으로 경고 메시지를 트리거하려면 React 상태와 표시하다 Chakra UI 구성 요소의 소품.
예를 들어:
import React from 'react';
import {Alert, AlertIcon, AlertDescription, AlertTitle, Button, Button} from '@chakra-ui/react'
function App() {
const [display, setDisplay] = React.useState('none');
function notify() {
setDisplay('flex');
}
function close() {
setDisplay('none');
}
return (
<div className="app">
<Alert status='success' display={display} variant='solid'>
<AlertIcon />
<AlertTitle>Welcome!!!</AlertTitle>
<AlertDescription>Its nice to have you here</AlertDescription>
<Button position='absolute' top='6px' right='6px' onClick={close}/>
</Alert>
<Button onClick={notify} mt='4'>Click Me</Button>
</div>
)
}
export default App
이 코드 블록은 다음을 사용하여 알림 표시 상태를 관리합니다. useState 훅. 알림 표시의 초기 상태를 '없음'으로 설정하여 알림을 숨깁니다.
사용자가 단추 , 그것은 호출 알리다 기능. 알림 기능을 호출하면 표시하다 'none'에서 'flex.'로 상태를 변경하여 알림을 표시합니다.
사용자가 닫기버튼 , 닫기 함수를 호출합니다. 디스플레이 상태를 다시 '없음'으로 변경하여 알림을 숨깁니다.
이제 사용자 지정 가능한 알림을 만들 수 있습니다.
이제 Chakra UI를 사용하여 React 애플리케이션에서 사용자 지정 알림을 만드는 방법을 배웠습니다. Chakra UI를 사용하면 React에서 사용자 지정 알림을 만드는 것이 쉽고 직관적이므로 사용자에게 명확하고 간결한 정보를 제공할 수 있습니다. Chakra UI는 훌륭한 React 애플리케이션을 구축하는 데 도움이 되는 다른 많은 사용자 지정 가능하고 액세스 가능한 UI 구성 요소를 제공합니다.