Jx3box-ui-react

为dps计算器等其它react前端业务线做准备

需要对公共组件生产一个react版本

首批只移植重要的几个模块

原vue2版本 https://github.com/JX3BOX/jx3box-common-ui

Install

npm install @jx3box/jx3box-ui-react

yarn add @jx3box/jx3box-ui-react

Usage

import { Layout } from '@jx3box/jx3box-ui-react';

const App = () => (
     <Layout>
        <Header />
        <Breadcrumb 
            name='频道名称' 
            slug='slug' 
            root='/slug' 
            logo={<Jx3Logo />}
        >
            bread info
        </Breadcrumb>

        <LeftSidebar>
            left sidebar content
        </LeftSidebar>

        <Main>
            <Thx 
                postType='tool'
                postId={31129} 
                userId={59236} 
            />
            <RightSidebar>
                RightSidebar content
            </RightSidebar>
            <Footer />
        </Main>
    </Layout>
);

Layout

请确保 Layout 组件在最外层

因为 LeftSidebar, RightSidebar, Main, BreadCrumb 等会影响

页面布局的组件需要被 Layout 组件包裹才能正确计算相应的 css

• Layout: 总布局容器 内部实现Jx3BoxContext计算布局尽量放在最外层渲染

• LeftSidebar: 左侧边栏 自带收放功能和默认样式 放在 Layout 内部才能正确计算

• Main: 主显示区域 放在 Layout 内部才能正确计算

• RightSidebar: 右侧边栏触发小屏时激活流式布局 放在 Layout 内部才能正确计算

代码演示

import { Layout, BreadCrumb } from '@jx3box/jx3box-ui-react';

const { LeftSidebar, RightSidebar, Main } = Layout;

export default () => (
    <Layout>
        <Breadcrumb name='频道名称' slug='slug' root='/slug'>
            bread content
        </Breadcrumb>

        <LeftSidebar>
            LeftSidebar content
        </LeftSidebar>

        <Main>
            <RightSidebar>
                RightSidebar content
            </RightSidebar>
        </Main>
    </Layout>
);

Breadcrumb

魔盒面包屑组件

请确保被 Layout 组件包裹

代码演示

import { Layout, Breadcrumb } from '@jx3box/jx3box-ui-react';

export default () => (
    <Layout>
        <Breadcrumb 
            name='频道名称'
            slug='slug' 
            root='/slug' 
            logo={<Jx3Logo />} 
        >
            custom breadcrumb info
        </Breadcrumb>
    </Layout>
);

| props | detail | type | default | | :---- | :---- | :---- | :---- | | name | 面包屑标题 | string | - | | root | 点击面包屑标题跳转的链接 | string | - | | slug | 组装发布按钮的请求地址 | string | - | | logo | logo图片 | ReactNode | - | | crumbEnable | 是否显示 crumbBE 组件 | boolean | undefined | | publishEnable | 是否显示发布按钮 | boolean | true | | feedbackEnable | 是否显示反馈按钮 | boolean | true |

Thx

功能区组件

代码演示

import { Layout, Header } from '@jx3box/jx3box-ui-react';

export default () => (
    <Thx postId={31129} postType='tool' userId={59236} />
);

| props | detail | type | default | | :---- | :---- | :---- | :---- | | postType | 文章类型 | string or number | - | | postId | 文章id | string or number | - | | userId | 发布文章的作者id | string or number | - |

Header

魔盒公共头部组件

请确保被 Layout 组件包裹

代码演示

import { Layout, Header } from '@jx3box/jx3box-ui-react';

export default () => (
    <Layout>
        <Header />
    </Layout>
);

Footer

魔盒公共底部组件

代码演示

import { Footer } from '@jx3box/jx3box-ui-react';

export default () => (
    <Layout>
        <Footer/>
    </Layout>
);

开发相关

StoryBook 查看组件库

npm run storybook

本地开发

npm run dev