Bir kenar çubuğu gezinme menüsü tipik olarak dikey bir bağlantı listesinden oluşur. React-router-dom kullanarak React'te bir dizi bağlantı oluşturabilirsiniz.
Materyal UI simgelerini içeren bağlantılar içeren bir React yan gezinme menüsü oluşturmak için bu adımları izleyin. Bağlantılar, tıkladığınızda farklı sayfalar oluşturacaktır.
Bir React Uygulaması Oluşturma
zaten varsa tepki projesi, sonraki adıma geçmekten çekinmeyin.
React ile hızlı bir şekilde çalışmaya başlamak için create-react-app komutunu kullanabilirsiniz. Tüm bağımlılıkları ve yapılandırmayı sizin için yükler.
React-sidenav adlı bir React projesi oluşturmak için aşağıdaki komutu çalıştırın.
npx oluşturmak-tepki-uygulama tepki-sidenav
Bu, başlamanıza yardımcı olacak bazı dosyalar içeren bir tepki-sidenav klasörü oluşturacaktır. Bu klasörü biraz temizlemek için src klasörüne gidin ve App.js'nin içeriğini şununla değiştirin:
içe aktarmak './App.css';işlevUygulama() {
dönüş (
<div sınıfıAdı="Uygulama"></div>
);
}
ihracatvarsayılan Uygulama;
Navigasyon Bileşenini Oluşturma
Oluşturacağınız navigasyon bileşeni şu şekilde görünecektir:
Oldukça basit, ancak işiniz bittiğinde, ihtiyaçlarınıza göre değiştirebilmelisiniz. Üstteki çift ok simgesini kullanarak gezinme bileşenini daraltabilirsiniz:
Daraltılmış olmayan görünümü oluşturarak başlayın. Ok simgesinin yanı sıra kenar çubuğu bir öğe listesi içerir. Bu öğelerin her birinin bir simgesi ve bir metni vardır. Her biri için tekrar tekrar bir öğe oluşturmak yerine, her öğe için verileri bir dizide saklayabilir ve ardından bir harita işlevini kullanarak üzerinde yineleyebilirsiniz.
Göstermek için, lib adlı yeni bir klasör oluşturun ve navData.js adlı yeni bir dosya ekleyin.
içe aktarmak Ana SayfaSimge itibaren '@mui/icons-material/Ev';
içe aktarmak SeyahatKeşfetSimgesi itibaren '@mui/icons-material/TravelExplore';
içe aktarmak Çubuk GrafikSimgesi itibaren '@mui/icons-material/BarChart';
içe aktarmak AyarlarSimgesi itibaren '@mui/icons-material/Ayarlar';
ihracatconst navData = [
{
kimlik: 0,
simge: <Ana SayfaSimge/>,
Metin: "Ev",
bağlantı: "/"
},
{
kimlik: 1,
simge: <SeyahatKeşfetSimgesi/>,
Metin: "Keşfetmek",
bağlantı: "keşfetmek"
},
{
kimlik: 2,
simge: <BarGrafikSimge/>,
Metin: "İstatistik",
bağlantı: "İstatistik"
},
{
kimlik: 3,
simge: <AyarlarSimge/>,
Metin: "Ayarlar",
bağlantı: "ayarlar"
}
]
Yukarıda kullanılan simgeler Material UI kitaplığındandır, bu nedenle önce bu komutu kullanarak onu kurun:
npm kurulumu @mui/material @duygu/react @duygu/styled
npm kurulumu @mui/icons-material
Ardından, adlı bir klasör oluşturun Bileşenler ve adlı yeni bir bileşen ekleyin Sidenav.js.
Bu dosyada, navData'yı ../lib'den içe aktarın ve bunun için iskeleti oluşturun. yan navigasyon işlev:
// Sidenav.js'de
içe aktarmak { navData } itibaren "../lib/navData";
ihracatvarsayılanişlevyan navigasyon() {
dönüş (
<div>
</div>
)
}
Bağlantıları oluşturmak için bu bileşendeki div öğesini şu şekilde değiştirin:
<div>
<düğme className={styles.menuBtn}>
<KlavyeÇiftOkSolSolSimge />
</button>
{navData.map (öğe =>{
dönüş <div anahtarı={item.id} className={styles.sideitem}>
{öğe.simge}
<span className={styles.linkText}>{öğe.metin}</span>
</div>
})}
</div>Bu bileşen, harita işlevindeki her yineleme için simgeyi ve bağlantı metnini içeren bir gezinme bağlantısı oluşturur.
Düğme öğesi, Malzeme Kullanıcı Arayüzü kitaplığındaki sol ok simgesini tutar. Bu kodu kullanarak bileşenin en üstünde içe aktarın.
içe aktarmak KlavyeÇiftOkSolSimge itibaren '@mui/icons-material/KeyboardDoubleArrowLeft';
Ayrıca, sınıf adlarının bir stil nesnesine atıfta bulunduğunu fark etmiş olabilirsiniz. Bunun nedeni, bu öğreticinin CSS modüllerini kullanmasıdır. CSS modülleri, React'te yerel kapsamlı stiller oluşturmanıza olanak tanır. Bu projeyi başlatmak için create-react-app kullandıysanız herhangi bir şey yüklemeniz veya yapılandırmanız gerekmez.
Bileşenler klasöründe, adlı yeni bir dosya oluşturun. sidenav.module.css ve aşağıdakileri ekleyin:
.sidenav {
genişlik: 250 piksel;
geçiş: Genişlik 0.3sgiriş-çıkış kolaylığı;
yükseklik: 100vh;
arka plan rengi: rgb (10,25,41);
üst dolgu: 28 piksel;
}.sidenavKapalı {
oluşturur: sidenav;
geçiş: Genişlik 0.3sgiriş-çıkış kolaylığı;
genişlik: 60 piksel
}.yan öğe {
ekran: esnek;
hizalama öğeleri: merkez;
dolgu: 10px 20px;
imleç: işaretçi;
renk: #B2BAC2;
metin-dekorasyon: yok;
}.bağlantı metni {
sol dolgu: 16 piksel;
}.linkTextKapalı {
oluşturur: linkText;
görünürlük: gizli;
}.yan öğe:vurgu {
arka plan rengi: #244f7d1c;
}
.menuBtn {
hizala-öz: merkez;
align-self: esnek-Başlat;
kendini haklı çıkarmak: esnek-son;
renk: #B2BAC2;
arka plan rengi: şeffaf;
sınır: yok;
imleç: işaretçi;
sol dolgu: 20 piksel;
}
React Router'ı Kurma
Harita işlevi tarafından döndürülen div öğeleri, bağlantılar olmalıdır. React'te, tepki-yönlendirici-dom kullanarak bağlantılar ve yollar oluşturabilirsiniz.
Terminalde, npm aracılığıyla tepki-yönlendirici-dom'u kurun.
npm install tepki-yönlendirici-dom@En son
Bu komut, en son tepki-yönlendirici-dom sürümünü yükler.
Index.js'de, Uygulama bileşenini Yönlendirici ile sarın.
içe aktarmak Tepki itibaren 'tepki';
içe aktarmak ReactDOM itibaren 'tepki-dom/istemci';
içe aktarmak Uygulama itibaren './Uygulama';
içe aktarmak { Tarayıcı Yönlendirici } itibaren 'tepki-yönlendirici-dom';
const kök = ReactDOM.createRoot(belge.getElementById('root'));
kök.render(
<Tepki. KatıMod>
<TarayıcıYönlendirici>
<Uygulama />
</BrowserRouter>
</React.StrictMode>
);
Ardından, App.js'de rotalarınızı ekleyin.
içe aktarmak {
tarayıcıYönlendirici,
Rotalar,
Güzergah,
} itibaren "tepki-yönlendirici-dom";içe aktarmak './App.css';
içe aktarmak yan navigasyon itibaren './Components/Sidenav';
içe aktarmak Keşfetmek itibaren "./Sayfalar/Keşfet";
içe aktarmak Ev itibaren "./Sayfalar/Ana Sayfa";
içe aktarmak Ayarlar itibaren "./Sayfalar/Ayarlar";
içe aktarmak İstatistik itibaren "./Sayfalar/İstatistikler";
işlevUygulama() {
dönüş (
<div sınıfıAdı="Uygulama">
<yan navigasyon/>
<ana>
<Rotalar>
<Rota yolu="/" eleman={<Ev />}/>
<Rota yolu="/explore" eleman={<Keşfetmek />} />
<Rota yolu="/statistics" eleman={<İstatistik />}/>
<Rota yolu="/settings" eleman={<Ayarlar />} />
</Routes>
</main>
</div>
);
}
ihracatvarsayılan Uygulama;
App.css dosyasını bu stiller ile değiştirin.
gövde {
kenar boşluğu: 0;
dolgu: 0;
}.Uygulama {
ekran: esnek;
}
ana {
dolgu: 10 piksel;
}
Her rota, kendisine iletilen URL'ye bağlı olarak farklı bir sayfa döndürür. yol sahne. Sayfalar adında yeni bir klasör oluşturun ve Ana Sayfa, Keşfet, İstatistikler ve Ayarlar sayfası olmak üzere dört bileşen ekleyin. İşte bir örnek:
ihracatvarsayılanişlevEv() {
dönüş (
<div>Ev</div>
)
}
/home yolunu ziyaret ederseniz, "Ev" görmelisiniz.
Kenar çubuğundaki bağlantılar, tıkladığınızda eşleşen sayfaya yönlendirmelidir. Sidenav.js'de, div öğesi yerine tepki-yönlendirici-dom'dan NavLink bileşenini kullanmak için harita işlevini değiştirin.
{navData.map (öğe => {
dönüş <NavLink anahtarı={item.id} className={styles.sideitem} ile={item.link}>
{öğe.simge}
<span className={styles.linkText}>{öğe.metin}</span>
</NavLink>
})}
Dosyanın üst kısmındaki NavLink'i içe aktarmayı unutmayın.
içe aktarmak { NavLink } itibaren "tepki-yönlendirici-dom";
NavLink, bağlantı için prop aracılığıyla URL yolunu alır.
Bu noktaya kadar gezinti çubuğu açıktır. Daraltılabilir hale getirmek için, bir kullanıcı ok düğmesine tıkladığında CSS sınıfını değiştirerek genişliğini değiştirebilirsiniz. Daha sonra açmak için CSS sınıfını tekrar değiştirebilirsiniz.
Bu geçiş işlevini elde etmek için kenar çubuğunun ne zaman açık ve kapalı olduğunu bilmeniz gerekir.
Bunun için useState kancasını kullanın. Bu Tepki kancası işlevsel bir bileşendeki durumu eklemenize ve izlemenize olanak tanır.
sideNav.js'de açık durum için kanca oluşturun.
const [open, setopen] = useState(doğru)
Açık durumu true olarak başlatın, böylece uygulamayı başlattığınızda kenar çubuğu her zaman açık olacaktır.
Ardından, bu durumu değiştirecek işlevi oluşturun.
const toggleOpen = () => {
setopen(!open)
}
Artık aşağıdaki gibi dinamik CSS sınıfları oluşturmak için açık değeri kullanabilirsiniz:
<div className={open? stiller.sidenav: stiller.sidenavClosed}>
<düğme className={styles.menuBtn} onClick={toggleOpen}>
{açık? <KlavyeÇiftOkSolSolSimge />: <KlavyeÇiftOkSağSimge />}
</button>
{navData.map (öğe =>{
dönüş <NavLink anahtarı={item.id} className={styles.sideitem} ile={item.link}>
{öğe.simge}
<span className={open? style.linkText: style.linkTextClosed}>{öğe.metin}</span>
</NavLink>
})}
</div>
Kullanılan CSS sınıf adları, açık duruma göre belirlenecektir. Örneğin, open true ise, dış div öğesinin bir sidenav sınıf adı olacaktır. Aksi takdirde sınıf sidenavClosed olacaktır.
Bu, kenar çubuğunu kapattığınızda sağ ok simgesine dönüşen simge için aynıdır.
İçe aktarmayı unutmayın.
içe aktarmak KlavyeÇiftOkSağSimge itibaren '@mui/icons-material/KeyboardDoubleArrowRight';
Kenar çubuğu bileşeni artık daraltılabilir.
Tam kodu buradan alın GitHub deposu ve kendiniz deneyin.
Şekillendirme Tepki Bileşenleri
React, katlanabilir bir gezinme bileşeni oluşturmayı kolaylaştırır. Yönlendirmeyi işlemek için React'in sağladığı tepki-yönlendirici-dom gibi araçlardan bazılarını ve daraltılmış durumu takip etmek için kancaları kullanabilirsiniz.
Bileşenleri biçimlendirmek için CSS modüllerini de kullanabilirsiniz, ancak buna mecbur değilsiniz. Benzersiz olan ve kullanımda değillerse paket dosyalarından sallayabileceğiniz yerel olarak kapsamlı sınıflar oluşturmak için bunları kullanın.
