Now UI Kit React 使用教程

Now UI Kit React 使用教程

now-ui-kit-react React version of Now UI Kit by Creative Tim 项目地址: https://gitcode.com/gh_mirrors/no/now-ui-kit-react

1. 项目介绍

Now UI Kit React 是一个免费的 Bootstrap 4、React、React Hooks 和 Reactstrap UI 工具包，由 Invision 和 Creative Tim 提供。它是一个美观的跨平台 UI 工具包，包含超过 50 个元素和 3 个模板。Now UI Kit 是网络上最受欢迎的 UI 工具包之一，最初以 PSD 和 Sketch 格式由 Invision 提供。为了使全球开发者能够受益，Creative Tim 与 Invision 合作推出了 React 版本。

2. 项目快速启动

2.1 下载项目

首先，从 GitHub 仓库下载项目：

git clone https://github.com/creativetimofficial/now-ui-kit-react.git

2.2 安装依赖

进入项目目录并安装依赖：

cd now-ui-kit-react
npm install

2.3 启动开发服务器

启动开发服务器以查看项目：

npm start

2.4 访问项目

在浏览器中访问 http://localhost:3000 以查看项目。

3. 应用案例和最佳实践

3.1 创建一个登录页面

Now UI Kit React 提供了一些预先设计的页面，包括登录页面。你可以通过以下步骤创建一个登录页面：

1. 打开 src/views/examples/LoginPage.js 文件。
2. 根据需要修改页面内容。
3. 在 src/index.js 中导入并使用该页面。

3.2 自定义主题颜色

你可以通过修改 src/assets/scss/now-ui-kit/_variables.scss 文件中的颜色变量来自定义主题颜色。例如：

$primary-color: #ff5722;
$secondary-color: #607d8b;

4. 典型生态项目

4.1 React Router

Now UI Kit React 使用 React Router 进行页面导航。你可以通过以下方式添加新的路由：

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import LoginPage from './views/examples/LoginPage';

function App() {
  return (
    <Router>
      <Switch>
        <Route path="/login" component={LoginPage} />
        {/* 其他路由 */}
      </Switch>
    </Router>
  );
}

export default App;

4.2 Reactstrap

Now UI Kit React 基于 Reactstrap，提供了丰富的 Bootstrap 4 组件。你可以通过以下方式使用这些组件：

import { Button, Card, CardBody, CardTitle } from 'reactstrap';

function ExampleCard() {
  return (
    <Card>
      <CardBody>
        <CardTitle>示例卡片</CardTitle>
        <Button color="primary">点击我</Button>
      </CardBody>
    </Card>
  );
}

export default ExampleCard;

通过以上步骤，你可以快速上手 Now UI Kit React，并开始构建美观的 React 应用程序。

now-ui-kit-react React version of Now UI Kit by Creative Tim 项目地址: https://gitcode.com/gh_mirrors/no/now-ui-kit-react