Contact
简介
Contact组件用于展示企业或个人的联系信息，支持多种联系方式（邮件、电话、地址）和社交媒体链接。组件设计简洁专业，适合在企业网站的联系页面、页脚或关于我们页面中使用。
组件特性：
- 支持多种联系方式：邮件、电话、地址、网站
- 内置社交媒体链接：GitHub、Twitter、Facebook、LinkedIn
- 自动生成可点击的链接（邮件、电话、网站）
- 提供紧凑模式，适应不同布局需求
- 支持自定义标题和描述
- 美观的图标设计，清晰易识别
基础用法
最简单的联系信息展示：
---
/**
* @component Contact.Basic
*
* @description
* 基础Contact组件示例，展示最简单的联系信息用法。
*/
import { Contact } from '@coffic/cosy-ui';
---
<Contact
email="contact@company.com"
phone="+1 (555) 123-4567"
address="123 Business St, City, State 12345"
/>
带标题的联系信息
通过title和description属性添加标题和描述：
---
/**
* @component Contact.WithTitle
*
* @description
* 带标题和描述的Contact组件示例。
*/
import { Contact } from '@coffic/cosy-ui';
---
<Contact
title="联系我们"
description="欢迎随时与我们取得联系，我们将尽快回复您"
email="contact@company.com"
phone="+1 (555) 123-4567"
address="123 Business St, City, State 12345"
/>
带社交媒体链接
添加社交媒体链接，展示完整的联系方式：
---
/**
* @component Contact.Social
*
* @description
* 带社交媒体链接的Contact组件示例。
*/
import { Contact } from '@coffic/cosy-ui';
---
<Contact
title="联系我们"
email="contact@company.com"
phone="+1 (555) 123-4567"
website="https://www.company.com"
github="https://github.com/company"
twitter="https://twitter.com/company"
facebook="https://facebook.com/company"
linkedin="https://linkedin.com/company/company"
/>
紧凑模式
使用compact属性创建更紧凑的布局：
---
/**
* @component Contact.Compact
*
* @description
* 紧凑模式的Contact组件示例。
*/
import { Contact } from '@coffic/cosy-ui';
---
<Contact email="contact@company.com" phone="+1 (555) 123-4567" compact />
自定义样式
通过class属性自定义联系信息卡片样式：
---
/**
* @component Contact.CustomStyle
*
* @description
* 展示如何使用class属性自定义Contact组件的样式。
*/
import { Contact } from '@coffic/cosy-ui';
---
<Contact
title="联系我们"
description="自定义样式的联系信息卡片"
email="contact@company.com"
phone="+1 (555) 123-4567"
address="123 Business St, City, State 12345"
github="https://github.com/company"
twitter="https://twitter.com/company"
class="cosy:bg-gradient-to-br cosy:from-blue-50 cosy:to-purple-50 cosy:border-2 cosy:border-blue-200 cosy:shadow-2xl"
/>