UI-Components

公司内部项目UI标准React组件库。

支持环境

• 现代浏览器和 IE11 及以上。
• 内部css使用的sass预处理语言
• 国际化采用i18n

说明

• 内部css使用的sass预处理语言
• 国际化采用i18n， 需要在将内部的国际语言配置项目的国际话配置中 import{portal_cn， portal_en} from darth-portal-ui/language
• 获取内部store import{stores} from darth-portal-ui import{stores as portalStores} from darth-portal-ui 在入口文件中

const App = () => {
const allStore = {...stores, ...portalStores}
    return (
        <Provider {...stores}>
            <StoresContext.Provider value={allStore}>
                <BrowserRouter>
                    <div>
                        {renderRoutes(routers)}
                    </div>
                </BrowserRouter>
            </StoresContext.Provider>
        </Provider>
    )
};

安装

npm install --save darth-portal-ui

示例

import React from 'react';
import {observer } from 'mobx-react';
import logo from '../../images/logo.jpeg'
import Portal from "../../components/portal";

const Home = (props) => {
    const homeRouter = [
        {
            to:'/',
            title:'首页',
            key: '/'
        },
        {
            to:'/home',
            title:'组织中心',
            key: 'org'
        },
    ]

    const onSearch = (e) => {
        console.log(e, 'search')
    }

    const data = []


    return <Portal
        logo={logo}
        routers={homeRouter}
        enterSearch={onSearch}
        AsideComponent={ 'side'}
        FooterComponent={'footer'}
        redirect={'/login'}
        {...props}
    >
        content
        <div>111</div>
    </Portal>
}

export default observer(Home)

| 成员 | 说明 | 类型 |默认值 | | ---- | ---- | ---- |---- | | logo | header左上角的logo | 图片类型 | - | | routers |头部导航菜单 |array[]| [] | | enterSearch |头部搜索方法 |()=> HTMLElement| ()=> window| | AsideComponent |左侧边栏 |string 或者 react.element| - | | FooterComponent |页脚 |string 或者 react.element| - | | redirect |重定向路由 |string | '/login' | | logoName |className |string | - |

import {PortalLogin} from 'darth-portal-ui'

<PortalLogin logoImg={logo}
        contentImg={contentImg}
        {...props}
        loginGoRouter={'/'}
    >
        {this.props.children}
    </PortalLogin>

| 成员 | 说明 | 类型 |默认值 | | ---- | ---- | ---- |---- | | logoImg | header左上角的logo | 图片类型 | - | | contentImg |内容区域左侧图片 |图片类型| - | | loginGoRouter |登录成功跳转的路由 |string| -| | logoName |className |string | - |