Düz CSS ile React’te Çarpıcı Bir Breadcrumb Bileşeni Oluşturun – JSManifest

Düz CSS ile React'te Çarpıcı Bir Breadcrumb Bileşeni Oluşturun – JSManifest

Hiç kişisel bir cihazla bir web sitesinde gezindiğiniz ve o sırada sitenin hangi bölümünde bulunduğunuzu merak edip nerede olduğunu bulamadığınız oldu mu? Endişelenme, yalnız değilsin.

Ve yaptıysanız, kaç kullanıcının benzer bir deneyim yaşadığını düşünüyorsunuz?

Bu, web geliştirme topluluğundaki geliştiricilerin ortak bir senaryodur. alınmış web uygulamalarında kullanıcı deneyimini geliştirmek için dikkate alıyor.

Şimdi benim gibiysen, galeta unu arayüz hakkında konuşurken kullanılan son derece garip bir terimdir.

Eğer ilk zamanlayıcıysan, yardım etmeme izin ver sen potansiyel olarak kafa karıştıran bir kavramı açıklığa kavuşturmak ekmek kırıntısı şu an aklınızda olan.

Tanımlara bakıldığında sözlük.comterminoloji için iki resmi tanımımız var:

  1. Kuru veya yumuşak bir ekmek kırıntısı (Hepimiz bu lezzetli yiyeceklerle kendimizi sağlıklı tutmaktan mı bahsediyoruz? diyet lifi kaynakları uzun vadede web geliştiricileri olarak verimli kalmamıza yardımcı olmak için mi?)
  2. Bir web sitesinin veya web tabanlı uygulamanın mevcut sayfasında, genellikle en üstte bulunan, sayfanın bir içerik hiyerarşisi veya tarama geçmişi içindeki konumunu gösteren ve uygun bir gezinme aracı sağlayan bir dizi metin bağlantısı.

Tahmin edebileceğiniz gibi, iki numaralı madde işaretiydi 🙂

Craigslist gibi web siteleri, uygulamalarında kullanıcının konumunu tanımlamak için bir kırıntı bileşeni kullanır ve bazı yönlerden şaşırtıcı bir şekilde kullanıcı deneyimini geliştirir!

Şuna benzeyen bir gezinme çubuğu geliştirmiş olabilirsiniz:

Şimdi bunda yanlış bir şey yok, ama yaptıysanız ve bu son derece garip boş alana başka ne yerleştirebileceğinizi merak ettiyseniz, bir kırıntı bileşeni aslında işi oldukça iyi yapabilir 🙂

Bu öğreticinin sonunda, bunun gibi bir kırıntı bileşeninin nasıl oluşturulacağını öğrenebilmelisiniz:

son sonuç

Bir kırıntı oluşturacağınızı belirtmekte fayda var. bileşen bu olacak izin vermek sen eklemek en mantık arabirimdeki bileşenle takıldığında bir kırıntı uygulaması – ancak, mantığı uygulamak ekmek kırıntısı biraz daha karmaşıktır. Mantığın nasıl uygulanacağına dair bir kaynak kodu görmek istiyorsanız, bir örnek görüntüleyebilirsiniz. burada.

Şimdi başlayalım!

Bu derste, create-react-app ile hızlı bir şekilde bir tepki projesi oluşturacağız.

(Deponun bir kopyasını github’dan almak istiyorsanız, tıklayın burada).

Devam edin ve aşağıdaki komutu kullanarak bir proje oluşturun. Bu eğitim için projemizi arayacağım ekmek kırıntısı.

npx create-react-app breadcrumb

Şimdi bittiğinde dizine gidin:

Ana girişin içinde src/index.js sadece bileşene odaklanabilmemiz için onu biraz temizleyeceğiz:

kaynak/index.js

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
import './styles.css'
import * as serviceWorker from './serviceWorker'

ReactDOM.render(<App />, document.getElementById('root'))

serviceWorker.unregister()

Şimdi oluştur src/App.js:

kaynak/App.js

import React from 'react'

const App = () => <div />

export default App

kullanacağız App.js ile kırıntı bileşenlerini oluştur. Bunu ayrıca bazı örnek rotaları tanımlamak için de kullanacağız, böylece daha sonra içerik haritasını çalışırken görebiliriz.

Devam edeceğiz ve bir src/pages dizin ve onlar için her bir dosya oluşturarak örnek yolları ekleyin:


import React from 'react'

const Home = ({ children }) => (
  <div>
    <h2>Home</h2>
    <div>{children}</div>
  </div>
)

export default Home


import React from 'react'

const Dashboard = ({ children }) => (
  <div>
    <h2>Dashboard</h2>
    <div>{children}</div>
  </div>
)

export default Dashboard


import React from 'react'

const Contact = ({ children }) => (
  <div>
    <h2>Contact</h2>
    <div>{children}</div>
  </div>
)

export default Contact


import React from 'react'

const About = ({ children }) => (
  <div>
    <h2>About</h2>
    <div>{children}</div>
  </div>
)

export default About


import React from 'react'

const Blog = ({ children }) => (
  <div>
    <h2>Blog</h2>
    <div>{children}</div>
  </div>
)

export default Blog

Ardından, devam edip bunları App.js bileşen ve bunları bir yönlendirici böylece kırıntı bileşenimiz onlara etki edebilir. Herhangi bir yönlendirme kitaplığını kullanabilirsiniz, ancak bu eğitim için kullanacağım @erişim/yönlendirici:

kaynak/App.js

import React from 'react'
import { Router } from '@reach/router'
import Home from './pages/home'
import Dashboard from './pages/dashboard'
import Contact from './pages/contact'
import About from './pages/about'
import Blog from './pages/blog'

const App = () => (
  <div className='app'>
    <Router>
      <Home path='/' />
      <Dashboard path='/dashboard' />
      <Contact path='/contact' />
      <About path='/about' />
      <Blog path='/blog' />
    </Router>
  </div>
)

export default App

Ve işte benim başlangıcım css stilleri:

kaynak/styles.css

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
}

.app {
  padding: 12px;
}

Daha sonra devam edeceğiz ve ekmek kırıntısı içindeki rota yolu başına kırıntı öğelerini oluşturabilmemiz için bileşen:

kaynak/Breadcrumb.js

import React from 'react'

const Breadcrumb = ({ children }) => {
  return <div>{children}</div>
}

export default Breadcrumb

Şimdi bunu şuradan içe aktarabilirsiniz: App.js ve render yönteminin içinde işleyin.

Ek olarak, bazı rotaları bir dizi olarak tanımladım, böylece onları kırıntı bileşeni. (Not: Gerçek bir dünya senaryosunda, tarayıcının konumu hiyerarşide daha da ilerledikçe oluşturulan alt yollar sağlarsınız – ancak burada yalnızca etkin bir kırıntı arabiriminin uygulamasını göstermek için yalnızca en üst düzey yolları kullanacağız)

kaynak/App.js

import React from 'react'
import { Link, Router } from '@reach/router'
import Home from './pages/home'
import Dashboard from './pages/dashboard'
import Contact from './pages/contact'
import About from './pages/about'
import Blog from './pages/blog'
import Breadcrumb from './Breadcrumb'

const items = [
  { to: "https://jsmanifest.com/", label: 'Home' },
  { to: '/dashboard', label: 'Dashboard' },
  { to: '/contact', label: 'Contact' },
  { to: '/about', label: 'About' },
  { to: '/blog', label: 'Blog' },
]

const App = () => (
  <div className='app'>
    <Breadcrumb>
      {items.map(({ to, label }) => (
        <Link key={to} to={to}>
          {label}
        </Link>
      ))}
    </Breadcrumb>
    <Router>
      <Home path='/' />
      <Dashboard path='/dashboard' />
      <Contact path='/contact' />
      <About path='/about' />
      <Blog path='/blog' />
    </Router>
  </div>
)

export default App

Şimdi şöyle bir şey görmelisiniz:

1

Şimdiye kadar bir kırıntı gibi görünmeye başladı! Ancak mevcut durumda bu Might 90’larda yeterliydi. Bu yüzden, bunu nasıl daha iyi geliştirebileceğimizin yollarını düşünmeye devam etmeliyiz.

sağlayarak başlayabiliriz. sarıcı her kırıntı öğesinin etrafında. Ek olarak, bu öğeleri bir liste olarak oluşturduğumuz için, eskiden bir öğe olan öğeleri dönüştürebiliriz. Sıralı Liste bu konuda biraz daha resmi olmamız için:

kaynak/Breadcrumb.js

const Breadcrumb = (props) => {
  let children = React.Children.toArray(props.children)

  children = children.map((child, index) => (
    <BreadcrumbItem key={`breadcrumb_item${index}`}>{child}</BreadcrumbItem>
  ))

  return <ol>{children}</ol>
}

export default Breadcrumb

ve için Kırıntı Öğesi bileşen, bunu en üstte tanımlayabiliriz:

const BreadcrumbItem = ({ children, ...props }) => (
  <li className='breadcrumb-item' {...props}>
    {children}
  </li>
)

İşte şimdi nasıl göründüğü:

2

Uyguladığımızdan beri Sıralı Liste ve bir listesi liste öğesi kırıntı bileşenimizin öğelerini değiştirmeliyiz yön öğelerin karşı karşıya olduğunu. Sayısal karakterleri de kaldırmamız gerekiyor.

ile bu görevleri gerçekleştirebiliriz. düz css:

kaynak/styles.css

ol {
  list-style: none;
  display: flex;
  align-items: center;
}

3

Kırıntı bileşeninde fark etmiş olabileceğiniz garip bir şey şu satırdır:

let children = React.Children.toArray(props.children)

Bunun iyi bir nedeni var. Öğelerimizi kırıntı bileşeninin doğrudan çocuğu olarak oluşturduğumuzda şunu yaptık:

const App = () => (
  <div className='app'>
    <Breadcrumb>
      {items.map(({ to, label }) => (
        <Link key={to} to={to}>
          {label}
        </Link>
      ))}
    </Breadcrumb>
    <Router>
      <Home path='/' />
      <Dashboard path='/dashboard' />
      <Contact path='/contact' />
      <About path='/about' />
      <Blog path='/blog' />
    </Router>
  </div>
)

React, doğrudan altında oluşturulan her bir bileşeni bir dizi birden fazla bileşen olduğu sürece.

Bu bileşen dizisini çeşitli yöntemler kullanarak değiştirdiğimizde (örn. dilim), tepki ihtiyacı bir anahtar her seferinde onlara aktarılacak. kullandığımızda React.Children.toArray çocuklarımızı sarmak, tepki vermek tüm temel gereksinimleri otomatik olarak atar ve işler sonraki kullanımlar için orijinal çocuklara. Mükemmel! Bileşen kodumuza gereksiz çirkin kod uygulamamız gerekmiyor. Teşekkürler tepki 🙂

Ekmek kırıntıları genellikle bir ayırıcı Kullanıcılar için kullanımı ve okunması daha kolay olacak şekilde öğelerinin her birini ayırmak. Bir ayırıcı uyguladığınızda (çoğunlukla eğik çizgi gibi “https://jsmanifest.com/”) kullanıcılar hangi parçaların birbirinden ayrı olduğunu söyleyebileceklerdir. Bazen – bazı ekranlarda, kelimelerinizi beklenmedik bir şekilde birbirine çok yakın bulabilirsiniz, bu nedenle bu, görünürlük sorunlarına yardımcı olur.

Sonra devam edeceğiz ve bir ekleyeceğiz .azaltmak çocuklara bu ayırıcıları yerleştirmek için mantığı uygulayabilmemiz için:

kaynak/Breadcrumb.js

import React from 'react'

const BreadcrumbItem = ({ children, ...props }) => (
  <li className='breadcrumb-item' {...props}>
    {children}
  </li>
)

const Breadcrumb = (props) => {
  let children = React.Children.toArray(props.children)

  children = children.map((child, index) => (
    <BreadcrumbItem key={`breadcrumb_item${index}`}>{child}</BreadcrumbItem>
  ))

  const lastIndex = children.length - 1

  children = children.reduce((acc, child, index) => {
    const notLast = index < lastIndex
    if (notLast) {
      acc.push(child, "https://jsmanifest.com/")
    } else {
      acc.push(child)
    }
    return acc
  }, [])

  return <ol>{children}</ol>
}

export default Breadcrumb

4

(Not: İçerik haritasının sonunda gereksiz yere eğik çizgi oluşturmamak için koşullu bir kontrol uyguladık)

Ekran görüntüsünden, her bir kırıntı öğesini ayırdığımızı kesinlikle görebiliriz. Ancak, bazı ekranlarda kelimelerin ne kadar yakın olabileceğinden dolayı bazı kullanıcıların kelimeleri net görememe konusundaki önceki yorumuma dönersek, aynı sorun şimdi ayırıcılarda tekrar ortaya çıktı.

Bu yüzden ayırıcı için bir sarmalayıcı uygulayacağız ve bir sınıf adı sağdaki destek li eleman, böylece aralığı biraz değiştirebiliriz:

kaynak/Breadcrumb.js

const BreadcrumbSeparator = ({ children, ...props }) => (
  <li className='breadcrumb-separator' {...props}>
    {children}
  </li>
)

kaynak/styles.css

.breadcrumb-separator {
  color: #333;
  margin: auto 6px;
  user-select: none;
}

Ve şimdi, sadece ayırıcımızı yeni sarmalayıcı bileşenle sarmamız gerekiyor:

children = children.reduce((acc, child, index) => {
    const notLast = index < lastIndex
    if (notLast) {
      acc.push(
        child,
        <BreadcrumbSeparator key={`breadcrumb_sep${index}`}>
          /
        </BreadcrumbSeparator>,
      )
    } else {
      acc.push(child)
    }
    return acc
  }, [])

5

Mükemmel!

Ancak bazen bir geliştirici olarak ne tür bir ayırıcı kullanacağımızı değiştirmek isteyebiliriz. ok. Arayanın bir pervane olarak özel bir ayırıcıdan geçmesine izin vererek bunu özelleştirme seçeneği verebiliriz:

kaynak/Breadcrumb.js

const Breadcrumb = ({ separator = "https://jsmanifest.com/", ...props }) => {
  let children = React.Children.toArray(props.children)

  children = children.map((child, index) => (
    <BreadcrumbItem key={`breadcrumb_item${index}`}>{child}</BreadcrumbItem>
  ))

  const lastIndex = children.length - 1

  children = children.reduce((acc, child, index) => {
    const notLast = index < lastIndex
    if (notLast) {
      acc.push(
        child,
        <BreadcrumbSeparator key={`breadcrumb_sep${index}`}>
          {separator}
        </BreadcrumbSeparator>,
      )
    } else {
      acc.push(child)
    }
    return acc
  }, [])

  return <ol>{children}</ol>
}

kaynak/App.js

const App = () => (
  <div className='app'>
    <Breadcrumb separator='/'>
      {items.map(({ to, label }) => (
        <Link key={to} to={to}>
          {label}
        </Link>
      ))}
    </Breadcrumb>
    <Router>
      <Home path='/' />
      <Dashboard path='/dashboard' />
      <Contact path='/contact' />
      <About path='/about' />
      <Blog path='/blog' />
    </Router>
  </div>
)

6

kaynak/App.js

const Separator = ({ children, ...props }) => (
  <span style={{ color: 'teal' }} {...props}>
    {children}
  </span>
)

const items = [
  { to: "https://jsmanifest.com/", label: 'Home' },
  { to: '/dashboard', label: 'Dashboard' },
  { to: '/contact', label: 'Contact' },
  { to: '/about', label: 'About' },
  { to: '/blog', label: 'Blog' },
]

const App = () => (
  <div className='app'>
    <Breadcrumb separator={<Separator>/</Separator>}>
      {items.map(({ to, label }) => (
        <Link key={to} to={to}>
          {label}
        </Link>
      ))}
    </Breadcrumb>
    <Router>
      <Home path='/' />
      <Dashboard path='/dashboard' />
      <Contact path='/contact' />
      <About path='/about' />
      <Blog path='/blog' />
    </Router>
  </div>
)

7

Bir kırıntı çok uzadığında ne olur?

En yaygın olarak, büyük ölçekli bir uygulamada, bir kırıntıyı olması gerekenden daha uzun hale getirebilecek bol miktarda yol olabilir.

Bununla mücadele etmek istiyorsak, bilinen bir çözüm, bir daraltıcı.

Devam edeceğiz ve bir daraltıcı bileşen oluşturacağız.

Devam et ve oluştur src/BreadcrumbCollapser.js. Bu kullanılacak çöküş içerik haritası bileşeninin bazı öğelerini gizleyebilmesi için arabirimden öğeler:

src/BreadcrumbCollapser.js

import React from 'react'
import { MdMoreHoriz } from 'react-icons/md'

const BreadcrumbCollapser = (props) => (
  <li className='breadcrumb-collapser' {...props}>
    <MdMoreHoriz />
  </li>
)

export default BreadcrumbCollapser

kaynak/styles.css

.breadcrumb-separator {
  color: #333;
  margin: auto 6px;
  user-select: none;
}

.breadcrumb-collapser {
  display: flex;
  align-items: center;
}

.breadcrumb-collapser svg {
  cursor: pointer;
  transition: all 0.2s ease-out;
  color: #000;
  width: 25px;
  height: 25px;
}
.breadcrumb-collapser svg:hover,
.breadcrumb-collapser svg:focus {
  color: #999;
  transform: scale(1.15);
}

.breadcrumb-collapser svg:active {
  color: #333;
}

Herhangi bir “çöktürücü” biçimini tanıttığımızda, bunu bilmemiz gerekir. ne zaman veya değilse daraltmak ve kullanıcının bu davranışı kontrol etme becerisine sahip olmak, bir daraltıcının kullanıcı deneyimini geliştirmenin harika bir yoludur.

adlı özel bir kanca oluşturacağım useBreadcrumb.js ve bir ayarla durum aranan genişletilmiş. Arayüzün bu bilgiye ihtiyacı olacak, bu yüzden özel kancadan döndürülür:

src/useBreadcrumb.js

import { useState } from 'react'

const useBreadcrumb = () => {
  const [expanded, setExpanded] = useState(false)

  const open = () => setExpanded(true)

  return {
    expanded,
    open,
  }
}

export default useBreadcrumb

Ayrı bir dosyada özel bir tepki kancası oluşturmak biraz abartılı olabilir, ancak geliştirme akışıma getirdiği ekstra organizasyonel alışkanlıkları seviyorum 🙂 Bu tamamen isteğe bağlı ve bunun yerine durumu doğrudan kırıntı bileşeni.

Daha sonra, hem özel kancayı hem de içerik kırıntısı daraltıcısını Breadcrumb.js dosya:

kaynak/Breadcrumb.js

import React from 'react'
import useBreadcrumb from './useBreadcrumb'
import BreadcrumbCollapser from './BreadcrumbCollapser'

Özel kancayı kullanma:

const Breadcrumb = ({ separator, ...props }) => {
  let children = React.Children.toArray(props.children)

  const { expanded, open } = useBreadcrumb()

Daraltılmış veya gösterilen öğelerin miktarını kontrol etmek için arayanın iletebileceği özel bir destek sağlamak muhtemelen yardımcı olacaktır, bu nedenle arayanın özel bir geçiş yapmasına izin veriyoruz. çöküş kırıntı daraltıcıya uygulamak için kullanabileceğimiz prop:

const Breadcrumb = ({ separator, collapse = {}, ...props }) => {
  let children = React.Children.toArray(props.children)

  const { expanded, open } = useBreadcrumb()

  const { itemsBefore = 1, itemsAfter = 1, max = 4 } = collapse

  const totalItems = children.length
  const lastIndex = totalItems - 1

Bu, arayanın kontrol etme yeteneğine sahip olmasını sağlayacaktır. ne görmek, gerekirse kullanıcı arayüzleri için biraz daha uyumlu olacak şekilde uyarlamak.

Ve son olarak, daraltıcıyı oluşturma çocuklarına uygulamak:

if (!expanded || totalItems <= max) {
  children = [
    ...children.slice(0, itemsBefore),
    <BreadcrumbCollapser
      title='Expand'
      key='collapsed-seperator'
      onClick={open}
    />,
    ...children.slice(totalItems - itemsAfter, totalItems),
  ]
}

Şimdiye kadarki tüm kırıntı uygulamamız:

kaynak/Breadcrumb.js

import React from 'react'
import useBreadcrumb from './useBreadcrumb'
import BreadcrumbCollapser from './BreadcrumbCollapser'

const BreadcrumbItem = ({ children, ...props }) => (
  <li className='breadcrumb-item' {...props}>
    {children}
  </li>
)

const BreadcrumbSeparator = ({ children, ...props }) => (
  <li className='breadcrumb-separator' {...props}>
    {children}
  </li>
)

const Breadcrumb = ({ separator, collapse = {}, ...props }) => {
  let children = React.Children.toArray(props.children)

  const { expanded, open } = useBreadcrumb()

  const { itemsBefore = 1, itemsAfter = 1, max = 4 } = collapse

  const totalItems = children.length
  const lastIndex = totalItems - 1

  children = children.map((child, index) => (
    <BreadcrumbItem key={`breadcrumb_item${index}`}>{child}</BreadcrumbItem>
  ))

  children = children.reduce((acc, child, index) => {
    const notLast = index < lastIndex
    if (notLast) {
      acc.push(
        child,
        <BreadcrumbSeparator key={`breadcrumb_sep${index}`}>
          {separator}
        </BreadcrumbSeparator>,
      )
    } else {
      acc.push(child)
    }
    return acc
  }, [])

  if (!expanded || totalItems <= max) {
    children = [
      ...children.slice(0, itemsBefore),
      <BreadcrumbCollapser
        title='Expand'
        key='collapsed-seperator'
        onClick={open}
      />,
      ...children.slice(totalItems - itemsAfter, totalItems),
    ]
  }

  return <ol>{children}</ol>
}

export default Breadcrumb

8

Bağlantılar, oldukça basit ve eski oldukları için biraz özelleştirmeye ihtiyaç duyar. Bunu değiştirelim:

a {
  text-decoration: none;
  font-weight: 400;
  color: #424548;
}

a:hover {
  color: #1da2b3;
}

9

Daha işlevsel bir insansanız ve bileşenimiz size pek çekici gelmiyorsa, onu biraz daha çekici olacak şekilde yeniden düzenlemeniz gayet iyi olur:

kaynak/Breadcrumb.js

const toBreadcrumbItem = (child, index) => (
  <BreadcrumbItem key={`breadcrumb_item${index}`}>{child}</BreadcrumbItem>
)

const withSeparator = (lastIndex, separator) => (acc, child, index) => {
  const notLast = index < lastIndex
  if (notLast) {
    acc.push(
      child,
      <BreadcrumbSeparator key={`breadcrumb_sep${index}`}>
        {separator}
      </BreadcrumbSeparator>,
    )
  } else {
    acc.push(child)
  }
  return acc
}

const withCollapse = ({
  itemsBefore,
  itemsAfter,
  max,
  children,
  totalItems,
  open,
}) => [
  ...children.slice(0, itemsBefore),
  <BreadcrumbCollapser
    title='Expand'
    key='collapsed-seperator'
    onClick={open}
  />,
  ...children.slice(totalItems - itemsAfter, totalItems),
]
const Breadcrumb = ({ separator, collapse = {}, ...props }) => {
  let children = React.Children.toArray(props.children)

  const { expanded, open } = useBreadcrumb()

  const { itemsBefore = 1, itemsAfter = 1, max = 4 } = collapse

  const totalItems = children.length
  const lastIndex = totalItems - 1

  children = children
    .map(toBreadcrumbItem)
    .reduce(withSeparator(lastIndex, separator), [])

  if (!expanded || totalItems <= max) {
    children = withCollapse({
      itemsBefore,
      itemsAfter,
      max,
      children,
      totalItems,
      open,
    })
  }

  return <ol>{children}</ol>
}

10

Burada akılda tutulması gereken bir şey, eğer biz yapmadı kullanmak React.Children.toArray çocuklarımızı sarmak için anahtar alt listeler oluşturmadan konsoldaki hatalar anahtar onlara.

Aradaki simgelerin nasıl oluşturulacağını mı merak ediyorsunuz? Bunu başarmanın birden fazla yolu vardır, ancak bir yol şöyle olabilir:

kaynak/App.js

import React from 'react'
import { Link, Router } from '@reach/router'
import { MdHome, MdSettings, MdEmail, MdInfo, MdWeb } from 'react-icons/md'
import Home from './pages/home'
import Dashboard from './pages/dashboard'
import Contact from './pages/contact'
import About from './pages/about'
import Blog from './pages/blog'
import Breadcrumb from './Breadcrumb'

const Separator = ({ children, ...props }) => (
  <span style={{ color: 'teal' }} {...props}>
    {children}
  </span>
)

const options = {
  icons: {
    Home: MdHome,
    Dashboard: MdSettings,
    Contact: MdEmail,
    About: MdInfo,
    Blog: MdWeb,
  },
  items: [
    { to: "https://jsmanifest.com/", label: 'Home' },
    { to: '/dashboard', label: 'Dashboard' },
    { to: '/contact', label: 'Contact' },
    { to: '/about', label: 'About' },
    { to: '/blog', label: 'Blog' },
  ],
}

const App = () => (
  <div className='app'>
    <Breadcrumb separator={<Separator>/</Separator>}>
      {options.items.map(({ to, label }) => {
        const Icon = options.icons[label]
        return (
          <div key={to} className='some-custom-classname'>
            {Icon && <Icon />}
            <Link to={to}>{label}</Link>
          </div>
        )
      })}
    </Breadcrumb>
    <Router>
      <Home path='/' />
      <Dashboard path='/dashboard' />
      <Contact path='/contact' />
      <About path='/about' />
      <Blog path='/blog' />
    </Router>
  </div>
)

export default App

11

12

13

Ve son olarak, daha önce gerçek dünya senaryosunda, bir hiyerarşi aracılığıyla, kırıntı bileşeninde oluşturulan alt rotalara sahip olacağımızdan bahsetmiştim. Bu derste üst düzey rotalar kullandık (ki bu ideal değil ama arayüzün nasıl uygulanabileceğini göstermek istedim).

Bu eğitimdeki taktikler kullanılarak arayüze daha gerçek bir yaklaşım elde edilebilir:

son sonuç

Güzel!

Çözüm

Ve bu, bu eğitimin sonunu tamamlıyor! Önceki yazılarımı okuduysanız, muhtemelen sonuç kısmında fazla bir şey söylemediğimi fark etmişsinizdir – çünkü yukarıda her şey zaten söylendi! 🙂

Bir dahaki sefere görüşürüz çocuklar ve daha kaliteli gönderilere bakın!

Bir cevap yazın

E-posta hesabınız yayımlanmayacak.