@aglyn/ shared- ii- next
反应依赖于 Next.js 的组件和钩子: 双柱制表符中枢,其活性制表符活在 URL 中,基于路由的路段铁路, a next/image 包装有闪光的占位符和页标题提供者。 Aglyn控制台和用于插件飞船的控制台页面都是用它建造的. 它假设 App 路由器(next/navigation) (中文(简体) ).
从Aglyn monorepo出版到npm. 随后的版本 语义版本。 。 。 .
安装
npm install @aglyn/shared-ui-next
同伴依赖性 : react, (中文(简体) ), next, (中文(简体) ), @mui/material 财务报告和审定财务报表 @mui/lab (标签组件使用) TabContext, (中文(简体) ), TabList 财务报告和审定财务报表 TabPanel 从 @mui/lab) (中文(简体) ).
里面有什么东西
从根入:
HubTabs——一通导航卡,左边有垂直标签,右边有活动面板,倒塌为小屏幕上水平标签. 带tabs: { id, label, content }[],可选navHeader,以及lazy将安装面板推迟到首次打开。 活动标签被映射到?tab=查询参数,所以一个标签可以链接到前后并存活下来. 一旦显示, 面板就会挂载 .HubSections——同道道道,按路由选择一段而不用取道板. 带sections: { href, label, visible?, locked? }[]生成children铁路旁边 每个区段都应该是自己的代码分割路由时使用. 过wide对于需要整行的一页,例如宽表或记录的细节:然后将铁道划出上方作为水平条.useActiveSection(sections)——当前路径名所在区域,与最长的路径名相匹配href前缀在路径分隔边界上,或null一种与铁路一致的面包屑.Image—— 说next/image包裹为情感风格组件,以动画SVG闪光为模糊的占位符.width财务报告和审定财务报表height默认为100;通过disableShimmer关闭占位符.NextPageTitleProvider, (中文(简体) ),NextPageTitle, (中文(简体) ),useNextPageTitle, (中文(简体) ),useNextPageTitleContext由各部分组成一个文件标题,并通过next/head。 。 。 .PageDecorated编辑NextPageWithLayout类型 —— 使页面本身声明的版式内有一个页面.
由子路径:
@aglyn/shared-ui-next/hooks/use-tab-param—— 说useTabParam({ ids, param?, fallback?, onChange? })返回时{ tab, onTabChange },以 URL 为基础的标签状态HubTabs继续发展.onTabChange是一个物质UI的入站TabList是因为onChange。 。 。 .
使用量
'use client'
import { HubTabs } from '@aglyn/shared-ui-next'
export function SettingsHub() {
return (
<HubTabs
navHeader="Settings"
tabs={[
{ id: 'general', label: 'General', content: <p>General settings</p> },
{ id: 'members', label: 'Members', content: <p>Members</p> },
]}
/>
)
}
/settings?tab=members 打开第二个标签.
怎样才合适
A 类 shared UI软件包. 这取决于 @aglyn/shared-ui-jsx, (中文(简体) ), @aglyn/shared-ui-theme, (中文(简体) ), @aglyn/shared-data-enums, (中文(简体) ), @aglyn/shared-util-dom 财务报告和审定财务报表 @aglyn/shared-util-tools;特性插件在它们的控制台页面上依赖于它. 共享软件包是通用的:它们只导入其他共享软件包并持有没有插件的域名.
许可证
阿帕奇2.0 (英语). 资料来源: https://github.com/aglyn/aglyn/tree/main/libs/shared/ui/next 页面存档备份,存于互联网档案馆