网站
Contact - 联系页面
留言表单、联系资料、常见问题与位置图片。
用法
什么时候用它
向完整表单传入本地化字段标签，以及由应用管理的提交状态。
来自@misoto22/folio/website
import { CorrespondenceSection } from '@misoto22/folio/website'说明
联系页面的主要内容与辅助资料。
实践建议
推荐
- 提供本地化标签、含义明确的链接和有用的图片替代文本。
避免
- 不要在展示组件中放入服务凭据、路由逻辑或后端模型。
示例
受控留言表单
应用控制每个字段，并在自己的提交工作完成后确认成功。这个本地示例仅在内存中保存草稿，不会发送消息。
Start a conversation
组成部分
在调用处组合，而不是通过 props 配置——所以这个组件没有预料到的布局，依然表达得出来。
ContactFormView
受控联系表单。验证、提交和消息送达均由应用负责。
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| labels必填 | ContactFormLabels | — | |
| limits必填 | Record<keyof ContactFormValues, number> | — | |
| onFieldChange必填 | (field: keyof ContactFormValues, value: string) => void | — | |
| onSubmit必填 | FormEventHandler<HTMLFormElement> | — | |
| onTopicChange必填 | (value: string) => void | — | |
| topic必填 | string | — | |
| topics必填 | { value: string; label: string }[] | — | |
| values必填 | ContactFormValues | — | |
| error | string | — | |
| idPrefix | string | 可选的稳定前缀，用于链接到某个具体表单。 | |
| pending | boolean | false | — |
| success | { title: string; description: string } | 服务端确认的成功状态。应用决定何时可以隐藏表单。 |
ContactFacts
联系资料保留定义列表语义，并可附带导航。
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| items必填 | DescriptionListItem[] | — | |
| label必填 | string | — | |
| links | ReactNode | — | |
| linksLabel | string | — |
QuestionList
直接显示问题和答案，适合完整答案集合较短的情况。
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| items必填 | { id: string; question: string; answer: string }[] | — | |
| title必填 | string | — | |
| description | string | — |
同时接受 HTMLAttributes<HTMLElement> 里的全部属性，它们会直接透传给底层元素，不再逐条列出。
LocationFigure
静态地图展示；服务商地址、凭据和主题选择保留在应用中。
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| coordinates必填 | string | — | |
| label必填 | string | — | |
| credit | ReactNode | — | |
| image | ReactNode | — |
同时接受 HTMLAttributes<HTMLElement> 里的全部属性，它们会直接透传给底层元素，不再逐条列出。