联系链接
用于显示联系信息的样式化链接组件。- 用法
- 属性
import { BrowserRouter as Router } from 'react-router-dom';
import { ContactLink } from 'twenty-ui/navigation';
export const MyComponent = () => {
const handleLinkClick = (event) => {
console.log('Contact link clicked!', event);
};
return (
<Router>
<ContactLink
className
href="mailto:example@example.com"
onClick={handleLinkClick}
>
example@example.com
</ContactLink>
</Router>
);
};
| 属性 | 类型 | 描述 |
|---|---|---|
| className | 字符串 | 用于附加样式的可选名称 |
| href | 字符串 | 链接的目标网址或路径 |
| onClick | function | 链接被点击时触发的回调函数 |
| 子元素 | React.ReactNode | 在链接中显示的内容 |
原始链接
用于显示链接的风格化链接组件。- 用法
- 属性
import { RawLink } from "/navigation";
import { BrowserRouter as Router } from "react-router-dom";
export const MyComponent = () => {
const handleLinkClick = (event) => {
console.log("Contact link clicked!", event);
};
return (
<Router>
<RawLink className href="/contact" onClick={handleLinkClick}>
Contact Us
</RawLink>
</Router>
);
};
| 属性 | 类型 | 描述 |
|---|---|---|
| 类名 | 字符串 | 用于附加样式的可选名称 |
| href | 字符串 | 链接的目标网址或路径 |
| onClick | 函数 | 链接被点击时触发的回调函数 |
| 子元素 | React.ReactNode | 在链接中显示的内容 |
圆形链接
以 Chip 组件风格显示的圆形链接。- 用法
- 属性
import { RoundedLink } from "/navigation";
import { BrowserRouter as Router } from "react-router-dom";
export const MyComponent = () => {
const handleLinkClick = (event) => {
console.log("Contact link clicked!", event);
};
return (
<Router>
<RoundedLink href="/contact" onClick={handleLinkClick}>
Contact Us
</RoundedLink>
</Router>
);
};
| 属性 | 类型 | 描述 |
|---|---|---|
| href | 字符串 | 链接的目标网址或路径 |
| 子元素 | React.ReactNode | 在链接中显示的内容 |
| onClick | 函数 | 链接被点击时触发的回调函数 |
社交链接
风格化的社交链接，支持各种社交链接类型，如网址、LinkedIn 和 X（或 Twitter）。- 用法
- 属性
import { SocialLink } from "twenty-ui/navigation";
import { BrowserRouter as Router } from "react-router-dom";
export const MyComponent = () => {
return (
<Router>
<SocialLink
type="twitter"
href="https://twitter.com/twentycrm"
></SocialLink>
</Router>
);
};
| 属性 | 类型 | 描述 |
|---|---|---|
| href | 字符串 | 链接的目标网址或路径 |
| 子元素 | React.ReactNode | 在链接中显示的内容 |
| 类型 | 字符串 | 社交链接的类型。 选项包括：url、LinkedIn 和 Twitter |
| onClick | 函数 | 链接被点击时触发的回调函数 |