Antd Multi Tabs Admin 正在参加 2020 年度 OSC 中国开源项目评选,请投票支持!
Antd Multi Tabs Admin 在 2020 年度 OSC 中国开源项目评选 中已获得 {{ projectVoteCount }} 票,请投票支持!
投票让它出道
已投票
Antd Multi Tabs Admin 获得 2020 年度 OSC 中国开源项目评选「最佳人气项目」 !
Antd Multi Tabs Admin 获得 2020 年度 OSC 中国开源项目评选「最佳人气项目」「最积极运营项目」 !
Antd Multi Tabs Admin 获得 2020 年度 OSC 中国开源项目评选「最积极运营项目」 !

软件简介

Antd Multi Tabs Admin是一款Antd多标签页后台管理模板。

由于业务上有多页签需求,网上找了一圈,都是基于antd pro的模板,太重了,不喜欢。

于是自己从以前的框架上改造,搭了这么一个精简版框架,用得也舒服,原创。

预览地址

更多使用说明请访问 Github

特性

  • 代码规模:原创精简版脚手架,主张最少,不臃肿
  • 追求前沿:全站使用 React Hooks 开发,抛弃 Class
  • 优雅美观:基于 Ant Design 体系精心设计
  • 流行技术:使用 React/Redux/Antd 等前端前沿技术开发
  • 主题样式:使用流行的暗黑模式主题,支持深/浅色主题切换

特点

  • 多 tab 页签➕右键菜单,提升效率
  • Redux 状态管理➕持久化
  • 封装实用 axios 请求
  • 动态链式面包屑导航
  • 菜单页面路由权限控制
  • less➕css module 样式隔离
  • 列表➕分页➕多选➕搜索联动组件
  • 可自定义 webpack 配置➕优化打包

预览图

使用

使用命令行

$ npm install -g typescript
$ git clone https://github.com/hsl947/react-antd-multi-tabs-admin.git
$ yarn install
$ yarn start         # 访问 http://localhost:666

支持环境

现代浏览器及 IE11。

IE / Edge Firefox Chrome Safari Opera
IE11, Edge last 2 versions last 2 versions last 2 versions last 2 versions

参与贡献

我们非常欢迎你的贡献,你可以通过以下方式和我们一起共建 😃:

展开阅读全文

代码

的 Gitee 指数为
超过 的项目

评论 (0)

加载中
更多评论
暂无内容
发表了博客
2020/04/27 08:33

react antd Tabs组件如何修改默认样式-友好的解决方法

  前言   当在项目中使用react antd各组件时,总有需要自定义css样式的时候,那应该怎么修改呢?   最简单粗暴的方法——覆盖原有样式   审查元素找到要修改的tabs组件类名,然后在css文件中重写该类样式使其覆盖原有样式,若无效果,添加!important      最直接了当的方法——添加行内样式   但上述方法会导致全局tabs组件样式都被修改,为避免上述情况,直接在引入的tabs组件上添加行内样式style={{}},   而...

0
0
2019/04/16 10:40

react 最新配置 antd 、antd-mobile 按需加载

* create-react-app ext_medical 创建一个新的项目 * yarn add antd-mobile 引入antd-mobile * yarn add react-app-rewired@2.0.2-next.0 -D 这里一定要@2.0.2-next.0,新版的Babel7有点问题,直接react-app-rewired会报错 * package.json 中修改 /* package.json */ "scripts": { - "start": "react-scripts start", + "start": "react-app-rewired start", - "build": "react-scripts build", + "build": "react-app-rewired ...

0
0
发表了博客
2019/07/06 17:50

react 框架(antd)的使用方法

脚手架 安装 npm install -g create-react-app 引入: import React, { Component } from "react"; import { Table, Button, Modal, Form, Input } from "antd";//引入antd相应模块 // import { formatDate } from "./utils/index"; import moment from "moment";//moment时间定义插件 import "antd/dist/antd.css";//引入样式 //使用例子: const columns = [ { title: "日期", dataIndex: "date", // 3. ...

0
0
发表于大前端专区
2019/05/28 17:15

React引入Antd组件

[Ant组件官网文档](https://mobile.ant.design/docs/react/introduce-cn "Ant组件官网文档") Ant组件的安装和使用在官网都有教程,下面记录一下自己的使用。 Ant组件是好用,一引入直接就有了功能组件。但问题是UI给我们的和这些组件往往不一样,比如样式颜色,多个view,button什么的,那么怎么定制ant组件的样式去实现我们的需求呢? 1.查阅ant组件的api文档,里面通常会有描述组件的属性功能。比如Menu组件,它可以很方便的实...

0
0
发表了博客
2019/04/10 10:10

react-antd-input-onPressEnter

2020-01-11 ant-Design ,Input , onPressEnter 和 onChange 的区别 onChange 输入内容的回调 onPressEnter 按下回车的回调 需求:看下图,右边栏配置开关组件的内容。输入内容,不想要左边实时更改 原来的代码: <Input defaultValue={item.value1} style={{width: '130px'}} flag="switch1" onChange={event => this.handleChange(event)} /> 更改后: <Input defaultValue={item.value1} style=...

0
0
发表了博客
2019/01/27 22:26

React + Dva + Antd + Umi 概况

Dva 由阿里架构师 sorrycc 带领 team 完成的一套前端框架,在作者的 github 里是这么描述它的:”dva 是 react 和 redux 的最佳实践”。 Antd 是阿里的一套开箱即用的中台前端/设计解决方案,UI框架。 Umi 一套可插拔的企业级 react 应用框架,同样由dva作者 sorrycc 完成。他在Umi中引入了 UI 工具 antd,打包工具 roadhog,路由 react-router和状态管理器 dva,做到了可插拔机制。 Dva 初实践 一般来说,可以分为主要的三个部...

0
0
发表了博客
2019/09/17 17:39

react antd时间重置

import React from 'react' import { Layout, Row, Button, Table, DatePicker, Form, Col, Select, message, Modal } from 'antd' import ModalCon from './addEdit' import ReactEcharts from 'echarts-for-react' import '../riverWater.less' import { queryByPage, delFun } from '@api/RiverWater/reportProtect' import { tempStcdList } from '@api/RiverWater/singleCompare' import moment from 'moment' con...

0
0
发表了博客
2019/02/12 17:30

react项目中使用antd

1.antd官网: https://ant.design/docs/react/introduce-cn 2、React中使用Antd 1、安装antd npm install antd --save / yarn add antd / cnpm install antd --save 2、在您的react项目的css文件中引入 Antd的css   @import '~antd/dist/antd.css'; 3、看文档使用:   如使用Button:     1、在对应的组件中引入Antd import { Button } from 'antd';     2、<Button type="primary">Primary</Button> ...

0
0
发表了博客
2018/03/20 15:19

react antd 动态表单

import React, { Component } from 'react'; import ReactDOM from 'react-dom'; import { Form, InputNumber, Input, DatePicker, Button, Select } from 'antd'; import moment from 'moment'; // 推荐在入口文件全局设置 locale import 'moment/locale/zh-cn'; moment.locale('zh-cn'); const FormItem = Form.Item; const Option = Select.Option; // 后台返回的数据格式 const data = [ { 'field':...

0
0
发表了博客
2018/04/04 16:29

react antd layout sider

import React from 'react'; import {Link, withRouter} from 'react-router-dom'; import {Layout, Menu, Icon} from 'antd'; const {SubMenu} = Menu; const {Sider} = Layout; class SideBar extends React.Component { constructor(props) { super(props); this.state = { collapsed: false, currentPath : this.props.history.location || '/user' } ...

0
0
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
暂无内容
0 评论
8 收藏
分享
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部