简介
Rehive-Insight-UI 是一款基于 React 的开源 UI 库，为用户提供了构建美观并且响应式的交互界面的 API 和工具，兼容多种现代浏览器和移动设备。它可以帮助开发者快速开发 Web 应用程序和管理面板。
安装
使用 npm 安装：
npm install rehive-insight-ui --save
或者使用 yarn 安装：
yarn add rehive-insight-ui
使用
Import Rehive-Insight-UI 组件或单独导入所需的组件。
绑定并渲染组件。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- --------------------
----- --- - -- -- -
-----
-------- --
------
--
------ ------- ----API
Insight
主要 UI 入口，用于切换、展示和管理不同的页面和视图。
Props
| 名称 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| options | object | null | 可选参数，包含 initialOption 和其他选项，用于渲染和配置 Insight 和各种子组件。 |
options 配置
| 名称 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| navbar | bool | true | 是否显示导航栏 |
| theme | string | 'light' | 页面的透明度和几何样式，不同的主题包括 'dark'，'light' 和 'transparent'。 |
| title | string | "Insight" | 页面渲染时的标题，如果没有传递，它将使用默认的 Insight 标题。 |
| initialOption | { key: string, title: string } | null | 用于设置页面渲染时应该选择哪个子组件的选项。此选项应指定为一个拥有 'key' 和 'title' 属性的对象。'key' 应该是选项的唯一标识符， 'title' 应该是选项的可读名称。如果未提供此选项，则 Insight 将使用第一个子组件。 |
| options | array<{ key: string, title: string }> | null | 数组，指定可供选择的选项。数组应该包含每个选项的对象。每个对象应该包含 'key' 和 'title' 属性。'key' 应该是选项的唯一标识符， 'title' 应该是选项的可读名称。 |
| footer | node | null | 指定在页面底部呈现的节点。 |
| rightComponent | node | null | 指定在导航栏右侧呈现的节点。 |
| leftComponent | node | null | 指定在导航栏左侧呈现的节点。 |
| navbarDelegate | object | { ... } | 用于配置 navbar 的外观和行为的对象。可配置属性：brand, home, rightAlignedLinks, rightAlignedComponents 和 leftAlignedComponents。 |
| contentDelegate | object | { ... } | 用于配置页面内容外观和行为的对象。可配置属性：innerContainerClassName, innerContainerId, containerClassName, containerId, innerContainerStyle、containerStyle。 |
| navHeight | number | 50 | 指定导航栏的高度，用于计算视口高度。 |
| styles | object | {} | 指定内联 CSS 样式的对象。 |
| onNavigate | (option: { key: string, title: string }) => void | null | 页面选项的回调函数，该函数将在选项更改时被调用。回调函数接收 'key' 和 'title' 属性的对象。 |
示例
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- --------------------
----- ------- - -
- ---- ----------- ------ ---- --
- ---- ---------- ------ ------ --
- ---- ---------- ------ ------- --
--
----- --- - -- -- -
---- ----------------
--------
-----------------
--------------------------
------------
------------ -------------------- ---- -----------
---------
-------- -------
-------------- ---------
------- --------
--------- --------
------- -- ------
--
--
------
--
------ ------- ----在以上示例中，用户可以看到 Insight UI 的容器，其中包含有页面的导航栏和不同的子页面，每个子页面都包含有 Authorization，Accounts，Billing 和 Transaction 等组件，用户可以通过导航栏或者通过传递对应的 option 进行不同页面的切换或是管理。用户在使用时也可以通过定制化配置不同的 props 和配置，进一步配合组件和工具来达到所需要的 UI 效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005630b81e8991b448e0e40