Birçok modern web tasarımı, iyi görünen ve tüm cihazlarda düzgün çalışan, duyarlı bir alt bilgi gerektirir. Duyarlı bir altbilgi, düzenini ve içeriğini, görüntülendiği cihazın ekran boyutuna uyacak şekilde otomatik olarak ayarlar.
simple-react-footer modülünü kullanarak React.js'de duyarlı bir altbilgi oluşturmayı öğrenin.
Simple-react-footer modülü, React.js'de duyarlı bir altbilgi oluşturmanıza olanak tanıyan hafif ve kullanımı kolay bir kitaplıktır. Altbilginizin görünümünü ve işlevselliğini özelleştirmek için kullanabileceğiniz bir dizi donanım sağlar.
Simple-react-footer modülünü kullanarak bir altbilgi oluşturmaya dalmadan önce, bazı temel özelliklerine hızlıca göz atalım:
- Özelleştirilebilir düzen: Simple-react-footer modülü, alt bilginizdeki sütun sayısını ve her bir sütunun içeriğini tanımlamanıza olanak tanır.
- Duyarlı tasarım: Alt bilgi, görüntülendiği cihazın ekran boyutuna uyacak şekilde düzenini otomatik olarak ayarlar.
- Özelleştirilebilir görünüm: Simple-react-footer modülü, arka plan rengi, yazı tipi rengi ve simge rengi gibi altbilginizin görünümünü özelleştirmek için kullanabileceğiniz bir dizi donanım sağlar.
Artık simple-react-footer modülü hakkında temel bir anlayışa sahip olduğunuza göre, onu React.js'de bir altbilgi oluşturmak için nasıl kullanabileceğinizi görelim.
La başlamak basit bir React uygulaması oluşturma. Daha sonra, bu örnekte olduğu gibi, bir altbilgi oluşturmak için simple-react-footer modülünü kullanabilirsiniz:
içe aktarmak Tepki itibaren'tepki';
içe aktarmak SimpleReactFooter itibaren'basit-tepki-altbilgi';sabit Altbilgi = () => {
// Altbilgi için verileri tanımlayın
sabit açıklama = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt utlabore et dolore magna aliqua. Ut enim ad minimum veniam, quis nostrud exercitation ullamco workis nisi ut aliquip ex ea commodo consequat.";
sabit başlık = "Lorem Ipsum";sabit sütunlar = [{
başlık: "Sütun 1",
kaynaklar: [{
isim: "Madde 1",
bağlantı: "/madde 1"
},{
isim: "Madde 2",
bağlantı: "/öğe2"
},{
isim: "Madde 3",
bağlantı: "/öğe3"
},{
isim: "Madde 4",
bağlantı: "/öğe4"
}]
},{
başlık: "2. Sütun",
kaynaklar: [{
isim: "Madde 5",
bağlantı: "/öğe5"
},{
isim: "Madde 6",
bağlantı: "/öğe6"
}]
},{
başlık: "3. Sütun",
kaynaklar: [{
isim: "Madde 7",
bağlantı: "/öğe7"
},{
isim: "Madde 8",
bağlantı: "/öğe8"
}]
}];geri dönmek<SimpleReactFooter
açıklama={açıklama}
başlık={başlık}
sütunlar={sütunlar}
/>;
}
ihracatvarsayılan Altbilgi;
Bu kod, şuna benzeyen bir alt bilgi oluşturacaktır:
Bu örnek, SimpleReactFooter bileşenini içe aktarır ve Footer adlı işlevsel bir bileşeni tanımlar. Altbilgi bileşeninin içinde, SimpleReactFooter bileşenini kullanır ve ona üç destek verir: başlık, açıklama ve sütunlar.
Modül, başlık desteğini altbilginin üstünde görüntüler. Bunun altında, başlık pervanesini gösterir. Son olarak, sütun desteği, altbilgideki sütunların içeriğini tanımlayan bir dizi nesnedir.
Bileşenleri Farklı Aksesuarlarla Özelleştirme
Simple-react-footer modülü, başlık ve açıklama öğelerinin yanı sıra birkaç bileşene iletebileceğiniz aksesuarlar. Altbilginizin görünümünü ve işlevselliğini özelleştirmek için bunları kullanabilirsiniz.
İşte simple-react-footer modülünde bulunan tüm donanımların bir listesi:
- başlık: Altbilginin başlığı.
- Tanım: Altbilginin kısa bir açıklaması.
- sütunlar: Altbilgideki sütunların içeriğini tanımlayan bir dizi nesne. Her nesne, sütunun başlığını belirten bir başlık özelliğine ve her biri sütundaki bir kaynağı temsil eden bir nesne dizisi olan bir özniteliğe sahip olmalıdır. Her kaynak nesnesi, kaynağın adını belirten bir name özelliğine ve kaynağa bağlantıyı belirten bir link özelliğine sahip olmalıdır.
- Linkedin: Şirketin veya kuruluşun LinkedIn tanıtıcısı.
- Facebook: Şirketin veya kuruluşun Facebook hesabı.
- twitter: Şirketin veya kuruluşun Twitter hesabı.
- instagram: Şirketin veya kuruluşun Instagram kullanıcı adı.
- Youtube: Şirket veya kuruluşun YouTube tanıtıcısı.
- ilgi alanı: Şirketin veya kuruluşun Pinterest tanıtıcısı.
- telif hakkı: Alt bilgi için telif hakkı metni.
- simge rengi: Altbilgideki sosyal medya simgelerinin rengi.
- arka plan rengi: Altbilginin arka plan rengi.
- yazı rengi: Altbilginin yazı tipi rengi.
- telif hakkıRenk: Altbilgideki telif hakkı metninin yazı tipi rengi.
React.js'de özelleştirilmiş bir altbilgi oluşturmak için simple-react-footer modülünde bulunan tüm donanımları nasıl kullanabileceğinize bir örnek:
içe aktarmak Tepki itibaren'tepki';
içe aktarmak SimpleReactFooter itibaren'basit-tepki-altbilgi';sabit Altbilgi = () => {
// Altbilgi için verileri tanımlayın
sabit açıklama = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt utlabore et dolore magna aliqua. Ut enim ad minimum veniam, quis nostrud exercitation ullamco workis nisi ut aliquip ex ea commodo consequat.";
sabit başlık = "Lorem Ipsum";sabit sütunlar = [{
başlık: "Sütun 1",
kaynaklar: [{
isim: "Madde 1",
bağlantı: "/madde 1"
},{
isim: "Madde 2",
bağlantı: "/öğe2"
},{
isim: "Madde 3",
bağlantı: "/öğe3"
},{
isim: "Madde 4",
bağlantı: "/öğe4"
}]
},{
başlık: "2. Sütun",
kaynaklar: [{
isim: "Madde 5",
bağlantı: "/öğe5"
},{
isim: "Madde 6",
bağlantı: "/öğe6"
}]
},{
başlık: "3. Sütun",
kaynaklar: [{
isim: "Madde 7",
bağlantı: "/öğe7"
},{
isim: "Madde 8",
bağlantı: "/öğe8"
}]
}];geri dönmek<SimpleReactFooter
açıklama={açıklama}
başlık={başlık}
sütunlar={sütunlar}
Linkedin="lorem_ipsum_on_linkedin"
facebook="lorem_ipsum_on_fb"
twitter="lorem_ipsum_on_twitter"
instagram="lorem_ipsum_live"
youtube="UCFt6TSF464J8K82xeA?"
ilgi alanı="lorem_ipsum_koleksiyonları"
telif hakkı="siyah"
simgeRenk="siyah"
arka planRengi="açık gri"
yazı rengi="siyah"
telif hakkıRenk="koyu gri"
/>;
}
ihracatvarsayılan Altbilgi;
Bu örnek, özelleştirilmiş bir altbilgi oluşturmak için simple-react-footer modülünde bulunan tüm donanımları kullanır. Kod, farklı renklere ve çeşitli sosyal medya simgelerine sahip bir alt bilgi oluşturacaktır:
Linkedin, facebook, twitter, instagram, youtube ve pinterest props, şirket veya kuruluşun sosyal medya hesaplarını belirtir. Bu donanımları sağlarsanız modül, ilgili sosyal medya simgelerini altbilgide görüntüler.
Telif hakkı desteği, alt bilgi için telif hakkı metnini belirtir. Modül bu metni altbilginin altında görüntüler.
iconColor, backgroundColor, fontColor ve copyrightColor destekleri, altbilginin görünümünü özelleştirir.
Duyarlı bir altbilgi, web sitenizin iyi görünmesini sağlamanın yanı sıra web sitenizin kullanıcı deneyimini iyileştirebilir. Duyarlı bir altbilgi, kullandıkları cihazdan bağımsız olarak tüm kullanıcıların altbilgiye kolayca erişmesini ve onu kullanabilmesini sağlar.
