ReactJS 语义 UI 门户插件

介绍

ReactJS 语义 UI 门户插件是一个基于ReactJS和语义UI的前端门户插件，它可以快速搭建一个网站或后台管理系统。它封装了很多常用的组件和页面模板，使得我们可以快速构建出一个漂亮、可用性强的网站。

特点

• 基于ReactJS和语义UI。
• 可灵活定制。
• 丰富的组件和页面模板。

安装

你可以通过 NPM 来安装 ReactJS 语义 UI 门户插件:

npm install react-semantic-portal --save

使用

import { Button } from 'react-semantic-portal';

<Button color='green'>提交</Button>

组件

Button

<Button>按钮</Button>

Dropdown

<Dropdown placeholder='下拉菜单'>
  <Dropdown.Item>菜单项1</Dropdown.Item>
  <Dropdown.Item>菜单项2</Dropdown.Item>
  <Dropdown.Item>菜单项3</Dropdown.Item>
</Dropdown>

Form

<Form>
  <Form.Input label='姓名'/>
  <Form.Input label='密码' type='password'/>
  <Form.Button color='green'>提交</Form.Button>
</Form>

页面模板

登录页

import { LoginForm } from 'react-semantic-portal';

<LoginForm onSubmit={handleSubmit} />

注册页

import { RegisterForm } from 'react-semantic-portal';

<RegisterForm onSubmit={handleSubmit} />

后台管理首页

import { AdminDashboard } from 'react-semantic-portal';

<AdminDashboard />

完整示例

import React from 'react';
import ReactDOM from 'react-dom';

import { Button, Dropdown, Form } from 'react-semantic-portal';
import { LoginForm } from 'react-semantic-portal';

const handleSubmit = (values) => {
  console.log(values);
}

const App = () => (
  <div>
    <Button color='green'>按钮</Button>
    <Dropdown placeholder='下拉菜单'>
      <Dropdown.Item>菜单项1</Dropdown.Item>
      <Dropdown.Item>菜单项2</Dropdown.Item>
      <Dropdown.Item>菜单项3</Dropdown.Item>
    </Dropdown>
    <Form>
      <Form.Input label='姓名'/>
      <Form.Input label='密码' type='password'/>
      <Form.Button color='green'>提交</Form.Button>
    </Form>
    <LoginForm onSubmit={handleSubmit} />
  </div>
);

ReactDOM.render(<App />, document.getElementById('root'));

结语

ReactJS 语义 UI 门户插件帮助我们快速构建出常规网站和管理后台，它提供了丰富的组件和页面模板。当然，你也可以根据自己的需求来进行灵活的定制。