logo
简体中文

导航菜单

文档

Contact

简介

Contact组件用于展示企业或个人的联系信息，支持多种联系方式（邮件、电话、地址）和社交媒体链接。组件设计简洁专业，适合在企业网站的联系页面、页脚或关于我们页面中使用。

组件特性：

  • 支持多种联系方式：邮件、电话、地址、网站
  • 内置社交媒体链接：GitHub、Twitter、Facebook、LinkedIn
  • 自动生成可点击的链接（邮件、电话、网站）
  • 提供紧凑模式，适应不同布局需求
  • 支持自定义标题和描述
  • 美观的图标设计，清晰易识别

address

地址信息。

<Contact address="123 Business St, City, State 12345" />

class

自定义CSS类，可用于覆盖默认样式。

联系我们

自定义样式的联系信息卡片

123 Business St, City, State 12345
contact@company.com
GitHub
+1 (555) 123-4567
Twitter 
---
/**
 * @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

联系信息描述。

联系我们

欢迎随时与我们取得联系，我们将尽快回复您

123 Business St, City, State 12345
contact@company.com
+1 (555) 123-4567 
---
/**
 * @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"
/>

email

电子邮件地址。

123 Business St, City, State 12345
contact@company.com
+1 (555) 123-4567 
---
/**
 * @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"
/>

facebook

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

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

电话号码。

123 Business St, City, State 12345
contact@company.com
+1 (555) 123-4567 
---
/**
 * @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

联系信息标题。

联系我们

欢迎随时与我们取得联系，我们将尽快回复您

123 Business St, City, State 12345
contact@company.com
+1 (555) 123-4567 
---
/**
 * @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

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

网站链接。

<Contact website="https://example.com" />

搜索