chakra next

@47ng/chakra-next

نظام تصميم الرأي لـ React ، استنادًا إلى شقرا UI + Next.js.

سمات

• الموضوع الافتراضي مع الرموز الدلالية
• 100 ٪ TypeScript ، تم نقله إلى ESM (يتطلب next.js 12+)
• عناصر:
  • ؟ الروابط
  • ◻ البطاقات
  • ؟ SVG
  • ➡ إعادة توجيه
  • ؟ nossr
  • ؟ المزيد في المستقبل

تثبيت

في تطبيق 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 الحالي إلى العنوان المعطى ، عند تركيبه.

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

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

رخصة

معهد ماساتشوستس للتكنولوجيا - مصنوعة من ❤ من قبل فرانسوا أفضل.