github-actions[bot]
cd73088be6
Created by Github action Co-authored-by: github-actions <github-actions@twenty.com>
95 lines
5.1 KiB
Plaintext
95 lines
5.1 KiB
Plaintext
---
|
|
title: تلميح التطبيق
|
|
icon: رسالة
|
|
---
|
|
|
|
<Frame>
|
|
<img src="/images/user-guide/tips/light-bulb.png" alt="رأس الصفحة" />
|
|
</Frame>
|
|
|
|
رسالة مختصرة تعرض معلومات إضافية عند تفاعل المستخدم مع عنصر.
|
|
|
|
<Tabs>
|
|
<Tab title="استخدام">
|
|
|
|
```jsx
|
|
import { AppTooltip } from "@/ui/display/tooltip/AppTooltip";
|
|
|
|
export const MyComponent = () => {
|
|
return (
|
|
<>
|
|
<p id="hoverText" style={{ display: "inline-block" }}>
|
|
رؤى العملاء
|
|
</p>
|
|
<AppTooltip
|
|
className
|
|
anchorSelect="#hoverText"
|
|
content="استكشاف سلوك العملاء وتفضيلاتهم"
|
|
delayHide={0}
|
|
offset={6}
|
|
noArrow={false}
|
|
isOpen={true}
|
|
place="bottom"
|
|
positionStrategy="absolute"
|
|
/>
|
|
</>
|
|
);
|
|
};
|
|
```
|
|
|
|
</Tab>
|
|
|
|
<Tab title="المحددات">
|
|
|
|
|
|
| المحددات | النوع | الوصف |
|
|
| ------------------ | ---------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
|
| اسم الفئة | نص | فئة CSS اختيارية للتنسيق الإضافي |
|
|
| اختيار الربط | محدد CSS | المحدِّد لمرساة التلميح (العنصر الذي يُفعّل التلميح) |
|
|
| المحتوى | نص | المحتوى الذي تريد عرضه داخل التلميح |
|
|
| تأخير الإخفاء | رقم | التأخير بالثواني قبل إخفاء التلميح بعد مغادرة المؤشر للمرساة |
|
|
| الإزاحة | رقم | الإزاحة بالبكسل لتحديد موضع التلميح |
|
|
| بدون سهم | قيمة منطقية | إذا كانت القيمة `صحيح`, سيتم إخفاء السهم في المربط التنبيهي |
|
|
| مفتوح | قيمة منطقية | إذا كانت القيمة `صحيح`, يكون المربط التنبيهي مفتوحًا افتراضيًا |
|
|
| المكان | نص `PlacesType` من `react-tooltip` | يحدد موضع المربط التنبيهي. تتضمن القيم `bottom`، `left`، `right`، `top`، `top-start`، `top-end`، `right-start`، `right-end`، `bottom-start`، `bottom-end`، `left-start`، و`left-end` |
|
|
| استراتيجية الوضعية | نص `PositionStrategy` من `react-tooltip` | استراتيجية وضعية للمربط التنبيهي. له قيمتان: `absolute` و`fixed` |
|
|
|
|
|
|
|
|
</Tab>
|
|
|
|
</Tabs>
|
|
|
|
## نص متجاوز مع تلميح
|
|
|
|
يعالج النص الزائد ويعرض مربط تنبيهي عند فيضان النص.
|
|
|
|
<Tabs>
|
|
<Tab title="استخدام">
|
|
|
|
```jsx
|
|
import { OverflowingTextWithTooltip } from 'twenty-ui/display';
|
|
|
|
export const MyComponent = () => {
|
|
const crmTaskDescription =
|
|
'المتابعة مع العميل بشأن استفساره الأخير عن المنتج. مناقشة خيارات التسعير، ومعالجة أي مخاوف، وتقديم معلومات إضافية عن المنتج. تسجيل تفاصيل المحادثة في نظام إدارة علاقات العملاء (CRM) للرجوع إليها لاحقاً.';
|
|
|
|
return <OverflowingTextWithTooltip text={crmTaskDescription} />;
|
|
};
|
|
```
|
|
|
|
</Tab>
|
|
|
|
<Tab title="الخصائص">
|
|
|
|
|
|
| الخصائص | النوع | الوصف |
|
|
| ------- | ------ | --------------------------------------------- |
|
|
| نص | string | المحتوى الذي تريد عرضه في منطقة النص المتجاوز |
|
|
|
|
|
|
|
|
</Tab>
|
|
|
|
</Tabs>
|