React-w3-components 是基于 React 的 UI 框架，致力于提供简单易用的组件和样式。它具有易于用户定制的样式和具有面向对象和响应式特性的组件。使用 React-w3-components 可以轻松创建复杂的用户界面，快速建立支持响应式设计的应用程序。
安装
首先你需要通过 NPM 安装包 react-w3-components。
$ npm install react-w3-components
完成之后，你就可以使用 import 或者 require 方式将它引入到你的项目中了
import {Button, Input} from 'react-w3-components';组件
在这个包中，你将找到一系列可重用的 React 组件。以下是可用的所有组件的列表：
- Button
- Input
- Textarea
- Checkbox
- Radio
- Select
- ToggleSwitch
- Pagination
- Tabs
- Templates（Cards、Modal、Nav、SideNav、TopBar）
组件介绍
Button
Button 组件是一个高可定制的按钮，可以轻松地定义样式和事件处理程序。
<Button className="green button">Submit</Button>
Input
Input 组件是一个可定制的文本输入框，可以定义与用户交互的各种信息（比如用于验证或单位等）。
<Input name="username" type="text" placeholder="Enter your username" label="Username"/>
Textarea
Textarea 组件是一个可定制的多行文本输入框，可以容纳更多用户输入的文本。
<Textarea name="description" placeholder="Enter a description" label="Description"/>
Checkbox
Checkbox 组件是单选框（radio button）的复选框版，它提供了一种可定制的方法来选择一个或多个选项。
<Checkbox name="checkbox1" label="Option1" />
Radio
Radio 组件是一个单选按钮，可以定义几个可选项中的一个，每个选项都给出一个值。
<Radio name="radio1" options={[{value: 'a', label: 'Option1'}, {value: 'b', label: 'Option2'}]} />Select
Select 组件是一个可定制的下拉选择框，让用户从一组可选项中选择一项。
<Select name="select1" options={[{value: 'a', label: 'Option1'}, {value: 'b', label: 'Option2'}]} />ToggleSwitch
ToggleSwitch 组件是一个可定制的拨动开关，它允许用户在两个选项之间切换，例如开/关或启用/禁用。
<ToggleSwitch name="toggle1" label="Enable notifications"/>
Pagination
Pagination 组件是一个可定制的分页控件，显示可用页面的列表，并允许用户切换到另一页。
<Pagination totalPages={10} currentPage={3} onClick={ pageNumber => console.log(pageNumber) } />Tabs
Tabs 组件是一个可定制的选项卡控件，将内容分组到不同的选项卡中以便于浏览。
<Tabs id="tab1" activeTab="tab1" tabs={[{id: 'tab1', title: 'Tab1'}, {id: 'tab2', title: 'Tab2'}]}>
<div id="tab1">
This is the content of tab1
</div>
<div id="tab2">
This is the content of tab2
</div>
</Tabs>Templates
- Cards
Cards 是一个可定制的卡片布局，可以呈现一组相关项。
-- -------------------- ---- -------
------
-------------
--------------
--------------
--------------
-------------
------------- -------------
--------------
-------- Modal
Modal 是一个可定制的模态框组件，它居中显示信息，并强制用户关注该信息。
-- -------------------- ---- -------
------ --------------
------------
-------------------
-------------
--------------
---- -- --- ------- -- --- ------
---------------
--------------
-------------------
-----------------------
---------------
--------- Nav
Nav 是一个可定制的导航栏，用于帮助导航网站上的不同部分。
<Nav clickable={true} items={[{name: 'Home', url: '#'}, {name: 'About', url: '#'}, {name: 'Contact', url: '#'}]} />- SideNav
SideNav 是一个可定制的侧边栏，通常用于导航和选项卡。
<SideNav id="sidenav1" header="Some text" items={[{name: 'Home', url: '#'}, {name: 'About', url: '#'}, {name: 'Contact', url: '#'}]} />- TopBar
TopBar 是一个可定制的顶部导航栏，显示网站的标题、栏目等信息。
const MenuItems = [
{name: 'Home', url: '#'},
{name: 'About', url: '#'},
{name: 'Portfolio', url: '#'},
{name: 'Contact', url: '#'}
];
<TopBar title="Some text" items={MenuItems} />示例代码
下面是展示一个文本框和提交按钮的示例代码。
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ -------- ------ ---- ----------------------
----- ------ ------- --------------- -
----- - -
--------- ---
-
----------------- - ------- -- -
----- ------ - -------------
----- ----- - -------------
----- ---- - ------------
---------------
------- -----
---
-
------------ - ------- -- -
------------ - - ------------------- - -----
-----------------------
-
-------- -
------ -
----- -----------------------------
------ --------------- ----------- ------------------ ---- --------- ---------------- --------------------------- -----------------------------------
------- ---------------- ------- -----------------------------
-------
--
-
-
----------------------- --- ---------------------------------这是在 Render.com 平台中创建的一个重要性质的示例应用程序启动页面。 https://react-w3-components-cdqbg27.onrender.com/
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005601581e8991b448de292