chakra next

@47ng/chakra-next

Chakra UI + Next.js를 기반으로 React를위한 의견이있는 설계 시스템

특징

• 시맨틱 토큰이있는 기본 테마
• 100% 타입 스크립트, ESM으로 변환되었습니다 (필요에 따라 JS 12+)
• 구성 요소 :
  • ? 모래밭
  • ◻️ 카드
  • ? SVG
  • ➡️ 리디렉션
  • ? nossr
  • ? 앞으로 더

설치

다음 .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 >
  </ >
)

네비 링크가 활성화되어야하는지 여부를 결정하기 위해 사용자 정의 로직을 가질 수도 있습니다.

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

다음 .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 >
)

nossr

때로는 클라이언트에서만 구성 요소를 렌더링하고 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의 with️로 만든.