Cách tạo Footer Responsive trong React
Nhiều thiết kế web hiện đại yêu cầu một chân trang đáp ứng trông đẹp mắt và hoạt động bình thường trên tất cả các thiết bị. Chân trang phản hồi tự động điều chỉnh bố cục và nội dung của nó để phù hợp với kích thước màn hình của thiết bị mà nó đang được xem.
Tìm hiểu cách tạo chân trang phản hồi trong React.js bằng mô-đun chân trang phản ứng đơn giản.
Mô-đun chân trang phản ứng đơn giản là một thư viện nhẹ và dễ sử dụng cho phép bạn tạo chân trang phản hồi nhanh trong React.js. Nó cung cấp một bộ công cụ mà bạn có thể sử dụng để tùy chỉnh giao diện và chức năng của chân trang.
Trước khi đi sâu vào việc tạo chân trang bằng mô-đun chân trang phản ứng đơn giản, chúng ta hãy xem nhanh một số tính năng chính của nó:
- Bố cục tùy chỉnh: Mô-đun chân trang phản ứng đơn giản cho phép bạn xác định số lượng cột trong chân trang cũng như nội dung của từng cột.
- Thiết kế đáp ứng: Chân trang tự động điều chỉnh bố cục của nó để phù hợp với kích thước màn hình của thiết bị mà nó đang được xem.
- tùy chỉnh xuất hiện: Mô-đun chân trang phản ứng đơn giản cung cấp một loạt các đạo cụ mà bạn có thể sử dụng để tùy chỉnh giao diện của chân trang, chẳng hạn như màu nền, màu phông chữ và màu biểu tượng.
Bây giờ bạn đã hiểu cơ bản về mô-đun chân trang phản ứng đơn giản, hãy xem cách bạn có thể sử dụng nó để tạo chân trang trong React.js.
Bắt đầu bằng cách tạo một ứng dụng React đơn giản. Sau đó, bạn có thể sử dụng mô-đun chân trang phản ứng đơn giản để tạo chân trang, như trong ví dụ này:
import React from 'react';
import SimpleReactFooter from 'simple-react-footer';const Footer = () => {
const description = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.";
const title = "Lorem Ipsum";
const columns = [{
title: "Column 1",
resources: [{
name: "Item 1",
link: "/item1"
},{
name: "Item 2",
link: "/item2"
},{
name: "Item 3",
link: "/item3"
},{
name: "Item 4",
link: "/item4"
}]
},{
title: "Column 2",
resources: [{
name: "Item 5",
link: "/item5"
},{
name: "Item 6",
link: "/item6"
}]
},{
title: "Column 3",
resources: [{
name: "Item 7",
link: "/item7"
},{
name: "Item 8",
link: "/item8"
}]
}];
return <SimpleReactFooter
description={description}
title={title}
columns={columns}
/>;
}
export default Footer;
Đoạn mã đó sẽ tạo ra một footer giống như sau:
Ví dụ này nhập thành phần SimpleReactFooter và định nghĩa một thành phần chức năng có tên là Chân trang. Bên trong thành phần Footer, nó sử dụng thành phần SimpleReactFooter, chuyển cho nó ba thuộc tính: tiêu đề, mô tả và cột.
Mô-đun hiển thị tiêu đề chống đỡ ở đầu chân trang. Dưới đó, nó hiển thị tiêu đề chống đỡ. Cuối cùng, cột chống đỡ là một mảng các đối tượng xác định nội dung của các cột trong chân trang.
Tùy chỉnh các thành phần với các đạo cụ khác nhau
Cũng như các đạo cụ tiêu đề và mô tả, mô-đun chân trang phản ứng đơn giản cung cấp một số đạo cụ mà bạn có thể chuyển đến thành phần. Bạn có thể sử dụng chúng để tùy chỉnh giao diện và chức năng của chân trang.
Dưới đây là danh sách tất cả các đạo cụ có sẵn trong mô-đun chân phản ứng đơn giản:
- Tiêu đề: Tiêu đề của chân trang.
- sự miêu tả: Một mô tả ngắn gọn về footer.
- cột: Một mảng các đối tượng xác định nội dung của các cột ở chân trang. Mỗi đối tượng phải có thuộc tính tiêu đề chỉ định tiêu đề của cột và thuộc tính tài nguyên là một mảng đối tượng, mỗi đối tượng đại diện cho một tài nguyên trong cột. Mỗi đối tượng tài nguyên phải có thuộc tính tên chỉ định tên của tài nguyên và thuộc tính liên kết chỉ định liên kết đến tài nguyên.
- được liên kết: Tay cầm LinkedIn của công ty hoặc tổ chức.
- Facebook: Tên Facebook của công ty hoặc tổ chức.
- Twitter: Tay cầm Twitter của công ty hoặc tổ chức.
- instagram: Tay cầm Instagram của công ty hoặc tổ chức.
- youtube: Địa chỉ YouTube của công ty hoặc tổ chức.
- quan tâm: Tên Pinterest của công ty hoặc tổ chức.
- bản quyền: Văn bản bản quyền cho chân trang.
- biểu tượngMàu sắc: Màu của các biểu tượng mạng xã hội ở chân trang.
- màu nền: Màu nền của footer.
- màu phông chữ: Màu phông chữ của chân trang.
- bản quyềnMàu sắc: Màu phông chữ của văn bản bản quyền ở chân trang.
Dưới đây là một ví dụ về cách bạn có thể sử dụng tất cả các đạo cụ có sẵn trong mô-đun chân trang phản ứng đơn giản để tạo chân trang tùy chỉnh trong React.js:
import React from 'react';
import SimpleReactFooter from 'simple-react-footer';const Footer = () => {
const description = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.";
const title = "Lorem Ipsum";
const columns = [{
title: "Column 1",
resources: [{
name: "Item 1",
link: "/item1"
},{
name: "Item 2",
link: "/item2"
},{
name: "Item 3",
link: "/item3"
},{
name: "Item 4",
link: "/item4"
}]
},{
title: "Column 2",
resources: [{
name: "Item 5",
link: "/item5"
},{
name: "Item 6",
link: "/item6"
}]
},{
title: "Column 3",
resources: [{
name: "Item 7",
link: "/item7"
},{
name: "Item 8",
link: "/item8"
}]
}];
return <SimpleReactFooter
description={description}
title={title}
columns={columns}
linkedin="lorem_ipsum_on_linkedin"
facebook="lorem_ipsum_on_fb"
twitter="lorem_ipsum_on_twitter"
instagram="lorem_ipsum_live"
youtube="UCFt6TSF464J8K82xeA?"
pinterest="lorem_ipsum_collections"
copyright="black"
iconColor="black"
backgroundColor="lightgrey"
fontColor="black"
copyrightColor="darkgrey"
/>;
}
export default Footer;
Ví dụ này sử dụng tất cả các đạo cụ có sẵn trong mô-đun chân trang phản ứng đơn giản để tạo chân trang tùy chỉnh. Mã này sẽ tạo một chân trang với các màu khác nhau và các biểu tượng mạng xã hội khác nhau:
Các đạo cụ được liên kết, facebook, twitter, instagram, youtube và pinterest chỉ định các phương tiện truyền thông xã hội của công ty hoặc tổ chức. Nếu bạn cung cấp các phụ kiện này, mô-đun sẽ hiển thị các biểu tượng mạng xã hội tương ứng ở chân trang.
chống bản quyền chỉ định văn bản bản quyền cho chân trang. Mô-đun hiển thị văn bản này ở cuối chân trang.
Các đạo cụ iconColor, backgroundColor, fontColor và copyrightColor tùy chỉnh giao diện của chân trang.
Ngoài việc làm cho trang web của bạn trông đẹp mắt, chân trang đáp ứng có thể cải thiện trải nghiệm người dùng trên trang web của bạn. Chân trang đáp ứng đảm bảo rằng tất cả người dùng, bất kể họ đang sử dụng thiết bị nào, đều có thể truy cập và sử dụng chân trang một cách dễ dàng.