Footer 页脚

Footer 现在同时支持两种组织方式：可以继续像直接写nav、aside和自定义 class，也可以改用brand、sections与 Footer.Section这组结构化 API，把品牌区、链接列和表单区拆开表达。

何时使用

把最常见的三列 footer 改成 sections 数据驱动，仍然提供当前视觉类名和响应式方向。

当某一列需要自己控制内容结构时，可以直接组合 Footer.Brand、Footer.Section、Footer.Link。

基础示例展示，这里改用 sections 表达同一个场景。

展示品牌区场景；推荐用 brand + sections，把品牌说明和导航列拆开。

展示订阅表单场景；自定义 section 可直接切换成 form 根节点。

展示品牌加社交图标场景；图标区适合通过 content 自定义。

展示混合场景；这里可以用 children 自由拼装，展示组合分支。

展示两行链接矩阵；用 sections 组合数据，继续交给 className 控制布局。

展示居中品牌场景；这里演示 center + 复合内容的组合。

展示居中导航与版权场景；展示基础的 children 写法。

双层 footer 场景展示；下半部分可配合 bordered 或直接使用原类名。

当前页展示的是语义化的 Footer API，基础的 children 写法仍然可用。

属性	说明	类型	默认值
`as`	指定根节点标签，默认输出 footer	`any`	`'footer'`
`brand`	结构化品牌区内容，不传 children 时会渲染为 Footer.Brand	`any`	`-`
`bordered`	追加顶部边线，适合双层页脚的下半部分	`boolean`	`false`
`center`	追加 footer-center 居中类	`boolean`	`false`
`direction`	控制 footer-horizontal / footer-vertical	`'horizontal' \| 'vertical'`	`-`
`sections`	结构化列数据，可混合文本链接、自定义内容和表单区	`FooterSection[]`	`[]`
`wrap`	为多行布局补充垂直间距	`boolean`	`false`
`children`	传入后使用基础自定义结构，保持对基础写法的支持	`any`	`-`

属性	说明	类型	默认值
`as`	列容器标签，默认 nav，也可改成 form / div / aside	`any`	`'nav'`
`title`	列标题，内部复用 Footer.Title 的 footer-title 样式	`any`	`-`
`items`	快速渲染一组 Footer.Link 文本链接	`Array<FooterItem>`	`[]`
`content`	自定义列内容，适合表单、图标区等复杂结构	`any`	`-`
`inline`	把 items 包装成横向图标或标签流	`boolean`	`false`
`titleClassName`	自定义标题类名	`string`	`-`
`contentClassName`	inline 模式下自定义内容容器类名	`string`	`-`

Footer.Brand：品牌或版权信息容器，默认渲染aside

Footer.Title：带footer-title类名的标题节点

Footer.Link：默认输出带link link-hover的文本链接

Footer.Section：单列容器，支持title、items、content

列结构比较规则时，优先用sections，维护成本更低；如果某一列需要完全自定义布局，或者你已经有现成的nav/aside模板，也可以继续直接写children。

这类内容更适合放到Footer.Section的content 里；如果只是普通文本链接，再用items会更省代码。

需要。它们仍然是最轻量的布局开关，适合和当前的sm:footer-horizontal、footer-center类名习惯一起工作，不会破坏项目页面的视觉结果。