Home-theater-designers
アラートは、重要な情報をユーザーに伝えるために Web サイト/Web アプリケーションに表示されるメッセージです。これらは、Web アプリケーションで重要な役割を果たします。 React でアラートを作成する方法はたくさんあります。 Chakra UI により、プロセスが簡単かつ効率的になります。
Chakra UI は、カスタマイズ可能でアクセスしやすい UI コンポーネントのセットを提供する React の一般的なコンポーネント ライブラリです。
今日のメイク動画 スクロールしてコンテンツを続ける
Chakra UI のインストール
Chakra UI ライブラリを使用するには、 多くの反応コンポーネント ライブラリの 1 つ 、最初にインストールする必要があります。 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/react :
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 コンポーネントが、提供されたテーマとスタイリング コンテキストにアクセスできることを保証します。の テーマ prop はオプションです。これを渡さない場合、Chakra UI はデフォルトのテーマを使用します。
アラート コンポーネントを使用したカスタム アラートの作成
Chakra UI には、カスタム アラートを作成できる 4 つのコンポーネントがあります。 アラート 、 アラートアイコン 、 アラートのタイトル 、 と アラートの説明 .
アラート メッセージを作成するには、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
コンポーネントをインポートした後、 アラート コンポーネントは、ユーザーにメッセージを表示します。それは スターテス prop を「success」に設定します。これは、メッセージが成功メッセージであることを示します。
他に、「info」、「error」、「warning」の 3 つのステータスがあります。アラートが使用する配色とアイコンは、メッセージのステータスによって異なります。
の アラート コンポーネントには 3 つの子が含まれます。 アラートアイコン 、 アラートのタイトル 、 と アラートの説明 .の アラートアイコン コンポーネントは、メッセージの横に小さなアイコンを表示します。 アラートのタイトル メインメッセージを表示し、 アラートの説明 メッセージのより詳細な説明を表示します。
16GBのRAMのページングファイルサイズ
前のコード ブロックは、次のようなアラートを生成します。
Variant プロパティを使用してアラート メッセージをカスタマイズする
アラート メッセージの外観をカスタマイズするには、 変異体 の小道具 アラート 成分。の 変異体 prop はアラート メッセージの視覚的な外観を定義し、渡された値に基づいてメッセージの配色、アイコン、およびフォントの太さを決定します。
の 変異体 prop などのいくつかの文字列値を受け入れます 微妙 、 個体 、 左アクセント 、 トップアクセント 、 右アクセント 、 と 下アクセント .各値は、アラート メッセージの異なるビジュアル スタイルを表します。
異なるバリアントを持つ 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 プロパティを使用してアラート メッセージをカスタマイズする
アラート メッセージのデフォルトの外観に固執するのではなく、 クラス名 小道具。あなたは クラス名 prop を使用して 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;
この例では、alert コンポーネントに CSS クラス「alert」があります。 CSS クラスを定義したら、CSS ファイルでスタイルを定義できます。
そのようです：
.alert {
color: red;
font-family: cursive;
display: flex;
flex-direction: column;
gap: 0.4rem;
}
上記のコードは、CSS スタイルをアラート コンポーネントに適用します。 Chakra UI スタイルの props に精通している場合は、それらを使用してアラート メッセージのスタイルを設定する必要があります。 クラス名 小道具。
上記の 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
このコード ブロックは、通知表示の状態を管理します。 使用状態 針。通知表示の初期状態を「なし」に設定し、通知を非表示にします。
ユーザーが ボタン 、それは 通知する 関数。通知関数を呼び出すと、 画面 状態を「none」から「flex.」に変更して、通知を表示します。
ユーザーが 閉じるボタン 、close 関数を呼び出します。ディスプレイの状態を「なし」に戻し、通知を非表示にします。
カスタマイズ可能なアラートを作成できるようになりました
これで、Chakra UI を使用して React アプリケーションでカスタム アラートを作成する方法を学習しました。 Chakra UI を使用すると、React でカスタム アラートを簡単かつ直感的に作成できるため、明確で簡潔な情報をユーザーに提供できます。 Chakra UI は、優れた React アプリケーションを構築するのに役立つ、カスタマイズ可能でアクセス可能な他の多くの UI コンポーネントを提供します。