chakra next
v2.4.2
@47ng/chakra-next 
Система самоуверенного проектирования для React, на основе чакры ui + next.js.
В вашем приложении Next.js:
$ npm install @47ng/chakra-next Чтобы разрешить токены темы по цветным режимам, используйте useColorModeToken :
import { useColorModeToken } from '@47ng/chakra-next'
const fill = useColorModeToken ( 'red.500' , 'blue.500' )
const shadow = useColorModeToken ( 'md' , 'dark-lg' , 'shadows' )Предоставлены следующие семантические токены:
body (следует HTML/Body/__ Next Found Phore)text.dimtext.dimmertext.dimmestcard.bgcard.shadow (сделайте карту тень темнее в темном режиме, чтобы выделиться) 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 >
</ >
) Используйте NavLink , когда вы хотите, чтобы ссылка имела специальный стиль в зависимости от текущей страницы.
По умолчанию, Navlinks:
Пример:
import { NavLink } from '@47ng/chakra-next'
export default ( ) => (
< >
< NavLink to = "/blog" > Blog </ NavLink >
</ >
)Ссылка будет активной для следующих путей:
| Путь | Активный |
|---|---|
/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 >
</ >
) Иногда вы хотите, чтобы Navlink был активным только на точных матчах маршрута:
import { NavLink , navLinkMatch } from '@47ng/chakra-next'
export default ( ) => (
< >
< NavLink to = "/home" shouldBeActive = { navLinkMatch . exact } >
Home
</ NavLink >
</ >
)Вы также можете иметь пользовательскую логику, чтобы определить, должен ли NAVLINK быть активным:
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 изменит текущий URL на тот, который дан, при установке.
import { Redirect } from '@47ng/chakra-next'
export default ( { loggedIn } ) => (
< > { loggedIn ? < Text > Hello ! </ Text > : < Redirect to = "/login" /> } </ >
) По умолчанию перенаправление будет перенаправлено в стек истории навигации. Вместо этого вы можете заменить стек истории на replace :
import { Redirect } from '@47ng/chakra-next'
export default ( ) => (
< >
< Redirect to = "/home" replace />
</ >
)Следующие динамические пути также поддерживаются:
import { Redirect } from '@47ng/chakra-next'
export default ( ) => (
< >
< Redirect to = "/blog/[slug]" as = "/blog/foo-bar" />
</ >
) Если вы хотите перенаправить на внешнюю ссылку (не внутренний маршрут), вам придется установить 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 />
</ >
)Вы также можете пройти варианты перехода:
< 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 } />
</ >
) Распространяет chakra.svg с:
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 >
)Примечание. Чтобы использовать токены темы для заполнения, инсультов и других свойств SVG, вы должны сначала разрешить их:
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 >
)Иногда вы хотите отображать компонент только на клиенте и иметь скелет или запасной компонент, отображаемый на сервере, будь то SSR или статический вывод.
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 >
</ >
) Заголовок с навигационными ссылками:
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 - Сделано с François Best.
