chakra next
v2.4.2
@47ng/chakra-next 
Système de conception d'opinion pour React, basé sur le chakra ui + next.js.
Dans votre application suivante.js:
$ npm install @47ng/chakra-next Pour résoudre les jetons à thème sur les modes de couleur, utilisez useColorModeToken :
import { useColorModeToken } from '@47ng/chakra-next'
const fill = useColorModeToken ( 'red.500' , 'blue.500' )
const shadow = useColorModeToken ( 'md' , 'dark-lg' , 'shadows' )Les jetons sémantiques suivants sont fournis:
body (suit le HTML / Body / __ Couleur de fond suivant)text.dimtext.dimmertext.dimmestcard.bgcard.shadow (rendre la carte l'ombre plus sombre en mode sombre pour se démarquer) import { RouteLink , OutgoingLink , ButtonRouteLink } from '@47ng/chakra-next'
export default ( ) => (
< >
{ /* Integrate Next.js routes with Chakra styles */ }
< RouteLink to = "/login" > Login </ RouteLink >
{ /* Use `as` for dynamic routes */ }
< RouteLink to = "/posts/[slug]" as = "/posts/foo" > Login </ RouteLink >
{ /* Make external links stand out */ }
< OutgoingLink href = "https://github.com" showExternalIcon >
GitHub
</ RouteLink >
{ /* For when a button looks better, still outputs an <a> tag */ }
< ButtonRouteLink to = "/logout" > Logout </ ButtonRouteLink >
</ >
) Utilisez NavLink lorsque vous voulez qu'un lien ait un style spécial en fonction de la page actuelle.
Par défaut, NavLinks:
Exemple:
import { NavLink } from '@47ng/chakra-next'
export default ( ) => (
< >
< NavLink to = "/blog" > Blog </ NavLink >
</ >
)Le lien sera actif pour les chemins suivants:
| Chemin | Actif |
|---|---|
/home | false |
/blog | true |
/blog/ | true |
/blog/foo | true |
import { NavLink } from '@47ng/chakra-next'
export default ( ) => (
< >
< NavLink
to = "/blog"
borderBottomWidth = "3px"
borderBottomColor = "transparent"
active = { { color : 'blue.500' , borderBottomColor : 'blue.500' } }
>
Blog
</ NavLink >
</ >
) Parfois, vous voulez que le NavLink soit actif uniquement sur les correspondances de route exactes:
import { NavLink , navLinkMatch } from '@47ng/chakra-next'
export default ( ) => (
< >
< NavLink to = "/home" shouldBeActive = { navLinkMatch . exact } >
Home
</ NavLink >
</ >
)Vous pouvez également avoir une logique personnalisée pour déterminer si un Navlink doit être actif:
import { NavLink , navLinkMatch } from '@47ng/chakra-next'
export default ( ) => (
< >
< NavLink
to = "/blog/[post]"
as = "/blog/another-blog-post?active=true"
shouldBeActive = { ( { to , as , router } ) =>
navLinkMatch . exact ( { to , as , router } ) &&
router ?. query . active === 'true'
}
>
Another Blog Post
</ NavLink >
</ >
) Redirect changera l'URL actuelle vers celle donnée, lorsqu'elle est montée.
import { Redirect } from '@47ng/chakra-next'
export default ( { loggedIn } ) => (
< > { loggedIn ? < Text > Hello ! </ Text > : < Redirect to = "/login" /> } </ >
) Par défaut, la redirection sera poussée sur la pile d'historique de navigation. Vous pouvez remplacer la pile d'historique par l'hélice replace :
import { Redirect } from '@47ng/chakra-next'
export default ( ) => (
< >
< Redirect to = "/home" replace />
</ >
)Les chemins dynamiques suivants sont également pris en charge:
import { Redirect } from '@47ng/chakra-next'
export default ( ) => (
< >
< Redirect to = "/blog/[slug]" as = "/blog/foo-bar" />
</ >
) Si vous souhaitez rediriger vers un lien externe (pas une route interne), vous devrez définir l'hélice external :
import { Redirect } from '@47ng/chakra-next'
export default ( ) => (
< >
< Redirect to = "https://example.com" external />
{ /* You can also have the history replaced with external URLs: */ }
< Redirect to = "https://example.com" external replace />
</ >
)Vous pouvez également passer des options de transition:
< Redirect to = "/home" shallow scroll = { false } /> import { Card , cardProps } from '@47ng/chakra-next'
export default ( ) => (
< >
{ /* Card as Box */ }
< Card > I'm in a card </ Card >
{ /* Apply Card styles to a custom component */ }
< MyChakraComponent { ... cardProps } />
</ >
) Étend chakra.svg avec avec:
role="img" import { Svg } from '@47ng/chakra-next'
export default ( ) => (
< Svg
aria-labelledby = "svg-demo-title svg-demo-desc"
viewBox = "0 0 24 24"
display = "block"
my = { 4 }
mx = "auto"
>
< title id = "svg-demo-title" > A red circle </ title >
< desc id = "svg-demo-desc" >
Svg lets you style SVG container tags with Chakra UI style props.
</ desc >
< circle fill = "red" cx = "12" cy = "12" r = "10" >
</ Svg >
)Remarque: Pour utiliser des jetons de thème pour les remplissages, les traits et autres propriétés SVG, vous devez les résoudre d'abord:
import { useToken } from '@chakra-ui/react'
export default ( ) => (
< Svg
aria-labelledby = "svg-demo-title svg-demo-desc"
viewBox = "0 0 24 24"
display = "block"
my = { 4 }
mx = "auto"
fill = { useToken ( 'colors' , 'red.500' ) } // Resolve theme tokens with `useToken`
>
< title id = "svg-demo-title" > A red circle </ title >
< desc id = "svg-demo-desc" >
Svg lets you style SVG container tags with Chakra UI style props.
</ desc >
< circle
// You can also use the CSS prop names directly:
fill = "var(--chakra-colors-red.500)"
cx = "12"
cy = "12"
r = "10"
>
</ Svg >
)Parfois, vous souhaitez rendre un composant uniquement sur le client et avoir un squelette ou un composant de secours rendu sur le serveur, que ce soit pour la sortie SSR ou statique.
import { NoSSR } from '@47ng/chakra-next'
export default ( ) => (
< >
< NoSSR > This is only rendered on the client </ NoSSR >
{ /* Skeleton is rendered on SSR/SSG, TheRealThing is rendered on the client.*/ }
< NoSSR fallback = { < Skeleton /> } >
< TheRealThing />
</ NoSSR >
</ >
) En-tête avec liens de navigation:
import { Box , Stack } from '@chakra-ui/core'
import { NavLink } from '@47ng/chakra-next'
export default ( ) => (
< Box as = "header" >
< Stack as = "nav" isInline >
< NavLink to = "/features" > Features </ NavLink >
< NavLink to = "/pricing" > Pricing </ NavLink >
< NavLink to = "/docs" > Documentation </ NavLink >
</ Stack >
</ Box >
) MIT - Fabriqué avec ❤️ par François meilleur.
