I18n Docs (#16746)
Attempt to fix translations... --------- Co-authored-by: github-actions <github-actions@twenty.com>
This commit is contained in:
Félix Malfait
@@ -97,7 +97,8 @@ jobs:
|
||||
skip_ref_checkout: true
|
||||
dryrun_action: false
|
||||
# Only download languages supported by Mintlify (see supported-languages.ts)
|
||||
download_language: 'fr,ar,cs,de,es,it,ja,ko,pt,ro,ru,tr,zh-CN'
|
||||
# Using multiple -l flags since download_language only accepts single language
|
||||
download_translations_args: '-l fr -l ar -l cs -l de -l es -l it -l ja -l ko -l pt -l ro -l ru -l tr -l zh-CN'
|
||||
env:
|
||||
GITHUB_TOKEN: ${{ github.token }}
|
||||
CROWDIN_PROJECT_ID: '1'
|
||||
|
||||
@@ -0,0 +1,8 @@
|
||||
---
|
||||
title: إدخال
|
||||
image: /images/user-guide/tips/light-bulb.png
|
||||
---
|
||||
|
||||
<Frame>
|
||||
<img src="/images/user-guide/tips/light-bulb.png" alt="Header" />
|
||||
</Frame>
|
||||
@@ -0,0 +1,34 @@
|
||||
---
|
||||
title: محرر الكتل
|
||||
image: /images/user-guide/api/api.png
|
||||
---
|
||||
|
||||
<Frame>
|
||||
<img src="/images/user-guide/api/api.png" alt="Header" />
|
||||
</Frame>
|
||||
|
||||
يستخدم محرر نصوص غني يعتمد على الكتل من [BlockNote](https://www.blocknotejs.org/) للسماح للمستخدمين بتحرير وعرض كتل المحتوى.
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Usage">
|
||||
|
||||
```jsx
|
||||
import { useBlockNote } from "@blocknote/react";
|
||||
import { BlockEditor } from "@/ui/input/editor/components/BlockEditor";
|
||||
|
||||
export const MyComponent = () => {
|
||||
const BlockNoteEditor = useBlockNote();
|
||||
|
||||
return <BlockEditor editor={BlockNoteEditor} />;
|
||||
};
|
||||
```
|
||||
|
||||
</Tab>
|
||||
<Tab title="Props">
|
||||
|
||||
| المحددات | النوع | الوصف |
|
||||
| -------- | ----------------- | ------------------------ |
|
||||
| محرر | `BlockNoteEditor` | مثيل أو تكوين محرر الكتل |
|
||||
|
||||
</Tab>
|
||||
</Tabs>
|
||||
@@ -0,0 +1,153 @@
|
||||
---
|
||||
title: نص
|
||||
image: /images/user-guide/notes/notes_header.png
|
||||
---
|
||||
|
||||
<Frame>
|
||||
<img src="/images/user-guide/notes/notes_header.png" alt="Header" />
|
||||
</Frame>
|
||||
|
||||
## إدخال نص
|
||||
|
||||
يسمح للمستخدمين بإدخال وتحرير النص.
|
||||
|
||||
<Tabs>
|
||||
|
||||
<Tab title="Usage">
|
||||
|
||||
```jsx
|
||||
import { RecoilRoot } from "recoil";
|
||||
import { TextInput } from "@/ui/input/components/TextInput";
|
||||
|
||||
export const MyComponent = () => {
|
||||
const handleChange = (text) => {
|
||||
console.log("Input changed:", text);
|
||||
};
|
||||
|
||||
const handleKeyDown = (event) => {
|
||||
console.log("Key pressed:", event.key);
|
||||
};
|
||||
|
||||
return (
|
||||
<RecoilRoot>
|
||||
<TextInput
|
||||
className
|
||||
label="Username"
|
||||
onChange={handleChange}
|
||||
fullWidth={false}
|
||||
disableHotkeys={false}
|
||||
error="Invalid username"
|
||||
onKeyDown={handleKeyDown}
|
||||
RightIcon={null}
|
||||
/>
|
||||
</RecoilRoot>
|
||||
);
|
||||
};
|
||||
|
||||
```
|
||||
|
||||
</Tab>
|
||||
|
||||
<Tab title="Props">
|
||||
|
||||
| المحددات | النوع | الوصف |
|
||||
| ---------------- | ----------- | ------------------------------------------------------------------------------------------------------------------------ |
|
||||
| className | string | اسم اختياري لتنسيقات إضافية |
|
||||
| التسمية | string | يمثل التسمية للإدخال. |
|
||||
| عند التغيير | function | الدالة التي تُستدعى عند تغيير قيمة الإدخال. |
|
||||
| عرض كامل | قيمة منطقية | يشير إلى ما إذا كان الإدخال يجب أن يشغل 100% من العرض. |
|
||||
| تعطيل الإختصارات | قيمة منطقية | يشير إلى ما إذا كانت الاختصارات ممكنة للإدخال. |
|
||||
| خطأ | string | يمثل رسالة الخطأ التي سيتم عرضها. عند توفرها، تضيف رمز خطأ على الجانب الأيمن من الإدخال. |
|
||||
| onKeyDown | function | يتم الاستدعاء عندما يتم الضغط على مفتاح عند التركيز على حقل الإدخال. يتلقى `React.KeyboardEvent` كمعلمة |
|
||||
| أيقونة يمين | مكون رمز | مكون أيقونة اختياري معروض على الجانب الأيمن من الإدخال. |
|
||||
|
||||
يقبل المكون أيضًا دعم خصائص HTML أخرى لعناصر الإدخال.
|
||||
|
||||
</Tab>
|
||||
|
||||
</Tabs>
|
||||
|
||||
## إدخال نص بالحجم التلقائي
|
||||
|
||||
مكون إدخال نصي يعدل ارتفاعه تلقائيًا بناءً على المحتوى.
|
||||
|
||||
<Tabs>
|
||||
|
||||
<Tab title="Usage">
|
||||
|
||||
```jsx
|
||||
import { RecoilRoot } from "recoil";
|
||||
import { AutosizeTextInput } from "@/ui/input/components/AutosizeTextInput";
|
||||
|
||||
export const MyComponent = () => {
|
||||
return (
|
||||
<RecoilRoot>
|
||||
<AutosizeTextInput
|
||||
onValidate={() => console.log("onValidate function fired")}
|
||||
minRows={1}
|
||||
placeholder="Write a comment"
|
||||
onFocus={() => console.log("onFocus function fired")}
|
||||
variant="icon"
|
||||
buttonTitle
|
||||
value="Task: "
|
||||
/>
|
||||
</RecoilRoot>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
</Tab>
|
||||
|
||||
<Tab title="Props">
|
||||
|
||||
| المحددات | النوع | الوصف |
|
||||
| ------------------ | -------- | ---------------------------------------------------------------------------------------------------------- |
|
||||
| onValidate | function | الدالة التي ترغب في تفعيلها عند تصديق المستخدم الإدخال. |
|
||||
| الحد الأدنى للأسطر | رقم | عدد الأسطر الأدنى للمساحة النصية. |
|
||||
| نص توضيحي | string | النص التوضيحي الذي ترغب في عرضه عند كون المساحة النصية فارغة. |
|
||||
| onFocus | function | الدالة التي ترغب في تفعيلها عند تركيز المساحة النصية. |
|
||||
| التنوع | string | البديل للإدخال. تشمل الخيارات: `افتراضي`، `أيقونة`، و`زر`. |
|
||||
| عنوان الزر | string | العنوان للزر (فقط للبديل الزر). |
|
||||
| القيمة | string | القيمة الأولية للمساحة النصية. |
|
||||
|
||||
</Tab>
|
||||
|
||||
</Tabs>
|
||||
|
||||
## مساحة نصية
|
||||
|
||||
تتيح لك إنشاء إدخالات نصية متعددة الأسطر.
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Usage">
|
||||
|
||||
```jsx
|
||||
import { TextArea } from "@/ui/input/components/TextArea";
|
||||
|
||||
export const MyComponent = () => {
|
||||
return (
|
||||
<TextArea
|
||||
disabled={false}
|
||||
minRows={4}
|
||||
onChange={()=>console.log('On change function fired')}
|
||||
placeholder="Enter text here"
|
||||
value=""
|
||||
/>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
</Tab>
|
||||
|
||||
<Tab title="Props">
|
||||
|
||||
| المحددات | النوع | الوصف |
|
||||
| ------------------ | ----------- | ----------------------------------------------------------- |
|
||||
| معطل | قيمة منطقية | يشير إلى ما إذا كانت المساحة النصية معطلة. |
|
||||
| الحد الأدنى للأسطر | رقم | العدد الأدنى للأسطر الظاهرة للمساحة النصية. |
|
||||
| عند التغيير | function | دالة الاستدعاء تُشغّل عند تغيّر محتوى منطقة النص |
|
||||
| نص توضيحي | string | النص المُوضّح عندما تكون منطقة النص فارغة |
|
||||
| القيمة | string | القيمة الحالية لمنطقة النص |
|
||||
|
||||
</Tab>
|
||||
</Tabs>
|
||||
@@ -0,0 +1,168 @@
|
||||
---
|
||||
title: روابط
|
||||
image: /images/user-guide/what-is-twenty/20.png
|
||||
---
|
||||
|
||||
<Frame>
|
||||
<img src="/images/user-guide/what-is-twenty/20.png" alt="Header" />
|
||||
</Frame>
|
||||
|
||||
## رابط الاتصال
|
||||
|
||||
مكون رابط منمق لعرض معلومات الاتصال.
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Usage">
|
||||
|
||||
```jsx
|
||||
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>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
</Tab>
|
||||
<Tab title="Props">
|
||||
|
||||
| المحددات | النوع | الوصف |
|
||||
| ------------------------------ | ----------------- | ------------------------------------------------ |
|
||||
| className | string | اسم اختياري لتنسيقات إضافية |
|
||||
| رابط | string | عنوان URL المستهدف أو المسار للرابط |
|
||||
| عند_النقر | وظيفة | دالة رد النداء ليتم تفعيلها عند النقر على الرابط |
|
||||
| الأبناء | `React.ReactNode` | المحتوى ليتم عرضه داخل الرابط |
|
||||
|
||||
</Tab>
|
||||
|
||||
</Tabs>
|
||||
|
||||
## رابط خام
|
||||
|
||||
مكون رابط منمق لعرض الروابط.
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Usage">
|
||||
|
||||
```jsx
|
||||
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>
|
||||
);
|
||||
};
|
||||
|
||||
```
|
||||
|
||||
</Tab>
|
||||
<Tab title="Props">
|
||||
|
||||
| المحددات | النوع | الوصف |
|
||||
| --------- | ----------------- | ------------------------------------------------ |
|
||||
| className | string | اسم اختياري لتنسيقات إضافية |
|
||||
| رابط | string | عنوان URL المستهدف أو المسار للرابط |
|
||||
| عند النقر | function | دالة رد النداء ليتم تفعيلها عند النقر على الرابط |
|
||||
| الأبناء | `React.ReactNode` | المحتوى ليتم عرضه داخل الرابط |
|
||||
|
||||
</Tab>
|
||||
</Tabs>
|
||||
|
||||
## رابط مستدير
|
||||
|
||||
رابط مستدير مثبت مع مكون Chip للروابط.
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Usage">
|
||||
|
||||
```jsx
|
||||
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>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
</Tab>
|
||||
|
||||
<Tab title="Props">
|
||||
|
||||
| المحددات | النوع | الوصف |
|
||||
| --------- | ----------------- | ------------------------------------------------ |
|
||||
| رابط | string | عنوان URL المستهدف أو المسار للرابط |
|
||||
| الأبناء | `React.ReactNode` | المحتوى ليتم عرضه داخل الرابط |
|
||||
| عند النقر | function | دالة رد النداء ليتم تفعيلها عند النقر على الرابط |
|
||||
|
||||
</Tab>
|
||||
</Tabs>
|
||||
|
||||
## رابط التواصل الاجتماعي
|
||||
|
||||
روابط اجتماعية منمقة، مع دعم لأنواع متعددة من الروابط الاجتماعية، مثل العناوين الإلكترونية، LinkedIn، وX (أو Twitter).
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Usage">
|
||||
|
||||
```jsx
|
||||
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>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
</Tab>
|
||||
<Tab title="Props">
|
||||
|
||||
| المحددات | النوع | الوصف |
|
||||
| ------------------------------ | ----------------- | ---------------------------------------------------------------------------------------------------- |
|
||||
| رابط | string | عنوان URL المستهدف أو المسار للرابط |
|
||||
| الأبناء | `React.ReactNode` | المحتوى ليتم عرضه داخل الرابط |
|
||||
| النوع | string | نوع الروابط الاجتماعية. تشمل الخيارات: `url`, `LinkedIn`, و`Twitter` |
|
||||
| عند_النقر | وظيفة | دالة رد النداء ليتم تفعيلها عند النقر على الرابط |
|
||||
|
||||
</Tab>
|
||||
</Tabs>
|
||||
@@ -0,0 +1,52 @@
|
||||
---
|
||||
title: شريط التنقل
|
||||
image: /images/user-guide/table-views/table.png
|
||||
---
|
||||
|
||||
<Frame>
|
||||
<img src="/images/user-guide/table-views/table.png" alt="Header" />
|
||||
</Frame>
|
||||
|
||||
يستعرض شريط التنقل الذي يحتوي على عدة مكونات `NavigationBarItem`.
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Usage">
|
||||
|
||||
```jsx
|
||||
import { IconHome, IconUser, IconSettings } from '@tabler/icons-react';
|
||||
import { NavigationBar } from "@/ui/navigation/navigation-bar/components/NavigationBar";
|
||||
|
||||
export const MyComponent = () => {
|
||||
|
||||
const navigationItems = [
|
||||
{
|
||||
name: "Home",
|
||||
Icon: IconHome,
|
||||
onClick: () => console.log("Home clicked"),
|
||||
},
|
||||
{
|
||||
name: "Profile",
|
||||
Icon: IconUser,
|
||||
onClick: () => console.log("Profile clicked"),
|
||||
},
|
||||
{
|
||||
name: "Settings",
|
||||
Icon: IconSettings,
|
||||
onClick: () => console.log("Settings clicked"),
|
||||
},
|
||||
];
|
||||
|
||||
return <NavigationBar activeItemName="Home" items={navigationItems}/>;
|
||||
};
|
||||
```
|
||||
|
||||
</Tab>
|
||||
<Tab title="Props">
|
||||
|
||||
| المحددات | النوع | الوصف |
|
||||
| ---------------- | ------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| اسم العنصر النشط | string | اسم العنصر النشط حاليًا في قائمة التنقل |
|
||||
| العناصر | array | مصفوفة من الكائنات التي تمثل كل عنصر من عناصر التنقل. كل كائن يحتوي على `الاسم` للعنصر، ومكون `الأيقونة` للعرض، ودالة `onClick` التي تستدعي عند النقر على العنصر |
|
||||
|
||||
</Tab>
|
||||
</Tabs>
|
||||
@@ -0,0 +1,44 @@
|
||||
---
|
||||
title: Štítek
|
||||
image: /images/user-guide/table-views/table.png
|
||||
---
|
||||
|
||||
<Frame>
|
||||
<img src="/images/user-guide/table-views/table.png" alt="Header" />
|
||||
</Frame>
|
||||
|
||||
Komponenta pro vizuální kategorizaci nebo označení obsahu.
|
||||
|
||||
<Tabs>
|
||||
|
||||
<Tab title="Usage">
|
||||
|
||||
```jsx
|
||||
import { Tag } from "@/ui/display/tag/components/Tag";
|
||||
|
||||
export const MyComponent = () => {
|
||||
return (
|
||||
<Tag
|
||||
className
|
||||
color="red"
|
||||
text="Urgent"
|
||||
onClick={() => console.log("click")}
|
||||
/>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
</Tab>
|
||||
|
||||
<Tab title="Props">
|
||||
|
||||
| Vlastnosti | Typ | Popis |
|
||||
| ---------- | --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| className | textový řetězec | Volitelný název pro dodatečné stylování |
|
||||
| barva | textový řetězec | Barva štítku. Možnosti zahrnují: `zelená`, `tyrkysová`, `nebeská`, `modrá`, `fialová`, `růžová`, `červená`, `oranžová`, `žlutá`, `šedá` |
|
||||
| text | textový řetězec | Obsah štítku |
|
||||
| onClick | funkce | Volitelná funkce vyvolaná při kliknutí uživatele na štítek |
|
||||
|
||||
</Tab>
|
||||
|
||||
</Tabs>
|
||||
@@ -0,0 +1,8 @@
|
||||
---
|
||||
title: Vstup
|
||||
image: /images/user-guide/tips/light-bulb.png
|
||||
---
|
||||
|
||||
<Frame>
|
||||
<img src="/images/user-guide/tips/light-bulb.png" alt="Header" />
|
||||
</Frame>
|
||||
@@ -0,0 +1,8 @@
|
||||
---
|
||||
title: Navigace
|
||||
image: /images/user-guide/tasks/tasks_header.png
|
||||
---
|
||||
|
||||
<Frame>
|
||||
<img src="/images/user-guide/tasks/tasks_header.png" alt="Header" />
|
||||
</Frame>
|
||||
@@ -0,0 +1,44 @@
|
||||
---
|
||||
title: Drobečková navigace
|
||||
image: /images/user-guide/fields/field.png
|
||||
---
|
||||
|
||||
<Frame>
|
||||
<img src="/images/user-guide/fields/field.png" alt="Header" />
|
||||
</Frame>
|
||||
|
||||
Zobrazuje drobečkovou navigační lištu.
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Usage">
|
||||
|
||||
```jsx
|
||||
import { BrowserRouter } from "react-router-dom";
|
||||
import { Breadcrumb } from "@/ui/navigation/bread-crumb/components/Breadcrumb";
|
||||
|
||||
export const MyComponent = () => {
|
||||
const breadcrumbLinks = [
|
||||
{ children: "Home", href: "/" },
|
||||
{ children: "Category", href: "/category" },
|
||||
{ children: "Subcategory", href: "/category/subcategory" },
|
||||
{ children: "Current Page" },
|
||||
];
|
||||
|
||||
return (
|
||||
<BrowserRouter>
|
||||
<Breadcrumb className links={breadcrumbLinks} />
|
||||
</BrowserRouter>
|
||||
)
|
||||
};
|
||||
```
|
||||
|
||||
</Tab>
|
||||
<Tab title="Props">
|
||||
|
||||
| Vlastnosti | Typ | Popis |
|
||||
| ---------- | --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| className | textový řetězec | Volitelný název třídy pro dodatečné stylování |
|
||||
| odkazy | pole | Pole objektů, z nichž každý představuje odkaz na drobečkovou navigaci. Každý objekt má vlastnost `children` (text obsahu odkazu) a nepovinnou vlastnost `href` (URL, na které se má navigovat po kliknutí na odkaz) |
|
||||
|
||||
</Tab>
|
||||
</Tabs>
|
||||
@@ -0,0 +1,168 @@
|
||||
---
|
||||
title: Odkazy
|
||||
image: /images/user-guide/what-is-twenty/20.png
|
||||
---
|
||||
|
||||
<Frame>
|
||||
<img src="/images/user-guide/what-is-twenty/20.png" alt="Header" />
|
||||
</Frame>
|
||||
|
||||
## Odkaz na kontakt
|
||||
|
||||
Stylizovaná komponenta odkazu pro zobrazení kontaktních informací.
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Usage">
|
||||
|
||||
```jsx
|
||||
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>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
</Tab>
|
||||
<Tab title="Props">
|
||||
|
||||
| Vlastnosti | Typ | Popis |
|
||||
| ---------- | ----------------- | ----------------------------------------------------- |
|
||||
| className | textový řetězec | Volitelný název pro dodatečné stylování |
|
||||
| href | textový řetězec | Cílová URL adresa nebo cesta pro odkaz |
|
||||
| onClick | funkce | Funkce zpětného volání spuštěná při kliknutí na odkaz |
|
||||
| děti | `React.ReactNode` | Obsah, který se má zobrazovat uvnitř odkazu |
|
||||
|
||||
</Tab>
|
||||
|
||||
</Tabs>
|
||||
|
||||
## Surový odkaz
|
||||
|
||||
Stylizovaná komponenta odkazu pro zobrazení odkazů.
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Usage">
|
||||
|
||||
```jsx
|
||||
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>
|
||||
);
|
||||
};
|
||||
|
||||
```
|
||||
|
||||
</Tab>
|
||||
<Tab title="Props">
|
||||
|
||||
| Vlastnosti | Typ | Popis |
|
||||
| ---------- | ----------------- | ----------------------------------------------------- |
|
||||
| className | textový řetězec | Volitelný název pro dodatečné stylování |
|
||||
| href | textový řetězec | Cílová URL adresa nebo cesta pro odkaz |
|
||||
| onClick | funkce | Funkce zpětného volání spuštěná při kliknutí na odkaz |
|
||||
| děti | `React.ReactNode` | Obsah, který se má zobrazovat uvnitř odkazu |
|
||||
|
||||
</Tab>
|
||||
</Tabs>
|
||||
|
||||
## Zaoblený odkaz
|
||||
|
||||
Zaobleně stylizovaný odkaz s komponentou Chip pro odkazy.
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Usage">
|
||||
|
||||
```jsx
|
||||
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>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
</Tab>
|
||||
|
||||
<Tab title="Props">
|
||||
|
||||
| Vlastnosti | Typ | Popis |
|
||||
| ---------- | ----------------- | ----------------------------------------------------- |
|
||||
| href | textový řetězec | Cílová URL adresa nebo cesta pro odkaz |
|
||||
| děti | `React.ReactNode` | Obsah, který se má zobrazovat uvnitř odkazu |
|
||||
| onClick | funkce | Funkce zpětného volání spuštěná při kliknutí na odkaz |
|
||||
|
||||
</Tab>
|
||||
</Tabs>
|
||||
|
||||
## Sociální odkaz
|
||||
|
||||
Stylizované sociální odkazy s podporou různých typů sociálních odkazů, jako jsou URL, LinkedIn a X (nebo Twitter).
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Usage">
|
||||
|
||||
```jsx
|
||||
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>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
</Tab>
|
||||
<Tab title="Props">
|
||||
|
||||
| Vlastnosti | Typ | Popis |
|
||||
| ---------- | ----------------- | ------------------------------------------------------------------------------------------------------- |
|
||||
| href | textový řetězec | Cílová URL adresa nebo cesta pro odkaz |
|
||||
| děti | `React.ReactNode` | Obsah, který se má zobrazovat uvnitř odkazu |
|
||||
| typ | textový řetězec | Typ sociálního odkazu. Možnosti zahrnují: `url`, `LinkedIn` a `Twitter` |
|
||||
| onClick | funkce | Funkce zpětného volání spuštěná při kliknutí na odkaz |
|
||||
|
||||
</Tab>
|
||||
</Tabs>
|
||||
@@ -0,0 +1,52 @@
|
||||
---
|
||||
title: Navigační panel
|
||||
image: /images/user-guide/table-views/table.png
|
||||
---
|
||||
|
||||
<Frame>
|
||||
<img src="/images/user-guide/table-views/table.png" alt="Header" />
|
||||
</Frame>
|
||||
|
||||
Zobrazuje navigační panel, který obsahuje více komponent `NavigationBarItem`.
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Usage">
|
||||
|
||||
```jsx
|
||||
import { IconHome, IconUser, IconSettings } from '@tabler/icons-react';
|
||||
import { NavigationBar } from "@/ui/navigation/navigation-bar/components/NavigationBar";
|
||||
|
||||
export const MyComponent = () => {
|
||||
|
||||
const navigationItems = [
|
||||
{
|
||||
name: "Home",
|
||||
Icon: IconHome,
|
||||
onClick: () => console.log("Home clicked"),
|
||||
},
|
||||
{
|
||||
name: "Profile",
|
||||
Icon: IconUser,
|
||||
onClick: () => console.log("Profile clicked"),
|
||||
},
|
||||
{
|
||||
name: "Settings",
|
||||
Icon: IconSettings,
|
||||
onClick: () => console.log("Settings clicked"),
|
||||
},
|
||||
];
|
||||
|
||||
return <NavigationBar activeItemName="Home" items={navigationItems}/>;
|
||||
};
|
||||
```
|
||||
|
||||
</Tab>
|
||||
<Tab title="Props">
|
||||
|
||||
| Vlastnosti | Typ | Popis |
|
||||
| -------------- | --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| activeItemName | textový řetězec | Název aktuálně aktivního navigačního prvku |
|
||||
| položky | pole | Pole objektů představujících jednotlivé navigační položky. Každý objekt obsahuje `název` položky, komponent `Ikona` ke zobrazení a funkce `onClick`, která se volá při kliknutí na položku. |
|
||||
|
||||
</Tab>
|
||||
</Tabs>
|
||||
@@ -0,0 +1,83 @@
|
||||
---
|
||||
title: Icons
|
||||
image: /images/user-guide/objects/objects.png
|
||||
---
|
||||
|
||||
<Frame>
|
||||
<img src="/images/user-guide/objects/objects.png" alt="Header" />
|
||||
</Frame>
|
||||
|
||||
Eine Liste von Symbolen, die in unserer App verwendet werden.
|
||||
|
||||
## Tabler-Symbole
|
||||
|
||||
Wir verwenden Tabler-Symbole für React in der gesamten App.
|
||||
|
||||
<Tabs>
|
||||
|
||||
<Tab title="Installation"><br/>
|
||||
|
||||
```
|
||||
yarn add @tabler/icons-react
|
||||
```
|
||||
|
||||
</Tab>
|
||||
|
||||
<Tab title="Props">
|
||||
|
||||
Sie können jedes Symbol als Komponente importieren. Here's an example: <br />
|
||||
|
||||
```jsx
|
||||
import { IconArrowLeft } from "@tabler/icons-react";
|
||||
|
||||
export const MyComponent = () => {
|
||||
return <IconArrowLeft color="red" size={48} />;
|
||||
};
|
||||
```
|
||||
|
||||
</Tab>
|
||||
|
||||
<Tab title="Props">
|
||||
|
||||
| Props | Typ | Beschreibung | Standard |
|
||||
| ------ | ------------ | ----------------------------------------- | ------------ |
|
||||
| größe | nummer | Die Höhe und Breite des Symbols in Pixeln | 24 |
|
||||
| farbe | Zeichenkette | Die Farbe der Symbole | currentColor |
|
||||
| Strich | nummer | Die Strichbreite des Symbols in Pixeln | 2 |
|
||||
|
||||
</Tab>
|
||||
|
||||
</Tabs>
|
||||
|
||||
## Benutzerdefinierte Symbole
|
||||
|
||||
Zusätzlich zu den Tabler-Symbolen verwendet die App auch einige benutzerdefinierte Symbole.
|
||||
|
||||
### Symbol: Adressbuch
|
||||
|
||||
Zeigt ein Adressbuchsymbol an.
|
||||
|
||||
<Tabs>
|
||||
|
||||
<Tab title="Usage">
|
||||
|
||||
```jsx
|
||||
import { IconAddressBook } from 'twenty-ui/display';
|
||||
|
||||
export const MyComponent = () => {
|
||||
return <IconAddressBook size={24} stroke={2} />;
|
||||
};
|
||||
```
|
||||
|
||||
</Tab>
|
||||
|
||||
<Tab title="Props">
|
||||
|
||||
| Props | Typ | Beschreibung | Standard |
|
||||
| ------ | ------ | ----------------------------------------- | -------- |
|
||||
| größe | nummer | Die Höhe und Breite des Symbols in Pixeln | 24 |
|
||||
| Strich | nummer | Die Strichbreite des Symbols in Pixeln | 2 |
|
||||
|
||||
</Tab>
|
||||
|
||||
</Tabs>
|
||||
@@ -0,0 +1,8 @@
|
||||
---
|
||||
title: Eingabe
|
||||
image: /images/user-guide/tips/light-bulb.png
|
||||
---
|
||||
|
||||
<Frame>
|
||||
<img src="/images/user-guide/tips/light-bulb.png" alt="Header" />
|
||||
</Frame>
|
||||
@@ -0,0 +1,54 @@
|
||||
---
|
||||
title: Auswahl
|
||||
image: /images/user-guide/what-is-twenty/20.png
|
||||
---
|
||||
|
||||
<Frame>
|
||||
<img src="/images/user-guide/what-is-twenty/20.png" alt="Header" />
|
||||
</Frame>
|
||||
|
||||
Ermöglicht es Benutzern, einen Wert aus einer Liste vordefinierter Optionen auszuwählen.
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Usage">
|
||||
|
||||
```jsx
|
||||
import { RecoilRoot } from 'recoil';
|
||||
import { IconTwentyStar } from 'twenty-ui/display';
|
||||
|
||||
import { Select } from '@/ui/input/components/Select';
|
||||
|
||||
export const MyComponent = () => {
|
||||
|
||||
return (
|
||||
<RecoilRoot>
|
||||
<Select
|
||||
className
|
||||
disabled={false}
|
||||
label="Select an option"
|
||||
options={[
|
||||
{ value: 'option1', label: 'Option A', Icon: IconTwentyStar },
|
||||
{ value: 'option2', label: 'Option B', Icon: IconTwentyStar },
|
||||
]}
|
||||
value="option1"
|
||||
/>
|
||||
</RecoilRoot>
|
||||
);
|
||||
};
|
||||
|
||||
```
|
||||
|
||||
</Tab>
|
||||
<Tab title="Props">
|
||||
|
||||
| Props | Typ | Beschreibung |
|
||||
| ------------ | ------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| Klassenname | Zeichenkette | Optionale CSS-Klasse für zusätzliche Stilgebung |
|
||||
| deaktiviert | boolesch | Wenn auf `true` gesetzt, wird die Benutzerinteraktion mit der Komponente deaktiviert |
|
||||
| Beschriftung | Zeichenkette | Die Beschriftung, um den Zweck der `Select`-Komponente zu beschreiben |
|
||||
| onChange | function | Die Funktion, die aufgerufen wird, wenn sich die ausgewählten Werte ändern |
|
||||
| optionen | array | Repräsentiert die verfügbaren Optionen für die `Select`-Komponente. Es ist ein Array von Objekten, bei dem jedes Objekt ein `value` (die eindeutige Kennung), `label` (die eindeutige Kennung) und ein optionales `Icon` hat |
|
||||
| wert | Zeichenkette | Repräsentiert den aktuell ausgewählten Wert. Es sollte mit einem der `value`-Eigenschaften im `options`-Array übereinstimmen |
|
||||
|
||||
</Tab>
|
||||
</Tabs>
|
||||
@@ -0,0 +1,8 @@
|
||||
---
|
||||
title: Navigation
|
||||
image: /images/user-guide/tasks/tasks_header.png
|
||||
---
|
||||
|
||||
<Frame>
|
||||
<img src="/images/user-guide/tasks/tasks_header.png" alt="Header" />
|
||||
</Frame>
|
||||
@@ -0,0 +1,52 @@
|
||||
---
|
||||
title: Navigationsleiste
|
||||
image: /images/user-guide/table-views/table.png
|
||||
---
|
||||
|
||||
<Frame>
|
||||
<img src="/images/user-guide/table-views/table.png" alt="Header" />
|
||||
</Frame>
|
||||
|
||||
Rendert eine Navigationsleiste, die mehrere `NavigationBarItem`-Komponenten enthält.
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Usage">
|
||||
|
||||
```jsx
|
||||
import { IconHome, IconUser, IconSettings } from '@tabler/icons-react';
|
||||
import { NavigationBar } from "@/ui/navigation/navigation-bar/components/NavigationBar";
|
||||
|
||||
export const MyComponent = () => {
|
||||
|
||||
const navigationItems = [
|
||||
{
|
||||
name: "Home",
|
||||
Icon: IconHome,
|
||||
onClick: () => console.log("Home clicked"),
|
||||
},
|
||||
{
|
||||
name: "Profile",
|
||||
Icon: IconUser,
|
||||
onClick: () => console.log("Profile clicked"),
|
||||
},
|
||||
{
|
||||
name: "Settings",
|
||||
Icon: IconSettings,
|
||||
onClick: () => console.log("Settings clicked"),
|
||||
},
|
||||
];
|
||||
|
||||
return <NavigationBar activeItemName="Home" items={navigationItems}/>;
|
||||
};
|
||||
```
|
||||
|
||||
</Tab>
|
||||
<Tab title="Props">
|
||||
|
||||
| Props | Typ | Beschreibung |
|
||||
| -------------- | ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
||||
| activeItemName | Zeichenkette | Der Name des aktuell aktiven Navigationselements |
|
||||
| items | array | Ein Array von Objekten, die jeweils ein Navigationselement repräsentieren. Jedes Objekt enthält den `name` des Elements, die zugehörige `Icon`-Komponente und eine Funktion `onClick`, die ausgeführt wird, wenn das Element angeklickt wird |
|
||||
|
||||
</Tab>
|
||||
</Tabs>
|
||||
@@ -0,0 +1,38 @@
|
||||
---
|
||||
title: Schrittleiste
|
||||
image: /images/user-guide/api/api.png
|
||||
---
|
||||
|
||||
<Frame>
|
||||
<img src="/images/user-guide/api/api.png" alt="Header" />
|
||||
</Frame>
|
||||
|
||||
Zeigt den Fortschritt durch eine Folge von nummerierten Schritten, indem der aktive Schritt hervorgehoben wird. Es rendert einen Container mit Schritten, die jeweils durch die `Step`-Komponente dargestellt werden.
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Usage">
|
||||
|
||||
```jsx
|
||||
import { StepBar } from "@/ui/navigation/step-bar/components/StepBar";
|
||||
|
||||
export const MyComponent = () => {
|
||||
return (
|
||||
<StepBar activeStep={2}>
|
||||
<StepBar.Step>Step 1</StepBar.Step>
|
||||
<StepBar.Step>Step 2</StepBar.Step>
|
||||
<StepBar.Step>Step 3</StepBar.Step>
|
||||
</StepBar>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
</Tab>
|
||||
|
||||
<Tab title="Props">
|
||||
|
||||
| Props | Typ | Beschreibung |
|
||||
| -------------- | ------ | ----------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| aktiverSchritt | nummer | Der Index des derzeit aktiven Schritts. Dies bestimmt, welcher Schritt visuell hervorgehoben werden soll. |
|
||||
|
||||
</Tab>
|
||||
</Tabs>
|
||||
@@ -0,0 +1,83 @@
|
||||
---
|
||||
title: Iconos
|
||||
image: /images/user-guide/objects/objects.png
|
||||
---
|
||||
|
||||
<Frame>
|
||||
<img src="/images/user-guide/objects/objects.png" alt="Header" />
|
||||
</Frame>
|
||||
|
||||
Una lista de iconos utilizados en toda nuestra aplicación.
|
||||
|
||||
## Iconos Tabler
|
||||
|
||||
Usamos iconos Tabler para React en toda la aplicación.
|
||||
|
||||
<Tabs>
|
||||
|
||||
<Tab title="Installation"><br/>
|
||||
|
||||
```
|
||||
yarn add @tabler/icons-react
|
||||
```
|
||||
|
||||
</Tab>
|
||||
|
||||
<Tab title="Props">
|
||||
|
||||
Puede importar cada icono como un componente. Here's an example: <br />
|
||||
|
||||
```jsx
|
||||
import { IconArrowLeft } from "@tabler/icons-react";
|
||||
|
||||
export const MyComponent = () => {
|
||||
return <IconArrowLeft color="red" size={48} />;
|
||||
};
|
||||
```
|
||||
|
||||
</Tab>
|
||||
|
||||
<Tab title="Props">
|
||||
|
||||
| "Props" | Tipo | Descripción | Predeterminado |
|
||||
| ------- | -------- | ----------------------------------------- | -------------- |
|
||||
| tamaño | número | La altura y el ancho del icono en píxeles | 24 |
|
||||
| color | "cadena" | El color de los iconos | currentColor |
|
||||
| trazo | número | El ancho del trazo del icono en píxeles | 2 |
|
||||
|
||||
</Tab>
|
||||
|
||||
</Tabs>
|
||||
|
||||
## Iconos Personalizados
|
||||
|
||||
Además de los iconos Tabler, la aplicación también utiliza algunos iconos personalizados.
|
||||
|
||||
### Icono de Libreta de Direcciones
|
||||
|
||||
Muestra un icono de libreta de direcciones.
|
||||
|
||||
<Tabs>
|
||||
|
||||
<Tab title="Usage">
|
||||
|
||||
```jsx
|
||||
import { IconAddressBook } from 'twenty-ui/display';
|
||||
|
||||
export const MyComponent = () => {
|
||||
return <IconAddressBook size={24} stroke={2} />;
|
||||
};
|
||||
```
|
||||
|
||||
</Tab>
|
||||
|
||||
<Tab title="Props">
|
||||
|
||||
| "Props" | Tipo | Descripción | Predeterminado |
|
||||
| ------- | ------ | ----------------------------------------- | -------------- |
|
||||
| tamaño | número | La altura y el ancho del icono en píxeles | 24 |
|
||||
| trazo | número | El ancho del trazo del icono en píxeles | 2 |
|
||||
|
||||
</Tab>
|
||||
|
||||
</Tabs>
|
||||
@@ -0,0 +1,44 @@
|
||||
---
|
||||
title: Etiqueta
|
||||
image: /images/user-guide/table-views/table.png
|
||||
---
|
||||
|
||||
<Frame>
|
||||
<img src="/images/user-guide/table-views/table.png" alt="Header" />
|
||||
</Frame>
|
||||
|
||||
Componente para categorizar o etiquetar contenido visualmente.
|
||||
|
||||
<Tabs>
|
||||
|
||||
<Tab title="Usage">
|
||||
|
||||
```jsx
|
||||
import { Tag } from "@/ui/display/tag/components/Tag";
|
||||
|
||||
export const MyComponent = () => {
|
||||
return (
|
||||
<Tag
|
||||
className
|
||||
color="red"
|
||||
text="Urgent"
|
||||
onClick={() => console.log("click")}
|
||||
/>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
</Tab>
|
||||
|
||||
<Tab title="Props">
|
||||
|
||||
| "Props" | Tipo | Descripción |
|
||||
| ----------- | --------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| "className" | cadena | "Nombre opcional para estilización adicional" |
|
||||
| color | cadena | Color de la etiqueta. Las opciones incluyen: `verde`, `turquesa`, `cielo`, `azul`, `púrpura`, `rosa`, `rojo`, `naranja`, `amarillo`, `gris` |
|
||||
| texto | "cadena" | El contenido de la etiqueta |
|
||||
| alHacerClic | "función" | Función opcional llamada cuando un usuario hace clic en la etiqueta |
|
||||
|
||||
</Tab>
|
||||
|
||||
</Tabs>
|
||||
@@ -0,0 +1,8 @@
|
||||
---
|
||||
title: Entrada
|
||||
image: /images/user-guide/tips/light-bulb.png
|
||||
---
|
||||
|
||||
<Frame>
|
||||
<img src="/images/user-guide/tips/light-bulb.png" alt="Header" />
|
||||
</Frame>
|
||||
@@ -0,0 +1,34 @@
|
||||
---
|
||||
title: Editor de Bloques
|
||||
image: /images/user-guide/api/api.png
|
||||
---
|
||||
|
||||
<Frame>
|
||||
<img src="/images/user-guide/api/api.png" alt="Header" />
|
||||
</Frame>
|
||||
|
||||
Usa un editor de texto enriquecido basado en bloques de [BlockNote](https://www.blocknotejs.org/) para permitir a los usuarios editar y ver bloques de contenido.
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Usage">
|
||||
|
||||
```jsx
|
||||
import { useBlockNote } from "@blocknote/react";
|
||||
import { BlockEditor } from "@/ui/input/editor/components/BlockEditor";
|
||||
|
||||
export const MyComponent = () => {
|
||||
const BlockNoteEditor = useBlockNote();
|
||||
|
||||
return <BlockEditor editor={BlockNoteEditor} />;
|
||||
};
|
||||
```
|
||||
|
||||
</Tab>
|
||||
<Tab title="Props">
|
||||
|
||||
| "Props" | Tipo | Descripción |
|
||||
| ------- | ----------------- | -------------------------------------------------- |
|
||||
| editor | `BlockNoteEditor` | La instancia o configuración del editor de bloques |
|
||||
|
||||
</Tab>
|
||||
</Tabs>
|
||||
@@ -0,0 +1,47 @@
|
||||
---
|
||||
title: Caja de selección
|
||||
image: /images/user-guide/tasks/tasks_header.png
|
||||
---
|
||||
|
||||
<Frame>
|
||||
<img src="/images/user-guide/tasks/tasks_header.png" alt="Header" />
|
||||
</Frame>
|
||||
|
||||
Usado cuando un usuario necesita seleccionar múltiples valores entre varias opciones.
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Usage">
|
||||
|
||||
```jsx
|
||||
import { Checkbox } from "twenty-ui/display";
|
||||
|
||||
export const MyComponent = () => {
|
||||
return (
|
||||
<Checkbox
|
||||
checked={true}
|
||||
indeterminate={false}
|
||||
onChange={() => console.log("onChange function fired")}
|
||||
onCheckedChange={() => console.log("onCheckedChange function fired")}
|
||||
variant="primary"
|
||||
size="small"
|
||||
shape="squared"
|
||||
/>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
</Tab>
|
||||
<Tab title="Props">
|
||||
|
||||
| "Props" | Tipo | Descripción |
|
||||
| --------------- | --------- | -------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| marcado | booleano | Indica si la caja de selección está marcada |
|
||||
| indeterminado | booleano | Indica si la caja de selección está en un estado indeterminado (ni marcada ni desmarcada) |
|
||||
| "onChange" | función | La función de devolución de llamada que desea activar cuando cambia el estado de la caja de selección |
|
||||
| onCheckedChange | "función" | La función de devolución de llamada que desea activar cuando cambia el estado `marcado` |
|
||||
| variante | "cadena" | La variante de estilo visual de la caja. Las opciones incluyen: `primario`, `secundario` y `terciario` |
|
||||
| tamaño | "cadena" | El tamaño de la caja de selección. Tiene dos opciones: `pequeño` y `grande` |
|
||||
| forma | cadena | La forma de la caja de selección. Tiene dos opciones: `cuadrado` y `redondeado` |
|
||||
|
||||
</Tab>
|
||||
</Tabs>
|
||||
@@ -0,0 +1,8 @@
|
||||
---
|
||||
title: Navegación
|
||||
image: /images/user-guide/tasks/tasks_header.png
|
||||
---
|
||||
|
||||
<Frame>
|
||||
<img src="/images/user-guide/tasks/tasks_header.png" alt="Header" />
|
||||
</Frame>
|
||||
@@ -0,0 +1,168 @@
|
||||
---
|
||||
title: Enlaces
|
||||
image: /images/user-guide/what-is-twenty/20.png
|
||||
---
|
||||
|
||||
<Frame>
|
||||
<img src="/images/user-guide/what-is-twenty/20.png" alt="Header" />
|
||||
</Frame>
|
||||
|
||||
## Enlace de Contacto
|
||||
|
||||
Un componente de enlace estilizado para mostrar información de contacto.
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Usage">
|
||||
|
||||
```jsx
|
||||
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>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
</Tab>
|
||||
<Tab title="Props">
|
||||
|
||||
| "Props" | Tipo | Descripción |
|
||||
| ----------- | ----------------- | ------------------------------------------------------------------------------- |
|
||||
| "className" | "cadena" | "Nombre opcional para estilización adicional" |
|
||||
| href | "cadena" | La URL o ruta objetivo del enlace |
|
||||
| alHacerClic | "función" | Función de devolución de llamada que se activa cuando se hace clic en el enlace |
|
||||
| hijos | `React.ReactNode` | El contenido que se mostrará dentro del enlace |
|
||||
|
||||
</Tab>
|
||||
|
||||
</Tabs>
|
||||
|
||||
## Enlace Sin Estilo
|
||||
|
||||
Un componente de enlace estilizado para mostrar enlaces.
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Usage">
|
||||
|
||||
```jsx
|
||||
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>
|
||||
);
|
||||
};
|
||||
|
||||
```
|
||||
|
||||
</Tab>
|
||||
<Tab title="Props">
|
||||
|
||||
| "Props" | Tipo | Descripción |
|
||||
| ----------- | ----------------- | ------------------------------------------------------------------------------- |
|
||||
| "className" | cadena | "Nombre opcional para estilización adicional" |
|
||||
| href | "cadena" | La URL o ruta objetivo del enlace |
|
||||
| alHacerClic | función | Función de devolución de llamada que se activa cuando se hace clic en el enlace |
|
||||
| hijos | `React.ReactNode` | El contenido que se mostrará dentro del enlace |
|
||||
|
||||
</Tab>
|
||||
</Tabs>
|
||||
|
||||
## Enlace Redondeado
|
||||
|
||||
Un enlace de estilo redondeado con un componente Chip para enlaces.
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Usage">
|
||||
|
||||
```jsx
|
||||
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>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
</Tab>
|
||||
|
||||
<Tab title="Props">
|
||||
|
||||
| "Props" | Tipo | Descripción |
|
||||
| ----------- | ----------------- | ------------------------------------------------------------------------------- |
|
||||
| href | "cadena" | La URL o ruta objetivo del enlace |
|
||||
| hijos | `React.ReactNode` | El contenido que se mostrará dentro del enlace |
|
||||
| alHacerClic | "función" | Función de devolución de llamada que se activa cuando se hace clic en el enlace |
|
||||
|
||||
</Tab>
|
||||
</Tabs>
|
||||
|
||||
## Enlace Social
|
||||
|
||||
Enlaces sociales estilizados, con soporte para varios tipos de enlaces sociales, como URLs, LinkedIn y X (o Twitter).
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Usage">
|
||||
|
||||
```jsx
|
||||
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>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
</Tab>
|
||||
<Tab title="Props">
|
||||
|
||||
| "Props" | Tipo | Descripción |
|
||||
| ----------- | ----------------- | ------------------------------------------------------------------------------------------------------------------ |
|
||||
| href | "cadena" | La URL o ruta objetivo del enlace |
|
||||
| hijos | `React.ReactNode` | El contenido que se mostrará dentro del enlace |
|
||||
| tipo | "cadena" | El tipo de enlaces sociales. Las opciones incluyen: `url`, `LinkedIn`, y `Twitter` |
|
||||
| alHacerClic | "función" | Función de devolución de llamada que se activa cuando se hace clic en el enlace |
|
||||
|
||||
</Tab>
|
||||
</Tabs>
|
||||
@@ -0,0 +1,52 @@
|
||||
---
|
||||
title: Barra de navegación
|
||||
image: /images/user-guide/table-views/table.png
|
||||
---
|
||||
|
||||
<Frame>
|
||||
<img src="/images/user-guide/table-views/table.png" alt="Header" />
|
||||
</Frame>
|
||||
|
||||
Renderiza una barra de navegación que contiene varios componentes `NavigationBarItem`.
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Usage">
|
||||
|
||||
```jsx
|
||||
import { IconHome, IconUser, IconSettings } from '@tabler/icons-react';
|
||||
import { NavigationBar } from "@/ui/navigation/navigation-bar/components/NavigationBar";
|
||||
|
||||
export const MyComponent = () => {
|
||||
|
||||
const navigationItems = [
|
||||
{
|
||||
name: "Home",
|
||||
Icon: IconHome,
|
||||
onClick: () => console.log("Home clicked"),
|
||||
},
|
||||
{
|
||||
name: "Profile",
|
||||
Icon: IconUser,
|
||||
onClick: () => console.log("Profile clicked"),
|
||||
},
|
||||
{
|
||||
name: "Settings",
|
||||
Icon: IconSettings,
|
||||
onClick: () => console.log("Settings clicked"),
|
||||
},
|
||||
];
|
||||
|
||||
return <NavigationBar activeItemName="Home" items={navigationItems}/>;
|
||||
};
|
||||
```
|
||||
|
||||
</Tab>
|
||||
<Tab title="Props">
|
||||
|
||||
| "Props" | Tipo | Descripción |
|
||||
| ----------------------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| nombreDelElementoActivo | "cadena" | El nombre del elemento de navegación actualmente activo |
|
||||
| elementos | array | Una matriz de objetos que representan cada elemento de navegación. Cada objeto contiene el `nombre` del elemento, el componente `Icono` a mostrar y una función `cuandoHagaClick` que se llamará al hacer clic en el elemento |
|
||||
|
||||
</Tab>
|
||||
</Tabs>
|
||||
@@ -0,0 +1,77 @@
|
||||
---
|
||||
title: Retroalimentación
|
||||
image: /images/user-guide/emails/emails_header.png
|
||||
---
|
||||
|
||||
<Frame>
|
||||
<img src="/images/user-guide/emails/emails_header.png" alt="Header" />
|
||||
</Frame>
|
||||
|
||||
Indica el progreso o la cuenta regresiva y se mueve de derecha a izquierda.
|
||||
|
||||
<Tabs>
|
||||
|
||||
<Tab title="Usage">
|
||||
|
||||
```jsx
|
||||
import { ProgressBar } from "twenty-ui/feedback";
|
||||
|
||||
export const MyComponent = () => {
|
||||
return (
|
||||
<ProgressBar
|
||||
duration={6000}
|
||||
delay={0}
|
||||
easing="easeInOut"
|
||||
barHeight={10}
|
||||
barColor="#4bb543"
|
||||
autoStart={true}
|
||||
/>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
</Tab>
|
||||
|
||||
<Tab title="Props">
|
||||
|
||||
| "Props" | Tipo | Descripción | Predeterminado |
|
||||
| ---------------- | -------- | --------------------------------------------------------------------------------------------------------- | -------------- |
|
||||
| duración | número | La duración total de la animación de la barra de progreso en milisegundos | 3 |
|
||||
| retraso | número | El retraso en el inicio de la animación de la barra de progreso en milisegundos | 0 |
|
||||
| aceleración | "cadena" | Función de aceleración para la animación de la barra de progreso | easeInOut |
|
||||
| alturaDeBarra | número | La altura de la barra en píxeles | 24 |
|
||||
| colorDeBarra | "cadena" | El color de la barra | gray80 |
|
||||
| inicioAutomático | booleano | Si es `true`, la animación de la barra de progreso comienza automáticamente cuando el componente se monta | `verdadero` |
|
||||
|
||||
</Tab>
|
||||
</Tabs>
|
||||
|
||||
## Barra de Progreso Circular
|
||||
|
||||
Indica el progreso de una tarea, a menudo se usa en pantallas de carga o áreas donde se desea comunicar procesos en curso al usuario.
|
||||
|
||||
<Tabs>
|
||||
|
||||
<Tab title="Usage">
|
||||
|
||||
```jsx
|
||||
import { CircularProgressBar } from "@/ui/feedback/progress-bar/components/CircularProgressBar";
|
||||
|
||||
export const MyComponent = () => {
|
||||
return <CircularProgressBar size={80} barWidth={6} barColor="green" />;
|
||||
};
|
||||
```
|
||||
|
||||
</Tab>
|
||||
|
||||
<Tab title="Props">
|
||||
|
||||
| "Props" | Tipo | Descripción | Predeterminado |
|
||||
| ------------ | ------ | -------------------------------------------- | -------------- |
|
||||
| tamaño | número | El tamaño de la barra de progreso circular | 50 |
|
||||
| anchoDeBarra | número | El ancho de la línea de la barra de progreso | 5 |
|
||||
| colorDeBarra | cadena | El color de la barra de progreso | currentColor |
|
||||
|
||||
</Tab>
|
||||
|
||||
</Tabs>
|
||||
@@ -0,0 +1,88 @@
|
||||
---
|
||||
title: Info-bulle de l'application
|
||||
image: /images/user-guide/tips/light-bulb.png
|
||||
---
|
||||
|
||||
<Frame>
|
||||
<img src="/images/user-guide/tips/light-bulb.png" alt="Header" />
|
||||
</Frame>
|
||||
|
||||
Un message bref qui affiche des informations supplémentaires lorsqu'un utilisateur interagit avec un élément.
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Usage">
|
||||
|
||||
```jsx
|
||||
import { AppTooltip } from "@/ui/display/tooltip/AppTooltip";
|
||||
|
||||
export const MyComponent = () => {
|
||||
return (
|
||||
<>
|
||||
<p id="hoverText" style={{ display: "inline-block" }}>
|
||||
Customer Insights
|
||||
</p>
|
||||
<AppTooltip
|
||||
className
|
||||
anchorSelect="#hoverText"
|
||||
content="Explore customer behavior and preferences"
|
||||
delayHide={0}
|
||||
offset={6}
|
||||
noArrow={false}
|
||||
isOpen={true}
|
||||
place="bottom"
|
||||
positionStrategy="absolute"
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
</Tab>
|
||||
|
||||
<Tab title="Props">
|
||||
|
||||
| Propriétés | Type | Description |
|
||||
| ----------------------- | -------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| nomDeClasse | chaîne | Classe CSS facultative pour le style supplémentaire |
|
||||
| sélecteurAncre | Sélecteur CSS | Sélecteur pour l'ancre de l'info-bulle (l'élément qui déclenche l'info-bulle) |
|
||||
| contenu | chaîne | Le contenu que vous souhaitez afficher dans l'info-bulle |
|
||||
| délaiMasquer | nombre | Le délai avant de masquer l'info-bulle après que le curseur ait quitté l'ancre |
|
||||
| décalage | nombre | Le décalage en pixels pour positionner l'info-bulle |
|
||||
| pasDeFlèche | booléen | Si `vrai`, masque la flèche sur l'info-bulle |
|
||||
| estOuvert | booléen | Si `vrai`, l'info-bulle est ouverte par défaut |
|
||||
| emplacement | Chaîne `PlacesType` de `react-tooltip` | Spécifie le placement de l'info-bulle. Les valeurs incluent `bottom`, `left`, `right`, `top`, `top-start`, `top-end`, `right-start`, `right-end`, `bottom-start`, `bottom-end`, `left-start`, et `left-end` |
|
||||
| stratégiePositionnement | Chaîne `PositionStrategy` de `react-tooltip` | Stratégie de positionnement pour l'info-bulle. A deux valeurs : `absolute` et `fixed` |
|
||||
|
||||
</Tab>
|
||||
|
||||
</Tabs>
|
||||
|
||||
## Texte débordant avec info-bulle
|
||||
|
||||
Gère le texte débordant et affiche une info-bulle lorsque le texte déborde.
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Usage">
|
||||
|
||||
```jsx
|
||||
import { OverflowingTextWithTooltip } from 'twenty-ui/display';
|
||||
|
||||
export const MyComponent = () => {
|
||||
const crmTaskDescription =
|
||||
'Follow up with client regarding their recent product inquiry. Discuss pricing options, address any concerns, and provide additional product information. Record the details of the conversation in the CRM for future reference.';
|
||||
|
||||
return <OverflowingTextWithTooltip text={crmTaskDescription} />;
|
||||
};
|
||||
```
|
||||
|
||||
</Tab>
|
||||
|
||||
<Tab title="Props">
|
||||
|
||||
| Propriétés | Type | Description |
|
||||
| ---------- | ------ | ----------------------------------------------------------------------- |
|
||||
| texte | chaîne | Le contenu que vous souhaitez afficher dans la zone de texte débordante |
|
||||
|
||||
</Tab>
|
||||
|
||||
</Tabs>
|
||||
@@ -0,0 +1,148 @@
|
||||
---
|
||||
title: Puce
|
||||
image: /images/user-guide/github/github-header.png
|
||||
---
|
||||
|
||||
<Frame>
|
||||
<img src="/images/user-guide/github/github-header.png" alt="Header" />
|
||||
</Frame>
|
||||
|
||||
Un élément visuel que vous pouvez utiliser comme un conteneur cliquable ou non cliquable avec une étiquette, des composants optionnels à gauche et à droite, et diverses options de style pour afficher des étiquettes et des tags.
|
||||
|
||||
<Tabs>
|
||||
|
||||
<Tab title="Usage">
|
||||
|
||||
```jsx
|
||||
import { Chip } from 'twenty-ui/components';
|
||||
|
||||
export const MyComponent = () => {
|
||||
return (
|
||||
<Chip
|
||||
size="large"
|
||||
label="Clickable Chip"
|
||||
clickable={true}
|
||||
variant="highlighted"
|
||||
accent="text-primary"
|
||||
leftComponent
|
||||
rightComponent
|
||||
maxWidth="200px"
|
||||
className
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
```
|
||||
|
||||
</Tab>
|
||||
|
||||
<Tab title="Props">
|
||||
|
||||
| Propriétés | Type | Description |
|
||||
| ------------ | ------------------------ | ------------------------------------------------------------------------------------------------------------------------------------ |
|
||||
| linkToEntity | chaîne | Le lien vers l'entité |
|
||||
| entityId | chaîne | L'identifiant unique pour l'entité |
|
||||
| nom | chaîne | Le nom de l'entité |
|
||||
| pictureUrl | chaîne | Image", |
|
||||
| avatarType | Type d'avatar | Le type d'avatar que vous souhaitez afficher. A deux options : `arrondie` et `carrée` |
|
||||
| variante | `EntityChipVariant` enum | Variante de la puce entité que vous souhaitez afficher. A deux options : `régulier` et `transparent` |
|
||||
| LeftIcon | ComposantIcône | Un composant React représentant une icône. Affiché sur le côté gauche de la puce |
|
||||
|
||||
</Tab>
|
||||
</Tabs>
|
||||
|
||||
## Exemples
|
||||
|
||||
### Puce transparente désactivée
|
||||
|
||||
```jsx
|
||||
import { Chip } from 'twenty-ui/components';
|
||||
|
||||
export const MyComponent = () => {
|
||||
return (
|
||||
<Chip
|
||||
size="large"
|
||||
label="Transparent Disabled Chip"
|
||||
clickable={false}
|
||||
variant="rounded"
|
||||
accent="text-secondary"
|
||||
leftComponent
|
||||
rightComponent
|
||||
maxWidth="200px"
|
||||
className
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
```
|
||||
|
||||
<br/>
|
||||
|
||||
### Puce désactivée avec infobulle
|
||||
|
||||
```jsx
|
||||
import { Chip } from "twenty-ui/components";
|
||||
|
||||
export const MyComponent = () => {
|
||||
return (
|
||||
<Chip
|
||||
size="large"
|
||||
label="Disabled chip that triggers a tooltip when overflowing."
|
||||
clickable={false}
|
||||
variant="regular"
|
||||
accent="text-primary"
|
||||
leftComponent
|
||||
rightComponent
|
||||
maxWidth="200px"
|
||||
className
|
||||
/>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
## Puce entité
|
||||
|
||||
Un élément semblable à une puce pour afficher des informations sur une entité.
|
||||
|
||||
<Tabs>
|
||||
|
||||
<Tab title="Usage">
|
||||
|
||||
```jsx
|
||||
import { BrowserRouter as Router } from 'react-router-dom';
|
||||
import { IconTwentyStar } from 'twenty-ui/display';
|
||||
import { Chip } from 'twenty-ui/components';
|
||||
|
||||
export const MyComponent = () => {
|
||||
return (
|
||||
<Router>
|
||||
<Chip
|
||||
linkToEntity="/entity-link"
|
||||
entityId="entityTest"
|
||||
name="Entity name"
|
||||
pictureUrl=""
|
||||
avatarType="rounded"
|
||||
variant="regular"
|
||||
LeftIcon={IconTwentyStar}
|
||||
/>
|
||||
</Router>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
</Tab>
|
||||
|
||||
<Tab title="Props">
|
||||
|
||||
| Propriétés | Type | Description |
|
||||
| ------------ | ------------------------ | ------------------------------------------------------------------------------------------------------------------------------------ |
|
||||
| linkToEntity | chaîne | Le lien vers l'entité |
|
||||
| entityId | chaîne | L'identifiant unique pour l'entité |
|
||||
| nom | chaîne | Le nom de l'entité |
|
||||
| pictureUrl | chaîne | Image", |
|
||||
| avatarType | Type d'avatar | Le type d'avatar que vous souhaitez afficher. A deux options : `arrondie` et `carrée` |
|
||||
| variante | `EntityChipVariant` enum | Variante de la puce entité que vous souhaitez afficher. A deux options : `régulier` et `transparent` |
|
||||
| LeftIcon | ComposantIcône | Un composant React représentant une icône. Affiché sur le côté gauche de la puce |
|
||||
|
||||
</Tab>
|
||||
</Tabs>
|
||||
@@ -0,0 +1,83 @@
|
||||
---
|
||||
title: Icônes
|
||||
image: /images/user-guide/objects/objects.png
|
||||
---
|
||||
|
||||
<Frame>
|
||||
<img src="/images/user-guide/objects/objects.png" alt="Header" />
|
||||
</Frame>
|
||||
|
||||
Une liste d'icônes utilisées dans notre application.
|
||||
|
||||
## Icônes Tabler
|
||||
|
||||
Nous utilisons les icônes Tabler pour React dans toute l'application.
|
||||
|
||||
<Tabs>
|
||||
|
||||
<Tab title="Installation"><br/>
|
||||
|
||||
```
|
||||
yarn add @tabler/icons-react
|
||||
```
|
||||
|
||||
</Tab>
|
||||
|
||||
<Tab title="Props">
|
||||
|
||||
Vous pouvez importer chaque icône en tant que composant. Here's an example: <br />
|
||||
|
||||
```jsx
|
||||
import { IconArrowLeft } from "@tabler/icons-react";
|
||||
|
||||
export const MyComponent = () => {
|
||||
return <IconArrowLeft color="red" size={48} />;
|
||||
};
|
||||
```
|
||||
|
||||
</Tab>
|
||||
|
||||
<Tab title="Props">
|
||||
|
||||
| Propriétés | Type | Description | Par défaut |
|
||||
| ---------- | ------ | --------------------------------------------- | --------------- |
|
||||
| taille | nombre | La hauteur et la largeur de l'icône en pixels | 24 |
|
||||
| couleur | chaîne | La couleur des icônes | couleurCourante |
|
||||
| trait | nombre | La largeur du trait de l'icône en pixels | 2 |
|
||||
|
||||
</Tab>
|
||||
|
||||
</Tabs>
|
||||
|
||||
## Icônes personnalisées
|
||||
|
||||
En plus des icônes Tabler, l'application utilise également certaines icônes personnalisées.
|
||||
|
||||
### Icône Carnet d'adresses
|
||||
|
||||
Affiche une icône de carnet d'adresses.
|
||||
|
||||
<Tabs>
|
||||
|
||||
<Tab title="Usage">
|
||||
|
||||
```jsx
|
||||
import { IconAddressBook } from 'twenty-ui/display';
|
||||
|
||||
export const MyComponent = () => {
|
||||
return <IconAddressBook size={24} stroke={2} />;
|
||||
};
|
||||
```
|
||||
|
||||
</Tab>
|
||||
|
||||
<Tab title="Props">
|
||||
|
||||
| Propriétés | Type | Description | Par défaut |
|
||||
| ---------- | ------ | --------------------------------------------- | ---------- |
|
||||
| taille | nombre | La hauteur et la largeur de l'icône en pixels | 24 |
|
||||
| trait | nombre | La largeur du trait de l'icône en pixels | 2 |
|
||||
|
||||
</Tab>
|
||||
|
||||
</Tabs>
|
||||
@@ -0,0 +1,8 @@
|
||||
---
|
||||
title: "Entrée "
|
||||
image: /images/user-guide/tips/light-bulb.png
|
||||
---
|
||||
|
||||
<Frame>
|
||||
<img src="/images/user-guide/tips/light-bulb.png" alt="Header" />
|
||||
</Frame>
|
||||
@@ -0,0 +1,34 @@
|
||||
---
|
||||
title: Éditeur de Blocs
|
||||
image: /images/user-guide/api/api.png
|
||||
---
|
||||
|
||||
<Frame>
|
||||
<img src="/images/user-guide/api/api.png" alt="Header" />
|
||||
</Frame>
|
||||
|
||||
Utilise un éditeur de texte riche basé sur des blocs de [BlockNote](https://www.blocknotejs.org/) pour permettre aux utilisateurs de modifier et de visualiser des blocs de contenu.
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Usage">
|
||||
|
||||
```jsx
|
||||
import { useBlockNote } from "@blocknote/react";
|
||||
import { BlockEditor } from "@/ui/input/editor/components/BlockEditor";
|
||||
|
||||
export const MyComponent = () => {
|
||||
const BlockNoteEditor = useBlockNote();
|
||||
|
||||
return <BlockEditor editor={BlockNoteEditor} />;
|
||||
};
|
||||
```
|
||||
|
||||
</Tab>
|
||||
<Tab title="Props">
|
||||
|
||||
| Propriétés | Type | Description |
|
||||
| ---------- | ----------------- | ---------------------------------------------------- |
|
||||
| éditeur | `BlockNoteEditor` | L'instance de l'éditeur de blocs ou sa configuration |
|
||||
|
||||
</Tab>
|
||||
</Tabs>
|
||||
@@ -0,0 +1,47 @@
|
||||
---
|
||||
title: Case à cocher
|
||||
image: /images/user-guide/tasks/tasks_header.png
|
||||
---
|
||||
|
||||
<Frame>
|
||||
<img src="/images/user-guide/tasks/tasks_header.png" alt="Header" />
|
||||
</Frame>
|
||||
|
||||
Utilisé lorsqu'un utilisateur doit sélectionner plusieurs valeurs parmi plusieurs options.
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Usage">
|
||||
|
||||
```jsx
|
||||
import { Checkbox } from "twenty-ui/display";
|
||||
|
||||
export const MyComponent = () => {
|
||||
return (
|
||||
<Checkbox
|
||||
checked={true}
|
||||
indeterminate={false}
|
||||
onChange={() => console.log("onChange function fired")}
|
||||
onCheckedChange={() => console.log("onCheckedChange function fired")}
|
||||
variant="primary"
|
||||
size="small"
|
||||
shape="squared"
|
||||
/>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
</Tab>
|
||||
<Tab title="Props">
|
||||
|
||||
| Propriétés | Type | Description |
|
||||
| --------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------ |
|
||||
| coché | booléen | Indique si la case à cocher est cochée |
|
||||
| indéterminé | booléen | Indique si la case à cocher est dans un état indéterminé (ni cochée ni décochée) |
|
||||
| onChange | fonction | La fonction de rappel que vous souhaitez déclencher lorsque l'état de la case à cocher change |
|
||||
| onCheckedChange | fonction | La fonction de rappel que vous souhaitez déclencher lorsque l'état `coché` change |
|
||||
| variante | chaîne | Le style visuel de la variante de la boîte. Les options incluent : `primaire`, `secondaire` et `tertiaire` |
|
||||
| taille | chaîne | La taille de la case à cocher. Comporte deux options : `petit` et `grand` |
|
||||
| forme | chaîne | La forme de la case à cocher. Comporte deux options : `carrée` et `arrondie` |
|
||||
|
||||
</Tab>
|
||||
</Tabs>
|
||||
@@ -0,0 +1,73 @@
|
||||
---
|
||||
title: Schéma de couleurs
|
||||
image: /images/user-guide/fields/field.png
|
||||
---
|
||||
|
||||
<Frame>
|
||||
<img src="/images/user-guide/fields/field.png" alt="Header" />
|
||||
</Frame>
|
||||
|
||||
## Carte de Schéma de couleurs
|
||||
|
||||
Représente différents schémas de couleurs et est spécialement adapté aux thèmes clairs et sombres.
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Usage">
|
||||
|
||||
```jsx
|
||||
import { ColorSchemeCard } from "twenty-ui/display";
|
||||
|
||||
export const MyComponent = () => {
|
||||
return (
|
||||
<ColorSchemeCard
|
||||
variant="Dark"
|
||||
selected={true}
|
||||
/>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
</Tab>
|
||||
|
||||
<Tab title="Props">
|
||||
|
||||
| Propriétés | Type | Description | Par défaut |
|
||||
| -------------------------- | --------------------------------------- | ----------------------------------------------------------------------------------------------------------------------- | ---------- |
|
||||
| variante | chaîne | La variante du schéma de couleurs. Les options incluent `Sombre`, `Clair` et `Système`. | clair |
|
||||
| sélectionné | booléen | Si `vrai`, affiche une coche pour indiquer le schéma de couleurs sélectionné. | |
|
||||
| propriétés supplémentaires | `React.ComponentPropsWithoutRef<'div'>` | Propriétés standard de l'élément HTML `div`. | |
|
||||
|
||||
</Tab>
|
||||
|
||||
</Tabs>
|
||||
|
||||
## Sélecteur de Schéma de couleurs
|
||||
|
||||
Permet aux utilisateurs de choisir entre différents schémas de couleurs.
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Usage">
|
||||
|
||||
```jsx
|
||||
import { ColorSchemePicker } from "twenty-ui/display";
|
||||
|
||||
export const MyComponent = () => {
|
||||
return <ColorSchemePicker
|
||||
value="Dark"
|
||||
onChange
|
||||
/>;
|
||||
};
|
||||
```
|
||||
|
||||
</Tab>
|
||||
|
||||
<Tab title="Props">
|
||||
|
||||
| Propriétés | Type | Description |
|
||||
| ---------- | -------------------- | ---------------------------------------------------------------------------------------------------------------------------- |
|
||||
| valeur | `Schéma de couleurs` | Le schéma de couleurs actuellement sélectionné. |
|
||||
| onChange | fonction | La fonction de rappel que vous souhaitez déclencher lorsqu'un utilisateur sélectionne un schéma de couleurs. |
|
||||
|
||||
</Tab>
|
||||
|
||||
</Tabs>
|
||||
@@ -0,0 +1,56 @@
|
||||
---
|
||||
title: Sélecteur d'icônes
|
||||
image: /images/user-guide/github/github-header.png
|
||||
---
|
||||
|
||||
<Frame>
|
||||
<img src="/images/user-guide/github/github-header.png" alt="Header" />
|
||||
</Frame>
|
||||
|
||||
Un sélecteur d'icônes basé sur un menu déroulant qui permet aux utilisateurs de sélectionner une icône dans une liste.
|
||||
|
||||
<Tabs>
|
||||
|
||||
<Tab title="Usage">
|
||||
|
||||
```jsx
|
||||
import { RecoilRoot } from "recoil";
|
||||
import React, { useState } from "react";
|
||||
import { IconPicker } from "@/ui/input/components/IconPicker";
|
||||
|
||||
export const MyComponent = () => {
|
||||
|
||||
const [selectedIcon, setSelectedIcon] = useState("");
|
||||
const handleIconChange = ({ iconKey, Icon }) => {
|
||||
console.log("Selected Icon:", iconKey);
|
||||
setSelectedIcon(iconKey);
|
||||
};
|
||||
|
||||
return (
|
||||
<RecoilRoot>
|
||||
<IconPicker
|
||||
disabled={false}
|
||||
onChange={handleIconChange}
|
||||
selectedIconKey={selectedIcon}
|
||||
variant="primary"
|
||||
/>
|
||||
</RecoilRoot>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
</Tab>
|
||||
<Tab title="Props">
|
||||
|
||||
| Propriétés | Type | Description |
|
||||
| --------------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| désactivé | booléen | Désactive le sélecteur d'icônes si défini sur `true` |
|
||||
| onChange | fonction | La fonction de rappel déclenchée lorsque l'utilisateur sélectionne une icône. Elle reçoit un objet avec les propriétés `iconKey` et `Icon` |
|
||||
| selectedIconKey | chaîne | La clé de l'icône initialement sélectionnée |
|
||||
| onClickOutside | fonction | Fonction de rappel déclenchée lorsque l'utilisateur clique en dehors du menu déroulant |
|
||||
| onClose | fonction | Fonction de rappel déclenchée lorsque le menu déroulant est fermé |
|
||||
| onOpen | fonction | Fonction de rappel déclenchée lorsque le menu déroulant est ouvert |
|
||||
| variante | chaîne | La variante de style visuel de l'icône cliquable. Les options incluent : `primaire`, `secondaire` et `tertiaire` |
|
||||
|
||||
</Tab>
|
||||
</Tabs>
|
||||
@@ -0,0 +1,37 @@
|
||||
---
|
||||
title: Saisie Image
|
||||
image: /images/user-guide/objects/objects.png
|
||||
---
|
||||
|
||||
<Frame>
|
||||
<img src="/images/user-guide/objects/objects.png" alt="Header" />
|
||||
</Frame>
|
||||
|
||||
Permet aux utilisateurs de télécharger et de supprimer une image.
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Usage">
|
||||
|
||||
```jsx
|
||||
import { ImageInput } from "@/ui/input/components/ImageInput";
|
||||
|
||||
export const MyComponent = () => {
|
||||
return <ImageInput/>;
|
||||
};
|
||||
```
|
||||
|
||||
</Tab>
|
||||
<Tab title="Props">
|
||||
|
||||
| Propriétés | Type | Description |
|
||||
| ------------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| photo | chaîne | L'URL source de l'image |
|
||||
| onUpload | fonction | La fonction appelée lors du téléchargement d'une nouvelle image par un utilisateur. Elle reçoit l'objet `File` comme paramètre. |
|
||||
| onRemove | fonction | La fonction appelée lorsque l'utilisateur clique sur le bouton supprimer. |
|
||||
| onAbort | fonction | La fonction appelée lorsque l'utilisateur clique sur le bouton annuler pendant le téléchargement de l'image. |
|
||||
| isUploading | booléen | Indique si une image est en cours de téléchargement. |
|
||||
| messageErreur | chaîne | Un message d'erreur facultatif à afficher sous l'entrée d'image. |
|
||||
| désactivé | booléen | Si `true`, l'entrée entière est désactivée et les boutons ne sont pas cliquables. |
|
||||
|
||||
</Tab>
|
||||
</Tabs>
|
||||
@@ -0,0 +1,104 @@
|
||||
---
|
||||
title: Radio
|
||||
image: /images/user-guide/create-workspace/workspace-cover.png
|
||||
---
|
||||
|
||||
<Frame>
|
||||
<img src="/images/user-guide/create-workspace/workspace-cover.png" alt="Header" />
|
||||
</Frame>
|
||||
|
||||
Utilisé lorsque les utilisateurs peuvent choisir une seule option parmi une série d'options.
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Usage">
|
||||
|
||||
```jsx
|
||||
import { Radio } from "twenty-ui/display";
|
||||
|
||||
export const MyComponent = () => {
|
||||
|
||||
const handleRadioChange = (event) => {
|
||||
console.log("Radio button changed:", event.target.checked);
|
||||
};
|
||||
|
||||
const handleCheckedChange = (checked) => {
|
||||
console.log("Checked state changed:", checked);
|
||||
};
|
||||
|
||||
|
||||
return (
|
||||
<Radio
|
||||
checked={true}
|
||||
value="Option 1"
|
||||
onChange={handleRadioChange}
|
||||
onCheckedChange={handleCheckedChange}
|
||||
size="large"
|
||||
disabled={false}
|
||||
labelPosition="right"
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
```
|
||||
|
||||
</Tab>
|
||||
<Tab title="Props">
|
||||
|
||||
| Propriétés | Type | Description |
|
||||
| --------------- | ---------------------- | ----------------------------------------------------------------------------------------------------------------------------- |
|
||||
| style | propriétés `React.CSS` | Styles inline supplémentaires pour le composant |
|
||||
| nomDeClasse | chaîne | Classe CSS facultative pour le style supplémentaire |
|
||||
| coché | booléen | Indique si le bouton radio est coché |
|
||||
| valeur | chaîne | L'étiquette ou le texte associé au bouton radio |
|
||||
| onChange | fonction | La fonction appelée lorsque le bouton radio sélectionné est modifié |
|
||||
| onCheckedChange | fonction | La fonction appelée lorsque l'état `checked` du bouton radio change |
|
||||
| taille | chaîne | La taille du bouton radio. Les options incluent : `large` et `small` |
|
||||
| désactivé | booléen | Si `true`, le bouton radio est désactivé et ne peut pas être cliqué |
|
||||
| positionLabel | chaîne | La position du texte du label par rapport au bouton radio. A deux options : `left` et `right` |
|
||||
|
||||
</Tab>
|
||||
</Tabs>
|
||||
|
||||
## Groupe Radio
|
||||
|
||||
Regroupe ensemble des boutons radio associés.
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Usage">
|
||||
|
||||
```jsx
|
||||
import React, { useState } from "react";
|
||||
import { Radio, RadioGroup } from "twenty-ui/display";
|
||||
|
||||
export const MyComponent = () => {
|
||||
|
||||
const [selectedValue, setSelectedValue] = useState("Option 1");
|
||||
|
||||
const handleChange = (event) => {
|
||||
setSelectedValue(event.target.value);
|
||||
};
|
||||
|
||||
return (
|
||||
<RadioGroup value={selectedValue} onChange={handleChange}>
|
||||
<Radio value="Option 1" />
|
||||
<Radio value="Option 2" />
|
||||
<Radio value="Option 3" />
|
||||
</RadioGroup>
|
||||
);
|
||||
};
|
||||
|
||||
```
|
||||
|
||||
</Tab>
|
||||
<Tab title="Props">
|
||||
|
||||
| Propriétés | Type | Description |
|
||||
| ------------- | ----------------- | ------------------------------------------------------------------------------------------------------------ |
|
||||
| valeur | chaîne | La valeur du bouton radio actuellement sélectionné |
|
||||
| onChange | fonction | La fonction de rappel déclenchée lorsque le bouton radio est changé |
|
||||
| onValueChange | fonction | La fonction de rappel déclenchée lorsque la valeur sélectionnée dans le groupe change. |
|
||||
| enfants | `React.ReactNode` | Permet de passer des composants React (tels que Radio) en tant qu'enfants au Groupe Radio |
|
||||
|
||||
</Tab>
|
||||
|
||||
</Tabs>
|
||||
@@ -0,0 +1,54 @@
|
||||
---
|
||||
title: Sélectionner
|
||||
image: /images/user-guide/what-is-twenty/20.png
|
||||
---
|
||||
|
||||
<Frame>
|
||||
<img src="/images/user-guide/what-is-twenty/20.png" alt="Header" />
|
||||
</Frame>
|
||||
|
||||
Permet aux utilisateurs de choisir une valeur dans une liste d'options prédéfinies.
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Usage">
|
||||
|
||||
```jsx
|
||||
import { RecoilRoot } from 'recoil';
|
||||
import { IconTwentyStar } from 'twenty-ui/display';
|
||||
|
||||
import { Select } from '@/ui/input/components/Select';
|
||||
|
||||
export const MyComponent = () => {
|
||||
|
||||
return (
|
||||
<RecoilRoot>
|
||||
<Select
|
||||
className
|
||||
disabled={false}
|
||||
label="Select an option"
|
||||
options={[
|
||||
{ value: 'option1', label: 'Option A', Icon: IconTwentyStar },
|
||||
{ value: 'option2', label: 'Option B', Icon: IconTwentyStar },
|
||||
]}
|
||||
value="option1"
|
||||
/>
|
||||
</RecoilRoot>
|
||||
);
|
||||
};
|
||||
|
||||
```
|
||||
|
||||
</Tab>
|
||||
<Tab title="Props">
|
||||
|
||||
| Propriétés | Type | Description |
|
||||
| ----------- | -------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| nomDeClasse | chaîne | Classe CSS facultative pour le style supplémentaire |
|
||||
| désactivé | booléen | Lorsqu'il est réglé sur `true`, cela désactive l'interaction de l'utilisateur avec le composant. |
|
||||
| étiquette | chaîne | L'étiquette pour décrire la fonction du composant `Select`. |
|
||||
| onChange | fonction | La fonction appelée lorsque les valeurs sélectionnées changent. |
|
||||
| options | tableau | Représente les options disponibles pour le composant `Selected`. C'est un tableau d'objets où chaque objet possède une `valeur` (l'identifiant unique), un `label` (l'identifiant unique) et une icône optionnelle. |
|
||||
| valeur | chaîne | Représente la valeur actuellement sélectionnée. Elle doit correspondre à l'une des propriétés `valeur` dans le tableau `options`. |
|
||||
|
||||
</Tab>
|
||||
</Tabs>
|
||||
@@ -0,0 +1,153 @@
|
||||
---
|
||||
title: Texte
|
||||
image: /images/user-guide/notes/notes_header.png
|
||||
---
|
||||
|
||||
<Frame>
|
||||
<img src="/images/user-guide/notes/notes_header.png" alt="Header" />
|
||||
</Frame>
|
||||
|
||||
## Entrée de texte
|
||||
|
||||
Permet aux utilisateurs de saisir et de modifier du texte.
|
||||
|
||||
<Tabs>
|
||||
|
||||
<Tab title="Usage">
|
||||
|
||||
```jsx
|
||||
import { RecoilRoot } from "recoil";
|
||||
import { TextInput } from "@/ui/input/components/TextInput";
|
||||
|
||||
export const MyComponent = () => {
|
||||
const handleChange = (text) => {
|
||||
console.log("Input changed:", text);
|
||||
};
|
||||
|
||||
const handleKeyDown = (event) => {
|
||||
console.log("Key pressed:", event.key);
|
||||
};
|
||||
|
||||
return (
|
||||
<RecoilRoot>
|
||||
<TextInput
|
||||
className
|
||||
label="Username"
|
||||
onChange={handleChange}
|
||||
fullWidth={false}
|
||||
disableHotkeys={false}
|
||||
error="Invalid username"
|
||||
onKeyDown={handleKeyDown}
|
||||
RightIcon={null}
|
||||
/>
|
||||
</RecoilRoot>
|
||||
);
|
||||
};
|
||||
|
||||
```
|
||||
|
||||
</Tab>
|
||||
|
||||
<Tab title="Props">
|
||||
|
||||
| Propriétés | Type | Description |
|
||||
| ----------------------- | -------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| nomDeClasse | chaîne | Nom facultatif pour un style supplémentaire |
|
||||
| étiquette | chaîne | Représente l'étiquette de l'entrée |
|
||||
| onChange | fonction | La fonction appelée lorsque la valeur de l'entrée change |
|
||||
| largeurTotale | booléen | Indique si l'entrée doit occuper 100% de la largeur |
|
||||
| désactiverLesRaccourcis | booléen | Indique si les raccourcis sont activés pour l'entrée |
|
||||
| erreur | chaîne | Représente le message d'erreur à afficher. Lorsqu'il est fourni, il ajoute également une icône d'erreur sur le côté droit de l'entrée |
|
||||
| surToucheEnfoncée | fonction | Appelée lorsqu'une touche est enfoncée alors que le champ de saisie est focalisé. Reçoit un `React.KeyboardEvent` en tant qu'argument |
|
||||
| IcôneDroite | ComposantIcône | Un composant icône facultatif affiché sur le côté droit de l'entrée |
|
||||
|
||||
Le composant accepte également d'autres propriétés d'éléments d'entrée HTML.
|
||||
|
||||
</Tab>
|
||||
|
||||
</Tabs>
|
||||
|
||||
## Entrée de texte à taille automatique
|
||||
|
||||
Composant d'entrée de texte qui ajuste automatiquement sa hauteur en fonction du contenu.
|
||||
|
||||
<Tabs>
|
||||
|
||||
<Tab title="Usage">
|
||||
|
||||
```jsx
|
||||
import { RecoilRoot } from "recoil";
|
||||
import { AutosizeTextInput } from "@/ui/input/components/AutosizeTextInput";
|
||||
|
||||
export const MyComponent = () => {
|
||||
return (
|
||||
<RecoilRoot>
|
||||
<AutosizeTextInput
|
||||
onValidate={() => console.log("onValidate function fired")}
|
||||
minRows={1}
|
||||
placeholder="Write a comment"
|
||||
onFocus={() => console.log("onFocus function fired")}
|
||||
variant="icon"
|
||||
buttonTitle
|
||||
value="Task: "
|
||||
/>
|
||||
</RecoilRoot>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
</Tab>
|
||||
|
||||
<Tab title="Props">
|
||||
|
||||
| Propriétés | Type | Description |
|
||||
| -------------- | -------- | -------------------------------------------------------------------------------------------------------------- |
|
||||
| surValider | fonction | La fonction de rappel que vous souhaitez déclencher lorsque l'utilisateur valide l'entrée |
|
||||
| minLignes | nombre | Le nombre minimum de lignes pour la zone de texte |
|
||||
| espace réservé | chaîne | Le texte d'espace réservé que vous souhaitez afficher lorsque la zone de texte est vide |
|
||||
| surFocus | fonction | La fonction de rappel que vous souhaitez déclencher lorsque la zone de texte prend le focus |
|
||||
| variante | chaîne | La variante de l'entrée. Les options incluent : `défaut`, `icône`, et `bouton` |
|
||||
| titreBouton | chaîne | Le titre pour le bouton (applicable uniquement à la variante bouton) |
|
||||
| valeur | chaîne | La valeur initiale pour la zone de texte |
|
||||
|
||||
</Tab>
|
||||
|
||||
</Tabs>
|
||||
|
||||
## Zone de texte
|
||||
|
||||
Vous permet de créer des entrées de texte multiligne.
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Usage">
|
||||
|
||||
```jsx
|
||||
import { TextArea } from "@/ui/input/components/TextArea";
|
||||
|
||||
export const MyComponent = () => {
|
||||
return (
|
||||
<TextArea
|
||||
disabled={false}
|
||||
minRows={4}
|
||||
onChange={()=>console.log('On change function fired')}
|
||||
placeholder="Enter text here"
|
||||
value=""
|
||||
/>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
</Tab>
|
||||
|
||||
<Tab title="Props">
|
||||
|
||||
| Propriétés | Type | Description |
|
||||
| -------------- | -------- | --------------------------------------------------------------------------- |
|
||||
| désactivé | booléen | Indique si la zone de texte est désactivée |
|
||||
| minLignes | nombre | Nombre minimum de lignes visibles pour la zone de texte. |
|
||||
| onChange | fonction | Fonction de rappel déclenchée lorsque le contenu de la zone de texte change |
|
||||
| espace réservé | chaîne | Texte de l'espace réservé affiché lorsque la zone de texte est vide |
|
||||
| valeur | chaîne | La valeur actuelle de la zone de texte |
|
||||
|
||||
</Tab>
|
||||
</Tabs>
|
||||
@@ -0,0 +1,8 @@
|
||||
---
|
||||
title: Navigation
|
||||
image: /images/user-guide/tasks/tasks_header.png
|
||||
---
|
||||
|
||||
<Frame>
|
||||
<img src="/images/user-guide/tasks/tasks_header.png" alt="Header" />
|
||||
</Frame>
|
||||
@@ -0,0 +1,44 @@
|
||||
---
|
||||
title: Fil d'Ariane
|
||||
image: /images/user-guide/fields/field.png
|
||||
---
|
||||
|
||||
<Frame>
|
||||
<img src="/images/user-guide/fields/field.png" alt="Header" />
|
||||
</Frame>
|
||||
|
||||
Affiche une barre de navigation en fil d'Ariane.
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Usage">
|
||||
|
||||
```jsx
|
||||
import { BrowserRouter } from "react-router-dom";
|
||||
import { Breadcrumb } from "@/ui/navigation/bread-crumb/components/Breadcrumb";
|
||||
|
||||
export const MyComponent = () => {
|
||||
const breadcrumbLinks = [
|
||||
{ children: "Home", href: "/" },
|
||||
{ children: "Category", href: "/category" },
|
||||
{ children: "Subcategory", href: "/category/subcategory" },
|
||||
{ children: "Current Page" },
|
||||
];
|
||||
|
||||
return (
|
||||
<BrowserRouter>
|
||||
<Breadcrumb className links={breadcrumbLinks} />
|
||||
</BrowserRouter>
|
||||
)
|
||||
};
|
||||
```
|
||||
|
||||
</Tab>
|
||||
<Tab title="Props">
|
||||
|
||||
| Propriétés | Type | Description |
|
||||
| ----------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
||||
| nomDeClasse | chaîne | Nom de classe facultatif pour un style supplémentaire |
|
||||
| liens | tableau | Un tableau d'objets, chacun représentant un lien de fil d'Ariane. Chaque objet a une propriété `children` (le contenu textuel du lien) et une propriété `href` facultative (l'URL vers laquelle naviguer lorsque le lien est cliqué) |
|
||||
|
||||
</Tab>
|
||||
</Tabs>
|
||||
@@ -0,0 +1,168 @@
|
||||
---
|
||||
title: Liens
|
||||
image: /images/user-guide/what-is-twenty/20.png
|
||||
---
|
||||
|
||||
<Frame>
|
||||
<img src="/images/user-guide/what-is-twenty/20.png" alt="Header" />
|
||||
</Frame>
|
||||
|
||||
## Lien de contact
|
||||
|
||||
Un composant de lien stylisé pour afficher les informations de contact.
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Usage">
|
||||
|
||||
```jsx
|
||||
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>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
</Tab>
|
||||
<Tab title="Props">
|
||||
|
||||
| Propriétés | Type | Description |
|
||||
| ----------- | ----------------- | -------------------------------------------------------- |
|
||||
| nomDeClasse | chaîne | Nom facultatif pour un style supplémentaire |
|
||||
| href | chaîne | L'URL cible ou le chemin du lien |
|
||||
| onClick | fonction | Fonction de rappel à déclencher lors du clic sur le lien |
|
||||
| enfants | `React.ReactNode` | Le contenu à afficher à l'intérieur du lien |
|
||||
|
||||
</Tab>
|
||||
|
||||
</Tabs>
|
||||
|
||||
## Lien brut
|
||||
|
||||
Un composant de lien stylisé pour afficher les liens.
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Usage">
|
||||
|
||||
```jsx
|
||||
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>
|
||||
);
|
||||
};
|
||||
|
||||
```
|
||||
|
||||
</Tab>
|
||||
<Tab title="Props">
|
||||
|
||||
| Propriétés | Type | Description |
|
||||
| ----------- | ----------------- | -------------------------------------------------------- |
|
||||
| nomDeClasse | chaîne | Nom facultatif pour un style supplémentaire |
|
||||
| href | chaîne | L'URL cible ou le chemin du lien |
|
||||
| auClique | fonction | Fonction de rappel à déclencher lors du clic sur le lien |
|
||||
| enfants | `React.ReactNode` | Le contenu à afficher à l'intérieur du lien |
|
||||
|
||||
</Tab>
|
||||
</Tabs>
|
||||
|
||||
## Lien arrondi
|
||||
|
||||
Un lien de style arrondi avec un composant Chip pour les liens.
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Usage">
|
||||
|
||||
```jsx
|
||||
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>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
</Tab>
|
||||
|
||||
<Tab title="Props">
|
||||
|
||||
| Propriétés | Type | Description |
|
||||
| ---------- | ----------------- | -------------------------------------------------------- |
|
||||
| href | chaîne | L'URL cible ou le chemin du lien |
|
||||
| enfants | `React.ReactNode` | Le contenu à afficher à l'intérieur du lien |
|
||||
| auClique | fonction | Fonction de rappel à déclencher lors du clic sur le lien |
|
||||
|
||||
</Tab>
|
||||
</Tabs>
|
||||
|
||||
## Lien social
|
||||
|
||||
Liens sociaux stylisés, avec support pour différents types de liens sociaux, tels que les URL, LinkedIn, et X (ou Twitter).
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Usage">
|
||||
|
||||
```jsx
|
||||
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>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
</Tab>
|
||||
<Tab title="Props">
|
||||
|
||||
| Propriétés | Type | Description |
|
||||
| ---------- | ----------------- | --------------------------------------------------------------------------------------------------------------- |
|
||||
| href | chaîne | L'URL cible ou le chemin du lien |
|
||||
| enfants | `React.ReactNode` | Le contenu à afficher à l'intérieur du lien |
|
||||
| type | chaîne | Le type de liens sociaux. Les options incluent: `url`, `LinkedIn`, et `Twitter` |
|
||||
| auClique | fonction | Fonction de rappel à déclencher lors du clic sur le lien |
|
||||
|
||||
</Tab>
|
||||
</Tabs>
|
||||
@@ -0,0 +1,458 @@
|
||||
---
|
||||
title: Élément de menu
|
||||
image: /images/user-guide/kanban-views/kanban.png
|
||||
---
|
||||
|
||||
<Frame>
|
||||
<img src="/images/user-guide/kanban-views/kanban.png" alt="Header" />
|
||||
</Frame>
|
||||
|
||||
Un élément de menu polyvalent conçu pour être utilisé dans un menu ou une liste de navigation.
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Usage">
|
||||
|
||||
```jsx
|
||||
import { IconBell } from "@tabler/icons-react";
|
||||
import { IconAlertCircle } from "@tabler/icons-react";
|
||||
import { MenuItem } from "twenty-ui/display";
|
||||
|
||||
export const MyComponent = () => {
|
||||
const handleMenuItemClick = (event) => {
|
||||
console.log("Menu item clicked!", event);
|
||||
};
|
||||
|
||||
const handleButtonClick = (event) => {
|
||||
console.log("Icon button clicked!", event);
|
||||
};
|
||||
|
||||
return (
|
||||
<MenuItem
|
||||
LeftIcon={IconBell}
|
||||
accent="default"
|
||||
text="Menu item text"
|
||||
iconButtons={[{ Icon: IconAlertCircle, onClick: handleButtonClick }]}
|
||||
isTooltipOpen={true}
|
||||
testId="menu-item-1"
|
||||
onClick={handleMenuItemClick}
|
||||
className
|
||||
/>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
</Tab>
|
||||
<Tab title="Props">
|
||||
|
||||
| Propriétés | Type | Description |
|
||||
| ------------- | -------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| LeftIcon | ComposantIcône | Une icône à gauche optionnelle affichée avant le texte dans l'élément de menu |
|
||||
| accent | chaîne | Spécifie la couleur d'accent de l'élément de menu. Les options incluent : `default`, `danger` et `placeholder` |
|
||||
| texte | chaîne | Le contenu texte de l'élément de menu |
|
||||
| boutonsIcône | tableau | Un tableau d'objets représentant des boutons d'icônes supplémentaires associés à l'élément de menu |
|
||||
| isTooltipOpen | booléen | Contrôle la visibilité de l'infobulle associée à l'élément de menu |
|
||||
| testId | chaîne | L'attribut data-testid à des fins de test |
|
||||
| auClique | fonction | Fonction de rappel déclenchée lorsqu'on clique sur l'élément de menu |
|
||||
| nomDeClasse | chaîne | Nom facultatif pour un style supplémentaire |
|
||||
|
||||
</Tab>
|
||||
</Tabs>
|
||||
|
||||
## Variantes
|
||||
|
||||
Les différentes variantes du composant d'élément de menu incluent les suivantes :
|
||||
|
||||
### Commande
|
||||
|
||||
Un élément de menu de style commande dans un menu pour indiquer des raccourcis clavier.
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Usage">
|
||||
|
||||
```jsx
|
||||
import { IconBell } from "@tabler/icons-react";
|
||||
import { MenuItemCommand } from "twenty-ui/display";
|
||||
|
||||
export const MyComponent = () => {
|
||||
const handleCommandClick = () => {
|
||||
console.log("Command clicked!");
|
||||
};
|
||||
|
||||
return (
|
||||
<MenuItemCommand
|
||||
LeftIcon={IconBell}
|
||||
text="First Option"
|
||||
firstHotKey="⌘"
|
||||
secondHotKey="1"
|
||||
isSelected={true}
|
||||
onClick={handleCommandClick}
|
||||
className
|
||||
/>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
</Tab>
|
||||
<Tab title="Props">
|
||||
|
||||
| Propriétés | Type | Description |
|
||||
| ----------------- | -------------- | ----------------------------------------------------------------------------- |
|
||||
| LeftIcon | ComposantIcône | Une icône à gauche optionnelle affichée avant le texte dans l'élément de menu |
|
||||
| texte | chaîne | Le contenu texte de l'élément de menu |
|
||||
| premierRaccourci | chaîne | Le premier raccourci clavier associé à la commande |
|
||||
| deuxièmeRaccourci | chaîne | Le deuxième raccourci clavier associé à la commande |
|
||||
| estSélectionné | booléen | Indique si l'élément de menu est sélectionné ou surligné |
|
||||
| onClick | fonction | Fonction de rappel déclenchée lorsqu'on clique sur l'élément de menu |
|
||||
| nomDeClasse | chaîne | Nom facultatif pour un style supplémentaire |
|
||||
|
||||
</Tab>
|
||||
</Tabs>
|
||||
|
||||
### Draggable
|
||||
|
||||
Un élément de menu draggable conçu pour être utilisé dans un menu ou une liste où les éléments peuvent être glissés, et des actions supplémentaires peuvent être effectuées via les boutons d'icônes.
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Usage">
|
||||
|
||||
```jsx
|
||||
import { IconBell } from "@tabler/icons-react";
|
||||
import { IconAlertCircle } from "@tabler/icons-react";
|
||||
import { MenuItemDraggable } from "twenty-ui/display";
|
||||
|
||||
export const MyComponent = () => {
|
||||
const handleMenuItemClick = (event) => {
|
||||
console.log("Menu item clicked!", event);
|
||||
};
|
||||
|
||||
return (
|
||||
<MenuItemDraggable
|
||||
LeftIcon={IconBell}
|
||||
accent="default"
|
||||
iconButtons={[{ Icon: IconAlertCircle, onClick: handleButtonClick }]}
|
||||
isTooltipOpen={false}
|
||||
onClick={handleMenuItemClick}
|
||||
text="Menu item draggable"
|
||||
isDragDisabled={false}
|
||||
className
|
||||
/>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
</Tab>
|
||||
<Tab title="Props">
|
||||
|
||||
| Propriétés | Type | Description |
|
||||
| -------------- | -------------- | ------------------------------------------------------------------------------------------------------------- |
|
||||
| LeftIcon | ComposantIcône | Une icône à gauche optionnelle affichée avant le texte dans l'élément de menu |
|
||||
| accent | chaîne | La couleur d'accent de l'élément de menu. Elle peut être `défaut`, `placeholder`, et `danger` |
|
||||
| boutonsIcône | tableau | Un tableau d'objets représentant des boutons d'icônes supplémentaires associés à l'élément de menu |
|
||||
| isTooltipOpen | booléen | Contrôle la visibilité de l'infobulle associée à l'élément de menu |
|
||||
| auClique | fonction | Fonction de rappel à déclencher lors du clic sur le lien |
|
||||
| texte | chaîne | Le contenu texte de l'élément de menu |
|
||||
| isDragDisabled | booléen | Indique si le glissement est désactivé |
|
||||
| nomDeClasse | chaîne | Nom facultatif pour un style supplémentaire |
|
||||
|
||||
</Tab>
|
||||
</Tabs>
|
||||
|
||||
### Sélection multiple
|
||||
|
||||
Fournit un moyen d'implémenter une fonctionnalité de sélection multiple avec une case à cocher associée.
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Usage">
|
||||
|
||||
```jsx
|
||||
import { IconBell } from "@tabler/icons-react";
|
||||
import { MenuItemMultiSelect } from "twenty-ui/display";
|
||||
|
||||
export const MyComponent = () => {
|
||||
|
||||
return (
|
||||
<MenuItemMultiSelect
|
||||
LeftIcon={IconBell}
|
||||
text="First Option"
|
||||
selected={false}
|
||||
className
|
||||
/>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
</Tab>
|
||||
<Tab title="Props">
|
||||
|
||||
| Propriétés | Type | Description |
|
||||
| -------------- | -------------- | ----------------------------------------------------------------------------- |
|
||||
| LeftIcon | ComposantIcône | Une icône à gauche optionnelle affichée avant le texte dans l'élément de menu |
|
||||
| texte | chaîne | Le contenu texte de l'élément de menu |
|
||||
| sélectionné | booléen | Indique si l'élément de menu est sélectionné (coché) |
|
||||
| onSelectChange | fonction | Fonction de rappel déclenchée lorsque l'état de la case à cocher change |
|
||||
| nomDeClasse | chaîne | Nom facultatif pour un style supplémentaire |
|
||||
|
||||
</Tab>
|
||||
</Tabs>
|
||||
|
||||
### Sélection multiple avec avatar
|
||||
|
||||
Un élément de menu multi-sélection avec un avatar, une case à cocher pour la sélection, et du contenu textuel.
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Usage">
|
||||
|
||||
```jsx
|
||||
import { MenuItemMultiSelectAvatar } from "twenty-ui/display";
|
||||
|
||||
export const MyComponent = () => {
|
||||
const imageUrl =
|
||||
"data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAYABgAAD/4QCMRXhpZgAATU0AKgAAAAgABQESAAMAAAABAAEAAAEaAAUAAAABAAAASgEbAAUAAAABAAAAUgEoAAMAAAABAAIAAIdpAAQAAAABAAAAWgAAAAAAAABgAAAAAQAAAGAAAAABAAOgAQADAAAAAQABAACgAgAEAAAAAQAAABSgAwAEAAAAAQAAABQAAAAA/8AAEQgAFAAUAwEiAAIRAQMRAf/EAB8AAAEFAQEBAQEBAAAAAAAAAAABAgMEBQYHCAkKC//EALUQAAIBAwMCBAMFBQQEAAABfQECAwAEEQUSITFBBhNRYQcicRQygZGhCCNCscEVUtHwJDNicoIJChYXGBkaJSYnKCkqNDU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6g4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2drh4uPk5ebn6Onq8fLz9PX29/j5+v/EAB8BAAMBAQEBAQEBAQEAAAAAAAABAgMEBQYHCAkKC//EALURAAIBAgQEAwQHBQQEAAECdwABAgMRBAUhMQYSQVEHYXETIjKBCBRCkaGxwQkjM1LwFWJy0QoWJDThJfEXGBkaJicoKSo1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoKDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uLj5OXm5+jp6vLz9PX29/j5+v/bAEMACwgICggHCwoJCg0MCw0RHBIRDw8RIhkaFBwpJCsqKCQnJy0yQDctMD0wJyc4TDk9Q0VISUgrNk9VTkZUQEdIRf/bAEMBDA0NEQ8RIRISIUUuJy5FRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRf/dAAQAAv/aAAwDAQACEQMRAD8Ava1q728otYY98joSCTgZrnbXWdTtrhrfVZXWLafmcAEkdgR/hVltQku9Q8+OIEBcGOT+ID0PY1ka1KH2u8ToqnPLbmIqG7u6LtbQ7RXBRec4Uck9eKXcPWsKDWVnhWSL5kYcFelSf2m3901POh8jP//QoyIAnTuKpXsY82NsksUyWPU5q/L9z8RVK++/F/uCsVsaEURwgA4HtT9x9TUcf3KfUGh//9k=";
|
||||
|
||||
return (
|
||||
<MenuItemMultiSelectAvatar
|
||||
avatar={<img src={imageUrl} alt="Avatar" />}
|
||||
text="First Option"
|
||||
selected={false}
|
||||
className
|
||||
/>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
</Tab>
|
||||
<Tab title="Props">
|
||||
|
||||
| Propriétés | Type | Description |
|
||||
| -------------- | ----------- | ----------------------------------------------------------------------- |
|
||||
| avatar | `ReactNode` | L'avatar ou l'icône à afficher sur le côté gauche de l'élément de menu |
|
||||
| texte | chaîne | Le contenu texte de l'élément de menu |
|
||||
| sélectionné | booléen | Indique si l'élément de menu est sélectionné (coché) |
|
||||
| onSelectChange | fonction | Fonction de rappel déclenchée lorsque l'état de la case à cocher change |
|
||||
| nomDeClasse | chaîne | Nom facultatif pour un style supplémentaire |
|
||||
|
||||
</Tab>
|
||||
</Tabs>
|
||||
|
||||
### Naviguer
|
||||
|
||||
Un élément de menu comportant une icône facultative à gauche, un contenu textuel, et une icône de chevron droite.
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Usage">
|
||||
|
||||
```jsx
|
||||
import { IconBell } from "@tabler/icons-react";
|
||||
import { MenuItemNavigate } from "twenty-ui/display";
|
||||
|
||||
export const MyComponent = () => {
|
||||
const handleNavigation = () => {
|
||||
console.log("Navigate to another page");
|
||||
};
|
||||
|
||||
return (
|
||||
<MenuItemNavigate
|
||||
LeftIcon={IconBell}
|
||||
text="First Option"
|
||||
onClick={handleNavigation}
|
||||
className
|
||||
/>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
</Tab>
|
||||
<Tab title="Props">
|
||||
|
||||
| Propriétés | Type | Description |
|
||||
| ----------- | -------------- | ----------------------------------------------------------------------------- |
|
||||
| LeftIcon | ComposantIcône | Une icône à gauche optionnelle affichée avant le texte dans l'élément de menu |
|
||||
| texte | chaîne | Le contenu texte de l'élément de menu |
|
||||
| auClique | fonction | Fonction de rappel à déclencher lorsqu'on clique sur l'élément de menu |
|
||||
| nomDeClasse | chaîne | Nom facultatif pour un style supplémentaire |
|
||||
|
||||
</Tab>
|
||||
</Tabs>
|
||||
|
||||
### Sélectionner
|
||||
|
||||
Un élément de menu sélectionnable, avec un contenu facultatif à gauche (icône et texte) et un indicateur (icône de coche) pour l'état sélectionné.
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Usage">
|
||||
|
||||
```jsx
|
||||
import { IconBell } from "@tabler/icons-react";
|
||||
import { MenuItemSelect } from "twenty-ui/display";
|
||||
|
||||
export const MyComponent = () => {
|
||||
const handleSelection = () => {
|
||||
console.log("Menu item selected");
|
||||
};
|
||||
|
||||
return (
|
||||
<MenuItemSelect
|
||||
LeftIcon={IconBell}
|
||||
text="First Option"
|
||||
selected={true}
|
||||
disabled={false}
|
||||
hovered={false}
|
||||
onClick={handleSelection}
|
||||
className
|
||||
/>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
</Tab>
|
||||
<Tab title="Props">
|
||||
|
||||
| Propriétés | Type | Description |
|
||||
| ----------- | -------------- | ----------------------------------------------------------------------------- |
|
||||
| LeftIcon | ComposantIcône | Une icône à gauche optionnelle affichée avant le texte dans l'élément de menu |
|
||||
| texte | chaîne | Le contenu texte de l'élément de menu |
|
||||
| sélectionné | booléen | Indique si l'élément de menu est sélectionné (coché) |
|
||||
| désactivé | booléen | Indique si l'élément de menu est désactivé |
|
||||
| survolé | booléen | Indique si l'élément de menu est actuellement survolé |
|
||||
| auClique | fonction | Fonction de rappel à déclencher lorsqu'on clique sur l'élément de menu |
|
||||
| nomDeClasse | chaîne | Nom facultatif pour un style supplémentaire |
|
||||
|
||||
</Tab>
|
||||
</Tabs>
|
||||
|
||||
### Sélectionner Avatar
|
||||
|
||||
Un élément de menu sélectionnable avec un avatar, avec un contenu facultatif à gauche (avatar et texte) et un indicateur (icône de coche) pour l'état sélectionné.
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Usage">
|
||||
|
||||
```jsx
|
||||
import { MenuItemSelectAvatar } from "twenty-ui/display";
|
||||
|
||||
export const MyComponent = () => {
|
||||
const imageUrl =
|
||||
"data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAYABgAAD/4QCMRXhpZgAATU0AKgAAAAgABQESAAMAAAABAAEAAAEaAAUAAAABAAAASgEbAAUAAAABAAAAUgEoAAMAAAABAAIAAIdpAAQAAAABAAAAWgAAAAAAAABgAAAAAQAAAGAAAAABAAOgAQADAAAAAQABAACgAgAEAAAAAQAAABSgAwAEAAAAAQAAABQAAAAA/8AAEQgAFAAUAwEiAAIRAQMRAf/EAB8AAAEFAQEBAQEBAAAAAAAAAAABAgMEBQYHCAkKC//EALUQAAIBAwMCBAMFBQQEAAABfQECAwAEEQUSITFBBhNRYQcicRQygZGhCCNCscEVUtHwJDNicoIJChYXGBkaJSYnKCkqNDU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6g4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2drh4uPk5ebn6Onq8fLz9PX29/j5+v/EAB8BAAMBAQEBAQEBAQEAAAAAAAABAgMEBQYHCAkKC//EALURAAIBAgQEAwQHBQQEAAECdwABAgMRBAUhMQYSQVEHYXETIjKBCBRCkaGxwQkjM1LwFWJy0QoWJDThJfEXGBkaJicoKSo1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoKDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uLj5OXm5+jp6vLz9PX29/j5+v/bAEMACwgICggHCwoJCg0MCw0RHBIRDw8RIhkaFBwpJCsqKCQnJy0yQDctMD0wJyc4TDk9Q0VISUgrNk9VTkZUQEdIRf/bAEMBDA0NEQ8RIRISIUUuJy5FRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRf/dAAQAAv/aAAwDAQACEQMRAD8Ava1q728otYY98joSCTgZrnbXWdTtrhrfVZXWLafmcAEkdgR/hVltQku9Q8+OIEBcGOT+ID0PY1ka1KH2u8ToqnPLbmIqG7u6LtbQ7RXBRec4Uck9eKXcPWsKDWVnhWSL5kYcFelSf2m3901POh8jP//QoyIAnTuKpXsY82NsksUyWPU5q/L9z8RVK++/F/uCsVsaEURwgA4HtT9x9TUcf3KfUGh//9k=";
|
||||
|
||||
const handleSelection = () => {
|
||||
console.log("Menu item selected");
|
||||
};
|
||||
|
||||
return (
|
||||
<MenuItemSelectAvatar
|
||||
avatar={<img src={imageUrl} alt="Avatar" />}
|
||||
text="First Option"
|
||||
selected={true}
|
||||
disabled={false}
|
||||
hovered={false}
|
||||
testId="menu-item-test"
|
||||
onClick={handleSelection}
|
||||
className
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
```
|
||||
|
||||
</Tab>
|
||||
<Tab title="Props">
|
||||
|
||||
| Propriétés | Type | Description |
|
||||
| ----------- | ----------- | ----------------------------------------------------------------------- |
|
||||
| avatar | `ReactNode` | L'avatar ou l'icône à afficher sur le côté gauche de l'élément de menu |
|
||||
| texte | chaîne | Le contenu texte de l'élément de menu |
|
||||
| sélectionné | booléen | Indique si l'élément de menu est sélectionné (coché) |
|
||||
| désactivé | booléen | Indique si l'élément de menu est désactivé |
|
||||
| survolé | booléen | Indique si l'élément de menu est actuellement survolé |
|
||||
| testId | chaîne | L'attribut data-testid à des fins de test |
|
||||
| onClick | fonction | Fonction de rappel à déclencher lorsqu'on clique sur l'élément de menu |
|
||||
| nomDeClasse | chaîne | Nom facultatif pour un style supplémentaire |
|
||||
|
||||
</Tab>
|
||||
</Tabs>
|
||||
|
||||
### Sélection de Couleur
|
||||
|
||||
Un élément de menu sélectionnable avec un échantillon de couleur pour les scénarios où vous souhaitez que les utilisateurs choisissent une couleur dans un menu.
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Usage">
|
||||
|
||||
```jsx
|
||||
import { MenuItemSelectColor } from "twenty-ui/display";
|
||||
|
||||
export const MyComponent = () => {
|
||||
const handleSelection = () => {
|
||||
console.log("Menu item selected");
|
||||
};
|
||||
|
||||
return (
|
||||
<MenuItemSelectColor
|
||||
color="green"
|
||||
selected={true}
|
||||
disabled={false}
|
||||
hovered={true}
|
||||
variant="default"
|
||||
onClick={handleSelection}
|
||||
className
|
||||
/>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
</Tab>
|
||||
<Tab title="Props">
|
||||
|
||||
| Propriétés | Type | Description |
|
||||
| ----------- | -------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| couleur | chaîne | La couleur à thème à afficher comme échantillon dans l'élément de menu. Les options incluent: `vert`, `turquoise`, `ciel`, `bleu`, `violet`, `rose`, `rouge`, `orange`, `jaune`, `gris` |
|
||||
| sélectionné | booléen | Indique si l'élément de menu est sélectionné (coché) |
|
||||
| désactivé | booléen | Indique si l'élément de menu est désactivé |
|
||||
| survolé | booléen | Indique si l'élément de menu est actuellement survolé |
|
||||
| variante | chaîne | La variante de l'échantillon de couleur. Elle peut être `défaut` ou `pipeline` |
|
||||
| onClick | fonction | Fonction de rappel à déclencher lorsqu'on clique sur l'élément de menu |
|
||||
| nomDeClasse | chaîne | Nom facultatif pour un style supplémentaire |
|
||||
|
||||
</Tab>
|
||||
</Tabs>
|
||||
|
||||
### Basculer
|
||||
|
||||
Un élément de menu avec un interrupteur à bascule associé pour permettre aux utilisateurs d'activer ou de désactiver une fonctionnalité spécifique
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Usage">
|
||||
|
||||
```jsx
|
||||
import { IconBell } from '@tabler/icons-react';
|
||||
|
||||
import { MenuItemToggle } from 'twenty-ui/display';
|
||||
|
||||
export const MyComponent = () => {
|
||||
|
||||
return (
|
||||
<MenuItemToggle
|
||||
LeftIcon={IconBell}
|
||||
text="First Option"
|
||||
toggled={true}
|
||||
toggleSize="small"
|
||||
className
|
||||
/>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
</Tab>
|
||||
<Tab title="Props">
|
||||
|
||||
| Propriétés | Type | Description |
|
||||
| --------------------- | -------------- | -------------------------------------------------------------------------------------- |
|
||||
| LeftIcon | ComposantIcône | Une icône à gauche optionnelle affichée avant le texte dans l'élément de menu |
|
||||
| texte | chaîne | Le contenu texte de l'élément de menu |
|
||||
| basculé | booléen | Indique si l'interrupteur est en "marche" ou "arrêt". |
|
||||
| surChangementBasculer | fonction | Fonction de rappel déclenchée lorsque l'état de l'interrupteur change. |
|
||||
| tailleBasculer | chaîne | La taille de l'interrupteur à bascule. Cela peut être soit \ |
|
||||
| nomDeClasse | chaîne | Nom facultatif pour un style supplémentaire |
|
||||
|
||||
</Tab>
|
||||
</Tabs>
|
||||
@@ -0,0 +1,38 @@
|
||||
---
|
||||
title: Barre d'étape
|
||||
image: /images/user-guide/api/api.png
|
||||
---
|
||||
|
||||
<Frame>
|
||||
<img src="/images/user-guide/api/api.png" alt="Header" />
|
||||
</Frame>
|
||||
|
||||
Affiche la progression à travers une séquence d'étapes numérotées en surlignant l'étape active. Il affiche un conteneur avec des étapes, chacune représentée par le composant `Step`.
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Usage">
|
||||
|
||||
```jsx
|
||||
import { StepBar } from "@/ui/navigation/step-bar/components/StepBar";
|
||||
|
||||
export const MyComponent = () => {
|
||||
return (
|
||||
<StepBar activeStep={2}>
|
||||
<StepBar.Step>Step 1</StepBar.Step>
|
||||
<StepBar.Step>Step 2</StepBar.Step>
|
||||
<StepBar.Step>Step 3</StepBar.Step>
|
||||
</StepBar>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
</Tab>
|
||||
|
||||
<Tab title="Props">
|
||||
|
||||
| Propriétés | Type | Description |
|
||||
| ----------- | ------ | ------------------------------------------------------------------------------------------------------------------------- |
|
||||
| étapeActive | nombre | L'index de l'étape actuellement active. Cela détermine quelle étape doit être visuellement mise en valeur |
|
||||
|
||||
</Tab>
|
||||
</Tabs>
|
||||
@@ -0,0 +1,77 @@
|
||||
---
|
||||
title: Retour d'information
|
||||
image: /images/user-guide/emails/emails_header.png
|
||||
---
|
||||
|
||||
<Frame>
|
||||
<img src="/images/user-guide/emails/emails_header.png" alt="Header" />
|
||||
</Frame>
|
||||
|
||||
Indique le progrès ou le compte à rebours et passe de droite à gauche.
|
||||
|
||||
<Tabs>
|
||||
|
||||
<Tab title="Usage">
|
||||
|
||||
```jsx
|
||||
import { ProgressBar } from "twenty-ui/feedback";
|
||||
|
||||
export const MyComponent = () => {
|
||||
return (
|
||||
<ProgressBar
|
||||
duration={6000}
|
||||
delay={0}
|
||||
easing="easeInOut"
|
||||
barHeight={10}
|
||||
barColor="#4bb543"
|
||||
autoStart={true}
|
||||
/>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
</Tab>
|
||||
|
||||
<Tab title="Props">
|
||||
|
||||
| Propriétés | Type | Description | Par défaut |
|
||||
| -------------------- | ------- | --------------------------------------------------------------------------------------------------------- | ---------- |
|
||||
| durée | nombre | La durée totale de l'animation de la barre de progression en millisecondes | 3 |
|
||||
| délai | nombre | Le délai de démarrage de l'animation de la barre de progression en millisecondes | 0 |
|
||||
| adoucissement | chaîne | Fonction d'adoucissement pour l'animation de la barre de progression | easeInOut |
|
||||
| hauteurBarre | nombre | La hauteur de la barre en pixels | 24 |
|
||||
| couleurBarre | chaîne | La couleur de la barre | gray80 |
|
||||
| démarrageAutomatique | booléen | Si `true`, l'animation de la barre de progression commence automatiquement lorsque le composant est monté | `vrai` |
|
||||
|
||||
</Tab>
|
||||
</Tabs>
|
||||
|
||||
## Barre de Progression Circulaire
|
||||
|
||||
Indique le progrès d'une tâche, souvent utilisé sur des écrans de chargement ou dans des zones où vous souhaitez communiquer des processus en cours à l'utilisateur.
|
||||
|
||||
<Tabs>
|
||||
|
||||
<Tab title="Usage">
|
||||
|
||||
```jsx
|
||||
import { CircularProgressBar } from "@/ui/feedback/progress-bar/components/CircularProgressBar";
|
||||
|
||||
export const MyComponent = () => {
|
||||
return <CircularProgressBar size={80} barWidth={6} barColor="green" />;
|
||||
};
|
||||
```
|
||||
|
||||
</Tab>
|
||||
|
||||
<Tab title="Props">
|
||||
|
||||
| Propriétés | Type | Description | Par défaut |
|
||||
| ------------ | ------ | ------------------------------------------------- | --------------- |
|
||||
| taille | nombre | La taille de la barre de progression circulaire | 50 |
|
||||
| largeurBarre | nombre | La largeur de la ligne de la barre de progression | 5 |
|
||||
| couleurBarre | chaîne | La couleur de la barre de progression | couleurCourante |
|
||||
|
||||
</Tab>
|
||||
|
||||
</Tabs>
|
||||
@@ -0,0 +1,43 @@
|
||||
---
|
||||
title: Paramètres du profil
|
||||
description: Gérez votre profil personnel et vos paramètres de sécurité.
|
||||
---
|
||||
|
||||
## Informations personnelles
|
||||
|
||||
### Nom et e-mail
|
||||
|
||||
* **Nom affiché**: Modifiez comment votre nom apparaît aux autres membres de l’espace de travail
|
||||
* **Adresse e-mail**: Changez votre e-mail de connexion (nécessite vérification)
|
||||
* **Photo de profil**: Téléchargez un avatar personnalisé ou utilisez vos initiales
|
||||
|
||||
## Paramètres de sécurité
|
||||
|
||||
### Authentification à deux facteurs (2FA)
|
||||
|
||||
Activez le 2FA pour ajouter une couche supplémentaire de sécurité à votre compte :
|
||||
|
||||
1. Accédez à **Paramètres → Paramètres du profil**
|
||||
2. Cliquez sur **Activer le 2FA**
|
||||
3. Scannez le code QR avec votre application d'authentification
|
||||
4. Entrez le code de vérification pour confirmer
|
||||
|
||||
### Gestion des mots de passe
|
||||
|
||||
* **Modifier le mot de passe**: Mettez à jour votre mot de passe actuel
|
||||
* **Exigences du mot de passe**: Doit contenir au moins 8 caractères
|
||||
|
||||
## Gestion du profil
|
||||
|
||||
### Supprimer le compte
|
||||
|
||||
<Warning>
|
||||
La suppression de votre compte supprimera définitivement votre accès à tous les espaces de travail. Cette action ne peut être annulée, vous perdrez l'accès à tous les espaces de travail où vous êtes membre, et vous devriez envisager de quitter des espaces de travail individuels si vous souhaitez uniquement quitter certaines équipes.
|
||||
</Warning>
|
||||
|
||||
Pour supprimer votre compte :
|
||||
|
||||
1. Accédez à **Paramètres → Paramètres du profil**
|
||||
2. Faites défiler jusqu'à **Zone de danger**
|
||||
3. Cliquez sur **Supprimer le compte**
|
||||
4. Confirmez en tapant votre adresse e-mail
|
||||
@@ -0,0 +1,44 @@
|
||||
---
|
||||
title: Etichetta
|
||||
image: /images/user-guide/table-views/table.png
|
||||
---
|
||||
|
||||
<Frame>
|
||||
<img src="/images/user-guide/table-views/table.png" alt="Header" />
|
||||
</Frame>
|
||||
|
||||
Componente per categorizzare o etichettare visivamente i contenuti.
|
||||
|
||||
<Tabs>
|
||||
|
||||
<Tab title="Usage">
|
||||
|
||||
```jsx
|
||||
import { Tag } from "@/ui/display/tag/components/Tag";
|
||||
|
||||
export const MyComponent = () => {
|
||||
return (
|
||||
<Tag
|
||||
className
|
||||
color="red"
|
||||
text="Urgent"
|
||||
onClick={() => console.log("click")}
|
||||
/>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
</Tab>
|
||||
|
||||
<Tab title="Props">
|
||||
|
||||
| Props | Tipo | Descrizione |
|
||||
| ---------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| nomeClasse | string | Nome opzionale per stile aggiuntivo |
|
||||
| colore | string | Colore dell'etichetta. Le opzioni includono: `verde`, `turchese`, `cielo`, `blu`, `viola`, `rosa`, `rosso`, `arancione`, `giallo`, `grigio` |
|
||||
| testo | string | Il contenuto dell'etichetta |
|
||||
| onClick | funzione | Funzione opzionale chiamata quando un utente clicca sull'etichetta |
|
||||
|
||||
</Tab>
|
||||
|
||||
</Tabs>
|
||||
@@ -0,0 +1,8 @@
|
||||
---
|
||||
title: Input
|
||||
image: /images/user-guide/tips/light-bulb.png
|
||||
---
|
||||
|
||||
<Frame>
|
||||
<img src="/images/user-guide/tips/light-bulb.png" alt="Header" />
|
||||
</Frame>
|
||||
@@ -0,0 +1,34 @@
|
||||
---
|
||||
title: Editor di blocchi
|
||||
image: /images/user-guide/api/api.png
|
||||
---
|
||||
|
||||
<Frame>
|
||||
<img src="/images/user-guide/api/api.png" alt="Header" />
|
||||
</Frame>
|
||||
|
||||
Utilizza un editor di testo avanzato basato su blocchi di [BlockNote](https://www.blocknotejs.org/) per permettere agli utenti di modificare e visualizzare blocchi di contenuti.
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Usage">
|
||||
|
||||
```jsx
|
||||
import { useBlockNote } from "@blocknote/react";
|
||||
import { BlockEditor } from "@/ui/input/editor/components/BlockEditor";
|
||||
|
||||
export const MyComponent = () => {
|
||||
const BlockNoteEditor = useBlockNote();
|
||||
|
||||
return <BlockEditor editor={BlockNoteEditor} />;
|
||||
};
|
||||
```
|
||||
|
||||
</Tab>
|
||||
<Tab title="Props">
|
||||
|
||||
| Props | Tipo | Descrizione |
|
||||
| ------ | ----------------- | ---------------------------------------------------- |
|
||||
| editor | `BlockNoteEditor` | L'istanza o la configurazione dell'editor di blocchi |
|
||||
|
||||
</Tab>
|
||||
</Tabs>
|
||||
@@ -0,0 +1,153 @@
|
||||
---
|
||||
title: Testo
|
||||
image: /images/user-guide/notes/notes_header.png
|
||||
---
|
||||
|
||||
<Frame>
|
||||
<img src="/images/user-guide/notes/notes_header.png" alt="Header" />
|
||||
</Frame>
|
||||
|
||||
## Input Testo
|
||||
|
||||
Consente agli utenti di inserire e modificare il testo.
|
||||
|
||||
<Tabs>
|
||||
|
||||
<Tab title="Usage">
|
||||
|
||||
```jsx
|
||||
import { RecoilRoot } from "recoil";
|
||||
import { TextInput } from "@/ui/input/components/TextInput";
|
||||
|
||||
export const MyComponent = () => {
|
||||
const handleChange = (text) => {
|
||||
console.log("Input changed:", text);
|
||||
};
|
||||
|
||||
const handleKeyDown = (event) => {
|
||||
console.log("Key pressed:", event.key);
|
||||
};
|
||||
|
||||
return (
|
||||
<RecoilRoot>
|
||||
<TextInput
|
||||
className
|
||||
label="Username"
|
||||
onChange={handleChange}
|
||||
fullWidth={false}
|
||||
disableHotkeys={false}
|
||||
error="Invalid username"
|
||||
onKeyDown={handleKeyDown}
|
||||
RightIcon={null}
|
||||
/>
|
||||
</RecoilRoot>
|
||||
);
|
||||
};
|
||||
|
||||
```
|
||||
|
||||
</Tab>
|
||||
|
||||
<Tab title="Props">
|
||||
|
||||
| Props | Tipo | Descrizione |
|
||||
| -------------------- | --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
|
||||
| nomeClasse | string | Nome opzionale per stile aggiuntivo |
|
||||
| etichetta | string | Rappresenta l'etichetta per l'input |
|
||||
| onChange | funzione | La funzione chiamata quando cambia il valore dell'input |
|
||||
| larghezzaCompleta | booleano | Indica se l'input deve occupare il 100% della larghezza |
|
||||
| disattivaTastiRapidi | booleano | Indica se i tasti rapidi sono abilitati per l'input |
|
||||
| errore | string | Rappresenta il messaggio di errore da visualizzare. Quando fornito, aggiunge anche un'icona di errore sul lato destro dell'input |
|
||||
| premiTasto | funzione | Chiamato quando un tasto viene premuto mentre il campo di input è attivo. Riceve un `React.KeyboardEvent` come argomento |
|
||||
| IconaDestra | IconaComponente | Un componente icona opzionale visualizzato sul lato destro dell'input |
|
||||
|
||||
Il componente accetta anche altre proprietà dell'elemento di input HTML.
|
||||
|
||||
</Tab>
|
||||
|
||||
</Tabs>
|
||||
|
||||
## Input Testo Autosize
|
||||
|
||||
Componente di input testo che regola automaticamente la sua altezza in base al contenuto.
|
||||
|
||||
<Tabs>
|
||||
|
||||
<Tab title="Usage">
|
||||
|
||||
```jsx
|
||||
import { RecoilRoot } from "recoil";
|
||||
import { AutosizeTextInput } from "@/ui/input/components/AutosizeTextInput";
|
||||
|
||||
export const MyComponent = () => {
|
||||
return (
|
||||
<RecoilRoot>
|
||||
<AutosizeTextInput
|
||||
onValidate={() => console.log("onValidate function fired")}
|
||||
minRows={1}
|
||||
placeholder="Write a comment"
|
||||
onFocus={() => console.log("onFocus function fired")}
|
||||
variant="icon"
|
||||
buttonTitle
|
||||
value="Task: "
|
||||
/>
|
||||
</RecoilRoot>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
</Tab>
|
||||
|
||||
<Tab title="Props">
|
||||
|
||||
| Props | Tipo | Descrizione |
|
||||
| -------------- | -------- | ----------------------------------------------------------------------------------------------------------------- |
|
||||
| suValida | funzione | La funzione di callback che si vuole attivare quando l'utente valida l'input |
|
||||
| righeMinime | numero | Il numero minimo di righe per l'area di testo |
|
||||
| segnaposto | string | Il testo segnaposto che si vuole visualizzare quando l'area di testo è vuota |
|
||||
| suFocus | funzione | La funzione di callback che si vuole attivare quando l'area di testo ottiene il focus |
|
||||
| variante | string | La variante dell'input. Le opzioni includono: `predefinito`, `icona` e `pulsante` |
|
||||
| titoloPulsante | string | Il titolo per il pulsante (applicabile solo per la variante pulsante) |
|
||||
| valore | string | Il valore iniziale per l'area di testo |
|
||||
|
||||
</Tab>
|
||||
|
||||
</Tabs>
|
||||
|
||||
## Area di Testo
|
||||
|
||||
Consente di creare input di testo multilinea.
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Usage">
|
||||
|
||||
```jsx
|
||||
import { TextArea } from "@/ui/input/components/TextArea";
|
||||
|
||||
export const MyComponent = () => {
|
||||
return (
|
||||
<TextArea
|
||||
disabled={false}
|
||||
minRows={4}
|
||||
onChange={()=>console.log('On change function fired')}
|
||||
placeholder="Enter text here"
|
||||
value=""
|
||||
/>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
</Tab>
|
||||
|
||||
<Tab title="Props">
|
||||
|
||||
| Props | Tipo | Descrizione |
|
||||
| ------------ | -------- | --------------------------------------------------------------------------- |
|
||||
| disabilitato | booleano | Indica se l'area di testo è disabilitata |
|
||||
| righeMinime | numero | Numero minimo di righe visibili per l'area di testo. |
|
||||
| onChange | funzione | Funzione di callback attivata quando il contenuto dell'area di testo cambia |
|
||||
| segnaposto | string | Il testo segnaposto visualizzato quando l'area di testo è vuota |
|
||||
| valore | string | Il valore corrente dell'area di testo |
|
||||
|
||||
</Tab>
|
||||
</Tabs>
|
||||
@@ -0,0 +1,8 @@
|
||||
---
|
||||
title: Navigazione
|
||||
image: /images/user-guide/tasks/tasks_header.png
|
||||
---
|
||||
|
||||
<Frame>
|
||||
<img src="/images/user-guide/tasks/tasks_header.png" alt="Header" />
|
||||
</Frame>
|
||||
@@ -0,0 +1,168 @@
|
||||
---
|
||||
title: Collegamenti
|
||||
image: /images/user-guide/what-is-twenty/20.png
|
||||
---
|
||||
|
||||
<Frame>
|
||||
<img src="/images/user-guide/what-is-twenty/20.png" alt="Header" />
|
||||
</Frame>
|
||||
|
||||
## Collegamento di Contatto
|
||||
|
||||
Un componente di collegamento stilizzato per visualizzare le informazioni di contatto.
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Usage">
|
||||
|
||||
```jsx
|
||||
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>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
</Tab>
|
||||
<Tab title="Props">
|
||||
|
||||
| Props | Tipo | Descrizione |
|
||||
| ---------- | ----------------- | ------------------------------------------------------------------- |
|
||||
| nomeClasse | string | Nome opzionale per stile aggiuntivo |
|
||||
| href | string | L'URL di destinazione o il percorso per il link |
|
||||
| onClick | funzione | Funzione di callback da attivare quando si fa clic sul collegamento |
|
||||
| figli | `React.ReactNode` | Il contenuto da visualizzare all'interno del collegamento |
|
||||
|
||||
</Tab>
|
||||
|
||||
</Tabs>
|
||||
|
||||
## Collegamento Non Elaborato
|
||||
|
||||
Un componente di collegamento stilizzato per visualizzare collegamenti.
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Usage">
|
||||
|
||||
```jsx
|
||||
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>
|
||||
);
|
||||
};
|
||||
|
||||
```
|
||||
|
||||
</Tab>
|
||||
<Tab title="Props">
|
||||
|
||||
| Props | Tipo | Descrizione |
|
||||
| ---------- | ----------------- | ------------------------------------------------------------------- |
|
||||
| nomeClasse | string | Nome opzionale per stile aggiuntivo |
|
||||
| href | string | L'URL di destinazione o il percorso per il link |
|
||||
| onClick | funzione | Funzione di callback da attivare quando si fa clic sul collegamento |
|
||||
| figli | `React.ReactNode` | Il contenuto da visualizzare all'interno del collegamento |
|
||||
|
||||
</Tab>
|
||||
</Tabs>
|
||||
|
||||
## Collegamento Arrotondato
|
||||
|
||||
Un collegamento stilizzato arrotondato con un componente Chip per i collegamenti.
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Usage">
|
||||
|
||||
```jsx
|
||||
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>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
</Tab>
|
||||
|
||||
<Tab title="Props">
|
||||
|
||||
| Props | Tipo | Descrizione |
|
||||
| ------- | ----------------- | ------------------------------------------------------------------- |
|
||||
| href | string | L'URL di destinazione o il percorso per il link |
|
||||
| figli | `React.ReactNode` | Il contenuto da visualizzare all'interno del collegamento |
|
||||
| onClick | funzione | Funzione di callback da attivare quando si fa clic sul collegamento |
|
||||
|
||||
</Tab>
|
||||
</Tabs>
|
||||
|
||||
## Collegamento Sociale
|
||||
|
||||
Collegamenti social stilizzati, con supporto per vari tipi di collegamenti social, come URL, LinkedIn e X (o Twitter).
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Usage">
|
||||
|
||||
```jsx
|
||||
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>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
</Tab>
|
||||
<Tab title="Props">
|
||||
|
||||
| Props | Tipo | Descrizione |
|
||||
| ------- | ----------------- | -------------------------------------------------------------------------------------------------------------------- |
|
||||
| href | string | L'URL di destinazione o il percorso per il link |
|
||||
| figli | `React.ReactNode` | Il contenuto da visualizzare all'interno del collegamento |
|
||||
| tipo | string | Il tipo di collegamenti social. Le opzioni includono: `url`, `LinkedIn`, e `Twitter` |
|
||||
| onClick | funzione | Funzione di callback da attivare quando si fa clic sul collegamento |
|
||||
|
||||
</Tab>
|
||||
</Tabs>
|
||||
@@ -0,0 +1,52 @@
|
||||
---
|
||||
title: Barra di navigazione
|
||||
image: /images/user-guide/table-views/table.png
|
||||
---
|
||||
|
||||
<Frame>
|
||||
<img src="/images/user-guide/table-views/table.png" alt="Header" />
|
||||
</Frame>
|
||||
|
||||
Rende una barra di navigazione che contiene più componenti `NavigationBarItem`.
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Usage">
|
||||
|
||||
```jsx
|
||||
import { IconHome, IconUser, IconSettings } from '@tabler/icons-react';
|
||||
import { NavigationBar } from "@/ui/navigation/navigation-bar/components/NavigationBar";
|
||||
|
||||
export const MyComponent = () => {
|
||||
|
||||
const navigationItems = [
|
||||
{
|
||||
name: "Home",
|
||||
Icon: IconHome,
|
||||
onClick: () => console.log("Home clicked"),
|
||||
},
|
||||
{
|
||||
name: "Profile",
|
||||
Icon: IconUser,
|
||||
onClick: () => console.log("Profile clicked"),
|
||||
},
|
||||
{
|
||||
name: "Settings",
|
||||
Icon: IconSettings,
|
||||
onClick: () => console.log("Settings clicked"),
|
||||
},
|
||||
];
|
||||
|
||||
return <NavigationBar activeItemName="Home" items={navigationItems}/>;
|
||||
};
|
||||
```
|
||||
|
||||
</Tab>
|
||||
<Tab title="Props">
|
||||
|
||||
| Props | Tipo | Descrizione |
|
||||
| -------------- | ------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| activeItemName | string | Il nome dell'elemento di navigazione attualmente attivo |
|
||||
| elementi | array | Un array di oggetti che rappresentano ciascun elemento di navigazione. Ogni oggetto contiene il `name`, il componente `Icon` da visualizzare e una funzione `onClick` da chiamare quando l'elemento viene cliccato |
|
||||
|
||||
</Tab>
|
||||
</Tabs>
|
||||
@@ -0,0 +1,77 @@
|
||||
---
|
||||
title: Feedback
|
||||
image: /images/user-guide/emails/emails_header.png
|
||||
---
|
||||
|
||||
<Frame>
|
||||
<img src="/images/user-guide/emails/emails_header.png" alt="Header" />
|
||||
</Frame>
|
||||
|
||||
Indica progresso o conto alla rovescia e si muove da destra a sinistra.
|
||||
|
||||
<Tabs>
|
||||
|
||||
<Tab title="Usage">
|
||||
|
||||
```jsx
|
||||
import { ProgressBar } from "twenty-ui/feedback";
|
||||
|
||||
export const MyComponent = () => {
|
||||
return (
|
||||
<ProgressBar
|
||||
duration={6000}
|
||||
delay={0}
|
||||
easing="easeInOut"
|
||||
barHeight={10}
|
||||
barColor="#4bb543"
|
||||
autoStart={true}
|
||||
/>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
</Tab>
|
||||
|
||||
<Tab title="Props">
|
||||
|
||||
| Props | Tipo | Descrizione | Predefinito |
|
||||
| --------------- | -------- | ---------------------------------------------------------------------------------------------------------- | ----------- |
|
||||
| durata | numero | La durata totale dell'animazione della barra di progresso in millisecondi | 3 |
|
||||
| ritardo | numero | Il ritardo nell'avvio dell'animazione della barra di progresso in millisecondi | 0 |
|
||||
| smorzamento | string | Funzione di smorzamento per l'animazione della barra di progresso | easeInOut |
|
||||
| altezzaBarra | numero | L'altezza della barra in pixel | 24 |
|
||||
| coloreBarra | string | Il colore della barra | gray80 |
|
||||
| avvioAutomatico | booleano | Se `true`, l'animazione della barra di progresso inizia automaticamente quando il componente viene montato | `vero` |
|
||||
|
||||
</Tab>
|
||||
</Tabs>
|
||||
|
||||
## Barra di progresso circolare
|
||||
|
||||
Indica il progresso di un'attività, spesso utilizzata in schermate di caricamento o aree in cui si desidera comunicare processi in corso all'utente.
|
||||
|
||||
<Tabs>
|
||||
|
||||
<Tab title="Usage">
|
||||
|
||||
```jsx
|
||||
import { CircularProgressBar } from "@/ui/feedback/progress-bar/components/CircularProgressBar";
|
||||
|
||||
export const MyComponent = () => {
|
||||
return <CircularProgressBar size={80} barWidth={6} barColor="green" />;
|
||||
};
|
||||
```
|
||||
|
||||
</Tab>
|
||||
|
||||
<Tab title="Props">
|
||||
|
||||
| Props | Tipo | Descrizione | Predefinito |
|
||||
| -------------- | ------ | ------------------------------------------------- | ------------ |
|
||||
| dimensione | numero | La dimensione della barra di progresso circolare | 50 |
|
||||
| larghezzaBarra | numero | La larghezza della linea della barra di progresso | 5 |
|
||||
| coloreBarra | string | Il colore della barra di progresso | currentColor |
|
||||
|
||||
</Tab>
|
||||
|
||||
</Tabs>
|
||||
@@ -0,0 +1,88 @@
|
||||
---
|
||||
title: アプリツールチップ
|
||||
image: /images/user-guide/tips/light-bulb.png
|
||||
---
|
||||
|
||||
<Frame>
|
||||
<img src="/images/user-guide/tips/light-bulb.png" alt="Header" />
|
||||
</Frame>
|
||||
|
||||
ユーザーが要素とやり取りするときに追加情報を表示する短いメッセージ。
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Usage">
|
||||
|
||||
```jsx
|
||||
import { AppTooltip } from "@/ui/display/tooltip/AppTooltip";
|
||||
|
||||
export const MyComponent = () => {
|
||||
return (
|
||||
<>
|
||||
<p id="hoverText" style={{ display: "inline-block" }}>
|
||||
Customer Insights
|
||||
</p>
|
||||
<AppTooltip
|
||||
className
|
||||
anchorSelect="#hoverText"
|
||||
content="Explore customer behavior and preferences"
|
||||
delayHide={0}
|
||||
offset={6}
|
||||
noArrow={false}
|
||||
isOpen={true}
|
||||
place="bottom"
|
||||
positionStrategy="absolute"
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
</Tab>
|
||||
|
||||
<Tab title="Props">
|
||||
|
||||
| プロパティ | タイプ | 説明 |
|
||||
| ---------------- | --------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| className | string | 追加のスタイリング用のオプションのCSSクラス |
|
||||
| anchorSelect | CSSセレクタ | ツールチップのアンカー（ツールチップをトリガーする要素）のセレクタ |
|
||||
| content | string | ツールチップ内に表示したいコンテンツ |
|
||||
| delayHide | 数 | アンカーからカーソルが離れた後、ツールチップを非表示にする前の遅延（秒） |
|
||||
| offset | 数 | ツールチップの位置を決めるためのオフセット（ピクセル） |
|
||||
| noArrow | ブール型 | `true`の場合、ツールチップの矢印を非表示にします |
|
||||
| isOpen | ブール型 | `true`の場合、ツールチップはデフォルトで開かれています |
|
||||
| place | `react-tooltip`からの`PlacesType`文字列 | ツールチップの配置を指定します。 値は`bottom`、`left`、`right`、`top`、`top-start`、`top-end`、`right-start`、`right-end`、`bottom-start`、`bottom-end`、`left-start`、`left-end`などがあります |
|
||||
| positionStrategy | `react-tooltip`からの`PositionStrategy`文字列 | ツールチップの位置戦略。 ツールチップの位置戦略。 2つの値があります: `absolute` と `fixed` |
|
||||
|
||||
</Tab>
|
||||
|
||||
</Tabs>
|
||||
|
||||
## ツールチップを伴うオーバーフローテキスト
|
||||
|
||||
オーバーフローテキストを処理し、テキストがオーバーフローしたときにツールチップを表示します。
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Usage">
|
||||
|
||||
```jsx
|
||||
import { OverflowingTextWithTooltip } from 'twenty-ui/display';
|
||||
|
||||
export const MyComponent = () => {
|
||||
const crmTaskDescription =
|
||||
'Follow up with client regarding their recent product inquiry. Discuss pricing options, address any concerns, and provide additional product information. Record the details of the conversation in the CRM for future reference.';
|
||||
|
||||
return <OverflowingTextWithTooltip text={crmTaskDescription} />;
|
||||
};
|
||||
```
|
||||
|
||||
</Tab>
|
||||
|
||||
<Tab title="Props">
|
||||
|
||||
| プロパティ | タイプ | 説明 |
|
||||
| ----- | ------ | -------------------------- |
|
||||
| テキスト | string | オーバーフローテキストエリア内に表示したいコンテンツ |
|
||||
|
||||
</Tab>
|
||||
|
||||
</Tabs>
|
||||
@@ -0,0 +1,69 @@
|
||||
---
|
||||
title: チェックマーク
|
||||
image: '""'
|
||||
---
|
||||
|
||||
<Frame>
|
||||
<img src="/images/user-guide/tasks/tasks_header.png" alt="Header" />
|
||||
</Frame>
|
||||
|
||||
成功したまたは完了したアクションを示します。
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Usage">
|
||||
|
||||
```jsx
|
||||
import { Checkmark } from 'twenty-ui/display';
|
||||
|
||||
export const MyComponent = () => {
|
||||
return <Checkmark />;
|
||||
};
|
||||
```
|
||||
|
||||
</Tab>
|
||||
|
||||
<Tab title="Props">
|
||||
|
||||
`div` 要素の全てのプロパティを受け取る他、`React.ComponentPropsWithoutRef<'div'>`を拡張します。
|
||||
|
||||
</Tab>
|
||||
|
||||
</Tabs>
|
||||
|
||||
## アニメーション付きチェックマーク
|
||||
|
||||
アニメーション機能を追加したチェックマークアイコンを示します。
|
||||
|
||||
<Tabs>
|
||||
|
||||
<Tab title="Usage">
|
||||
|
||||
```jsx
|
||||
import { AnimatedCheckmark } from 'twenty-ui/display';
|
||||
|
||||
export const MyComponent = () => {
|
||||
return (
|
||||
<AnimatedCheckmark
|
||||
isAnimating={true}
|
||||
color="green"
|
||||
duration={0.5}
|
||||
size={30}
|
||||
/>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
</Tab>
|
||||
|
||||
<Tab title="Props">
|
||||
|
||||
| プロパティ | タイプ | 説明 | デフォルト |
|
||||
| ---------- | ------ | --------------------- | -------------------- |
|
||||
| アニメーションの有無 | ブール型 | チェックマークのアニメーションを制御します | 偽 |
|
||||
| カラー | string | チェックマークの色 | |
|
||||
| 継続時間 | 数 | アニメーションの持続時間（秒） | 0.5秒 |
|
||||
| サイズ | 数 | チェックマークのサイズ | 28ピクセル |
|
||||
|
||||
</Tab>
|
||||
|
||||
</Tabs>
|
||||
@@ -0,0 +1,148 @@
|
||||
---
|
||||
title: チップ
|
||||
image: /images/user-guide/github/github-header.png
|
||||
---
|
||||
|
||||
<Frame>
|
||||
<img src="/images/user-guide/github/github-header.png" alt="Header" />
|
||||
</Frame>
|
||||
|
||||
ラベル、オプションの左および右コンポーネント、さまざまなスタイルオプションを使用してラベルやタグを表示するクリック可能または非クリック可能なコンテナとして使用できるビジュアル要素。
|
||||
|
||||
<Tabs>
|
||||
|
||||
<Tab title="Usage">
|
||||
|
||||
```jsx
|
||||
import { Chip } from 'twenty-ui/components';
|
||||
|
||||
export const MyComponent = () => {
|
||||
return (
|
||||
<Chip
|
||||
size="large"
|
||||
label="Clickable Chip"
|
||||
clickable={true}
|
||||
variant="highlighted"
|
||||
accent="text-primary"
|
||||
leftComponent
|
||||
rightComponent
|
||||
maxWidth="200px"
|
||||
className
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
```
|
||||
|
||||
</Tab>
|
||||
|
||||
<Tab title="Props">
|
||||
|
||||
| プロパティ | タイプ | 説明 |
|
||||
| ------------ | ----------------------- | ------------------------------------------------------------------------------ |
|
||||
| linkToEntity | string | エンティティへのリンク |
|
||||
| entityId | string | エンティティの一意識別子 |
|
||||
| 名前 | string | エンティティの名前 |
|
||||
| pictureUrl | string | 写真", |
|
||||
| avatarType | アバタータイプ | 表示したいアバターのタイプ。 表示したいアバターのタイプ。 オプションは2つ：`rounded` と `squared` |
|
||||
| バリアント | `EntityChipVariant` 列挙型 | 表示したいエンティティチップのバリアント。 表示したいエンティティチップのバリアント。 オプションは2つ：`regular` と `transparent` |
|
||||
| 左アイコン | アイコンコンポーネント | アイコンを表す React コンポーネント。 チップの左側に表示されます チップの左側に表示されます チップの左側に表示されます チップの左側に表示されます |
|
||||
|
||||
</Tab>
|
||||
</Tabs>
|
||||
|
||||
## 例
|
||||
|
||||
### 透明無効チップ
|
||||
|
||||
```jsx
|
||||
import { Chip } from 'twenty-ui/components';
|
||||
|
||||
export const MyComponent = () => {
|
||||
return (
|
||||
<Chip
|
||||
size="large"
|
||||
label="Transparent Disabled Chip"
|
||||
clickable={false}
|
||||
variant="rounded"
|
||||
accent="text-secondary"
|
||||
leftComponent
|
||||
rightComponent
|
||||
maxWidth="200px"
|
||||
className
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
```
|
||||
|
||||
<br/>
|
||||
|
||||
### ツールチップ付き無効チップ
|
||||
|
||||
```jsx
|
||||
import { Chip } from "twenty-ui/components";
|
||||
|
||||
export const MyComponent = () => {
|
||||
return (
|
||||
<Chip
|
||||
size="large"
|
||||
label="Disabled chip that triggers a tooltip when overflowing."
|
||||
clickable={false}
|
||||
variant="regular"
|
||||
accent="text-primary"
|
||||
leftComponent
|
||||
rightComponent
|
||||
maxWidth="200px"
|
||||
className
|
||||
/>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
## エンティティチップ
|
||||
|
||||
エンティティに関する情報を表示するチップ風の要素。
|
||||
|
||||
<Tabs>
|
||||
|
||||
<Tab title="Usage">
|
||||
|
||||
```jsx
|
||||
import { BrowserRouter as Router } from 'react-router-dom';
|
||||
import { IconTwentyStar } from 'twenty-ui/display';
|
||||
import { Chip } from 'twenty-ui/components';
|
||||
|
||||
export const MyComponent = () => {
|
||||
return (
|
||||
<Router>
|
||||
<Chip
|
||||
linkToEntity="/entity-link"
|
||||
entityId="entityTest"
|
||||
name="Entity name"
|
||||
pictureUrl=""
|
||||
avatarType="rounded"
|
||||
variant="regular"
|
||||
LeftIcon={IconTwentyStar}
|
||||
/>
|
||||
</Router>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
</Tab>
|
||||
|
||||
<Tab title="Props">
|
||||
|
||||
| プロパティ | タイプ | 説明 |
|
||||
| ------------ | ----------------------- | ------------------------------------------------------------------------------ |
|
||||
| linkToEntity | string | エンティティへのリンク |
|
||||
| entityId | string | エンティティの一意識別子 |
|
||||
| 名前 | string | エンティティの名前 |
|
||||
| pictureUrl | string | 写真", |
|
||||
| avatarType | アバタータイプ | 表示したいアバターのタイプ。 表示したいアバターのタイプ。 オプションは2つ：`rounded` と `squared` |
|
||||
| バリアント | `EntityChipVariant` 列挙型 | 表示したいエンティティチップのバリアント。 表示したいエンティティチップのバリアント。 オプションは2つ：`regular` と `transparent` |
|
||||
| 左アイコン | アイコンコンポーネント | アイコンを表す React コンポーネント。 チップの左側に表示されます チップの左側に表示されます チップの左側に表示されます チップの左側に表示されます |
|
||||
|
||||
</Tab>
|
||||
</Tabs>
|
||||
@@ -0,0 +1,44 @@
|
||||
---
|
||||
title: タグ
|
||||
image: /images/user-guide/table-views/table.png
|
||||
---
|
||||
|
||||
<Frame>
|
||||
<img src="/images/user-guide/table-views/table.png" alt="Header" />
|
||||
</Frame>
|
||||
|
||||
コンテンツを視覚的に分類またはラベル付けするためのコンポーネント。
|
||||
|
||||
<Tabs>
|
||||
|
||||
<Tab title="Usage">
|
||||
|
||||
```jsx
|
||||
import { Tag } from "@/ui/display/tag/components/Tag";
|
||||
|
||||
export const MyComponent = () => {
|
||||
return (
|
||||
<Tag
|
||||
className
|
||||
color="red"
|
||||
text="Urgent"
|
||||
onClick={() => console.log("click")}
|
||||
/>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
</Tab>
|
||||
|
||||
<Tab title="Props">
|
||||
|
||||
| プロパティ | タイプ | 説明 |
|
||||
| --------- | ------ | ---------------------------------------------------------------------------------------------------------------- |
|
||||
| className | string | 追加のスタイリングのためのオプション名 |
|
||||
| カラー | string | タグの色。 タグの色。 タグの色。 タグの色。 オプションは次のとおりです: `緑`, `トルコ石`, `空`, `青`, `紫`, `ピンク`, `赤`, `オレンジ`, `黄`, `灰色` |
|
||||
| テキスト | string | タグの内容 |
|
||||
| onClick | 機能 | ユーザーがタグをクリックすると呼び出される任意の関数 |
|
||||
|
||||
</Tab>
|
||||
|
||||
</Tabs>
|
||||
@@ -0,0 +1,8 @@
|
||||
---
|
||||
title: 入力
|
||||
image: /images/user-guide/tips/light-bulb.png
|
||||
---
|
||||
|
||||
<Frame>
|
||||
<img src="/images/user-guide/tips/light-bulb.png" alt="Header" />
|
||||
</Frame>
|
||||
@@ -0,0 +1,34 @@
|
||||
---
|
||||
title: ブロックエディター
|
||||
image: /images/user-guide/api/api.png
|
||||
---
|
||||
|
||||
<Frame>
|
||||
<img src="/images/user-guide/api/api.png" alt="Header" />
|
||||
</Frame>
|
||||
|
||||
ブロックベースのリッチテキストエディター[BlockNote](https://www.blocknotejs.org/)を使用して、ユーザーがコンテンツのブロックを編集および表示できるようにします。
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Usage">
|
||||
|
||||
```jsx
|
||||
import { useBlockNote } from "@blocknote/react";
|
||||
import { BlockEditor } from "@/ui/input/editor/components/BlockEditor";
|
||||
|
||||
export const MyComponent = () => {
|
||||
const BlockNoteEditor = useBlockNote();
|
||||
|
||||
return <BlockEditor editor={BlockNoteEditor} />;
|
||||
};
|
||||
```
|
||||
|
||||
</Tab>
|
||||
<Tab title="Props">
|
||||
|
||||
| プロパティ | タイプ | 説明 |
|
||||
| ----- | ----------------- | -------------------- |
|
||||
| エディター | `BlockNoteEditor` | ブロックエディターインスタンスまたは構成 |
|
||||
|
||||
</Tab>
|
||||
</Tabs>
|
||||
@@ -0,0 +1,56 @@
|
||||
---
|
||||
title: アイコンピッカー
|
||||
image: /images/user-guide/github/github-header.png
|
||||
---
|
||||
|
||||
<Frame>
|
||||
<img src="/images/user-guide/github/github-header.png" alt="Header" />
|
||||
</Frame>
|
||||
|
||||
ドロップダウンベースのアイコンピッカーで、ユーザーがリストからアイコンを選択できます。
|
||||
|
||||
<Tabs>
|
||||
|
||||
<Tab title="Usage">
|
||||
|
||||
```jsx
|
||||
import { RecoilRoot } from "recoil";
|
||||
import React, { useState } from "react";
|
||||
import { IconPicker } from "@/ui/input/components/IconPicker";
|
||||
|
||||
export const MyComponent = () => {
|
||||
|
||||
const [selectedIcon, setSelectedIcon] = useState("");
|
||||
const handleIconChange = ({ iconKey, Icon }) => {
|
||||
console.log("Selected Icon:", iconKey);
|
||||
setSelectedIcon(iconKey);
|
||||
};
|
||||
|
||||
return (
|
||||
<RecoilRoot>
|
||||
<IconPicker
|
||||
disabled={false}
|
||||
onChange={handleIconChange}
|
||||
selectedIconKey={selectedIcon}
|
||||
variant="primary"
|
||||
/>
|
||||
</RecoilRoot>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
</Tab>
|
||||
<Tab title="Props">
|
||||
|
||||
| プロパティ | タイプ | 説明 |
|
||||
| --------------- | ------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| disabled | ブール型 | `true` に設定されるとアイコンピッカーは無効になります |
|
||||
| onChange | 機能 | ユーザーがアイコンを選択したときにトリガーされるコールバック関数。 ユーザーがアイコンを選択したときにトリガーされるコールバック関数。 それは `iconKey` と `Icon` プロパティを持つオブジェクトを受け取ります ユーザーがアイコンを選択したときにトリガーされるコールバック関数。 それは `iconKey` と `Icon` プロパティを持つオブジェクトを受け取ります ユーザーがアイコンを選択したときにトリガーされるコールバック関数。 それは `iconKey` と `Icon` プロパティを持つオブジェクトを受け取ります ユーザーがアイコンを選択したときにトリガーされるコールバック関数。 それは `iconKey` と `Icon` プロパティを持つオブジェクトを受け取ります ユーザーがアイコンを選択したときにトリガーされるコールバック関数。 それは `iconKey` と `Icon` プロパティを持つオブジェクトを受け取ります ユーザーがアイコンを選択したときにトリガーされるコールバック関数。 それは `iconKey` と `Icon` プロパティを持つオブジェクトを受け取ります ユーザーがアイコンを選択したときにトリガーされるコールバック関数。 それは `iconKey` と `Icon` プロパティを持つオブジェクトを受け取ります ユーザーがアイコンを選択したときにトリガーされるコールバック関数。 それは `iconKey` と `Icon` プロパティを持つオブジェクトを受け取ります |
|
||||
| selectedIconKey | string | 最初に選択されたアイコンのキー |
|
||||
| onClickOutside | 機能 | ユーザーがドロップダウン外をクリックしたときにトリガーされるコールバック関数 |
|
||||
| onClose | 機能 | ドロップダウンが閉じられたときにトリガーされるコールバック関数 |
|
||||
| onOpen | 機能 | ドロップダウンが開かれたときにトリガーされるコールバック関数 |
|
||||
| バリアント | string | クリック可能なアイコンのビジュアルスタイルバリアント。 オプションには `primary`、 `secondary`、 `tertiary` が含まれます |
|
||||
|
||||
</Tab>
|
||||
</Tabs>
|
||||
@@ -0,0 +1,8 @@
|
||||
---
|
||||
title: ナビゲーション
|
||||
image: '""'
|
||||
---
|
||||
|
||||
<Frame>
|
||||
<img src="/images/user-guide/tasks/tasks_header.png" alt="Header" />
|
||||
</Frame>
|
||||
@@ -0,0 +1,44 @@
|
||||
---
|
||||
title: ブレッドクラム
|
||||
image: /images/user-guide/fields/field.png
|
||||
---
|
||||
|
||||
<Frame>
|
||||
<img src="/images/user-guide/fields/field.png" alt="Header" />
|
||||
</Frame>
|
||||
|
||||
ブレッドクラムナビゲーションバーをレンダリングします。
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Usage">
|
||||
|
||||
```jsx
|
||||
import { BrowserRouter } from "react-router-dom";
|
||||
import { Breadcrumb } from "@/ui/navigation/bread-crumb/components/Breadcrumb";
|
||||
|
||||
export const MyComponent = () => {
|
||||
const breadcrumbLinks = [
|
||||
{ children: "Home", href: "/" },
|
||||
{ children: "Category", href: "/category" },
|
||||
{ children: "Subcategory", href: "/category/subcategory" },
|
||||
{ children: "Current Page" },
|
||||
];
|
||||
|
||||
return (
|
||||
<BrowserRouter>
|
||||
<Breadcrumb className links={breadcrumbLinks} />
|
||||
</BrowserRouter>
|
||||
)
|
||||
};
|
||||
```
|
||||
|
||||
</Tab>
|
||||
<Tab title="Props">
|
||||
|
||||
| プロパティ | タイプ | 説明 |
|
||||
| --------- | ------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| className | string | 追加のスタイリングのためのオプションクラス名 |
|
||||
| リンク | array | 各オブジェクトはブレッドクラムリンクを表します。 各オブジェクトはブレッドクラムリンクを表します。 各オブジェクトはブレッドクラムリンクを表します。 各オブジェクトはブレッドクラムリンクを表します。 各オブジェクトはブレッドクラムリンクを表します。 各オブジェクトはブレッドクラムリンクを表します。 各オブジェクトには `children` プロパティ（リンクのテキストコンテンツ）とオプションの `href` プロパティ（リンクをクリックしたときに移動するURL）が含まれています。 |
|
||||
|
||||
</Tab>
|
||||
</Tabs>
|
||||
@@ -0,0 +1,168 @@
|
||||
---
|
||||
title: リンク
|
||||
image: /images/user-guide/what-is-twenty/20.png
|
||||
---
|
||||
|
||||
<Frame>
|
||||
<img src="/images/user-guide/what-is-twenty/20.png" alt="Header" />
|
||||
</Frame>
|
||||
|
||||
## 連絡先リンク
|
||||
|
||||
連絡先情報を表示するためのスタイライズされたリンクコンポーネントです。
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Usage">
|
||||
|
||||
```jsx
|
||||
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>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
</Tab>
|
||||
<Tab title="Props">
|
||||
|
||||
| プロパティ | タイプ | 説明 |
|
||||
| --------- | ----------------- | --------------------------- |
|
||||
| className | string | 追加スタイル用のオプション名 |
|
||||
| href | string | リンクのターゲットURLまたはパス |
|
||||
| onClick | 機能 | リンクがクリックされるとトリガーされるコールバック関数 |
|
||||
| children | `React.ReactNode` | リンク内に表示されるコンテンツ |
|
||||
|
||||
</Tab>
|
||||
|
||||
</Tabs>
|
||||
|
||||
## 生リンク
|
||||
|
||||
リンクを表示するためのスタイライズされたリンクコンポーネントです。
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Usage">
|
||||
|
||||
```jsx
|
||||
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>
|
||||
);
|
||||
};
|
||||
|
||||
```
|
||||
|
||||
</Tab>
|
||||
<Tab title="Props">
|
||||
|
||||
| プロパティ | タイプ | 説明 |
|
||||
| --------- | ----------------- | --------------------------- |
|
||||
| className | string | 追加のスタイリングのためのオプション名 |
|
||||
| href | string | リンクのターゲットURLまたはパス |
|
||||
| onClick | 機能 | リンクがクリックされるとトリガーされるコールバック関数 |
|
||||
| children | `React.ReactNode` | リンク内に表示されるコンテンツ |
|
||||
|
||||
</Tab>
|
||||
</Tabs>
|
||||
|
||||
## 丸リンク
|
||||
|
||||
リンクのためのチップコンポーネントを備えた丸いスタイルのリンクです。
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Usage">
|
||||
|
||||
```jsx
|
||||
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>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
</Tab>
|
||||
|
||||
<Tab title="Props">
|
||||
|
||||
| プロパティ | タイプ | 説明 |
|
||||
| -------- | ----------------- | --------------------------- |
|
||||
| href | string | リンクのターゲットURLまたはパス |
|
||||
| children | `React.ReactNode` | リンク内に表示されるコンテンツ |
|
||||
| onClick | 機能 | リンクがクリックされるとトリガーされるコールバック関数 |
|
||||
|
||||
</Tab>
|
||||
</Tabs>
|
||||
|
||||
## ソーシャルリンク
|
||||
|
||||
URL、LinkedIn、X(またはTwitter)など、さまざまなソーシャルリンクタイプに対応したスタイライズされたソーシャルリンクです。
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Usage">
|
||||
|
||||
```jsx
|
||||
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>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
</Tab>
|
||||
<Tab title="Props">
|
||||
|
||||
| プロパティ | タイプ | 説明 |
|
||||
| -------- | ----------------- | ------------------------------------------------------------------------------------------------------------------------------ |
|
||||
| href | string | リンクのターゲットURLまたはパス |
|
||||
| children | `React.ReactNode` | リンク内に表示されるコンテンツ |
|
||||
| タイプ | string | ソーシャルリンクの種類です。 ソーシャルリンクの種類です。 オプションには、`url`、`LinkedIn`、`Twitter`があります。 ソーシャルリンクの種類です。 オプションには、`url`、`LinkedIn`、`Twitter`があります。 |
|
||||
| onClick | 機能 | リンクがクリックされるとトリガーされるコールバック関数 |
|
||||
|
||||
</Tab>
|
||||
</Tabs>
|
||||
@@ -0,0 +1,52 @@
|
||||
---
|
||||
title: ナビゲーションバー
|
||||
image: /images/user-guide/table-views/table.png
|
||||
---
|
||||
|
||||
<Frame>
|
||||
<img src="/images/user-guide/table-views/table.png" alt="Header" />
|
||||
</Frame>
|
||||
|
||||
複数の`NavigationBarItem`コンポーネントを含むナビゲーションバーをレンダリングします。
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Usage">
|
||||
|
||||
```jsx
|
||||
import { IconHome, IconUser, IconSettings } from '@tabler/icons-react';
|
||||
import { NavigationBar } from "@/ui/navigation/navigation-bar/components/NavigationBar";
|
||||
|
||||
export const MyComponent = () => {
|
||||
|
||||
const navigationItems = [
|
||||
{
|
||||
name: "Home",
|
||||
Icon: IconHome,
|
||||
onClick: () => console.log("Home clicked"),
|
||||
},
|
||||
{
|
||||
name: "Profile",
|
||||
Icon: IconUser,
|
||||
onClick: () => console.log("Profile clicked"),
|
||||
},
|
||||
{
|
||||
name: "Settings",
|
||||
Icon: IconSettings,
|
||||
onClick: () => console.log("Settings clicked"),
|
||||
},
|
||||
];
|
||||
|
||||
return <NavigationBar activeItemName="Home" items={navigationItems}/>;
|
||||
};
|
||||
```
|
||||
|
||||
</Tab>
|
||||
<Tab title="Props">
|
||||
|
||||
| プロパティ | タイプ | 説明 |
|
||||
| -------------- | ------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| activeItemName | string | 現在アクティブなナビゲーション項目の名前 |
|
||||
| アイテム | array | 各ナビゲーションアイテムを表すオブジェクトの配列。 各ナビゲーションアイテムを表すオブジェクトの配列。 各ナビゲーションアイテムを表すオブジェクトの配列。 各ナビゲーションアイテムを表すオブジェクトの配列。 各ナビゲーションアイテムを表すオブジェクトの配列。 各オブジェクトには、アイテムの `name`、表示する `Icon` コンポーネント、およびアイテムがクリックされたときに呼び出される `onClick` 関数が含まれています。 |
|
||||
|
||||
</Tab>
|
||||
</Tabs>
|
||||
@@ -0,0 +1,38 @@
|
||||
---
|
||||
title: ステップバー
|
||||
image: /images/user-guide/api/api.png
|
||||
---
|
||||
|
||||
<Frame>
|
||||
<img src="/images/user-guide/api/api.png" alt="Header" />
|
||||
</Frame>
|
||||
|
||||
アクティブなステップをハイライトして、一連の番号付きステップの進行状況を表示します。 各 `Step` コンポーネントによって表されるステップを含むコンテナをレンダリングします。 各 `Step` コンポーネントによって表されるステップを含むコンテナをレンダリングします。 アクティブなステップをハイライトして、一連の番号付きステップの進行状況を表示します。 各 `Step` コンポーネントによって表されるステップを含むコンテナをレンダリングします。 各 `Step` コンポーネントによって表されるステップを含むコンテナをレンダリングします。 各 `Step` コンポーネントによって表されるステップを含むコンテナをレンダリングします。
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Usage">
|
||||
|
||||
```jsx
|
||||
import { StepBar } from "@/ui/navigation/step-bar/components/StepBar";
|
||||
|
||||
export const MyComponent = () => {
|
||||
return (
|
||||
<StepBar activeStep={2}>
|
||||
<StepBar.Step>Step 1</StepBar.Step>
|
||||
<StepBar.Step>Step 2</StepBar.Step>
|
||||
<StepBar.Step>Step 3</StepBar.Step>
|
||||
</StepBar>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
</Tab>
|
||||
|
||||
<Tab title="Props">
|
||||
|
||||
| プロパティ | タイプ | 説明 |
|
||||
| --------- | --- | -------------------------------------------------------------------------------------- |
|
||||
| アクティブステップ | 数 | 現在アクティブなステップのインデックス。 これにより、どのステップを視覚的にハイライトするかが決まります。 これにより、どのステップを視覚的にハイライトするかが決まります。 |
|
||||
|
||||
</Tab>
|
||||
</Tabs>
|
||||
@@ -0,0 +1,88 @@
|
||||
---
|
||||
title: 앱 툴팁
|
||||
image: /images/user-guide/tips/light-bulb.png
|
||||
---
|
||||
|
||||
<Frame>
|
||||
<img src="/images/user-guide/tips/light-bulb.png" alt="Header" />
|
||||
</Frame>
|
||||
|
||||
요소와 상호작용할 때 추가 정보를 표시하는 간단한 메시지입니다.
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Usage">
|
||||
|
||||
```jsx
|
||||
import { AppTooltip } from "@/ui/display/tooltip/AppTooltip";
|
||||
|
||||
export const MyComponent = () => {
|
||||
return (
|
||||
<>
|
||||
<p id="hoverText" style={{ display: "inline-block" }}>
|
||||
Customer Insights
|
||||
</p>
|
||||
<AppTooltip
|
||||
className
|
||||
anchorSelect="#hoverText"
|
||||
content="Explore customer behavior and preferences"
|
||||
delayHide={0}
|
||||
offset={6}
|
||||
noArrow={false}
|
||||
isOpen={true}
|
||||
place="bottom"
|
||||
positionStrategy="absolute"
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
</Tab>
|
||||
|
||||
<Tab title="Props">
|
||||
|
||||
| 프로퍼티 | 유형 | 설명 |
|
||||
| ------ | --------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| 클래스 네임 | 문자열 | 추가 스타일링을 위한 선택적 CSS 클래스 |
|
||||
| 앵커 선택 | CSS 선택자 | 툴팁 앵커(툴팁을 트리거하는 요소)의 선택자 |
|
||||
| 내용 | 문자열 | 툴팁 내에 표시할 내용을 입력하세요 |
|
||||
| 지연 숨기기 | 숫자 | 커서가 앵커를 떠난 후 툴팁이 숨겨지기까지의 지연 시간(초) |
|
||||
| 오프셋 | 숫자 | 툴팁 위치 조건을 위한 픽셀 단위의 오프셋 |
|
||||
| 화살표 없음 | 부울 | `true`이면 툴팁의 화살표가 숨겨집니다 |
|
||||
| 열림 여부 | 부울 | `true`이면 툴팁이 기본적으로 열려 있습니다 |
|
||||
| 위치 | `react-tooltip`의 `PlacesType` 문자열 | 툴팁의 배치를 지정합니다. 값으로는 `bottom`, `left`, `right`, `top`, `top-start`, `top-end`, `right-start`, `right-end`, `bottom-start`, `bottom-end`, `left-start`, `left-end` 등이 있습니다. |
|
||||
| 위치 전략 | `react-tooltip`의 `PositionStrategy` 문자열 | 툴팁에 대한 위치 전략입니다. 두 가지 값: `absolute` 및 `fixed` |
|
||||
|
||||
</Tab>
|
||||
|
||||
</Tabs>
|
||||
|
||||
## 툴팁이 포함된 오버플로 텍스트
|
||||
|
||||
텍스트가 넘칠 경우 처리하고 툴팁을 표시합니다.
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Usage">
|
||||
|
||||
```jsx
|
||||
import { OverflowingTextWithTooltip } from 'twenty-ui/display';
|
||||
|
||||
export const MyComponent = () => {
|
||||
const crmTaskDescription =
|
||||
'Follow up with client regarding their recent product inquiry. Discuss pricing options, address any concerns, and provide additional product information. Record the details of the conversation in the CRM for future reference.';
|
||||
|
||||
return <OverflowingTextWithTooltip text={crmTaskDescription} />;
|
||||
};
|
||||
```
|
||||
|
||||
</Tab>
|
||||
|
||||
<Tab title="Props">
|
||||
|
||||
| 프로퍼티 | 유형 | 설명 |
|
||||
| ---- | --- | -------------------------- |
|
||||
| 텍스트 | 문자열 | 오버플로 텍스트 영역에 표시할 내용을 입력하세요 |
|
||||
|
||||
</Tab>
|
||||
|
||||
</Tabs>
|
||||
@@ -0,0 +1,69 @@
|
||||
---
|
||||
title: 체크마크
|
||||
image: /images/user-guide/tasks/tasks_header.png
|
||||
---
|
||||
|
||||
<Frame>
|
||||
<img src="/images/user-guide/tasks/tasks_header.png" alt="Header" />
|
||||
</Frame>
|
||||
|
||||
성공하거나 완료된 작업을 나타냅니다.
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Usage">
|
||||
|
||||
```jsx
|
||||
import { Checkmark } from 'twenty-ui/display';
|
||||
|
||||
export const MyComponent = () => {
|
||||
return <Checkmark />;
|
||||
};
|
||||
```
|
||||
|
||||
</Tab>
|
||||
|
||||
<Tab title="Props">
|
||||
|
||||
`React.ComponentPropsWithoutRef<'div'>` 를 확장하며 일반 `div` 요소의 모든 속성을 수용합니다.
|
||||
|
||||
</Tab>
|
||||
|
||||
</Tabs>
|
||||
|
||||
## 애니메이션 체크마크
|
||||
|
||||
애니메이션 기능이 추가된 체크마크 아이콘을 나타냅니다.
|
||||
|
||||
<Tabs>
|
||||
|
||||
<Tab title="Usage">
|
||||
|
||||
```jsx
|
||||
import { AnimatedCheckmark } from 'twenty-ui/display';
|
||||
|
||||
export const MyComponent = () => {
|
||||
return (
|
||||
<AnimatedCheckmark
|
||||
isAnimating={true}
|
||||
color="green"
|
||||
duration={0.5}
|
||||
size={30}
|
||||
/>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
</Tab>
|
||||
|
||||
<Tab title="Props">
|
||||
|
||||
| 프로퍼티 | 유형 | 설명 | 기본값 |
|
||||
| ----------- | --- | ------------------------------------------ | -------------------- |
|
||||
| isAnimating | 부울 | 체크마크가 애니메이션 중인지 여부를 제어합니다. | 거짓 |
|
||||
| 색상 | 문자열 | 체크마크의 색상 | |
|
||||
| 지속 시간 | 숫자 | 애니메이션의 지속 시간(초) | 0.5초 |
|
||||
| 크기 | 숫자 | 체크마크의 크기 | 28 픽셀 |
|
||||
|
||||
</Tab>
|
||||
|
||||
</Tabs>
|
||||
@@ -0,0 +1,83 @@
|
||||
---
|
||||
title: 아이콘들
|
||||
image: /images/user-guide/objects/objects.png
|
||||
---
|
||||
|
||||
<Frame>
|
||||
<img src="/images/user-guide/objects/objects.png" alt="Header" />
|
||||
</Frame>
|
||||
|
||||
앱 전반에 걸쳐 사용되는 아이콘 목록입니다.
|
||||
|
||||
## 타블러 아이콘
|
||||
|
||||
앱 전반에 걸쳐 React에 타블러 아이콘을 사용합니다.
|
||||
|
||||
<Tabs>
|
||||
|
||||
<Tab title="Installation"><br/>
|
||||
|
||||
```
|
||||
yarn add @tabler/icons-react
|
||||
```
|
||||
|
||||
</Tab>
|
||||
|
||||
<Tab title="Props">
|
||||
|
||||
각 아이콘을 컴포넌트로 가져올 수 있습니다. Here's an example: <br />
|
||||
|
||||
```jsx
|
||||
import { IconArrowLeft } from "@tabler/icons-react";
|
||||
|
||||
export const MyComponent = () => {
|
||||
return <IconArrowLeft color="red" size={48} />;
|
||||
};
|
||||
```
|
||||
|
||||
</Tab>
|
||||
|
||||
<Tab title="Props">
|
||||
|
||||
| 프로퍼티 | 유형 | 설명 | 기본값 |
|
||||
| ---- | --- | ------------------ | ------------ |
|
||||
| 크기 | 숫자 | 픽셀 단위의 아이콘 높이와 너비 | 24 |
|
||||
| 색상 | 문자열 | 아이콘의 색상 | currentColor |
|
||||
| 스트로크 | 숫자 | 픽셀 단위의 아이콘 스트로크 너비 | 2 |
|
||||
|
||||
</Tab>
|
||||
|
||||
</Tabs>
|
||||
|
||||
## 커스텀 아이콘
|
||||
|
||||
타블러 아이콘 외에도 앱에는 일부 커스텀 아이콘이 사용됩니다.
|
||||
|
||||
### 아이콘 주소록
|
||||
|
||||
주소록 아이콘을 표시합니다.
|
||||
|
||||
<Tabs>
|
||||
|
||||
<Tab title="Usage">
|
||||
|
||||
```jsx
|
||||
import { IconAddressBook } from 'twenty-ui/display';
|
||||
|
||||
export const MyComponent = () => {
|
||||
return <IconAddressBook size={24} stroke={2} />;
|
||||
};
|
||||
```
|
||||
|
||||
</Tab>
|
||||
|
||||
<Tab title="Props">
|
||||
|
||||
| 프로퍼티 | 유형 | 설명 | 기본값 |
|
||||
| ---- | -- | ------------------ | --- |
|
||||
| 크기 | 숫자 | 픽셀 단위의 아이콘 높이와 너비 | 24 |
|
||||
| 스트로크 | 숫자 | 픽셀 단위의 아이콘 스트로크 너비 | 2 |
|
||||
|
||||
</Tab>
|
||||
|
||||
</Tabs>
|
||||
@@ -0,0 +1,44 @@
|
||||
---
|
||||
title: 태그
|
||||
image: /images/user-guide/table-views/table.png
|
||||
---
|
||||
|
||||
<Frame>
|
||||
<img src="/images/user-guide/table-views/table.png" alt="Header" />
|
||||
</Frame>
|
||||
|
||||
콘텐츠를 시각적으로 분류하거나 라벨을 붙이는 구성 요소입니다.
|
||||
|
||||
<Tabs>
|
||||
|
||||
<Tab title="Usage">
|
||||
|
||||
```jsx
|
||||
import { Tag } from "@/ui/display/tag/components/Tag";
|
||||
|
||||
export const MyComponent = () => {
|
||||
return (
|
||||
<Tag
|
||||
className
|
||||
color="red"
|
||||
text="Urgent"
|
||||
onClick={() => console.log("click")}
|
||||
/>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
</Tab>
|
||||
|
||||
<Tab title="Props">
|
||||
|
||||
| 프로퍼티 | 유형 | 설명 |
|
||||
| ------- | -------- | ------------------------------------------------------------------------------------------------------------------- |
|
||||
| 클래스 네임 | 문자열 | 추가 스타일을 위한 선택적 이름 |
|
||||
| 색상 | 문자열 | 태그의 색상. 옵션은 `녹색`, `터키옥색`, `하늘색`, `파랑`, `보라색`, `핑크`, `빨강`, `오렌지`, `노랑`, `회색`을 포함합니다. |
|
||||
| 텍스트 | 문자열 | 태그의 콘텐츠 |
|
||||
| onClick | function | 사용자가 태그를 클릭할 때 호출되는 선택적 함수 |
|
||||
|
||||
</Tab>
|
||||
|
||||
</Tabs>
|
||||
@@ -0,0 +1,8 @@
|
||||
---
|
||||
title: 입력
|
||||
image: /images/user-guide/tips/light-bulb.png
|
||||
---
|
||||
|
||||
<Frame>
|
||||
<img src="/images/user-guide/tips/light-bulb.png" alt="Header" />
|
||||
</Frame>
|
||||
@@ -0,0 +1,34 @@
|
||||
---
|
||||
title: 블록 편집기
|
||||
image: /images/user-guide/api/api.png
|
||||
---
|
||||
|
||||
<Frame>
|
||||
<img src="/images/user-guide/api/api.png" alt="Header" />
|
||||
</Frame>
|
||||
|
||||
사용자는 [BlockNote](https://www.blocknotejs.org/)의 블록 기반 리치 텍스트 편집기를 사용해 콘텐츠 블록을 편집하고 볼 수 있습니다.
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Usage">
|
||||
|
||||
```jsx
|
||||
import { useBlockNote } from "@blocknote/react";
|
||||
import { BlockEditor } from "@/ui/input/editor/components/BlockEditor";
|
||||
|
||||
export const MyComponent = () => {
|
||||
const BlockNoteEditor = useBlockNote();
|
||||
|
||||
return <BlockEditor editor={BlockNoteEditor} />;
|
||||
};
|
||||
```
|
||||
|
||||
</Tab>
|
||||
<Tab title="Props">
|
||||
|
||||
| 프로퍼티 | 유형 | 설명 |
|
||||
| ---- | ----------------- | ----------------- |
|
||||
| 편집기 | `BlockNoteEditor` | 블록 편집기 인스턴스 또는 구성 |
|
||||
|
||||
</Tab>
|
||||
</Tabs>
|
||||
@@ -0,0 +1,47 @@
|
||||
---
|
||||
title: 체크박스
|
||||
image: /images/user-guide/tasks/tasks_header.png
|
||||
---
|
||||
|
||||
<Frame>
|
||||
<img src="/images/user-guide/tasks/tasks_header.png" alt="Header" />
|
||||
</Frame>
|
||||
|
||||
사용자가 여러 옵션 중 여러 값을 선택해야 할 때 사용됩니다.
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Usage">
|
||||
|
||||
```jsx
|
||||
import { Checkbox } from "twenty-ui/display";
|
||||
|
||||
export const MyComponent = () => {
|
||||
return (
|
||||
<Checkbox
|
||||
checked={true}
|
||||
indeterminate={false}
|
||||
onChange={() => console.log("onChange function fired")}
|
||||
onCheckedChange={() => console.log("onCheckedChange function fired")}
|
||||
variant="primary"
|
||||
size="small"
|
||||
shape="squared"
|
||||
/>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
</Tab>
|
||||
<Tab title="Props">
|
||||
|
||||
| 프로퍼티 | 유형 | 설명 |
|
||||
| --------------- | -------- | -------------------------------------------------------------------------------------------------- |
|
||||
| 체크됨 | 부울 | 체크박스가 체크된 상태인지 나타냅니다 |
|
||||
| 불확정 | 부울 | 체크박스가 불확정 상태(체크되지 않음과 체크됨의 중간)에 있는지 나타냅니다 |
|
||||
| onChange | function | 체크박스 상태가 변경될 때 호출할 콜백 함수입니다. |
|
||||
| onCheckedChange | function | `checked` 상태가 변경될 때 호출할 콜백 함수입니다. |
|
||||
| 변형 | 문자열 | 박스의 시각적 스타일 변형입니다. 옵션에는 `primary`, `secondary`, `tertiary`가 포함됩니다. |
|
||||
| 크기 | 문자열 | 체크박스의 크기입니다. 두 가지 옵션이 있습니다: `small`과 `large` |
|
||||
| 모양 | 문자열 | 체크박스의 모양입니다. 두 가지 옵션이 있습니다: `squared`와 `rounded` |
|
||||
|
||||
</Tab>
|
||||
</Tabs>
|
||||
@@ -0,0 +1,73 @@
|
||||
---
|
||||
title: 색 구성표
|
||||
image: /images/user-guide/fields/field.png
|
||||
---
|
||||
|
||||
<Frame>
|
||||
<img src="/images/user-guide/fields/field.png" alt="Header" />
|
||||
</Frame>
|
||||
|
||||
## 색상 구성표 카드
|
||||
|
||||
다양한 색상 구성표를 나타내며, 밝은 테마와 어두운 테마를 위해 특별히 설계되었습니다.
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Usage">
|
||||
|
||||
```jsx
|
||||
import { ColorSchemeCard } from "twenty-ui/display";
|
||||
|
||||
export const MyComponent = () => {
|
||||
return (
|
||||
<ColorSchemeCard
|
||||
variant="Dark"
|
||||
selected={true}
|
||||
/>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
</Tab>
|
||||
|
||||
<Tab title="Props">
|
||||
|
||||
| 프로퍼티 | 유형 | 설명 | 기본값 |
|
||||
| ----- | --------------------------------------- | ----------------------------------------------------------------------------------- | --- |
|
||||
| 변형 | 문자열 | 색상 구성표 변형. 옵션에는 `Dark`, `Light`, 및 `System`이 포함됩니다. | 라이트 |
|
||||
| 선택됨 | 부울 | `true`이면 선택한 색상 구성표를 나타내는 체크 표시가 나타납니다. | |
|
||||
| 추가 속성 | `React.ComponentPropsWithoutRef<'div'>` | 기본 HTML `div` 요소 속성 | |
|
||||
|
||||
</Tab>
|
||||
|
||||
</Tabs>
|
||||
|
||||
## 색상 구성표 선택기
|
||||
|
||||
사용자가 다양한 색상 구성표를 선택할 수 있도록 합니다.
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Usage">
|
||||
|
||||
```jsx
|
||||
import { ColorSchemePicker } from "twenty-ui/display";
|
||||
|
||||
export const MyComponent = () => {
|
||||
return <ColorSchemePicker
|
||||
value="Dark"
|
||||
onChange
|
||||
/>;
|
||||
};
|
||||
```
|
||||
|
||||
</Tab>
|
||||
|
||||
<Tab title="Props">
|
||||
|
||||
| 프로퍼티 | 유형 | 설명 |
|
||||
| -------- | -------- | ----------------------------- |
|
||||
| 값 | `색 구성표` | 현재 선택된 색상 구성표 |
|
||||
| onChange | function | 사용자가 색상 구성표를 선택할 때 트리거할 콜백 함수 |
|
||||
|
||||
</Tab>
|
||||
|
||||
</Tabs>
|
||||
@@ -0,0 +1,37 @@
|
||||
---
|
||||
title: 이미지 입력
|
||||
image: /images/user-guide/objects/objects.png
|
||||
---
|
||||
|
||||
<Frame>
|
||||
<img src="/images/user-guide/objects/objects.png" alt="Header" />
|
||||
</Frame>
|
||||
|
||||
사용자가 이미지를 업로드하고 제거할 수 있도록 합니다.
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Usage">
|
||||
|
||||
```jsx
|
||||
import { ImageInput } from "@/ui/input/components/ImageInput";
|
||||
|
||||
export const MyComponent = () => {
|
||||
return <ImageInput/>;
|
||||
};
|
||||
```
|
||||
|
||||
</Tab>
|
||||
<Tab title="Props">
|
||||
|
||||
| 프로퍼티 | 유형 | 설명 |
|
||||
| ------------ | -------- | ------------------------------------------------------------------------------------- |
|
||||
| 사진 | 문자열 | 이미지 소스 URL |
|
||||
| onUpload | function | 사용자가 새 이미지를 업로드할 때 호출되는 함수입니다. `File` 객체를 매개변수로 받습니다. |
|
||||
| onRemove | function | 사용자가 제거 버튼을 클릭할 때 호출되는 함수입니다. |
|
||||
| onAbort | function | 사용자가 이미지 업로드 중 중단 버튼을 클릭할 때 호출되는 함수입니다. |
|
||||
| isUploading | 부울 | 이미지가 현재 업로드 중인지 여부를 나타냅니다. |
|
||||
| errorMessage | 문자열 | 이미지 입력 아래에 표시할 선택적 오류 메시지입니다. |
|
||||
| disabled | 부울 | `true`인 경우 전체 입력이 비활성화되고 버튼을 클릭할 수 없습니다. |
|
||||
|
||||
</Tab>
|
||||
</Tabs>
|
||||
@@ -0,0 +1,104 @@
|
||||
---
|
||||
title: 라디오
|
||||
image: /images/user-guide/create-workspace/workspace-cover.png
|
||||
---
|
||||
|
||||
<Frame>
|
||||
<img src="/images/user-guide/create-workspace/workspace-cover.png" alt="Header" />
|
||||
</Frame>
|
||||
|
||||
사용자가 여러 옵션 중에서 하나만 선택할 수 있을 때 사용됩니다.
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Usage">
|
||||
|
||||
```jsx
|
||||
import { Radio } from "twenty-ui/display";
|
||||
|
||||
export const MyComponent = () => {
|
||||
|
||||
const handleRadioChange = (event) => {
|
||||
console.log("Radio button changed:", event.target.checked);
|
||||
};
|
||||
|
||||
const handleCheckedChange = (checked) => {
|
||||
console.log("Checked state changed:", checked);
|
||||
};
|
||||
|
||||
|
||||
return (
|
||||
<Radio
|
||||
checked={true}
|
||||
value="Option 1"
|
||||
onChange={handleRadioChange}
|
||||
onCheckedChange={handleCheckedChange}
|
||||
size="large"
|
||||
disabled={false}
|
||||
labelPosition="right"
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
```
|
||||
|
||||
</Tab>
|
||||
<Tab title="Props">
|
||||
|
||||
| 프로퍼티 | 유형 | 설명 |
|
||||
| --------------- | -------------- | ------------------------------------------------------------------------------------- |
|
||||
| 스타일 | `React.CSS` 속성 | 컴포넌트의 추가 인라인 스타일 |
|
||||
| 클래스 네임 | 문자열 | 추가 스타일링을 위한 선택적 CSS 클래스 |
|
||||
| 체크됨 | 부울 | 라디오 버튼이 체크되었는지 여부를 나타냅니다 |
|
||||
| 값 | 문자열 | 라디오 버튼과 연결된 라벨 또는 텍스트 |
|
||||
| onChange | function | 선택된 라디오 버튼이 변경될 때 호출되는 기능 |
|
||||
| onCheckedChange | function | 라디오 버튼의 `체크` 상태가 변경될 때 호출되는 기능 |
|
||||
| 크기 | 문자열 | 라디오 버튼의 크기입니다. 옵션에는 `large`와 `small`이 포함됩니다 |
|
||||
| disabled | 부울 | `참`이면 라디오 버튼이 비활성화되어 클릭할 수 없습니다 |
|
||||
| 라벨 위치 | 문자열 | 라벨 텍스트의 라디오 버튼에 대한 상대 위치입니다. 두 가지 옵션: `left`와 `right` |
|
||||
|
||||
</Tab>
|
||||
</Tabs>
|
||||
|
||||
## 라디오 그룹
|
||||
|
||||
관련된 라디오 버튼들을 그룹화합니다.
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Usage">
|
||||
|
||||
```jsx
|
||||
import React, { useState } from "react";
|
||||
import { Radio, RadioGroup } from "twenty-ui/display";
|
||||
|
||||
export const MyComponent = () => {
|
||||
|
||||
const [selectedValue, setSelectedValue] = useState("Option 1");
|
||||
|
||||
const handleChange = (event) => {
|
||||
setSelectedValue(event.target.value);
|
||||
};
|
||||
|
||||
return (
|
||||
<RadioGroup value={selectedValue} onChange={handleChange}>
|
||||
<Radio value="Option 1" />
|
||||
<Radio value="Option 2" />
|
||||
<Radio value="Option 3" />
|
||||
</RadioGroup>
|
||||
);
|
||||
};
|
||||
|
||||
```
|
||||
|
||||
</Tab>
|
||||
<Tab title="Props">
|
||||
|
||||
| 프로퍼티 | 유형 | 설명 |
|
||||
| ------------- | ----------------- | -------------------------------------------------- |
|
||||
| 값 | 문자열 | 현재 선택된 라디오 버튼의 값 |
|
||||
| onChange | function | 라디오 버튼이 변경될 때 트리거되는 콜백 기능 |
|
||||
| onValueChange | function | 그룹에서 선택된 값이 변경될 때 트리거되는 콜백 기능. |
|
||||
| children | `React.ReactNode` | Radio와 같은 React 컴포넌트를 자식으로 Radio Group에 전달할 수 있습니다 |
|
||||
|
||||
</Tab>
|
||||
|
||||
</Tabs>
|
||||
@@ -0,0 +1,54 @@
|
||||
---
|
||||
title: 선택
|
||||
image: /images/user-guide/what-is-twenty/20.png
|
||||
---
|
||||
|
||||
<Frame>
|
||||
<img src="/images/user-guide/what-is-twenty/20.png" alt="Header" />
|
||||
</Frame>
|
||||
|
||||
사용자가 미리 정의된 옵션 목록에서 값을 선택할 수 있도록 합니다.
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Usage">
|
||||
|
||||
```jsx
|
||||
import { RecoilRoot } from 'recoil';
|
||||
import { IconTwentyStar } from 'twenty-ui/display';
|
||||
|
||||
import { Select } from '@/ui/input/components/Select';
|
||||
|
||||
export const MyComponent = () => {
|
||||
|
||||
return (
|
||||
<RecoilRoot>
|
||||
<Select
|
||||
className
|
||||
disabled={false}
|
||||
label="Select an option"
|
||||
options={[
|
||||
{ value: 'option1', label: 'Option A', Icon: IconTwentyStar },
|
||||
{ value: 'option2', label: 'Option B', Icon: IconTwentyStar },
|
||||
]}
|
||||
value="option1"
|
||||
/>
|
||||
</RecoilRoot>
|
||||
);
|
||||
};
|
||||
|
||||
```
|
||||
|
||||
</Tab>
|
||||
<Tab title="Props">
|
||||
|
||||
| 프로퍼티 | 유형 | 설명 |
|
||||
| -------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| 클래스 네임 | 문자열 | 추가 스타일링을 위한 선택적 CSS 클래스 |
|
||||
| disabled | 부울 | `true`로 설정하면 사용자는 이 구성 요소와 상호작용할 수 없습니다. |
|
||||
| 라벨 | 문자열 | `선택` 구성 요소의 목적을 설명하는 라벨 |
|
||||
| onChange | function | 선택된 값이 변경될 때 호출되는 함수 |
|
||||
| 옵션 | 배열 | `선택된` 구성 요소에 사용할 수 있는 옵션들을 나타냅니다. 각 객체에는 `값`(고유 식별자), `라벨`(고유 식별자) 및 선택적 `아이콘`이 포함된 객체의 배열입니다. |
|
||||
| 값 | 문자열 | 현재 선택된 값을 나타냅니다. `옵션` 배열에서 하나의 `값` 속성과 일치해야 합니다. |
|
||||
|
||||
</Tab>
|
||||
</Tabs>
|
||||
@@ -0,0 +1,8 @@
|
||||
---
|
||||
title: 네비게이션
|
||||
image: /images/user-guide/tasks/tasks_header.png
|
||||
---
|
||||
|
||||
<Frame>
|
||||
<img src="/images/user-guide/tasks/tasks_header.png" alt="Header" />
|
||||
</Frame>
|
||||
@@ -0,0 +1,168 @@
|
||||
---
|
||||
title: 링크
|
||||
image: /images/user-guide/what-is-twenty/20.png
|
||||
---
|
||||
|
||||
<Frame>
|
||||
<img src="/images/user-guide/what-is-twenty/20.png" alt="Header" />
|
||||
</Frame>
|
||||
|
||||
## 연락 링크
|
||||
|
||||
연락처 정보를 표시하기 위한 스타일화된 링크 구성 요소입니다.
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Usage">
|
||||
|
||||
```jsx
|
||||
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>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
</Tab>
|
||||
<Tab title="Props">
|
||||
|
||||
| 프로퍼티 | 유형 | 설명 |
|
||||
| -------- | ----------------- | --------------------- |
|
||||
| 클래스 네임 | 문자열 | 추가 스타일링을 위한 선택적 이름 |
|
||||
| href | 문자열 | 링크의 대상 URL 또는 경로 |
|
||||
| 클릭 시 | function | 링크가 클릭될 때 트리거되는 콜백 함수 |
|
||||
| children | `React.ReactNode` | 링크 내부에 표시할 콘텐츠 |
|
||||
|
||||
</Tab>
|
||||
|
||||
</Tabs>
|
||||
|
||||
## 원시 링크
|
||||
|
||||
링크를 표시하기 위한 스타일화된 링크 구성 요소입니다.
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Usage">
|
||||
|
||||
```jsx
|
||||
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>
|
||||
);
|
||||
};
|
||||
|
||||
```
|
||||
|
||||
</Tab>
|
||||
<Tab title="Props">
|
||||
|
||||
| 프로퍼티 | 유형 | 설명 |
|
||||
| -------- | ----------------- | --------------------- |
|
||||
| 클래스 네임 | 문자열 | 추가 스타일을 위한 선택적 이름 |
|
||||
| href | 문자열 | 링크의 대상 URL 또는 경로 |
|
||||
| onClick | function | 링크가 클릭될 때 트리거되는 콜백 함수 |
|
||||
| children | `React.ReactNode` | 링크 내부에 표시할 콘텐츠 |
|
||||
|
||||
</Tab>
|
||||
</Tabs>
|
||||
|
||||
## 둥근 링크
|
||||
|
||||
Chip 구성 요소가 있는 라운드 스타일 링크입니다.
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Usage">
|
||||
|
||||
```jsx
|
||||
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>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
</Tab>
|
||||
|
||||
<Tab title="Props">
|
||||
|
||||
| 프로퍼티 | 유형 | 설명 |
|
||||
| -------- | ----------------- | --------------------- |
|
||||
| href | 문자열 | 링크의 대상 URL 또는 경로 |
|
||||
| children | `React.ReactNode` | 링크 내부에 표시할 콘텐츠 |
|
||||
| onClick | function | 링크가 클릭될 때 트리거되는 콜백 함수 |
|
||||
|
||||
</Tab>
|
||||
</Tabs>
|
||||
|
||||
## 소셜 링크
|
||||
|
||||
URL, LinkedIn 및 X(또는 Twitter)와 같은 다양한 소셜 링크 유형을 지원하는 스타일화된 소셜 링크입니다.
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Usage">
|
||||
|
||||
```jsx
|
||||
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>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
</Tab>
|
||||
<Tab title="Props">
|
||||
|
||||
| 프로퍼티 | 유형 | 설명 |
|
||||
| -------- | ----------------- | --------------------------------------------------------------------------------------- |
|
||||
| href | 문자열 | 링크의 대상 URL 또는 경로 |
|
||||
| children | `React.ReactNode` | 링크 내부에 표시할 콘텐츠 |
|
||||
| 유형 | 문자열 | 소셜 링크 유형입니다. 옵션은 다음과 같습니다: `url`, `LinkedIn`, `Twitter` |
|
||||
| 클릭 시 | function | 링크가 클릭될 때 트리거되는 콜백 함수 |
|
||||
|
||||
</Tab>
|
||||
</Tabs>
|
||||
@@ -0,0 +1,38 @@
|
||||
---
|
||||
title: 단계 막대
|
||||
image: /images/user-guide/api/api.png
|
||||
---
|
||||
|
||||
<Frame>
|
||||
<img src="/images/user-guide/api/api.png" alt="Header" />
|
||||
</Frame>
|
||||
|
||||
활성 단계가 강조 표시되어 있는 다단계 진행 상황을 표시합니다. 각각의 `Step` 구성 요소로 표현되는 단계를 포함하는 컨테이너를 렌더링합니다.
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Usage">
|
||||
|
||||
```jsx
|
||||
import { StepBar } from "@/ui/navigation/step-bar/components/StepBar";
|
||||
|
||||
export const MyComponent = () => {
|
||||
return (
|
||||
<StepBar activeStep={2}>
|
||||
<StepBar.Step>Step 1</StepBar.Step>
|
||||
<StepBar.Step>Step 2</StepBar.Step>
|
||||
<StepBar.Step>Step 3</StepBar.Step>
|
||||
</StepBar>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
</Tab>
|
||||
|
||||
<Tab title="Props">
|
||||
|
||||
| 프로퍼티 | 유형 | 설명 |
|
||||
| ---------- | -- | ----------------------------------------------------------------------------------- |
|
||||
| activeStep | 숫자 | 현재 활성 단계의 인덱스입니다. 어느 단계가 시각적으로 강조 표시되어야 하는지를 결정합니다. |
|
||||
|
||||
</Tab>
|
||||
</Tabs>
|
||||
@@ -0,0 +1,88 @@
|
||||
---
|
||||
title: Dica do Aplicativo
|
||||
image: /images/user-guide/tips/light-bulb.png
|
||||
---
|
||||
|
||||
<Frame>
|
||||
<img src="/images/user-guide/tips/light-bulb.png" alt="Header" />
|
||||
</Frame>
|
||||
|
||||
Uma mensagem breve que exibe informações adicionais quando um usuário interage com um elemento.
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Usage">
|
||||
|
||||
```jsx
|
||||
import { AppTooltip } from "@/ui/display/tooltip/AppTooltip";
|
||||
|
||||
export const MyComponent = () => {
|
||||
return (
|
||||
<>
|
||||
<p id="hoverText" style={{ display: "inline-block" }}>
|
||||
Customer Insights
|
||||
</p>
|
||||
<AppTooltip
|
||||
className
|
||||
anchorSelect="#hoverText"
|
||||
content="Explore customer behavior and preferences"
|
||||
delayHide={0}
|
||||
offset={6}
|
||||
noArrow={false}
|
||||
isOpen={true}
|
||||
place="bottom"
|
||||
positionStrategy="absolute"
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
</Tab>
|
||||
|
||||
<Tab title="Props">
|
||||
|
||||
| Propriedades | Tipo | Descrição |
|
||||
| ---------------- | -------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| className | string | Classe CSS opcional para estilização adicional |
|
||||
| anchorSelect | Seleção CSS | Seletor para o âncora da dica (o elemento que aciona a dica) |
|
||||
| conteúdo | string | O conteúdo que deseja exibir na dica |
|
||||
| delayHide | número | O atraso em segundos antes de ocultar a dica após o cursor deixar a âncora. |
|
||||
| offset | número | O deslocamento em pixels para posicionar a dica. |
|
||||
| noArrow | booleano | Se `true`, oculta a seta na dica. |
|
||||
| isOpen | booleano | Se `true`, a dica está aberta por padrão. |
|
||||
| local | string `PlacesType` de `react-tooltip` | Especifica o posicionamento da dica. Os valores incluem `bottom`, `left`, `right`, `top`, `top-start`, `top-end`, `right-start`, `right-end`, `bottom-start`, `bottom-end`, `left-start`, e `left-end`. |
|
||||
| positionStrategy | string `PositionStrategy` de `react-tooltip` | Estratégia de posição para a dica. Possui dois valores: `absolute` e `fixed`. |
|
||||
|
||||
</Tab>
|
||||
|
||||
</Tabs>
|
||||
|
||||
## Texto Overflow com Dica
|
||||
|
||||
Lida com texto em excesso e exibe uma dica quando o texto transborda.
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Usage">
|
||||
|
||||
```jsx
|
||||
import { OverflowingTextWithTooltip } from 'twenty-ui/display';
|
||||
|
||||
export const MyComponent = () => {
|
||||
const crmTaskDescription =
|
||||
'Follow up with client regarding their recent product inquiry. Discuss pricing options, address any concerns, and provide additional product information. Record the details of the conversation in the CRM for future reference.';
|
||||
|
||||
return <OverflowingTextWithTooltip text={crmTaskDescription} />;
|
||||
};
|
||||
```
|
||||
|
||||
</Tab>
|
||||
|
||||
<Tab title="Props">
|
||||
|
||||
| Propriedades | Tipo | Descrição |
|
||||
| ------------ | ------ | ----------------------------------------------------------------------------- |
|
||||
| texto | string | O conteúdo que você deseja exibir na área de texto excessivo. |
|
||||
|
||||
</Tab>
|
||||
|
||||
</Tabs>
|
||||
@@ -0,0 +1,8 @@
|
||||
---
|
||||
title: Entrada
|
||||
image: /images/user-guide/tips/light-bulb.png
|
||||
---
|
||||
|
||||
<Frame>
|
||||
<img src="/images/user-guide/tips/light-bulb.png" alt="Header" />
|
||||
</Frame>
|
||||
@@ -0,0 +1,34 @@
|
||||
---
|
||||
title: Editor de Blocos
|
||||
image: /images/user-guide/api/api.png
|
||||
---
|
||||
|
||||
<Frame>
|
||||
<img src="/images/user-guide/api/api.png" alt="Header" />
|
||||
</Frame>
|
||||
|
||||
Usa um editor de texto rico baseado em blocos do [BlockNote](https://www.blocknotejs.org/) para permitir que os usuários editem e vejam blocos de conteúdo.
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Usage">
|
||||
|
||||
```jsx
|
||||
import { useBlockNote } from "@blocknote/react";
|
||||
import { BlockEditor } from "@/ui/input/editor/components/BlockEditor";
|
||||
|
||||
export const MyComponent = () => {
|
||||
const BlockNoteEditor = useBlockNote();
|
||||
|
||||
return <BlockEditor editor={BlockNoteEditor} />;
|
||||
};
|
||||
```
|
||||
|
||||
</Tab>
|
||||
<Tab title="Props">
|
||||
|
||||
| Propriedades | Tipo | Descrição |
|
||||
| ------------ | ----------------- | ----------------------------------------------- |
|
||||
| editor | `BlockNoteEditor` | A instância ou configuração do editor de blocos |
|
||||
|
||||
</Tab>
|
||||
</Tabs>
|
||||
@@ -0,0 +1,8 @@
|
||||
---
|
||||
title: Navegação
|
||||
image: /images/user-guide/tasks/tasks_header.png
|
||||
---
|
||||
|
||||
<Frame>
|
||||
<img src="/images/user-guide/tasks/tasks_header.png" alt="Header" />
|
||||
</Frame>
|
||||
@@ -0,0 +1,168 @@
|
||||
---
|
||||
title: Links
|
||||
image: /images/user-guide/what-is-twenty/20.png
|
||||
---
|
||||
|
||||
<Frame>
|
||||
<img src="/images/user-guide/what-is-twenty/20.png" alt="Header" />
|
||||
</Frame>
|
||||
|
||||
## Link de Contato
|
||||
|
||||
Um componente de link estilizado para exibir informações de contato.
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Usage">
|
||||
|
||||
```jsx
|
||||
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>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
</Tab>
|
||||
<Tab title="Props">
|
||||
|
||||
| Propriedades | Tipo | Descrição |
|
||||
| ------------ | ----------------- | ----------------------------------------------------------------------- |
|
||||
| className | string | Nome opcional para estilização adicional. |
|
||||
| href | string | A URL ou caminho de destino para o link |
|
||||
| onClick | função | Função de retorno de chamada para ser disparada quando o link é clicado |
|
||||
| filhos | `React.ReactNode` | O conteúdo a ser exibido dentro do link |
|
||||
|
||||
</Tab>
|
||||
|
||||
</Tabs>
|
||||
|
||||
## Link Puro
|
||||
|
||||
Um componente de link estilizado para exibir links.
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Usage">
|
||||
|
||||
```jsx
|
||||
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>
|
||||
);
|
||||
};
|
||||
|
||||
```
|
||||
|
||||
</Tab>
|
||||
<Tab title="Props">
|
||||
|
||||
| Propriedades | Tipo | Descrição |
|
||||
| ------------ | ----------------- | ----------------------------------------------------------------------- |
|
||||
| className | string | Nome opcional para estilização adicional. |
|
||||
| href | string | A URL ou caminho de destino para o link |
|
||||
| aoClicar | função | Função de retorno de chamada para ser disparada quando o link é clicado |
|
||||
| filhos | `React.ReactNode` | O conteúdo a ser exibido dentro do link |
|
||||
|
||||
</Tab>
|
||||
</Tabs>
|
||||
|
||||
## Link Arredondado
|
||||
|
||||
Um link estilizado de forma arredondada com um componente Chip para links.
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Usage">
|
||||
|
||||
```jsx
|
||||
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>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
</Tab>
|
||||
|
||||
<Tab title="Props">
|
||||
|
||||
| Propriedades | Tipo | Descrição |
|
||||
| ------------ | ----------------- | ----------------------------------------------------------------------- |
|
||||
| href | string | A URL ou caminho de destino para o link |
|
||||
| filhos | `React.ReactNode` | O conteúdo a ser exibido dentro do link |
|
||||
| aoClicar | função | Função de retorno de chamada para ser disparada quando o link é clicado |
|
||||
|
||||
</Tab>
|
||||
</Tabs>
|
||||
|
||||
## Link Social
|
||||
|
||||
Links sociais estilizados, com suporte para vários tipos de links sociais, como URLs, LinkedIn e X (ou Twitter).
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Usage">
|
||||
|
||||
```jsx
|
||||
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>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
</Tab>
|
||||
<Tab title="Props">
|
||||
|
||||
| Propriedades | Tipo | Descrição |
|
||||
| ------------ | ----------------- | ------------------------------------------------------------------------------------------------------ |
|
||||
| href | string | A URL ou caminho de destino para o link |
|
||||
| filhos | `React.ReactNode` | O conteúdo a ser exibido dentro do link |
|
||||
| tipo | string | O tipo de links sociais. Opções incluem: `url`, `LinkedIn` e `Twitter` |
|
||||
| onClick | função | Função de retorno de chamada para ser disparada quando o link é clicado |
|
||||
|
||||
</Tab>
|
||||
</Tabs>
|
||||
@@ -0,0 +1,38 @@
|
||||
---
|
||||
title: Barra de Passos
|
||||
image: /images/user-guide/api/api.png
|
||||
---
|
||||
|
||||
<Frame>
|
||||
<img src="/images/user-guide/api/api.png" alt="Header" />
|
||||
</Frame>
|
||||
|
||||
Exibe o progresso por meio de uma sequência de passos numerados destacando o passo ativo. Ele renderiza um contêiner com passos, cada um representado pelo componente `Step`.
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Usage">
|
||||
|
||||
```jsx
|
||||
import { StepBar } from "@/ui/navigation/step-bar/components/StepBar";
|
||||
|
||||
export const MyComponent = () => {
|
||||
return (
|
||||
<StepBar activeStep={2}>
|
||||
<StepBar.Step>Step 1</StepBar.Step>
|
||||
<StepBar.Step>Step 2</StepBar.Step>
|
||||
<StepBar.Step>Step 3</StepBar.Step>
|
||||
</StepBar>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
</Tab>
|
||||
|
||||
<Tab title="Props">
|
||||
|
||||
| Propriedades | Tipo | Descrição |
|
||||
| ------------ | ------ | ------------------------------------------------------------------------------------------------------------ |
|
||||
| passoAtivo | número | O índice do passo atualmente ativo. Isso determina qual passo deve ser visualmente destacado |
|
||||
|
||||
</Tab>
|
||||
</Tabs>
|
||||
@@ -0,0 +1,8 @@
|
||||
---
|
||||
title: Intrare
|
||||
image: /images/user-guide/tips/light-bulb.png
|
||||
---
|
||||
|
||||
<Frame>
|
||||
<img src="/images/user-guide/tips/light-bulb.png" alt="Header" />
|
||||
</Frame>
|
||||
@@ -0,0 +1,34 @@
|
||||
---
|
||||
title: Editor de Blocuri
|
||||
image: /images/user-guide/api/api.png
|
||||
---
|
||||
|
||||
<Frame>
|
||||
<img src="/images/user-guide/api/api.png" alt="Header" />
|
||||
</Frame>
|
||||
|
||||
Folosește un editor de texte îmbogățit, bazat pe blocuri, de la [BlockNote](https://www.blocknotejs.org/) pentru a permite utilizatorilor să editeze și să vizualizeze blocuri de conținut.
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Usage">
|
||||
|
||||
```jsx
|
||||
import { useBlockNote } from "@blocknote/react";
|
||||
import { BlockEditor } from "@/ui/input/editor/components/BlockEditor";
|
||||
|
||||
export const MyComponent = () => {
|
||||
const BlockNoteEditor = useBlockNote();
|
||||
|
||||
return <BlockEditor editor={BlockNoteEditor} />;
|
||||
};
|
||||
```
|
||||
|
||||
</Tab>
|
||||
<Tab title="Props">
|
||||
|
||||
| Proprietăți | Tip | Descriere |
|
||||
| ----------- | ----------------- | ----------------------------------------------- |
|
||||
| editor | `BlockNoteEditor` | Instanța sau configurarea editorului de blocuri |
|
||||
|
||||
</Tab>
|
||||
</Tabs>
|
||||
@@ -0,0 +1,47 @@
|
||||
---
|
||||
title: Bifă
|
||||
image: /images/user-guide/tasks/tasks_header.png
|
||||
---
|
||||
|
||||
<Frame>
|
||||
<img src="/images/user-guide/tasks/tasks_header.png" alt="Header" />
|
||||
</Frame>
|
||||
|
||||
Utilizat atunci când un utilizator trebuie să selecteze mai multe valori din mai multe opțiuni.
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Usage">
|
||||
|
||||
```jsx
|
||||
import { Checkbox } from "twenty-ui/display";
|
||||
|
||||
export const MyComponent = () => {
|
||||
return (
|
||||
<Checkbox
|
||||
checked={true}
|
||||
indeterminate={false}
|
||||
onChange={() => console.log("onChange function fired")}
|
||||
onCheckedChange={() => console.log("onCheckedChange function fired")}
|
||||
variant="primary"
|
||||
size="small"
|
||||
shape="squared"
|
||||
/>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
</Tab>
|
||||
<Tab title="Props">
|
||||
|
||||
| Proprietăți | Tip | Descriere |
|
||||
| ----------------- | ------- | --------------------------------------------------------------------------------------------------------------------------- |
|
||||
| bifat | boolean | Indică dacă bifa este selectată |
|
||||
| indeterminat | boolean | Indică dacă bifa este într-o stare indeterminată (nici bifată, nici nebifată) |
|
||||
| onChange | funcție | Funcția de callback pe care doriți să o declanșați când starea bifei se schimbă |
|
||||
| laSchimbareBifată | funcție | Funcția de callback pe care doriți să o declanșați când starea `bifat` se schimbă |
|
||||
| variantă | șir | Variantele vizuale ale stilului cutiei. Opțiunile includ: `primar`, `secundar` și `terțiar` |
|
||||
| dimensiune | șir | Dimensiunea bifei. Are două opțiuni: `mic` și `mare` |
|
||||
| formă | șir | Forma bifei. Are două opțiuni: `pătrată` și `rotunjită` |
|
||||
|
||||
</Tab>
|
||||
</Tabs>
|
||||
@@ -0,0 +1,56 @@
|
||||
---
|
||||
title: Selector de iconițe
|
||||
image: /images/user-guide/github/github-header.png
|
||||
---
|
||||
|
||||
<Frame>
|
||||
<img src="/images/user-guide/github/github-header.png" alt="Header" />
|
||||
</Frame>
|
||||
|
||||
Un selector de iconițe bazat pe listă derulantă care permite utilizatorilor să selecteze o iconiță dintr-o listă.
|
||||
|
||||
<Tabs>
|
||||
|
||||
<Tab title="Usage">
|
||||
|
||||
```jsx
|
||||
import { RecoilRoot } from "recoil";
|
||||
import React, { useState } from "react";
|
||||
import { IconPicker } from "@/ui/input/components/IconPicker";
|
||||
|
||||
export const MyComponent = () => {
|
||||
|
||||
const [selectedIcon, setSelectedIcon] = useState("");
|
||||
const handleIconChange = ({ iconKey, Icon }) => {
|
||||
console.log("Selected Icon:", iconKey);
|
||||
setSelectedIcon(iconKey);
|
||||
};
|
||||
|
||||
return (
|
||||
<RecoilRoot>
|
||||
<IconPicker
|
||||
disabled={false}
|
||||
onChange={handleIconChange}
|
||||
selectedIconKey={selectedIcon}
|
||||
variant="primary"
|
||||
/>
|
||||
</RecoilRoot>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
</Tab>
|
||||
<Tab title="Props">
|
||||
|
||||
| Proprietăți | Tip | Descriere |
|
||||
| --------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| dezactivat | boolean | Dezactivează selectorul de iconițe dacă este setat pe `true` |
|
||||
| onChange | funcție | Funcția callback declanșată când utilizatorul selectează o iconiță. Primește un obiect cu proprietățile `iconKey` și `Icon` |
|
||||
| cheieIconițăSelectată | șir | Cheia iconiței selectate inițial |
|
||||
| laClickExterior | funcție | Funcția callback declanșată când utilizatorul face clic în afara listei derulante |
|
||||
| laÎnchidere | funcție | Funcția callback declanșată când lista derulantă este închisă |
|
||||
| laDeschidere | funcție | Funcția callback declanșată când lista derulantă este deschisă |
|
||||
| variantă | șir | Varianta stilului vizual al iconiței clicabile. Opțiunile includ: `primar`, `secundar` și `terțiar` |
|
||||
|
||||
</Tab>
|
||||
</Tabs>
|
||||
@@ -0,0 +1,8 @@
|
||||
---
|
||||
title: Navigare
|
||||
image: /images/user-guide/tasks/tasks_header.png
|
||||
---
|
||||
|
||||
<Frame>
|
||||
<img src="/images/user-guide/tasks/tasks_header.png" alt="Header" />
|
||||
</Frame>
|
||||
@@ -0,0 +1,168 @@
|
||||
---
|
||||
title: Linkuri
|
||||
image: /images/user-guide/what-is-twenty/20.png
|
||||
---
|
||||
|
||||
<Frame>
|
||||
<img src="/images/user-guide/what-is-twenty/20.png" alt="Header" />
|
||||
</Frame>
|
||||
|
||||
## Link de Contact
|
||||
|
||||
Un component de link stilizat pentru afișarea informațiilor de contact.
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Usage">
|
||||
|
||||
```jsx
|
||||
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>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
</Tab>
|
||||
<Tab title="Props">
|
||||
|
||||
| Proprietăți | Tip | Descriere |
|
||||
| ----------- | ----------------- | ------------------------------------------------------- |
|
||||
| numeClasa | șir | Nume opțional pentru stilizare suplimentară |
|
||||
| href | șir | URL-ul sau calea țintă pentru link |
|
||||
| laClick | funcție | Funcția de callback care se declanșează la clic pe link |
|
||||
| copii | `React.ReactNode` | Conținutul de afișat în interiorul linkului |
|
||||
|
||||
</Tab>
|
||||
|
||||
</Tabs>
|
||||
|
||||
## Link Brut
|
||||
|
||||
Un component de link stilizat pentru afișarea linkurilor.
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Usage">
|
||||
|
||||
```jsx
|
||||
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>
|
||||
);
|
||||
};
|
||||
|
||||
```
|
||||
|
||||
</Tab>
|
||||
<Tab title="Props">
|
||||
|
||||
| Proprietăți | Tip | Descriere |
|
||||
| ----------- | ----------------- | ------------------------------------------------------- |
|
||||
| numeClasa | șir | Nume opțional pentru stilizare suplimentară |
|
||||
| href | șir | URL-ul sau calea țintă pentru link |
|
||||
| laClick | funcție | Funcția de callback care se declanșează la clic pe link |
|
||||
| copii | `React.ReactNode` | Conținutul de afișat în interiorul linkului |
|
||||
|
||||
</Tab>
|
||||
</Tabs>
|
||||
|
||||
## Link Rotunjit
|
||||
|
||||
Un link stilizat cu margini rotunjite cu un component Chip pentru linkuri.
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Usage">
|
||||
|
||||
```jsx
|
||||
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>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
</Tab>
|
||||
|
||||
<Tab title="Props">
|
||||
|
||||
| Proprietăți | Tip | Descriere |
|
||||
| ----------- | ----------------- | ------------------------------------------------------- |
|
||||
| href | șir | URL-ul sau calea țintă pentru link |
|
||||
| copii | `React.ReactNode` | Conținutul de afișat în interiorul linkului |
|
||||
| laClick | funcție | Funcția de callback care se declanșează la clic pe link |
|
||||
|
||||
</Tab>
|
||||
</Tabs>
|
||||
|
||||
## Link Social
|
||||
|
||||
Linkuri sociale stilizate, cu suport pentru diverse tipuri de linkuri sociale, cum ar fi URL-uri, LinkedIn și X (sau Twitter).
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Usage">
|
||||
|
||||
```jsx
|
||||
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>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
</Tab>
|
||||
<Tab title="Props">
|
||||
|
||||
| Proprietăți | Tip | Descriere |
|
||||
| ----------- | ----------------- | ---------------------------------------------------------------------------------------------------------- |
|
||||
| href | șir | URL-ul sau calea țintă pentru link |
|
||||
| copii | `React.ReactNode` | Conținutul de afișat în interiorul linkului |
|
||||
| tip | șir | Tipul linkurilor sociale. Opțiunile includ: `url`, `LinkedIn` și `Twitter` |
|
||||
| laClick | funcție | Funcția de callback care se declanșează la clic pe link |
|
||||
|
||||
</Tab>
|
||||
</Tabs>
|
||||
@@ -0,0 +1,52 @@
|
||||
---
|
||||
title: Bară de navigare
|
||||
image: /images/user-guide/table-views/table.png
|
||||
---
|
||||
|
||||
<Frame>
|
||||
<img src="/images/user-guide/table-views/table.png" alt="Header" />
|
||||
</Frame>
|
||||
|
||||
Redă o bară de navigare care conține mai multe componente `NavigationBarItem`.
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Usage">
|
||||
|
||||
```jsx
|
||||
import { IconHome, IconUser, IconSettings } from '@tabler/icons-react';
|
||||
import { NavigationBar } from "@/ui/navigation/navigation-bar/components/NavigationBar";
|
||||
|
||||
export const MyComponent = () => {
|
||||
|
||||
const navigationItems = [
|
||||
{
|
||||
name: "Home",
|
||||
Icon: IconHome,
|
||||
onClick: () => console.log("Home clicked"),
|
||||
},
|
||||
{
|
||||
name: "Profile",
|
||||
Icon: IconUser,
|
||||
onClick: () => console.log("Profile clicked"),
|
||||
},
|
||||
{
|
||||
name: "Settings",
|
||||
Icon: IconSettings,
|
||||
onClick: () => console.log("Settings clicked"),
|
||||
},
|
||||
];
|
||||
|
||||
return <NavigationBar activeItemName="Home" items={navigationItems}/>;
|
||||
};
|
||||
```
|
||||
|
||||
</Tab>
|
||||
<Tab title="Props">
|
||||
|
||||
| Proprietăți | Tip | Descriere |
|
||||
| -------------- | ----- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| activeItemName | șir | Numele elementului de navigare care este activ în prezent |
|
||||
| elemente | array | O matrice de obiecte care reprezintă fiecare element de navigare. Fiecare obiect conține `numele` elementului, componenta `Icon` pentru afișare și o funcție `onClick` care să fie invocată atunci când elementul este apăsat |
|
||||
|
||||
</Tab>
|
||||
</Tabs>
|
||||
@@ -0,0 +1,38 @@
|
||||
---
|
||||
title: Bară de pași
|
||||
image: /images/user-guide/api/api.png
|
||||
---
|
||||
|
||||
<Frame>
|
||||
<img src="/images/user-guide/api/api.png" alt="Header" />
|
||||
</Frame>
|
||||
|
||||
Afișează progresul printr-o secvență de pași numerotați prin evidențierea pasului activ. Redă un container cu pași, fiecare fiind reprezentat de componenta `Pas`.
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Usage">
|
||||
|
||||
```jsx
|
||||
import { StepBar } from "@/ui/navigation/step-bar/components/StepBar";
|
||||
|
||||
export const MyComponent = () => {
|
||||
return (
|
||||
<StepBar activeStep={2}>
|
||||
<StepBar.Step>Step 1</StepBar.Step>
|
||||
<StepBar.Step>Step 2</StepBar.Step>
|
||||
<StepBar.Step>Step 3</StepBar.Step>
|
||||
</StepBar>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
</Tab>
|
||||
|
||||
<Tab title="Props">
|
||||
|
||||
| Proprietăți | Tip | Descriere |
|
||||
| ----------- | ----- | ------------------------------------------------------------------------------------------------------------- |
|
||||
| pasactiv | număr | Indexul pasului activ în prezent. Aceasta determină ce pas ar trebui să fie evidențiat vizual |
|
||||
|
||||
</Tab>
|
||||
</Tabs>
|
||||
@@ -0,0 +1,77 @@
|
||||
---
|
||||
title: Feedback
|
||||
image: /images/user-guide/emails/emails_header.png
|
||||
---
|
||||
|
||||
<Frame>
|
||||
<img src="/images/user-guide/emails/emails_header.png" alt="Header" />
|
||||
</Frame>
|
||||
|
||||
Indică progresul sau numărătoarea inversă și se mișcă de la dreapta la stânga.
|
||||
|
||||
<Tabs>
|
||||
|
||||
<Tab title="Usage">
|
||||
|
||||
```jsx
|
||||
import { ProgressBar } from "twenty-ui/feedback";
|
||||
|
||||
export const MyComponent = () => {
|
||||
return (
|
||||
<ProgressBar
|
||||
duration={6000}
|
||||
delay={0}
|
||||
easing="easeInOut"
|
||||
barHeight={10}
|
||||
barColor="#4bb543"
|
||||
autoStart={true}
|
||||
/>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
</Tab>
|
||||
|
||||
<Tab title="Props">
|
||||
|
||||
| Proprietăți | Tip | Descriere | Implicit |
|
||||
| --------------- | ------- | ----------------------------------------------------------------------------------- | ---------- |
|
||||
| durată | număr | Durata totală a animației barei de progres în milisecunde | 3 |
|
||||
| întârziere | număr | Întârzierea în pornirea animației barei de progres în milisecunde | 0 |
|
||||
| easing | șir | Funcția de accelerare (easing) pentru animația barei de progres | easeInOut |
|
||||
| înălțimeBară | număr | Înălțimea barei în pixeli | 24 |
|
||||
| culoareBară | șir | Culoarea barei | gray80 |
|
||||
| pornireAutomată | boolean | Dacă `true`, animația barei de progres pornește automat când componenta se montează | `adevărat` |
|
||||
|
||||
</Tab>
|
||||
</Tabs>
|
||||
|
||||
## Bara de Progres Circulară
|
||||
|
||||
Indică progresul unei sarcini, utilizată adesea pe ecranele de încărcare sau în zonele unde doriți să comunicați procesele continue utilizatorului.
|
||||
|
||||
<Tabs>
|
||||
|
||||
<Tab title="Usage">
|
||||
|
||||
```jsx
|
||||
import { CircularProgressBar } from "@/ui/feedback/progress-bar/components/CircularProgressBar";
|
||||
|
||||
export const MyComponent = () => {
|
||||
return <CircularProgressBar size={80} barWidth={6} barColor="green" />;
|
||||
};
|
||||
```
|
||||
|
||||
</Tab>
|
||||
|
||||
<Tab title="Props">
|
||||
|
||||
| Proprietăți | Tip | Descriere | Implicit |
|
||||
| ----------- | ----- | -------------------------------------- | ------------ |
|
||||
| dimensiune | număr | Dimensiunea barei de progres circulare | 50 |
|
||||
| lățimeBară | număr | Lățimea liniei barei de progres | 5 |
|
||||
| culoareBară | șir | Culoarea barei de progres | currentColor |
|
||||
|
||||
</Tab>
|
||||
|
||||
</Tabs>
|
||||
@@ -0,0 +1,43 @@
|
||||
---
|
||||
title: Setări profil
|
||||
description: Gestionează setările personale ale profilului și setările de securitate.
|
||||
---
|
||||
|
||||
## Informații personale
|
||||
|
||||
### Nume și adresă de email
|
||||
|
||||
* **Nume afișat**: Actualizează modul în care numele tău apare celorlalți membri ai spațiului de lucru
|
||||
* **Adresa de email**: Schimbă adresa de email de conectare (necesită verificare)
|
||||
* **Poză de profil**: Încarcă un avatar personalizat sau folosește inițialele tale
|
||||
|
||||
## Setări de securitate
|
||||
|
||||
### Autentificare cu doi factori (2FA)
|
||||
|
||||
Activează 2FA pentru a adăuga un strat suplimentar de securitate contului tău:
|
||||
|
||||
1. Mergi la **Setări → Setări profil**
|
||||
2. Apasă pe **Activează 2FA**
|
||||
3. Scanează codul QR cu aplicația ta de autentificare
|
||||
4. Introdu codul de verificare pentru a confirma
|
||||
|
||||
### Gestionarea parolelor
|
||||
|
||||
* **Schimbă parola**: Actualizează parola curentă
|
||||
* **Cerințe pentru parolă**: Trebuie să aibă cel puțin 8 caractere
|
||||
|
||||
## Gestionarea profilului
|
||||
|
||||
### Șterge contul
|
||||
|
||||
<Warning>
|
||||
Ștergerea contului va îndepărta permanent accesul la toate spațiile de lucru. Această acțiune nu poate fi anulată, vei pierde accesul la toate spațiile de lucru unde ești membru și ar trebui să iei în considerare părăsirea spațiilor individuale dacă dorești doar să ieși din echipe specifice.
|
||||
</Warning>
|
||||
|
||||
Pentru a șterge contul tău:
|
||||
|
||||
1. Mergi la **Setări → Setări profil**
|
||||
2. Derulează până la **Zona de pericol**
|
||||
3. Apasă pe **Șterge contul**
|
||||
4. Confirmă introducând adresa ta de email
|
||||
@@ -0,0 +1,88 @@
|
||||
---
|
||||
title: Подсказка приложения
|
||||
image: /images/user-guide/tips/light-bulb.png
|
||||
---
|
||||
|
||||
<Frame>
|
||||
<img src="/images/user-guide/tips/light-bulb.png" alt="Header" />
|
||||
</Frame>
|
||||
|
||||
Краткое сообщение, которое отображает дополнительную информацию, когда пользователь взаимодействует с элементом.
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Usage">
|
||||
|
||||
```jsx
|
||||
import { AppTooltip } from "@/ui/display/tooltip/AppTooltip";
|
||||
|
||||
export const MyComponent = () => {
|
||||
return (
|
||||
<>
|
||||
<p id="hoverText" style={{ display: "inline-block" }}>
|
||||
Customer Insights
|
||||
</p>
|
||||
<AppTooltip
|
||||
className
|
||||
anchorSelect="#hoverText"
|
||||
content="Explore customer behavior and preferences"
|
||||
delayHide={0}
|
||||
offset={6}
|
||||
noArrow={false}
|
||||
isOpen={true}
|
||||
place="bottom"
|
||||
positionStrategy="absolute"
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
</Tab>
|
||||
|
||||
<Tab title="Props">
|
||||
|
||||
| Свойства | Тип | Описание |
|
||||
| ---------------- | -------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| className | строка | Необязательный CSS-класс для дополнительного стилирования |
|
||||
| anchorSelect | CSS-селектор | Селектор для анкера подсказки (элемент, который активирует подсказку) |
|
||||
| content | строка | Содержимое, которое вы хотите отобразить в подсказке |
|
||||
| delayHide | число | Задержка в секундах перед скрытием подсказки после того, как курсор покинет анкер |
|
||||
| offset | число | Смещение в пикселях для позиционирования подсказки |
|
||||
| noArrow | boolean | Если `true`, стрелка на подсказке скрыта |
|
||||
| isOpen | boolean | Если `true`, подсказка открыта по умолчанию |
|
||||
| place | Строка `PlacesType` из `react-tooltip` | Определяет расположение подсказки. Значения включают: `bottom`, `left`, `right`, `top`, `top-start`, `top-end`, `right-start`, `right-end`, `bottom-start`, `bottom-end`, `left-start`, `left-end` |
|
||||
| positionStrategy | Строка `PositionStrategy` из `react-tooltip` | Стратегия позиционирования для подсказки. Имеет два значения: `absolute` и `fixed` |
|
||||
|
||||
</Tab>
|
||||
|
||||
</Tabs>
|
||||
|
||||
## Переполненный текст с подсказкой
|
||||
|
||||
Обрабатывает переполненный текст и отображает подсказку, когда текст переполняется.
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Usage">
|
||||
|
||||
```jsx
|
||||
import { OverflowingTextWithTooltip } from 'twenty-ui/display';
|
||||
|
||||
export const MyComponent = () => {
|
||||
const crmTaskDescription =
|
||||
'Follow up with client regarding their recent product inquiry. Discuss pricing options, address any concerns, and provide additional product information. Record the details of the conversation in the CRM for future reference.';
|
||||
|
||||
return <OverflowingTextWithTooltip text={crmTaskDescription} />;
|
||||
};
|
||||
```
|
||||
|
||||
</Tab>
|
||||
|
||||
<Tab title="Props">
|
||||
|
||||
| Свойства | Тип | Описание |
|
||||
| -------- | ------ | ------------------------------------------------------------------------ |
|
||||
| текст | строка | Содержимое, которое вы хотите отобразить в области переполненного текста |
|
||||
|
||||
</Tab>
|
||||
|
||||
</Tabs>
|
||||
@@ -0,0 +1,8 @@
|
||||
---
|
||||
title: Ввод
|
||||
image: /images/user-guide/tips/light-bulb.png
|
||||
---
|
||||
|
||||
<Frame>
|
||||
<img src="/images/user-guide/tips/light-bulb.png" alt="Header" />
|
||||
</Frame>
|
||||
@@ -0,0 +1,34 @@
|
||||
---
|
||||
title: Блочный редактор
|
||||
image: /images/user-guide/api/api.png
|
||||
---
|
||||
|
||||
<Frame>
|
||||
<img src="/images/user-guide/api/api.png" alt="Header" />
|
||||
</Frame>
|
||||
|
||||
Использует блочный текстовый редактор от [BlockNote](https://www.blocknotejs.org/), чтобы пользователи могли редактировать и просматривать блоки контента.
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Usage">
|
||||
|
||||
```jsx
|
||||
import { useBlockNote } from "@blocknote/react";
|
||||
import { BlockEditor } from "@/ui/input/editor/components/BlockEditor";
|
||||
|
||||
export const MyComponent = () => {
|
||||
const BlockNoteEditor = useBlockNote();
|
||||
|
||||
return <BlockEditor editor={BlockNoteEditor} />;
|
||||
};
|
||||
```
|
||||
|
||||
</Tab>
|
||||
<Tab title="Props">
|
||||
|
||||
| Свойства | Тип | Описание |
|
||||
| -------- | ----------------- | --------------------------------------------- |
|
||||
| редактор | `BlockNoteEditor` | Экземпляр или конфигурация блочного редактора |
|
||||
|
||||
</Tab>
|
||||
</Tabs>
|
||||
@@ -0,0 +1,73 @@
|
||||
---
|
||||
title: Цветовая Схема
|
||||
image: /images/user-guide/fields/field.png
|
||||
---
|
||||
|
||||
<Frame>
|
||||
<img src="/images/user-guide/fields/field.png" alt="Header" />
|
||||
</Frame>
|
||||
|
||||
## Карточка цветовой схемы
|
||||
|
||||
Представляет различные цветовые схемы и специально подходит для светлых и темных тем.
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Usage">
|
||||
|
||||
```jsx
|
||||
import { ColorSchemeCard } from "twenty-ui/display";
|
||||
|
||||
export const MyComponent = () => {
|
||||
return (
|
||||
<ColorSchemeCard
|
||||
variant="Dark"
|
||||
selected={true}
|
||||
/>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
</Tab>
|
||||
|
||||
<Tab title="Props">
|
||||
|
||||
| Свойства | Тип | Описание | По умолчанию |
|
||||
| ----------------------- | --------------------------------------- | -------------------------------------------------------------------------------------------- | ------------ |
|
||||
| вариант | строка | Вариант цветовой схемы. Варианты включают `Тёмный`, `Светлый`, и `Системный` | светлый |
|
||||
| выбран | boolean | Если `true`, отображает галочку, чтобы указать выбранную цветовую схему | |
|
||||
| дополнительные свойства | `React.ComponentPropsWithoutRef<'div'>` | Стандартные свойства HTML-элемента `div` | |
|
||||
|
||||
</Tab>
|
||||
|
||||
</Tabs>
|
||||
|
||||
## Выбор цветовой схемы
|
||||
|
||||
Позволяет пользователям выбирать между различными цветовыми схемами.
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Usage">
|
||||
|
||||
```jsx
|
||||
import { ColorSchemePicker } from "twenty-ui/display";
|
||||
|
||||
export const MyComponent = () => {
|
||||
return <ColorSchemePicker
|
||||
value="Dark"
|
||||
onChange
|
||||
/>;
|
||||
};
|
||||
```
|
||||
|
||||
</Tab>
|
||||
|
||||
<Tab title="Props">
|
||||
|
||||
| Свойства | Тип | Описание |
|
||||
| -------- | ---------------- | ----------------------------------------------------------------------------------------------- |
|
||||
| значение | `Цветовая Схема` | Текущая выбранная цветовая схема |
|
||||
| onChange | функция | Функция обратного вызова, которую вы хотите вызвать, когда пользователь выбирает цветовую схему |
|
||||
|
||||
</Tab>
|
||||
|
||||
</Tabs>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user