Skip to content

Latest commit

 

History

History
183 lines (151 loc) · 9 KB

README.md

File metadata and controls

183 lines (151 loc) · 9 KB

Theme For HiUI

使用

npm i @hi-ui/classic-theme --save
// or
yarn add @hi-ui/classic-theme
import Theme from "@hi-ui/classic-theme";

render(<Theme />, document.getElementById("app"));

示例

基于配置化实现主题布局和菜单匹配，数组中元素的层级即代表其在菜单中的层级

import React, { Component } from "react";
import { Theme } from "@hi-ui/classic-theme";
import { Link } from "react-router-dom";
import { Input, Icon } from "@hi-ui/hiui";

const Mi = () => <div>小米手机</div>;
const RedMi = () => <div>红米手机</div>;
const BlackShark = () => <div>黑鲨手机</div>;
const TV = () => <div>小米电视</div>;
const SoundBox = () => (
  <div>
    小米音响<Link to="/robot-detail/1?b=1">去详情页</Link>
  </div>
);
const Robot = () => <div>米家扫地机器人</div>;
const RobotDetail = () => <div>米家扫地机器人详情页</div>;

const routeConfig = [
  {
    name: "手机",
    children: [
      { name: "小米", path: "/mi", component: Mi },
      { name: "红米", path: "/red-mi", component: RedMi, withoutLayout: true },
      { name: "黑鲨", path: "/black-shark", component: BlackShark },
    ],
  },
  { name: "电视", path: "/tv", component: TV },
  {
    name: "智能硬件",
    children: [
      { name: "音响", path: "/audio", component: SoundBox },
      { name: "扫地机器人", path: "/robot", component: Robot },
      { path: "/robot-detail/:id", component: RobotDetail },
    ],
  },
];

const logoConfig = {
  logoUrl:
    "https://xiaomi.github.io/hiui/static/img/logo.png?241e0618fe55d933c280e38954edea05",
  name: "HIUI Theme",
  url: "https://xiaomi.github.io/hiui/#/",
};

const loginConfig = {
  name: "Mi Guest",
  icon: "user",
  children: [
    <div key="1" style={{ textAlign: "center", margin: 4, width: "100px" }}>
      <a href="#info">个人信息</a>
    </div>,
    <div key="2" style={{ textAlign: "center", margin: 4, width: 100 }}>
      <a href="#logout">注销</a>
    </div>,
  ],
};
const toolbar = [<Input key="1" />, <Icon key="2" name="prompt" />];

class App extends Component {
  render() {
    return (
      <Theme
        routes={routeConfig}
        logo={logoConfig}
        login={loginConfig}
        toolbar={toolbar}
      />
    );
  }
}

export default App;

关于路由跳转

组件内

使用 react-router <Link /> 即可

API 跳转

内部对 react-router 的 history 进行了封装

import Theme, {History} from '@hi-ui/classic-theme'

History[`${your history type}`].push()

详细使用可参考 react-router 官网

API

Theme

属性名 描述 类型 默认值
type 主题类型 'classic' | 'genuine' 'classic'
dynamic 开启动态布局 boolean true
tagsView 开启页面顶部标签页视图 boolean false
routes 路由配置项 Route[] -
historyType 路由跳转类型 'hashHistory' | 'browserHistory' 'browserHistory'
header genuine 类型下的顶部功能栏 ReactNode | null 不传时默认为主题自带 header
apperance 主题外观配置项 Apperance {color:'dark'}
logo 主题 logo 配置项 Logo | (toggle: boolean) => Logo -
login 主题登录信息配置项 Login -
toolbar 顶部工具栏，一般用于放置通知、全局搜索等 ReactNode -
pageHeader 自定义页头 (selectedMenus: Route [], location: Location) => ReactNode -
defaultExpandAll 是否默认展开侧边栏菜单 boolean false
siderTopRender 侧边栏自定义顶部渲染区域 (toggle: boolean) => ReactNode -
siderBottomRender 侧边栏自定义底部渲染区域 (toggle: boolean) => ReactNode -
accordion 左侧菜单是否采用手风琴模式 boolean true
basename 路由基础路径 string '/'
authority 用户拥有权限配置 string[] -
fallback 路由无法匹配时的候补跳转 string -
onToggle 侧边栏展开收起触发的回调 mini: boolean => void -
defaultToggle 设置默认侧边栏展开形式（设置后 dynamic 将无效） 'mini' | 'large' -
onMenuClick 菜单点击事件 (menuItem: Object) => void -

type: Route

属性名 描述 类型 默认值
name 菜单名称 string -
icon 菜单 icon ReactNode -
children 子菜单配置项 Route[] -
path 菜单跳转路径 string -
exact 菜单跳转路径是否严格匹配对应的 component boolean true
component 菜单对应页面组件 ReactNode -
withoutLayout 页面组件渲染时，不显示顶部导航栏和侧边栏 boolean false
extraData 向路由匹配的页面组件注入额外的数据 object -
authority 允许访问该路由的权限（和 Theme 中的 authority 配置的内容能够匹配上） string[] -
keepAlive 缓存组件实例 boolean false
hideInMenu 设置 true 强制在菜单中隐藏展示 boolean false
unmountOnTagClose 点击 tag 关闭时销毁组件实例 boolean false
target 是否新标签打开路由 HTMLAttributeAnchorTarget -

type: Apperance

属性名 描述 类型 默认值
color 主题颜色 'dark' | 'light' 'dark'
contentBackground 内容区域背景色 string '#f6f6f6'
contentPadding 内容区域内边距 number 0

tye: Logo

属性名 描述 类型 默认值
name 系统名称 string -
logoUrl logo 图片地址 string -
url 点击 logo 跳转地址 string -

type: Login

属性名 描述 类型 默认值
name 登录用户姓名 string -
avatar 头像图片的链接地址 string -
icon 登录用户 icon ReactNode -
children 登录菜单项 ReactNode[] -