연락 링크
연락처 정보를 표시하기 위한 스타일화된 링크 구성 요소입니다.- 사용법
- 프로퍼티
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>
);
};
| 프로퍼티 | 유형 | 설명 |
|---|---|---|
| 클래스 네임 | 문자열 | 추가 스타일을 위한 선택적 이름 |
| href | 문자열 | 링크의 대상 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>
);
};
| 프로퍼티 | 유형 | 설명 |
|---|---|---|
| 클래스 네임 | 문자열 | 추가 스타일을 위한 선택적 이름 |
| href | 문자열 | 링크의 대상 URL 또는 경로 |
| onClick | function | 링크가 클릭될 때 트리거되는 콜백 함수 |
| children | 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 | 문자열 | 링크의 대상 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 | 문자열 | 링크의 대상 URL 또는 경로 |
| children | React.ReactNode | 링크 내부에 표시할 콘텐츠 |
| 유형 | 문자열 | 소셜 링크 유형입니다. 옵션은 다음과 같습니다: url, LinkedIn, Twitter |
| onClick | 기능 | 링크를 클릭할 때 호출되는 콜백 함수 |