Chakra kasutajaliidese kasutamine koos Next.js ja React

Veebisaitide ja rakenduste loomine on keeruline. Meie rakenduste kasutatavuse ja juurdepääsetavuse tagamiseks on vaja kaaluda paljusid asju, sealhulgas seda, kuidas meie Reacti komponendid töötavad.

Kuidas saaksime kasutada Chakra kasutajaliidese jõudu suurepäraste veebirakenduste loomiseks?

  • Mis on tšakra kasutajaliides?
  • Mis teeb Chakra kasutajaliidese nii suurepäraseks?
  • Mida me ehitame?
  • 0. samm: uue Reacti projekti loomine rakendusega Next.js
  • 1. samm: Chakra kasutajaliidese installimine ja konfigureerimine saidil Next.js
  • 2. samm: rakenduse React Chakra kasutajaliidese komponentide lisamine
  • 3. samm: Chakra kasutajaliidese abil reageerivate komponentide loomine
  • 4. samm: Chakra kasutajaliidese vaiketeema kohandamine

Mis on tšakra kasutajaliides?

Chakra kasutajaliides on Reacti komponentide kogu, mis muudab rakenduse või veebisaidi kasutajaliidese koostamise lihtsaks.

Nende eesmärk on pakkuda lihtsat, modulaarset ja ligipääsetavat komponentide komplekti, et kiiresti tööle asuda.

Mis teeb Chakra kasutajaliidese nii suurepäraseks?

Alustuseks püüab Chakra vaikimisi muuta iga komponendi ligipääsetavaks. See on rakenduste arendamise kriitiline osa, millest sageli mööda vaadatakse, ja Tšakra hooldajad on teinud endast oleneva, et tagada komponentide järgimine WAI-ARIA juhistega.

Chakra sisaldab ka lihtsat API-d, mis võimaldab arendajatel olla produktiivne. See võimaldab inimestel ja meeskondadel teha kaasavaid rakendusi, ilma et peaks muretsema ise hulga komponentide ehitamise pärast.

Stiili ja kohandamise jaoks kasutab Chakra kapoti all asuvat Emotioni, et pakkuda arendajatele võimalust stiilida oma komponendid otse oma JavaScripti stiilis rekvisiitidega. Sellel on vaiketeema, kuid see võimaldab kohandatud sätetega seda hõlpsasti alistada.

Mida me ehitame?

Chakra toimimise kohta hea ülevaate saamiseks ehitame Chakra kasutajaliidese komponentidega vaikimisi Next.js malli uuesti üles.

See aitab meil mõista mõnda olulist mõistet, näiteks kuidas kasutada Chakra kasutajaliidest Next.js-iga, kuidas lisada kohandatud stiile rekvisiitidega ja kuidas kohandada Chakra kasutajaliidese teemat.

Siinsed mõisted võivad rakenduda üsna suvalise rakenduse React korral, ehkki näited on veidi konkreetsed Next.js-le.

0. samm: uue Reacti projekti loomine rakendusega Next.js

Alustamiseks vajame rakendust React. Kasutame raamistikuna Next.js, mis annab meile võimaluse hõlpsalt uut rakendust kerida.

Kui olete kataloogis, kuhu soovite projekti luua, käivitage:

yarn create next-app my-chakra-app # or npx create-next-app my-chakra-app 

Märkus: muutke julgelt my-chakra-appseda, mida soovite projekti kataloogi nimetada.

Ja kui see on lõppenud, saate navigeerida sellesse kataloogi ja alustada projekti järgmisega:

yarn dev # or npm run dev 

See peaks teie arendusserveri kiirendama aadressil // localhost: 3000 ja me peaksime olema valmis minema!

Järgige pühendumist!

1. samm: Chakra kasutajaliidese installimine ja konfigureerimine saidil Next.js

Järgmisena installime Chakra kasutajaliidese.

Projektikataloogi sees käivitage:

yarn add @chakra-ui/core @emotion/core @emotion/styled emotion-theming # or npm install @chakra-ui/core @emotion/core @emotion/styled emotion-theming 

See installib Chakra kasutajaliidese ja selle sõltuvused, sh Emotion, kuna see tugineb sellele kujundamisel.

Tšakra rakenduses töötamiseks peame oma rakenduse juureks seadistama teenuseosutaja. See võimaldab kõigil Chakra komponentidel üksteisega rääkida ja kasutada seadistust järjepidevate stiilide säilitamiseks.

Toas pages/_app.jsimpordime kõigepealt ülaosas oma teenusepakkuja:

import { ThemeProvider, theme } from '@chakra-ui/core'; 

Järgmisena asendage komponendi return lause järgmisega:

function MyApp({ Component, pageProps }) { return (    ) } 

Nagu te märkate, edastame thememuutuja ka oma pakkujale. Impordime Chakra kasutajaliidese vaiketeema otse Chakrast ja edastame selle meile, ThemeProvideret kõik meie komponendid saaksid vaikestiilid ja konfiguratsioonid.

Lõpuks tahame lisada komponendi, mida nimetatakse CSSResetõigeks, otsese lapsena ThemeProvider.

Esiteks lisage CSSResetimpordina:

import { ThemeProvider, theme, CSSReset } from '@chakra-ui/core'; 

Seejärel lisage komponent otse sisse ThemeProvider:

Ja nüüd, kui laadime lehe uuesti, näeme, et asjad näevad natuke teistmoodi välja!

Brauseril on palju vaikestiile ja vaikimisi ei alista Chakra kasutajaliides neid. See hõlmab stiile nagu nööpelemendi ääred.

Kuigi siin pole tingimata vaja CSS-i lähtestamist, võime need asjad käsitsi alistada. See annab meile aluse, kus saame teada, et Chakra kasutajaliides töötab nii, nagu see on ette nähtud, ja saame hakata oma komponente lisama.

Järgige pühendumist!

2. samm: rakenduse React Chakra kasutajaliidese komponentide lisamine

Nüüd aga lõbusast osast. Kasutame Chakra kasutajaliidese komponente, et proovida Next.js vaikemalli uuesti üles ehitada. See ei hakka 100% täpselt välja nägema, kuid see kannab vaimu ja saame seda kohandada nii, nagu soovime.

Pealkirja ja kirjelduse koostamine

Alustades ülevalt, värskendame oma pealkirja ja kirjeldust.

Lehe ülaosas peame oma Headingkomponendi importima :

import { Heading, Link } from "@chakra-ui/core"; 

Siis asendame

koos:

 Welcome to Next.js!  

Siin kasutame komponenti Heading, mille määrasime siis nimeks h1. Saame kasutada mis tahes HTML-päiseelemendi sildi nime, kuid kuna asendame h1, soovime seda kasutada.

Samuti määrame sizeatribuudi, mis võimaldab meil kontrollida, kui suur on pealkiri, ja seda mb, mis tähistab margin-bottom, võimaldades meil lisada ruumi allpool.

Ja juba näeme, et meie leht näeb välja pigem vaikemall.

Samuti tahame oma lingi uuesti lisada.

Lisage Linkoma komponendi ülaosas ja seejärel sees olevasse impordiväljavõttesse tekst, mille tekst Next.js asendatakse järgmisega:

Next.js! 

Chakra lingi komponent loob lingi ootuspäraselt, kuid lubab meil siis selle kohandamiseks kasutada stiilipropsi. Siin kasutame värvimuutujat, teal.500mille Chakra pakub, et muuta meie linki Chakra värvidega.

Ja näeme, et meil on link Next.js!

Päise viimane tükk on kirjeldus. Selleks soovime kasutada komponenti Tekst.

Lisage Text  ja lisage Codeimpordiarvutusse ja asendage kirjeldus järgmisega:

 Get started by editing pages/index.js

A loomiseks kasutame komponenti Tekst

silt ja koodikood meie loomiseks tag. Similar to our Heading component, we’re adding a fontSize to make the font bigger and mt which stands for margin-top to add some space above it.

And now we have our header!

Replacing info cards with Chakra UI components

For each of our cards, we can use the same concepts as we did with the header to recreate each of our boxes.

To start, add an import for the Flex component and replace the tag with:

 ...  

Make sure to leave all of the cards inside of the Flex component. The Flex component will recreate our grid by adding Flexbox along with the same properties that were on the grid before.

At this point, it should exactly the same as it did before.

Next, add Box to the import statement and then replace the first card with:

 Documentation → Find in-depth information about Next.js features and API.  

Similar to our Heading component, we’re setting our Box component “as” an tag allowing it to serve as a link. We then configure our style props to replicate our cards.

Inside of that, we use the Heading and Text component to recreate the actual content of the cards.

And after only changing the first card, we can now see the changes:

Now, we can go back and replace the other three cards with the same components to finish recreating our grid.

For fun, we can add a 5th card that links to Chakra UI:

 Chakra UI → Build accessible React apps & websites with speed.  

And with all of our changes, we can now see our recreated Next.js starting template!

Follow along with the commit!

Step 3: Making responsive components with Chakra UI

Part of what the default Next.js grid was able to provide was the ability for the cards to expand to full width once the size of the browser becomes small enough. This is particularly relevant at 600px, which typically means someone’s on a mobile device.

If we look at our page on a mobile device, we can see that our cards aren’t filling up the entire width.

Chakra allows us to set responsive styles with its baked in sizing, allowing us to easily recreate our responsive grid cards.

To do this, instead of passing in a single value to our style props, we can pass in an array.

For instance, on each of our Box components, let’s update the flexBasis prop to:

flexBasis={['auto', '45%']} 

Here, according to Chakra’s default responsive breakpoints , we’re saying that by default, we want our flexBasis to be set as auto. But for anything 480px and larger, again which is Chakra’s default first breakpoint, we set it to 45%.

Chakra considers its responsive styling to be mobile first, which is why you see the 480px act as a minimum size, not a maximum size.

And with that change, we can now see that on a large device, we still have our grid.

But now on mobile, our cards take up the entire width!

Using the array pattern works for all of the breakpoints, so if you wanted more control over your styles, Chakra lets you do that.

Follow along with the commit!

Step 4: Customizing the default Chakra UI theme

While Chakra provides a pretty great default theme, we also have the ability to customize it to our liking to match our brand or personal taste.

For instance, while the teal that we used for our Heading link is great and uses Chakra’s styles, what if I wanted to customize all links to use the purple that I use on my website?

To start, Chakra comes with a default purple, so we can update our link to use that purple:

Welcome to Next.js! 

And we see our change.

That looks great, but let’s update it to the exact purple I use.

Inside of pages/_app.js, we’re going to create a new object at the top of the page, where we spread the default theme creating a new theme object. We’ll also replace the theme prop with our new object:

const customTheme = { ...theme } function MyApp({ Component, pageProps }) { return (  

If we save and reload the page, it will look exactly the same.

Next, we want to update the colors, so in our custom theme object, let’s add the colors property, where we can then set our custom purple:

const customTheme = { ...theme, colors: { ...theme.colors, purple: '#692ba8' } } 

Note: you’ll see here that we’re also spreading theme.colors. If we don’t, we’ll be replacing the colors object with only the purple value, meaning we won’t have any other colors.

But if we reload the page, our link isn’t purple anymore!

Chakra typically uses ranges of colors which allows us to use different shades of each of the colors. In our Link component, we’re specifying purple.500 which we didn’t set to exist.

So to fix that, we can use a tool like Smart Swatch to get all of our color values that we need and set those in our custom theme object:

const customTheme = { ...theme, colors: { ...theme.colors, purple: { 50: '#f5e9ff', 100: '#dac1f3', 200: '#c098e7', 300: '#a571dc', 400: '#8c48d0', 500: '#722fb7', 600: '#59238f', 700: '#3f1968', 800: '#260f40', 900: '#10031a', } } } 

Tip: Smart Swatch actually lets you copy those values as a JavaScript object, making it easier to paste into our theme!

And now if we reload the page, we can see our purple!

While we used a range value here, we can also specify color variables without a range.

Say I wanted to leave the default Chakra purple “as is” but provide a way for me to reference my purple.

To do that, I could remove those purple values and add a new custom variable:

const customTheme = { ...theme, colors: { ...theme.colors, spacejelly: '#692ba8' } } 

Then update my Link to use that color:

Welcome to Next.js! 

And we can see that we’re now using our purple without overriding the original:

We can apply this to most parts of the styles of Chakra, including Typography and setting custom Breakpoints. It’s another way to make our project custom to our own while still taking advantage of the power of Chakra!

Follow along with the commit!

What else can you do with Chakra UI?

While we went through some simpler examples, it really opens the door to more complex style changes and controls that Chakra provides with its component APIs.

There are also a whole lot of awesome components that you can use to transform your website or application and make development fast and easy!

They even provide recipes that have some examples of how you can combine the components resulting in powerful functionality. This includes a responsive header and even adding animations with Framer Motion.

Follow me for more Javascript, UX, and other interesting things!

  • ? Follow Me On Twitter
  • ? Subscribe To My Youtube
  • ✉️ Sign Up For My Newsletter
  • ? Sponsor Me