chakra next

@47ng/chakra-next

ระบบการออกแบบที่มีความคิดเห็นสำหรับ React โดยใช้ Chakra UI + Next.js.

คุณสมบัติ

• ธีมเริ่มต้นด้วยโทเค็นความหมาย
• Typescript 100%, transpiled เป็น ESM (ต้องการ next.js 12+)
• ส่วนประกอบ:
  • - ลิงค์
  • ◻การ์ด
  • - SVG
  • ➡เปลี่ยนเส้นทาง
  • - NOSSR
  • - อีกมากที่จะมา

การติดตั้ง

ในแอปถัดไปของคุณ:

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

นาวาลิงก์

ใช้ 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 />
  </ >
)

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 namespace ก่อน
• 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ที่ดีที่สุด