Contact
简介
Contact组件用于展示企业或个人的联系信息，支持多种联系方式（邮件、电话、地址）和社交媒体链接。组件设计简洁专业，适合在企业网站的联系页面、页脚或关于我们页面中使用。
组件特性：
- 支持多种联系方式：邮件、电话、地址、网站
- 内置社交媒体链接：GitHub、Twitter、Facebook、LinkedIn
- 支持微信和 WhatsApp 二维码，悬停显示
- 自动生成可点击的链接（邮件、电话、网站）
- 提供紧凑模式，适应不同布局需求
- 支持自定义标题和描述
- 美观的图标设计，清晰易识别
案例
Props
address
地址信息。
---
import { Contact } from "@coffic/cosy-ui";
---
<Contact
title="联系我们"
description="欢迎随时与我们联系"
email="contact@example.com"
phone="+1 (555) 123-4567"
address="123 Business St, City, State 12345"
website="https://example.com"
/>
---
import { Contact } from "@coffic/cosy-ui";
---
<Contact
title="联系我们"
description="欢迎随时与我们联系"
email="contact@example.com"
phone="+1 (555) 123-4567"
website="https://example.com"
/>
background
背景色类型，支持所有预设背景色和透明度变体。
---
import { Contact } from "@coffic/cosy-ui";
---
<Contact
title="默认背景"
description="使用默认背景色的联系信息"
email="contact@company.com"
phone="+1 (555) 123-4567"
/>
---
import { Contact } from "@coffic/cosy-ui";
---
<Contact
title="主色调背景"
description="使用主色调背景的联系信息"
email="contact@company.com"
phone="+1 (555) 123-4567"
background="primary"
/>
---
import { Contact } from "@coffic/cosy-ui";
---
<Contact
title="主色调半透明"
description="使用主色调半透明背景的联系信息"
email="contact@company.com"
phone="+1 (555) 123-4567"
background="primary/20"
/>
---
import { Contact } from "@coffic/cosy-ui";
---
<Contact
title="强调色背景"
description="使用强调色背景的联系信息"
email="contact@company.com"
phone="+1 (555) 123-4567"
background="accent"
/>
---
import { Contact } from "@coffic/cosy-ui";
---
<Contact
title="成功色背景"
description="使用成功色背景的联系信息"
email="contact@company.com"
phone="+1 (555) 123-4567"
background="success"
/>
---
import { Contact } from "@coffic/cosy-ui";
---
<Contact
title="警告色背景"
description="使用警告色背景的联系信息"
email="contact@company.com"
phone="+1 (555) 123-4567"
background="warning"
/>
---
import { Contact } from "@coffic/cosy-ui";
---
<Contact
title="错误色背景"
description="使用错误色背景的联系信息"
email="contact@company.com"
phone="+1 (555) 123-4567"
background="error"
/>
class
自定义CSS类，可用于覆盖默认样式。
---
/**
* @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="custom-contact-card"
/>
<style>
.custom-contact-card {
background: linear-gradient(135deg, #eff6ff 0%, #f3e8ff 100%);
border: 2px solid #bfdbfe;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}
</style>
compact
是否使用紧凑模式。
---
/**
* @component Contact.Compact
*
* @description
* 紧凑模式的Contact组件示例。
*/
import { Contact } from "@coffic/cosy-ui";
---
<Contact email="contact@company.com" phone="+1 (555) 123-4567" compact />
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"
/>
电子邮件地址。
---
import { Contact } from "@coffic/cosy-ui";
---
<Contact
title="联系我们"
description="欢迎随时与我们联系"
email="contact@example.com"
phone="+1 (555) 123-4567"
website="https://example.com"
/>
---
import { Contact } from "@coffic/cosy-ui";
---
<Contact
title="联系我们"
description="欢迎随时与我们联系"
phone="+1 (555) 123-4567"
website="https://example.com"
/>
Facebook链接。
---
/**
* @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"
/>
github
GitHub链接。
---
/**
* @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"
/>
LinkedIn链接。
---
/**
* @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"
/>
phone
电话号码。
---
import { Contact } from "@coffic/cosy-ui";
---
<Contact
title="联系我们"
description="欢迎随时与我们联系"
email="contact@example.com"
phone="+1 (555) 123-4567"
website="https://example.com"
/>
---
import { Contact } from "@coffic/cosy-ui";
---
<Contact
title="联系我们"
description="欢迎随时与我们联系"
email="contact@example.com"
website="https://example.com"
/>
title
联系信息标题。
---
/**
* @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"
/>
Twitter链接。
---
/**
* @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"
/>
website
网站链接。
---
import { Contact } from "@coffic/cosy-ui";
---
<Contact
title="联系我们"
description="欢迎随时与我们联系"
email="contact@example.com"
phone="+1 (555) 123-4567"
website="https://example.com"
/>
---
import { Contact } from "@coffic/cosy-ui";
---
<Contact
title="联系我们"
description="欢迎随时与我们联系"
email="contact@example.com"
phone="+1 (555) 123-4567"
/>
wechatQR
微信二维码图片源，支持本地图片或远程URL。悬停时显示二维码。
---
import { Contact } from "@coffic/cosy-ui";
import qrCodeImage from "@/assets/qrcode.png";
---
<Contact
title="联系我们"
description="欢迎随时与我们取得联系"
email="contact@company.com"
phone="+1 (555) 123-4567"
wechatQR={qrCodeImage}
/>
---
import { Contact } from "@coffic/cosy-ui";
import qrCodeImage from "@/assets/qrcode.png";
---
<Contact
title="联系我们"
description="欢迎随时与我们取得联系"
email="contact@company.com"
phone="+1 (555) 123-4567"
whatsappQR={qrCodeImage}
/>
---
import { Contact } from "@coffic/cosy-ui";
import qrCodeImage from "@/assets/qrcode.png";
---
<Contact
title="联系我们"
description="欢迎随时与我们取得联系"
email="contact@company.com"
phone="+1 (555) 123-4567"
wechatQR={qrCodeImage}
whatsappQR={qrCodeImage}
/>
whatsappQR
WhatsApp 二维码图片源，支持本地图片或远程URL。悬停时显示二维码。
---
import { Contact } from "@coffic/cosy-ui";
import qrCodeImage from "@/assets/qrcode.png";
---
<Contact
title="联系我们"
description="欢迎随时与我们取得联系"
email="contact@company.com"
phone="+1 (555) 123-4567"
wechatQR={qrCodeImage}
/>
---
import { Contact } from "@coffic/cosy-ui";
import qrCodeImage from "@/assets/qrcode.png";
---
<Contact
title="联系我们"
description="欢迎随时与我们取得联系"
email="contact@company.com"
phone="+1 (555) 123-4567"
whatsappQR={qrCodeImage}
/>
---
import { Contact } from "@coffic/cosy-ui";
import qrCodeImage from "@/assets/qrcode.png";
---
<Contact
title="联系我们"
description="欢迎随时与我们取得联系"
email="contact@company.com"
phone="+1 (555) 123-4567"
wechatQR={qrCodeImage}
whatsappQR={qrCodeImage}
/>