github-actions[bot]
8cadd00d34
Created by Github action --------- Co-authored-by: Crowdin Bot <support+bot@crowdin.com> Co-authored-by: github-actions <github-actions@twenty.com>
89 lines
5.1 KiB
Plaintext
89 lines
5.1 KiB
Plaintext
---
|
|
title: Podpowiedź aplikacji
|
|
image: /images/user-guide/tips/light-bulb.png
|
|
---
|
|
|
|
<Frame>
|
|
<img src="/images/user-guide/tips/light-bulb.png" alt="Header" />
|
|
</Frame>
|
|
|
|
Krótka wiadomość, która wyświetla dodatkowe informacje, gdy użytkownik wchodzi w interakcję z elementem.
|
|
|
|
<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">
|
|
|
|
| Właściwości (Props) | Typ | Opis |
|
|
| -------------------------------------- | ------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
| nazwaKlasy | ciąg znaków | Opcjonalna klasa CSS do dodatkowego stylowania |
|
|
| selektorKotwicy | selektor CSS | Selektor kotwicy podpowiedzi (element, który uruchamia podpowiedź) |
|
|
| zawartość | ciąg znaków | Zawartość, którą chcesz wyświetlić w podpowiedzi |
|
|
| opóźnienieUkrycia | numer | Opóźnienie w sekundach przed ukryciem podpowiedzi po opuszczeniu kotwicy przez kursor |
|
|
| przesunięcie | numer | Przesunięcie w pikselach do pozycjonowania podpowiedzi |
|
|
| bezStrzałki | boolean | Jeśli „true”, ukrywa strzałkę na podpowiedzi |
|
|
| jestOtwarty | boolean | Jeśli „true”, podpowiedź jest domyślnie otwarta |
|
|
| miejsce | `PlacesType` string z `react-tooltip` | Określa umiejscowienie podpowiedzi. Wartości obejmują `bottom`, `left`, `right`, `top`, `top-start`, `top-end`, `right-start`, `right-end`, `bottom-start`, `bottom-end`, `left-start`, i `left-end` |
|
|
| strategiaPozycjonowania | `PositionStrategy` string z `react-tooltip` | Strategia pozycjonowania dla podpowiedzi. Ma dwie wartości: `absolute` i `fixed` |
|
|
|
|
</Tab>
|
|
|
|
</Tabs>
|
|
|
|
## Przepełnienie tekstu z podpowiedzią
|
|
|
|
Obsługuje przepełnienie tekstu i wyświetla podpowiedź, gdy tekst jest przepełniony.
|
|
|
|
<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">
|
|
|
|
| Właściwości (Props) | Typ | Opis |
|
|
| -------------------------------------- | ----------- | ------------------------------------------------------------------- |
|
|
| tekst | ciąg znaków | Zawartość, którą chcesz wyświetlić w obszarze przepełnionego tekstu |
|
|
|
|
</Tab>
|
|
|
|
</Tabs>
|