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莎（ 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）製成的❤️。