应用程序头
Appheader是一个灵活的复合组件,提供完整的应用程序头,支持多版式,反应行为,以及可自定义的部分,包括标志,app名,导航,动作按钮等.
图片参考
应用程序头使用
import { AppHeader } from '@dt-dds/react-app-header';
import { Icon } from '@dt-dds/react-icon';
import { IconButton } from '@dt-dds/react-icon-button';
export const App = () => {
return (
<AppHeader type='standard'>
<AppHeader.Actions position='left'>
<IconButton ariaLabel='menu' onClick={() => null}>
<Icon code='menu' />
</IconButton>
</AppHeader.Actions>
<AppHeader.AppName name='My App' />
<AppHeader.Logo>
<img src='/logo.svg' alt='Logo' />
</AppHeader.Logo>
<AppHeader.Navigation position='center'>
<ul>
<li>
<a href='/home'>Home</a>
</li>
<li>
<a href='/about'>About</a>
</li>
</ul>
</AppHeader.Navigation>
<AppHeader.Actions position='right'>
<IconButton ariaLabel='search' onClick={() => null}>
<Icon code='search' />
</IconButton>
</AppHeader.Actions>
</AppHeader>
);
};
API 密码
应用程序头
管理所有儿童部件的布局和状态的主要容器部分.
| 财产 | 类型 | 默认 | 说明 |
|---|---|---|---|
type | 'standard' | 'compact' | standard | 确定页眉布局. standard 在标识前显示应用程序名称, compact 后显示标志. |
style | React.CSSProperties | - 说吧 | 自定义适用于信头容器的 CSS 属性 |
children | ReactNode | - 说吧 | 子组件: Logo、 AppName、 导航和动作 |
Appheiper (英语). 标记
申请标志的容器. 根据信头类型和布局自动调整定位.
| 财产 | 类型 | 默认 | 说明 |
|---|---|---|---|
children | ReactNode | - 说吧 | Logo 内容( 典型的图像) |
style | React.CSSProperties | - 说吧 | 自定义 CSS 属性 |
Appheiper (英语). 应用程序Name
显示基于头型的自动打字样式的应用程序名称.
| 财产 | 类型 | 默认 | 说明 |
|---|---|---|---|
name | string | - 说吧 | 应用程序名称文本 |
children | ReactNode | - 说吧 | 备选案文 name 自定义内容的道具 |
style | React.CSSProperties | - 说吧 | 自定义 CSS 属性 |
Appheiper (英语). 导航
导航连接容器。 支持灵活定位和反应灵敏的能见度.
| 财产 | 类型 | 默认 | 说明 |
|---|---|---|---|
children | ReactNode | - 说吧 | 导航内容( 通常是链接列表) |
position | 'center' | 'left' | 'right' | center | 信头内的导航位置 |
style | React.CSSProperties | - 说吧 | 自定义 CSS 属性 |
Appheiper (英语). 行动
用于动作按钮和控制(搜索、菜单、用户简介等)的容器。 支持左右定位.
| 财产 | 类型 | 默认 | 说明 |
|---|---|---|---|
children | ReactNode | - 说吧 | 动作按钮和控件 |
position | 'left' | 'right' | right | 行动在标题中的位置 |
style | React.CSSProperties | - 说吧 | 自定义 CSS 属性 |
响应道具
所有化合物组件Logo, (中文(简体) ), AppName, (中文(简体) ), Navigation, (中文(简体) ), Actions(a) 支持通过下列方式提高能见度: hide 财务报告和审定财务报表 show 道具 :
hide: 当媒体查询匹配时隐藏组件(例如,),hide={(微风:${主题.breakpoints.mq3}px)}隐藏在桌面上)show:仅在媒体查询匹配时显示组件(如:,show={(最大宽度: ${主题. breakpoints.mq3}}px)}仅在手机上显示)- 如果两者兼有
hide财务报告和审定财务报表show提供,hide优先排序
堆栈
- 类型脚本 用于静态类型检查
- 反应 — JavaScript 用户界面库
- 情感 用于使用 JavaScript 写入 Css 样式
- 故事书 ——由Vite供电的UI组件环境
- 欢乐 - JavaScript 测试框架
- 反应测试库 - 以用户为中心测试用户界面组件
- ESLint 语录 代码林入
- 高级 用于代码格式
- 苏普 - 由Esbuild供电的脚本捆绑机
- 雅伦 从管理软件包
图标
yarn build- 制作软件包yarn dev- 在当地运行软件包yarn lint- 将所有文件输入此软件包yarn test- 测试所有单位yarn test:report- 打开测试覆盖报告yarn test:update:snapshot- 进行所有单元测试并更新快照
汇编
运行 yarn build 从软件包的根部 齐声 将原始的 TypeScript 和 React 代码编译为普通 JavaScript .
这个 /dist 文件夹包含编译输出.
app-header
└── dist
├── index.d.ts <-- Types
├── index.js <-- CommonJS version
└── index.mjs <-- ES Modules version
...
版本
跟着 语义版本
许可证
许可证根据 MIT 许可证