i18n - docs translations (#15721)
Created by Github action Co-authored-by: github-actions <github-actions@twenty.com>
This commit is contained in:
github-actions[bot]
committed by
GitHub
GitHub
parent
f740bac988
commit
4c4eeef5ae
@@ -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>
|
||||
Reference in New Issue
Block a user