連絡先リンク
連絡先情報を表示するためのスタイライズされたリンクコンポーネントです。- 使用方法
- プロパティ
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 | string | 追加のスタイリングのためのオプション名 |
| href | string | リンクのターゲットURLまたはパス |
| onClick | function | リンクがクリックされた際にトリガーされるコールバック関数 |
| children | 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>
);
};
| プロパティ | タイプ | 説明 |
|---|---|---|
| className | string | 追加のスタイリングのためのオプション名 |
| href | string | リンクのターゲットURLまたはパス |
| onClick | 機能 | リンクがクリックされた際にトリガーされるコールバック関数 |
| children | React.ReactNode | リンク内に表示されるコンテンツ |
丸リンク
リンクのためのチップコンポーネントを備えた丸いスタイルのリンクです。- 使用方法
- プロパティ
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 | string | リンクのターゲットURLまたはパス |
| children | React.ReactNode | リンク内に表示されるコンテンツ |
| onClick | 機能 | リンクがクリックされた際にトリガーされるコールバック関数 |
ソーシャルリンク
URL、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 | string | リンクのターゲットURLまたはパス |
| children | React.ReactNode | リンク内に表示されるコンテンツ |
| タイプ | string | ソーシャルリンクの種類です。 オプションには、url、LinkedIn、Twitterがあります。 |
| onClick | function | リンクがクリックされた際にトリガーされるコールバック関数 |