chakra next
v2.4.2
@47ng/chakra-next 
Sistema de diseño obstinado para React, basado en Chakra UI + Next.js.
En su aplicación Next.js:
$ npm install @47ng/chakra-next Para resolver los tokens de tema en los modos de color, use useColorModeToken :
import { useColorModeToken } from '@47ng/chakra-next'
const fill = useColorModeToken ( 'red.500' , 'blue.500' )
const shadow = useColorModeToken ( 'md' , 'dark-lg' , 'shadows' )Se proporcionan los siguientes tokens semánticos:
body (sigue el Color de fondo HTML/Body/__ Siguiente)text.dimtext.dimmertext.dimmestcard.bgcard.shadow (haga que la sombra de la tarjeta sea más oscura en modo oscuro para destacarse) 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 >
</ >
) Use NavLink cuando desee un enlace para tener un estilo especial según la página actual.
Por defecto, Navlinks:
Ejemplo:
import { NavLink } from '@47ng/chakra-next'
export default ( ) => (
< >
< NavLink to = "/blog" > Blog </ NavLink >
</ >
)El enlace estará activo para las siguientes rutas:
| Camino | Activo |
|---|---|
/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 >
</ >
) A veces, desea que el Navlink esté activo solo en los partidos de ruta exactos:
import { NavLink , navLinkMatch } from '@47ng/chakra-next'
export default ( ) => (
< >
< NavLink to = "/home" shouldBeActive = { navLinkMatch . exact } >
Home
</ NavLink >
</ >
)También puede tener una lógica personalizada para determinar si un Navlink debe estar activo:
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 cambiará la URL actual a la que se da, cuando se monta.
import { Redirect } from '@47ng/chakra-next'
export default ( { loggedIn } ) => (
< > { loggedIn ? < Text > Hello ! </ Text > : < Redirect to = "/login" /> } </ >
) Por defecto, la redirección se empujará a la pila de historial de navegación. Puede reemplazar la pila de historial con el accesorio replace :
import { Redirect } from '@47ng/chakra-next'
export default ( ) => (
< >
< Redirect to = "/home" replace />
</ >
)Next.js Dynamic Raths también son compatibles:
import { Redirect } from '@47ng/chakra-next'
export default ( ) => (
< >
< Redirect to = "/blog/[slug]" as = "/blog/foo-bar" />
</ >
) Si desea redirigir a un enlace externo (no una ruta interna), deberá establecer el accesorio 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 />
</ >
)También puede aprobar opciones de transición:
< 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 } />
</ >
) Extiende chakra.svg con:
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 >
)Nota: Para usar tokens de tema para rellenos, golpes y otras propiedades de SVG, debe resolverlos primero:
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 >
)A veces desea representar un componente solo en el cliente y tener un esqueleto o un componente respaldado en el servidor, ya sea para SSR o salida estática.
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 >
</ >
) Encabezado con enlaces de navegación:
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 - Hecho con ❤️ por François Best.
