Opret brugerdefinerede advarsler i din React-applikation med Chakra UI

Opret brugerdefinerede advarsler i din React-applikation med Chakra UI
Læsere som dig hjælper med at støtte MUO. Når du foretager et køb ved hjælp af links på vores websted, kan vi optjene en affiliate-kommission. Læs mere.

Advarsler er beskeder, der vises på en hjemmeside/webapplikation for at formidle vigtig information til en bruger. De spiller en afgørende rolle i webapplikationer. Der er mange måder at oprette alarmer på i React; Chakra UI gør processen nem og effektiv.





Chakra UI er et populært komponentbibliotek til React, der giver et sæt tilpassede og tilgængelige UI-komponenter.



MAKEUSE AF DAGENS VIDEO RUL FOR AT FORTSÆTTE MED INDHOLD

Installation af Chakra UI

For at bruge Chakra UI-biblioteket, et af mange react komponent biblioteker , skal du først installere det. Du kan installere det ved at køre følgende terminalkommando i dit node.js-projekts mappe:





hvorfor vil svindlere have gavekort 
 npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion

Alternativt kan du installere Chakra UI ved hjælp af Yarn. For at gøre det skal du køre følgende kommando:

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

Opsætning af Chakra UI

Efter installation af Chakra UI, skal du gøre den tilgængelig i din applikation. For at gøre dette skal du konfigurere ChakraProvider komponent.



Det ChakraProvider komponent er en komponent på øverste niveau, som Chakra UI-biblioteket leverer. Det omslutter hele applikationen og giver temaet og stylingkonteksten til alle dens komponenter.

For at opsætte ChakraProvider komponent, importer den fra @chakra-ui/reager :



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

Det ChakraProvider komponent understøtter en tema rekvisit. Passerer tema støtte til ChakraProvider komponent sikrer, at alle Chakra UI-komponenter i applikationen kan få adgang til det angivne tema og stylingkontekst. Det tema prop er valgfri; hvis du ikke består det, vil Chakra UI bruge et standardtema.

Oprettelse af en brugerdefineret advarsel ved hjælp af advarselskomponenter

Chakra UI tilbyder fire komponenter, der lader dig oprette en brugerdefineret advarsel: Alert , AlertIcon , AlertTitle , og AlertDescription .



For at oprette din advarselsmeddelelse skal du importere disse komponenter fra Chakra UI-biblioteket og bruge dem som følger:

 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

Efter import af komponenterne, Alert komponent viser en meddelelse til brugeren. Den har en status prop sat til 'succes', hvilket indikerer, at beskeden er en succesmeddelelse.

Der er tre andre statusser: 'info', 'fejl' og 'advarsel'. Farveskemaet og ikonet, som advarslen bruger, afhænger af meddelelsesstatus.

Det Alert komponent indeholder tre børn: AlertIcon , AlertTitle , og AlertDescription . Det AlertIcon komponent viser et lille ikon ved siden af ​​meddelelsen, AlertTitle viser hovedmeddelelsen, og AlertDescription viser en mere detaljeret beskrivelse af meddelelsen.

Den forrige kodeblok vil generere en advarsel, der ser sådan ud:

En grøn succesalarm med en velkomsttekst

Tilpasning af advarselsmeddelelser ved hjælp af Variant Prop

For at tilpasse udseendet af advarselsmeddelelsen skal du bruge variant rekvisit af Alert komponent. Det variant prop definerer det visuelle udseende af advarselsmeddelelsen og bestemmer farveskemaet, ikonet og skrifttypen for meddelelsen baseret på den værdi, du sender til den.

Det variant prop accepterer flere strengværdier som f.eks diskret , solid , venstre-accent , top-accent , højre-accent , og bund-accent . Hver værdi repræsenterer en anden visuel stil af advarselsmeddelelsen.

Her er et eksempel på fire advarselskomponenter med forskellige varianter:

 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

Gengivelse af kodeblokken ovenfor vil vise en tilpasset advarsel som denne:

Et billede af 4 tilpassede advarsler Tilpasning af dine advarselsmeddelelser ved hjælp af klassenavn Prop

I stedet for at holde fast i standardudseendet for advarselsmeddelelserne, kan du tilpasse det ved hjælp af klassenavn rekvisit. Du bruger klassenavn prop til at definere en CSS-klasse og anvende din brugerdefinerede stil til advarselsmeddelelsen.

For eksempel:

se hanna barbera tegnefilm online gratis 
 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;

I dette eksempel har advarselskomponenten en CSS-klasse 'alarm'. Efter at have defineret CSS-klassen, kan du definere dine stile i din CSS-fil.

Ligesom:

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

Ovenstående kode vil anvende CSS-stilene til advarselskomponenten. Hvis du er bekendt med rekvisitter i Chakra UI-stil, bør du bruge dem til at style advarselsmeddelelser i stedet for klassenavn rekvisit.

Efter at have anvendt CSS-stilene ovenfor, vil advarselskomponenten blive vist som vist på billedet nedenfor:

hvordan laver man et spil i roblox
En stylet alarm med en velkomstbesked

Udløsning af advarselsmeddelelser som svar på brugerhændelser

Du har oprettet en advarselskomponent, der konsekvent viser en advarselsmeddelelse på skærmen. For at forbedre brugeroplevelsen kan du dog udløse advarselsmeddelelsen som svar på specifikke hændelser, som en bruger starter, ved hjælp af JavaScript-hændelseslyttere . Disse hændelser kan omfatte at klikke på en knap, indsende en formular eller støde på en fejl.

For at udløse din advarselsmeddelelse som svar på hændelser skal du bruge React-tilstand og Skærm prop af Chakra UI-komponenterne.

For eksempel:

 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

Denne kodeblok styrer status for meddelelsesvisningen med useState krog. Den indstiller den oprindelige tilstand for meddelelsesvisningen til 'ingen', hvilket skjuler meddelelsen.

Når brugeren klikker på Knap , kalder det underrette fungere. Kaldning af notify-funktionen ændrer værdien af Skærm tilstand fra 'ingen' til 'fleks', hvilket gør meddelelsen synlig.

Når brugeren klikker på Luk-knap , kalder den lukkefunktionen. Det ændrer skærmens tilstand tilbage til 'ingen', hvilket skjuler meddelelsen.

Nu kan du oprette brugerdefinerbare advarsler

Nu har du lært, hvordan du opretter en brugerdefineret advarsel i din React-applikation ved hjælp af Chakra UI. Med Chakra UI er det nemt og intuitivt at oprette tilpassede advarsler i React, hvilket giver os mulighed for at give klar og kortfattet information til vores brugere. Chakra UI giver mange andre brugerdefinerbare og tilgængelige UI-komponenter for at hjælpe dig med at bygge fantastiske React-applikationer.