极客教程使用ReactJS和Tailwind的选项卡布局模板
选项卡布局是在单个网页中整理不同类型内容的一种更清晰的方式。在这种布局中，用户可以轻松地在不同的部分之间切换，而无需重新加载页面以获取不同类型的内容。选项卡通常水平放置，并且与所选内容相关的内容只对用户可见。这有助于在网页中保留空间。
让我们来看一下最终特性的样子：
标签布局的基本特点
- 标签标题/按钮： 它作为可切换的标题，用户可以使用它来选择他们想要查看的内容
- 内容： 该部分包含与所选择标签相关的内容
- 活动标签功能： 该部分包含逻辑，用于显示与所选标签相关联的内容
- 数据： 创建一个单独的文件，将标题映射到指定的内容
标签布局的优点
- 高效利用空间
- 方便用户导航
- 方便区分不同的分类
- 确保仅显示用户选择的必要功能
先决条件：
- React
- Tailwind
- React中的props
创建标签页面的方法：
- 设置一个基本的react项目并安装所需的依赖项
- 创建包含导航栏和欢迎页的基本布局
- 使用Tailwind为组件添加样式
- 动态地将数据传递到组件并在屏幕上呈现
创建该功能的步骤：
步骤1： 使用命令设置项目
npx create-react-app <<Project_Name>>
步骤2 ：使用命令导航到文件夹
cd <<Project_Name>>
步骤3 ：使用命令安装所需的依赖项
npm install -D tailwindcss
步骤4 ：使用命令创建tailwind配置文件
npx tailwindcss init
步骤5 ：按照以下方式重写tailwind.config.js文件
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./src/**/*.{js,jsx,ts,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
步骤6： : 在src目录下创建一个名为components的文件夹，并创建文件Content.js、data.js和Navbar.js
项目结构：
package.json 中更新的依赖项将如下所示：
"dependencies": {
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
}
"devDependencies": {
"tailwindcss": "^3.3.3"
}
示例： 在相应的文件中编写以下代码：
- App.js： 该文件导入组件并在屏幕上呈现它们。
- Content.js： 此组件显示所选选项卡的内容以及其关联的图像。
- data.js： 该文件包含要在导航栏和内容元素上显示的数据。
- Navbar.js： 该文件显示选项卡标题和更改选项卡的逻辑。
- index.css： 该文件在我们项目文件中导入Tailwind CSS。
// App.js
import './App.css';
import Navbar from './components/Navbar';
import { useState } from 'react';
import Content from './components/Content';
import Data from './components/data';
function App() {
const data = Data
const [visibleTab, setVisibleTab] = useState(0);
return (
<div className="App">
<Navbar data={data}
visibleTab={visibleTab}
setVisibleTab={setVisibleTab} />
<Content data={data}
visibleTab={visibleTab} />
</div>
);
}
export default App;
Content.js
// Content.js
export default function Content(props) {
return(
<div className="text-left flex flex-col
m-3 items-center content-center
text-base">
<img src={props.data[props.visibleTab].image}
className="h-1/3 w-1/3 shadow-xl"/>
<div className="my-3 h-2/3 w-1/3 border-x-4 p-2 shadow-md">
{props.data[props.visibleTab].content}
</div>
</div>
)
}
Navbar.js
// Navbar.js
// Navbar.js
export default function Navbar(props) {
return (
<div>
<nav classNameName="bg-white fixed w-full
z-20 top-0 left-0
border-b border-gray-200 p-4">
<div className="flex flex-wrap items-center
justify-center p-4">
<a href="https://geeksforgeeks.org/"
className="flex items-center">
<img src=
"https://media.geeksforgeeks.org/gfg-gg-logo.svg"
className="mr-2"
alt="GFG Logo" />
<span className="self-center text-2xl font-semibold ">
GeeksforGeeks
</span>
</a>
</div>
<div className="border-y-2 text-center text-xl mx-2">
{props.data.map((tab, index) => (
<button
key={index}
className={`bg-transparent hover:bg-slate-200
p-2 mr-2
${props.visibleTab === index
? 'bg-gray-300' : 'bg-gray-200'
}`}
onClick={() => props.setVisibleTab(index)}>
{tab.title}
</button>
))}
</div>
</nav>
</div>
)
}
data.js
// data.js
const Data = [
{
title: "JavaScript",
content: `JavaScript is a lightweight, cross-platform, single-threaded,
and interpreted compiled programming language. It is also known
as the scripting language for webpages. It is well-known
for the development of web pages, and many
non-browser environments also use it.`,
image:
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20230305183140/Javascript.jpg",
},
{
title: "ReactJS",
content: `ReactJS is an open-source JavaScript library used to create
user interfaces in a declarative and efficient way.
It is a component-based front-end library responsible only
for the view layer of a Model View Controller(MVC) architecture.
Before you start learning ReactJS, we assume that you have knowledge of
HTML, CSS and JavaScript.`,
image:
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20230310153232/ReactJS-Tutorial.jpg"
},
{
title: "NodeJS",
content: `Node.js is an open-source and cross-platform runtime environment
for executing JavaScript code outside a browser. NodeJS is not
a framework and it’s not a programming language.
Node.js is used to build back-end services like APIs like
Web App or Mobile App.`,
image:
"https://media.geeksforgeeks.org/wp-content/uploads/20230331172641/NodeJS-copy.webp"
}
]
export default Data;
CSS
/* index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
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;
}
运行应用程序的步骤：
步骤1： 在项目目录的终端中输入以下命令
npm start
步骤2： 在浏览器中打开以下链接
http://localhost:3000/
输出：
