chakra next

@47ng/chakra-next

基于Chakra UI + Next.js的React的自明设计系统

特征

• 语义令牌的默认主题
• 100％打字稿，转到ESM（需要Next.js 12+）
• 成分：
  • ？链接
  • ◻️卡
  • ？ SVG
  • ➡️重定向
  • ？诺斯
  • ？还有更多

安装

在您的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/__下一个背景颜色）
  • text.dim
  • text.dimmer
  • text.dimmest
  • card.bg
• 阴影：
  • 卡片莎（ card.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 >
  </ >
) 

navlinks

当您想要链接以根据当前页面具有特殊样式时，请使用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更改为给定的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 />
  </ >
)

还支持Next.js动态路径：

 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 } />
  </ >
)

SVG

与以下方式扩展chakra.svg

• 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 >
) 

执照

麻省理工学院 - 由弗朗索瓦（FrançoisBest）制成的❤️。