Създавайте персонализирани сигнали във вашето приложение React с потребителския интерфейс на Chakra

Създавайте персонализирани сигнали във вашето приложение React с потребителския интерфейс на Chakra
Читатели като вас помагат в подкрепа на MUO. Когато правите покупка чрез връзки на нашия сайт, ние може да спечелим комисионна за партньор. Прочетете още.

Сигналите са съобщения, показвани на уебсайт/уеб приложение, за да предадат важна информация на потребителя. Те играят решаваща роля в уеб приложенията. Има много начини за създаване на предупреждения в React; Chakra UI прави процеса лесен и ефективен.





Chakra UI е популярна библиотека с компоненти за React, която предоставя набор от адаптивни и достъпни UI компоненти.



MAKEUSEOF ВИДЕО НА ДЕНЯ ПРЕВЪРТЕТЕ, ЗА ДА ПРОДЪЛЖИТЕ СЪС СЪДЪРЖАНИЕТО

Инсталиране на потребителския интерфейс на Chakra

За да използвате библиотеката на Chakra UI, една от многото библиотеки с компоненти на реакция , първо трябва да го инсталирате. Можете да го инсталирате, като изпълните следната терминална команда в директорията на вашия проект node.js:





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

Като алтернатива можете да инсталирате Chakra UI с помощта на Yarn. За да направите това, изпълнете следната команда:

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

Настройване на потребителския интерфейс на Chakra

След като инсталирате Chakra UI, трябва да го направите достъпен във вашето приложение. За да направите това, трябва да настроите ChakraProvider компонент.



The ChakraProvider е компонент от най-високо ниво, който предоставя библиотеката на Chakra UI. Той обвива цялото приложение и предоставя контекста на темата и стила на всички негови компоненти.

начини да печелите пари от видео игри

За да настроите ChakraProvider компонент, импортирайте го от @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> 
)

The ChakraProvider компонент поддържа a тема опора Преминавайки на тема опора на ChakraProvider гарантира, че всички компоненти на потребителския интерфейс на Chakra в приложението имат достъп до предоставената тема и контекст на стил. The тема опората не е задължителна; ако не го преминете, потребителският интерфейс на Chakra ще използва тема по подразбиране.

Създаване на персонализирано предупреждение с помощта на компоненти за предупреждение

Chakra UI предлага четири компонента, които ви позволяват да създадете персонализирано предупреждение: Тревога , AlertIcon , AlertTitle , и AlertDescription .



За да създадете вашето предупредително съобщение, импортирайте тези компоненти от библиотеката на 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“, което показва, че съобщението е съобщение за успех.

Има три други статуса: „информация“, „грешка“ и „предупреждение“. Цветовата схема и иконата, които предупреждението използва, ще зависят от състоянието на съобщението.

The Тревога компонентът съдържа три деца: AlertIcon , AlertTitle , и AlertDescription . The AlertIcon компонент показва малка икона до съобщението, AlertTitle показва основното съобщение и AlertDescription показва по-подробно описание на съобщението.

Предишният кодов блок ще генерира предупреждение, което изглежда така:

Зелено предупреждение за успех с приветствен текст

Персонализиране на предупредителните съобщения с помощта на Variant Prop

За да персонализирате външния вид на предупредителното съобщение, използвайте вариант опора на Тревога компонент. The вариант prop дефинира визуалния облик на предупредителното съобщение и определя цветовата схема, иконата и теглото на шрифта на съобщението въз основа на стойността, която му подавате.

The вариант prop приема няколко низови стойности, като напр фин , твърдо , ляв ударение , топ-акцент , право-ударение , и дъно-акцент . Всяка стойност представлява различен визуален стил на предупредителното съобщение.

Ето пример за четири компонента за предупреждение с различни варианти:

 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

Изобразяването на кодовия блок по-горе ще покаже персонализирано предупреждение като това:

Картина на 4 персонализирани предупреждения Персонализиране на вашите предупредителни съобщения с помощта на className Prop

Вместо да се придържате към външния вид по подразбиране на предупредителните съобщения, можете да го персонализирате с помощта на className опора Вие използвате 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;

В този пример компонентът за предупреждение има CSS клас „предупреждение“. След като дефинирате CSS класа, можете да дефинирате своите стилове във вашия CSS файл.

Така:

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

Кодът по-горе ще приложи CSS стиловете към компонента за предупреждение. Ако сте запознати с подпорите за стил на Chakra UI, трябва да ги използвате, за да оформите предупредителните съобщения вместо className опора

След прилагане на CSS стиловете по-горе, компонентът за предупреждение ще се покаже, както се вижда на изображението по-долу:

Стилизиран сигнал с приветствено съобщение

Задействане на предупредителни съобщения в отговор на потребителски събития

Създали сте компонент за предупреждение, който постоянно показва предупредително съобщение на екрана. Въпреки това, за да подобрите потребителското изживяване, можете да задействате предупредителното съобщение в отговор на конкретни събития, инициирани от потребителя, използвайки слушатели на събития на JavaScript . Тези събития могат да включват щракване върху бутон, изпращане на формуляр или срещане на грешка.

За да задействате предупредителното си съобщение в отговор на събития, използвайте React state и дисплей опора на компонентите на потребителския интерфейс на Chakra.

Например:

 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.“, което прави известието видимо.

Когато потребителят щракне върху closeButton , извиква функцията за затваряне. Той променя състоянието на дисплея обратно на „няма“, което скрива известието.

Сега можете да създавате персонализирани сигнали

Сега научихте как да създадете персонализиран сигнал във вашето приложение React с помощта на потребителския интерфейс на Chakra. С Chakra UI създаването на персонализирани сигнали в React е лесно и интуитивно, което ни позволява да предоставяме ясна и кратка информация на нашите потребители. Потребителският интерфейс на Chakra предоставя много други адаптивни и достъпни компоненти на потребителския интерфейс, за да ви помогне да създадете страхотни React приложения.