
رابط الاتصال
مكون رابط منمق لعرض معلومات الاتصال.- الاستخدام
- خصائص
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 | اسم اختياري للتنسيق الإضافي. |
| رابط | نص | عنوان URL المستهدف أو المسار للرابط |
| عند النقر | وظيفة | دالة رد النداء ليتم تفعيلها عند النقر على الرابط |
| الأبناء | 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>
);
};
| خصائص | النوع | الوصف |
|---|---|---|
| اسم الصنف | string | اسم اختياري لتنسيقات إضافية |
| رابط | string | عنوان URL المستهدف أو المسار للرابط |
| عند النقر | وظيفة | دالة رد النداء ليتم تفعيلها عند النقر على الرابط |
| الأبناء | 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>
);
};
| خصائص | النوع | الوصف |
|---|---|---|
| رابط | string | عنوان URL المستهدف أو المسار للرابط |
| الأبناء | React.ReactNode | المحتوى ليتم عرضه داخل الرابط |
| عند النقر | وظيفة | دالة رد النداء ليتم تفعيلها عند النقر على الرابط |
رابط التواصل الاجتماعي
روابط اجتماعية منمقة، مع دعم لأنواع متعددة من الروابط الاجتماعية، مثل العناوين الإلكترونية، 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>
);
};
| خصائص | النوع | الوصف |
|---|---|---|
| رابط | string | عنوان URL المستهدف أو المسار للرابط |
| الأبناء | React.ReactNode | المحتوى ليتم عرضه داخل الرابط |
| النوع | string | نوع الروابط الاجتماعية. تشمل الخيارات: url, LinkedIn, وTwitter |
| عند النقر | وظيفة | دالة رد النداء ليتم تفعيلها عند النقر على الرابط |