简介
Rehive-Insight-UI 是一款基于 React 的开源 UI 库,为用户提供了构建美观并且响应式的交互界面的 API 和工具,兼容多种现代浏览器和移动设备。它可以帮助开发者快速开发 Web 应用程序和管理面板。
安装
使用 npm 安装:
--- ------- ----------------- ------
或者使用 yarn 安装:
---- --- -----------------
使用
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