@gridui / site-footer
着陆的家庭。公共API: SiteFooter, SiteFooterProps, SiteFooterSection,
SiteFooterLink, SiteFooterLinkProps, SiteFooterLinkItem.
从 @gridui/site-footer 和负载 @gridui/site-footer/styles.css 后的主题。
此家族使用的任何组合依赖项的加载样式。应用程序拥有自己的路由、标签、状态持久化和品牌。
通过 sections, caller-owned branding、可选 credit,可选 agents.
通过Grid Split和FrameFooter,合成具有响应的结构区域。
章节链接使用公共的SiteFooterLink组件。SiteFooterLinkItem是
链接数据契约包含 label 和 href;它取代了以前的数据类型
没有兼容性别名的SiteFooterLink。
品牌维度
brandingWidth 和 brandingMinHeight 接受本地CSS长度或数字
像素。他们也接受 { base, md?, lg? }, md 在40分钟和40分钟 lg 在
64快速眼动。丢失的断点继承前一个值。尺寸仅适用于
品牌区域;本地的 style 继续设置页脚元素的样式。
<SiteFooter
branding={<h2>Product</h2>}
sections={sections}
brandingWidth={{ base: "auto", md: "16rem" }}
brandingMinHeight={0}
/>
明确的宽度固定品牌栏,而导航使用其余栏
空间,包括低于默认最小12rem的宽度。使用 base: "auto" 来
保留全宽度的移动品牌。 brandingMinHeight={0} 删除保留的
最小化,同时保留内容填充和导航对齐。
省略这些道具保留了现有的比例:品牌从一个品牌发展而来 25%的基础,在40rem及以上,最低12rem,最低14rem高度 在这些宽度。移动品牌仍然是内容大小的。结构裂缝 继续遵循移动和桌面的安排。
页脚的链接
import { SiteFooterLink } from "@gridui/site-footer";
<SiteFooterLink href="/contact/">Contact</SiteFooterLink>
SiteFooterLink呈现一个本地锚,并要求 href。它转发原生的
锚定道具、子对象、refs和事件处理程序。 className 是合并和本地的
style 仍然可用于调用方自定义。相同的组件可以是
独立用于呼叫者拥有的页脚标记、信用或其他组合。
链接使用支持的排版、前景色、换行和主题间距 行内子节点之间。下划线出现在悬停和键盘焦点上。主题 拥有焦点轮廓。应用程序拥有自己的目的地、标签和导航策略。