Izveidojiet pielāgotus brīdinājumus savā React lietojumprogrammā, izmantojot Chakra UI

Izveidojiet pielāgotus brīdinājumus savā React lietojumprogrammā, izmantojot Chakra UI
Tādi lasītāji kā jūs palīdz atbalstīt MUO. Veicot pirkumu, izmantojot saites mūsu vietnē, mēs varam nopelnīt filiāles komisiju. Lasīt vairāk.

Brīdinājumi ir ziņojumi, kas tiek rādīti tīmekļa vietnē/tīmekļa lietojumprogrammā, lai sniegtu lietotājam svarīgu informāciju. Viņiem ir izšķiroša loma tīmekļa lietojumprogrammās. Ir daudz veidu, kā izveidot brīdinājumus programmā React; Chakra UI padara procesu vienkāršu un efektīvu.





Chakra UI ir populāra React komponentu bibliotēka, kas nodrošina pielāgojamu un pieejamu lietotāja interfeisa komponentu kopu.



vai vari atsūtīt man īsziņu
DIENAS VIDEO MAKEUSEOF RITINĀT, LAI TURPINĀTU AR SATURU

Chakra UI instalēšana

Lai izmantotu Chakra UI bibliotēku, viena no daudzajām reaģējošo komponentu bibliotēkām , vispirms tas jāinstalē. Varat to instalēt, izpildot šādu termināļa komandu sava node.js projekta direktorijā:





 npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion

Varat arī instalēt Chakra lietotāja interfeisu, izmantojot dziju. Lai to izdarītu, palaidiet šādu komandu:

 yarn add @chakra-ui/react @emotion/react @emotion/styled framer-motion

Chakra UI iestatīšana

Pēc Chakra UI instalēšanas jums tas ir jādara pieejams savā lietojumprogrammā. Lai to izdarītu, jums ir jāiestata ChakraProvider komponents.



The ChakraProvider komponents ir augstākā līmeņa komponents, ko nodrošina Chakra UI bibliotēka. Tas aptver visu lietojumprogrammu un nodrošina motīvu un stila kontekstu visiem tās komponentiem.

Lai iestatītu ChakraProvider komponentu, importējiet to no @chakra-ui/reaģēt :



 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> 
)

The ChakraProvider komponents atbalsta a tēma prop. Ejot garām tēma balsts uz ChakraProvider komponents nodrošina, ka visi Chakra UI komponenti lietojumprogrammā var piekļūt nodrošinātajam motīva un stila kontekstam. The tēma rekvizīti nav obligāti; ja to neizturēsit, Chakra lietotāja interfeiss izmantos noklusējuma motīvu.

Pielāgota brīdinājuma izveide, izmantojot brīdinājuma komponentus

Chakra UI piedāvā četrus komponentus, kas ļauj izveidot pielāgotu brīdinājumu: Brīdinājums , AlertIcon , AlertTitle , un AlertDescription .



Lai izveidotu brīdinājuma ziņojumu, importējiet šos komponentus no Chakra UI bibliotēkas un izmantojiet tos šādi:

 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

Pēc komponentu importēšanas Brīdinājums komponents parāda ziņojumu lietotājam. Tam ir a statusu prop iestatīts uz “veiksmi”, kas norāda, ka ziņojums ir veiksmes ziņojums.

Ir trīs citi statusi: “informācija”, “kļūda” un “brīdinājums”. Brīdinājuma izmantotā krāsu shēma un ikona būs atkarīga no ziņojuma statusa.

The Brīdinājums komponentā ir trīs bērni: AlertIcon , AlertTitle , un AlertDescription . The AlertIcon komponents parāda mazu ikonu blakus ziņojumam, AlertTitle parāda galveno ziņojumu un AlertDescription parāda detalizētāku ziņojuma aprakstu.

Iepriekšējais koda bloks ģenerēs brīdinājumu, kas izskatās šādi:

Zaļš veiksmes brīdinājums ar sveiciena tekstu

Brīdinājuma ziņojumu pielāgošana, izmantojot variantu Prop

Lai pielāgotu brīdinājuma ziņojuma izskatu, izmantojiet variants rekvizīti Brīdinājums komponents. The variants rekvizīts nosaka brīdinājuma ziņojuma vizuālo izskatu un nosaka ziņojuma krāsu shēmu, ikonu un fonta svaru, pamatojoties uz vērtību, kuru jūs tam nododat.

The variants prop pieņem vairākas virknes vērtības, piemēram, smalks , ciets , kreisais akcents , top-akcents , pa labi - akcents , un apakšējais akcents . Katra vērtība apzīmē atšķirīgu brīdinājuma ziņojuma vizuālo stilu.

Šeit ir četru brīdinājuma komponentu piemērs ar dažādiem variantiem.

kā bloķēt mobilā tālruņa numuru, zvanot kādam 
 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

Atveidojot iepriekš minēto koda bloku, tiks parādīts šāds pielāgots brīdinājums:

4 pielāgotu brīdinājumu attēls Brīdinājuma ziņojumu pielāgošana, izmantojot klases nosaukumu Prop

Tā vietā, lai ievērotu brīdinājuma ziņojumu noklusējuma izskatu, varat to pielāgot, izmantojot klasesNosaukums prop. Jūs izmantojat klasesNosaukums prop, lai definētu CSS klasi un piemērotu savu pielāgoto stilu brīdinājuma ziņojumam.

Piemēram:

 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;

Šajā piemērā brīdinājuma komponentam ir CSS klase “alert”. Pēc CSS klases definēšanas varat definēt savus stilus savā CSS failā.

Tā kā:

 .alert { 
  color: red; 
  font-family: cursive; 
  display: flex; 
  flex-direction: column; 
  gap: 0.4rem; 
}

Iepriekš minētais kods brīdinājuma komponentam piemēros CSS stilus. Ja esat iepazinies ar Chakra UI stila rekvizītiem, izmantojiet tos, lai veidotu brīdinājuma ziņojumus, nevis klasesNosaukums prop.

Pēc iepriekš minēto CSS stilu lietošanas brīdinājuma komponents tiks parādīts, kā parādīts tālāk esošajā attēlā:

Stilīgs brīdinājums ar sveiciena ziņojumu

Brīdinājuma ziņojumu aktivizēšana, reaģējot uz lietotāja notikumiem

Jūs esat izveidojis brīdinājuma komponentu, kas pastāvīgi parāda brīdinājuma ziņojumu ekrānā. Tomēr, lai uzlabotu lietotāja pieredzi, varat aktivizēt brīdinājuma ziņojumu, reaģējot uz konkrētiem notikumiem, ko lietotājs ierosina, izmantojot JavaScript notikumu uztvērējus . Šie notikumi var ietvert noklikšķināšanu uz pogas, veidlapas iesniegšanu vai kļūdu.

Lai aktivizētu brīdinājuma ziņojumu, reaģējot uz notikumiem, izmantojiet Reakcijas stāvoklis un displejs Chakra UI komponentu balsts.

Piemēram:

 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

Šis koda bloks pārvalda paziņojumu displeja stāvokli ar useState āķis. Tas iestata paziņojumu displeja sākotnējo stāvokli uz “nav”, kas paslēpj paziņojumu.

Kad lietotājs noklikšķina uz Poga , to sauc par paziņot funkciju. Izsaucot paziņojumu funkciju, tiek mainīta vērtība displejs izvēlieties no “nav” uz “flex.”, padarot paziņojumu redzamu.

Kad lietotājs noklikšķina uz aizvēršanas poga , tas izsauc aizvērt funkciju. Tas maina displeja stāvokli atpakaļ uz “nav”, kas slēpj paziņojumu.

Tagad varat izveidot pielāgojamus brīdinājumus

Tagad esat iemācījies izveidot pielāgotu brīdinājumu savā React lietojumprogrammā, izmantojot Chakra UI. Izmantojot Chakra UI, pielāgotu brīdinājumu izveide programmā React ir vienkārša un intuitīva, ļaujot lietotājiem sniegt skaidru un kodolīgu informāciju. Chakra UI nodrošina daudzus citus pielāgojamus un pieejamus lietotāja interfeisa komponentus, lai palīdzētu jums izveidot lieliskas React lietojumprogrammas.