docs: fix inaccuracies found auditing the docs against v2.27.0 (#23616)
Prompted by user feedback: *"The documentation doesn't always reflect
the latest release. Some articles are outdated or incomplete."*
I audited every English page under `packages/twenty-docs` against the
code at v2.27.0, verifying each checkable claim (commands, env vars,
enum members, payload shapes, prop tables, API routes) against source in
`packages/`. Anything without a `file:line` citation proving the docs
wrong was dropped.
**Result: 414 findings across 226 pages — 75 critical, 169 major, 170
minor.** The feedback is accurate, and understates it in the
developer-facing sections.
This PR fixes a first slice. The full findings list is below so the rest
can be picked up.
---
## What this PR changes
**Removes the `twenty-ui` component reference** (25 English pages + 325
translations). The section predated the extraction of the design system
into the `twenty-ui` package:
- Not one import path resolved. `twenty-ui/display` and
`twenty-ui/components` are not export subpaths (real ones:
`data-display`, `feedback`, `icon`, `input`, `navigation`, `surfaces`,
`layout`, …), and ~20 more examples imported `@/ui/...` paths no longer
in twenty-front.
- Three documented components no longer exist: `SoonPill`,
`AutosizeTextInput`, `MenuItemCommand`.
- `Chip`'s props table documented the deleted `EntityChip`.
`ProgressBar`'s entire API was replaced
(`duration`/`delay`/`easing`/`barHeight`/`autoStart` →
`value`/`barColor`/`countdownDurationInMs`/…).
It was also unreachable from the navigation, so the pages were indexed
and searchable but maintained by nobody. Storybook is the live source of
truth here, which is why this is a deletion rather than a repair.
**Legal FAQ.** Corrects the workspace deletion timeline to match clause
4.9 of the DPA the product itself generates (~90 days from live systems,
a further ~90 for backups, isolated throughout) instead of the previous
claim of immediate removal with 7-day backup retention. Rephrases the
support-access answer to describe what the product actually does: access
is on by default and can be disabled in Settings → General → Security,
rather than the previous claim that it requires the customer to report
an issue and grant access.
**Self-hosting setup page.** The SMTP configuration block used
`<ArticleTabs>/<ArticleTab>`, leftovers from the pre-Mintlify site.
Those components are undefined here, so the Gmail/Office365/smtp4dev
instructions were not rendering at all. Converted to `<Tabs>/<Tab>`.
**Removes a fabricated Enterprise gate.** A Warning on the app
publishing page claimed cross-workspace sharing of tarball apps requires
an Enterprise key and that the Distribution tab shows an upgrade prompt.
No such gate exists in code, and its link target didn't exist either.
**Link and asset fixes.** Retargeted the two `docs.json` redirects whose
destinations 404'd; fixed the Code of Conduct link (file lives under
`.github/`); fixed the app-roles example link to
`examples/hello-world/src/roles/default-role.ts`; pointed the Contribute
frontend card, four `/developers/extend/apps/getting-started` links and
one `/twenty-ui/display` link at real pages; dropped two `<img>` tags
whose files are absent from the repo.
After this PR: every internal link and image reference resolves, all 171
navigation entries resolve to a file, and no redirect destination is
dead.
---
## Audit: what else is wrong
### Root causes
The failures aren't random rot. Four mechanisms produce nearly all of
them:
1. **Nothing links renaming a symbol to updating the page that documents
it.** Whole pages describe APIs returning zero grep hits:
`MessageQueueServiceBase`, `useScopedHotkeys`/`PageHotkeyScope`,
`@Gate`, `SoonPill`.
2. **"Coming soon" is written once and never revisited.** Nine features
are documented as unavailable that have shipped.
3. **Pages are dropped from navigation but left on disk.** 55 were
unreachable yet still indexed and searchable.
4. **Docs written from intent rather than from code.** One case is
provably born-stale: the `front-components` limitations table was
written in a commit that landed *after* the commit which polyfilled the
APIs it lists as unsupported.
### Priority 1: pages that actively break the reader
**Workflow template variables are wrong across 12 pages.** The largest
cluster — 16 critical findings, one root cause. Record-event triggers
expose the record under `properties.after`/`properties.before`; manual
triggers under `payload`; webhook triggers store the posted body flat
with no wrapper. Docs use `{{trigger.object.*}}`, `{{trigger.body.*}}`,
`{{trigger.subject}}` throughout. Search Records returns `{ first, all,
totalCount }`, not an array, and the resolver is Handlebars, which
doesn't accept `[0]` indexing at all — so `{{searchRecords[0].name}}`
and `{{searchRecords.length}}` cannot work. Iterator exposes
`currentItem`, not `item`/`index`. Evidence:
`generate-fake-object-record-event.ts:44-60`,
`workflow-schema.workspace-service.ts:501-517`,
`find-records.workflow-action.ts:111-117`,
`workflow-iterator-result.type.ts:2-3`,
`twenty-shared/src/utils/evalFromContext.ts`. Every workflow tutorial on
the site is copy-paste-broken. Highest-value fix in the audit, and
mostly mechanical.
**Self-hosting runbook commands don't work.** Backup names a container
and database that don't exist (service is `db` → `twenty-db-1`; database
is `default`, not `twenty`). Restore runs `docker compose stop
twenty-server twenty-front`, neither of which is a service — the compose
file defines `server`, `worker`, `db`, `redis`, and there's no separate
frontend service. The "unable to log in" fix runs `yarn` and `npx nx
database:reset` inside the production container, whose Dockerfile
deletes `npm`/`npx` and ships only `dist/`. Someone following the backup
page ends up with no backup.
**API, webhook and OAuth contracts are wrong.** The documented webhook
payload (`event`, `data`, `timestamp`) is not what the server sends —
the real body is `targetUrl`, `eventName`, `objectMetadata`,
`workspaceId`, `webhookId`, `eventDate`, `userId`, `workspaceMemberId`,
`record`, optional `updatedFields`
(`transform-event-batch-to-webhook-events.ts:34-46`). Any integration
written from that page fails to parse. `GET /oauth/authorize` doesn't
exist (server serves `/oauth/register`, `/token`, `/revoke`,
`/introspect`; authorization is served by the frontend at `/authorize`).
`/oauth/register` never returns a `client_secret` —
`token_endpoint_auth_method` is hard-coded `'none'` — so the documented
response and the "store it securely" warning are fiction, and the Client
Credentials section is unusable with a DCR client. PKCE is mandatory,
not "recommended". Batch limit is 200, not 60 (`QUERY_MAX_RECORDS =
200`), making the derived throughput estimates ~3.3x off.
**Contributor onboarding teaches removed APIs.** `queue.mdx`,
`hotkeys.mdx` and `feature-flags.mdx` are wrong at essentially every
step. Documented nx targets `twenty-server:database:migrate:prod`,
`twenty-server:test:unit` and `npx nx start` aren't real targets and
fail outright. `local-setup.mdx` never mentions
`packages/twenty-utils/setup-dev-env.sh`, the supported entry point.
Both style guides teach the `${({ theme }) => ...}` pattern, which now
returns **zero** hits in twenty-front against 929 files using
`themeCssVariables`. `frontend-commands.mdx` still lists Craco; the
frontend is Vite.
**SSO configuration is substantially fiction.** Twenty supports exactly
two protocols, OIDC and SAML. The docs omit OIDC entirely, present
Google Workspace and Microsoft Entra ID (separate social-login toggles)
as SSO providers, list configuration fields matching neither form, and
instruct the reader to click a **Test Configuration** button that exists
nowhere in the codebase.
**Data model.** The field-type table documents two types that don't
exist (`Domain`, `Long Text`) and omits three users can actually pick
(`Files`, `Full Name`, `Rich Text`). The filter-operator table is wrong
for every field type listed: Text has none of its four documented
operators, Date is missing six of nine.
**Import guidance that fails silently.** `DD/MM/YYYY` is documented as
supported; import uses plain `new Date(value)`, so `15/03/2024` is
always rejected and `03/15/2024` always read US-style — and the sibling
`fix-import-errors.mdx` says the opposite. The company sample CSV is
unusable as written (`Domain / Domain Label` headers don't exist; real
ones are `Domain Name / Link Label`).
### Priority 2: shipped features documented as unavailable
This is the specific complaint in the feedback. Each is a one-line fix.
| Documented as | Reality |
|---|---|
| AI Agent action "Coming soon" (2 pages) |
`WorkflowActionType.AI_AGENT` ships, in the picker, no feature flag |
| "There is no built-in if/else logic" (2 pages) |
`WorkflowActionType.IF_ELSE` ships |
| Webhook event filtering "may be added in future releases" (2 pages) |
per-webhook `operations` array with `*.created` / `person.*` / `*.*`
wildcards |
| Many-to-many "coming in H2 2026" | Junction Relations shipped as
public beta; Twenty's own how-to documents it |
| Email campaigns "available soon" (2 pages) | MessageCampaign object,
send/stats jobs, unsubscribe topics all ship |
| CC/BCC "not yet available" | exists on Send Email |
| Workflow retry "on our roadmap" | run-level retry command plus
per-step `retryOnFailure` |
| front-components limitations table | `getBoundingClientRect`,
`offset*`/`client*`/`scroll*`, `getComputedStyle`, `getElementById` all
polyfilled |
| Node SDK "does not exist" | `twenty-client-sdk@2.27.0` ships and is
documented elsewhere in these docs |
Four "coming soon" claims were checked and are **still accurate** —
webhook trigger authentication, dashboard-level filters, dashboard
timezone, background-job priority. Leave them.
One needs rewording rather than promotion: **gauge charts** are
described as on the roadmap, but the upgrade command
`2-3-workspace-command-...-delete-gauge-widgets` says support was
*removed*.
### Priority 3: structural
**30 orphaned pages remain** after the twenty-ui deletion: 15 of 18
`developers/contribute/*`, all 6 `user-guide/getting-started/*`, plus
`self-host.mdx`, `key-rotation.mdx`, `extend.mdx`,
`views-pipelines/overview.mdx`, `ai/capabilities/mcp.mdx`,
`data-migration/how-tos/export-faq.mdx`,
`extend/capabilities/{apis,webhooks}.mdx`. Each needs an explicit
decision: re-add, or delete plus redirect. Two look worth re-adding
rather than deleting — `user-guide/ai/capabilities/mcp.mdx` is accurate,
documents a shipped feature that's a plan line-item, and is reachable
only via a legacy redirect; `views-pipelines/overview.mdx` is linked
from three in-nav pages.
`user-guide/getting-started/capabilities/implementation-services.mdx`
must be merged rather than deleted, since three in-nav pages deep-link
it.
**Duplicate pages.** `getting-started/core-concepts/glossary.mdx` and
`user-guide/getting-started/capabilities/glossary.mdx` are 99%
identical. `developers/extend/webhooks.mdx` and
`developers/extend/capabilities/webhooks.mdx` are 88% identical and
carry the same wrong payload. `workflow-branches.mdx` and
`use-branches-in-workflows.mdx` are both in the sidebar and give
*contradictory* branch-creation instructions.
**Other.** 44 pages have no frontmatter `description`. The Russian
locale is 14 pages behind every other locale, including the entire
document-generator tutorial.
### Still needs a human owner
The legal FAQ promises breach notification "within 48 hours" while
clause 4.6 of the generated DPA (`dpa-template.constant.ts:178`) targets
72. Per direction, the docs keep 48h — a stricter public commitment than
the contract is a deliberate choice — but the DPA and the docs still
disagree, and someone owning the DPA should decide which moves.
Claims about SOC 2, GDPR attestation, backup cadence and AI-training use
could not be substantiated from the repository either way and need the
same treatment.
### Preventing recurrence
Three cheap guards would have caught most of the 75 criticals:
- **A CI check** that every navigation page resolves, every internal
link and image resolves, and no `.mdx` outside `l/` is orphaned. Catches
the entire structural third. This PR leaves the docs in a state where
such a check would pass.
- **Generate the volatile tables from their source enums** — field
types, workflow actions and triggers, filter operands, permission flags,
chart types, env vars — rather than hand-maintaining them. These
accounted for a large share of the major findings.
- **Treat "coming soon" as an expiring assertion**: tag each with the
symbol it depends on and fail the docs build when that symbol appears in
code.
## Suggested order for the rest
1. Workflow variable syntax across the 12 tutorial pages — largest
cluster, mechanical, most directly matches the feedback.
2. Self-host backup/restore/troubleshooting commands — highest blast
radius per reader.
3. Webhook payload and OAuth endpoints — blocks integrators.
4. The nine "coming soon" claims — one line each, and the most visible
form of "docs don't reflect the latest release".
5. Decide the 30 remaining orphans.
## Test plan
- [x] Every internal link and image reference in the docs resolves
- [x] All 171 navigation entries resolve to a file on disk
- [x] No `docs.json` redirect destination is dead
- [x] No inbound links to the deleted `twenty-ui` pages remain
- [x] `docs.json` structure intact after edit (138 redirects, 14
languages)
- [ ] Visual check of the self-hosting SMTP tabs once the docs preview
builds
---
_Generated by [Claude
Code](https://claude.ai/code/session_01AnUNYYdkN3PMTPb2m6CnqC)_
<!-- This is an auto-generated description by cubic. -->
<a
href="https://cubic.dev/pr/twentyhq/twenty/pull/23616?utm_source=github"
target="_blank" rel="noopener noreferrer"
data-no-image-dialog="true"><picture><source
media="(prefers-color-scheme: dark)"
srcset="https://www.cubic.dev/buttons/review-in-cubic-dark.svg"><source
media="(prefers-color-scheme: light)"
srcset="https://www.cubic.dev/buttons/review-in-cubic-light.svg"><img
alt="Review in cubic"
src="https://www.cubic.dev/buttons/review-in-cubic-dark.svg"></picture></a>
<!-- End of auto-generated description by cubic. -->
This commit is contained in:
Félix Malfait
@@ -1,94 +0,0 @@
|
||||
---
|
||||
title: Tooltip aplikace
|
||||
icon: message
|
||||
---
|
||||
|
||||
<Frame>
|
||||
<img src="/images/user-guide/tips/light-bulb.png" alt="Hlavička" />
|
||||
</Frame>
|
||||
|
||||
Krátká zpráva, která zobrazí další informace, když uživatel interaguje s prvkem.
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Použití">
|
||||
|
||||
```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="Vlastnosti">
|
||||
|
||||
|
||||
| Vlastnosti | Typ | Popis |
|
||||
| ---------------- | --------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
||||
| className | řetězec | Volitelná CSS třída pro dodatečné stylování. |
|
||||
| anchorSelect | CSS selektor | Selektor pro kotvu tooltipu (prvek, který spouští tooltip). |
|
||||
| obsah | textový řetězec | Obsah, který chcete zobrazit v rámci tooltipu. |
|
||||
| delayHide | číslo | Zpoždění v sekundách před skrytím tooltipu poté, co kurzor opustí kotvu. |
|
||||
| odsazení | číslo | Odsazení v pixelech pro umístění tooltipu. |
|
||||
| noArrow | booleovská hodnota | Pokud je `true`, skrývá šipku na tooltipu. |
|
||||
| isOpen | booleovská hodnota | Pokud je `true`, tooltip je výchozím způsobem otevřen. |
|
||||
| umístění | řetězec `PlacesType` z `react-tooltipu` | Určuje umístění tooltipu. Hodnoty zahrnují `bottom`, `left`, `right`, `top`, `top-start`, `top-end`, `right-start`, `right-end`, `bottom-start`, `bottom-end`, `left-start`, a `left-end`. |
|
||||
| positionStrategy | řetězec `PositionStrategy` z `react-tooltipu` | Strategie umístění pro tooltip. Má dvě hodnoty: `absolute` a `fixed`. |
|
||||
|
||||
|
||||
|
||||
</Tab>
|
||||
|
||||
</Tabs>
|
||||
|
||||
## Přetékající text s tooltipem
|
||||
|
||||
Řeší přetékající text a zobrazuje tooltip, když text přetéká.
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Použití">
|
||||
|
||||
```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="Vlastnosti">
|
||||
|
||||
|
||||
| Vlastnosti | Typ | Popis |
|
||||
| ---------- | ------- | ----------------------------------------------------------- |
|
||||
| text | řetězec | Obsah, který chcete zobrazit v oblasti přetékajícího textu. |
|
||||
|
||||
|
||||
|
||||
</Tab>
|
||||
|
||||
</Tabs>
|
||||
@@ -1,73 +0,0 @@
|
||||
---
|
||||
title: Zaškrtnutí
|
||||
icon: circle-check
|
||||
---
|
||||
|
||||
<Frame>
|
||||
<img src="/images/user-guide/tasks/tasks_header.png" alt="Hlavička" />
|
||||
</Frame>
|
||||
|
||||
Představuje úspěšnou nebo dokončenou akci.
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Použití">
|
||||
|
||||
```jsx
|
||||
import { Checkmark } from 'twenty-ui/display';
|
||||
|
||||
export const MyComponent = () => {
|
||||
return <Checkmark />;
|
||||
};
|
||||
```
|
||||
|
||||
|
||||
</Tab>
|
||||
|
||||
<Tab title="Vlastnosti">
|
||||
|
||||
Rozšiřuje `React.ComponentPropsWithoutRef<'div'>` a přijímá všechny vlastnosti běžného prvku `div`.
|
||||
|
||||
</Tab>
|
||||
|
||||
</Tabs>
|
||||
|
||||
## Animované zaškrtnutí
|
||||
|
||||
Představuje ikonu zaškrtnutí s přidanou funkcí animace.
|
||||
|
||||
<Tabs>
|
||||
|
||||
<Tab title="Použití">
|
||||
|
||||
```jsx
|
||||
import { AnimatedCheckmark } from 'twenty-ui/display';
|
||||
|
||||
export const MyComponent = () => {
|
||||
return (
|
||||
<AnimatedCheckmark
|
||||
isAnimating={true}
|
||||
color="green"
|
||||
duration={0.5}
|
||||
size={30}
|
||||
/>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
</Tab>
|
||||
|
||||
<Tab title="Vlastnosti">
|
||||
|
||||
|
||||
| Vlastnosti | Typ | Popis | Výchozí |
|
||||
| ---------- | ------------------ | --------------------------------- | ----------- |
|
||||
| animuje | booleovská hodnota | Určuje, zda se zaškrtnutí animuje | nepravdivé |
|
||||
| barva | řetězec | Barva zaškrtnutí | |
|
||||
| trvání | číslo | Doba trvání animace v sekundách | 0,5 sekundy |
|
||||
| velikost | číslo | Velikost zaškrtnutí | 28 pixelů |
|
||||
|
||||
|
||||
|
||||
</Tab>
|
||||
|
||||
</Tabs>
|
||||
@@ -1,153 +0,0 @@
|
||||
---
|
||||
title: Čip
|
||||
---
|
||||
|
||||
<Frame>
|
||||
<img src="/images/user-guide/github/github-header.png" alt="Hlavička" />
|
||||
</Frame>
|
||||
|
||||
Vizuální prvek, který můžete používat jako kliknutelný nebo nekliknutelný kontejner se štítkem, volitelnými levými a pravými komponenty a různými styly pro zobrazení štítků a značek.
|
||||
|
||||
<Tabs>
|
||||
|
||||
<Tab title="Použití">
|
||||
|
||||
```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="Vlastnosti">
|
||||
|
||||
|
||||
| Vlastnosti | Typ | Popis |
|
||||
| ------------- | ------------------------- | ---------------------------------------------------------------------------------------- |
|
||||
| odkazNaEntitu | řetězec | Odkaz na entitu |
|
||||
| entitaId | řetězec | Jedinečný identifikátor pro entitu |
|
||||
| název | textový řetězec | Název entity |
|
||||
| obrázekUrl | řetězec | s obrázkem", |
|
||||
| typAvatara | Typ avatara | Typ avatara, který chcete zobrazit. Má dvě možnosti: `zaoblený` a `hranatý` |
|
||||
| varianta | `EntityChipVariant` výčet | Varianta čipu entity, kterou chcete zobrazit. Má dvě možnosti: `běžný` a `transparentní` |
|
||||
| Levá ikona | Ikonová komponenta | React komponenta představující ikonu. Zobrazeno na levé straně čipu |
|
||||
|
||||
|
||||
|
||||
</Tab>
|
||||
</Tabs>
|
||||
|
||||
## Příklady
|
||||
|
||||
### Transparentní deaktivovaný čip
|
||||
|
||||
```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 />
|
||||
|
||||
### Deaktivovaný čip s tooltipem
|
||||
|
||||
```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
|
||||
/>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
## Čip entity
|
||||
|
||||
Prvek podobný čipu pro zobrazení informací o entitě.
|
||||
|
||||
<Tabs>
|
||||
|
||||
<Tab title="Použití">
|
||||
|
||||
```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="Vlastnosti">
|
||||
|
||||
|
||||
| Vlastnosti | Typ | Popis |
|
||||
| ------------- | ------------------------- | ---------------------------------------------------------------------------------------- |
|
||||
| odkazNaEntitu | řetězec | Odkaz na entitu |
|
||||
| entitaId | řetězec | Jedinečný identifikátor pro entitu |
|
||||
| název | řetězec | Název entity |
|
||||
| obrázekUrl | řetězec | s obrázkem", |
|
||||
| typAvatara | Typ avatara | Typ avatara, který chcete zobrazit. Má dvě možnosti: `zaoblený` a `hranatý` |
|
||||
| varianta | `EntityChipVariant` výčet | Varianta čipu entity, kterou chcete zobrazit. Má dvě možnosti: `běžný` a `transparentní` |
|
||||
| Levá ikona | Ikonová komponenta | React komponenta představující ikonu. Zobrazeno na levé straně čipu |
|
||||
|
||||
|
||||
|
||||
</Tab>
|
||||
</Tabs>
|
||||
@@ -1,91 +0,0 @@
|
||||
---
|
||||
title: Ikony
|
||||
icon: icons
|
||||
---
|
||||
|
||||
<Frame>
|
||||
<img src="/images/user-guide/objects/objects.png" alt="Hlavička" />
|
||||
</Frame>
|
||||
|
||||
Seznam ikon používaných po celé naší aplikaci.
|
||||
|
||||
## Tabler Icons
|
||||
|
||||
V celé aplikaci používáme ikony Tabler pro React.
|
||||
|
||||
<Tabs>
|
||||
|
||||
<Tab title="Instalace">
|
||||
<br />
|
||||
|
||||
```
|
||||
yarn add @tabler/icons-react
|
||||
```
|
||||
|
||||
</Tab>
|
||||
|
||||
<Tab title="Vlastnosti">
|
||||
|
||||
Každou ikonu můžete importovat jako komponentu. Zde je příklad:
|
||||
<br />
|
||||
|
||||
```jsx
|
||||
import { IconArrowLeft } from "@tabler/icons-react";
|
||||
|
||||
export const MyComponent = () => {
|
||||
return <IconArrowLeft color="red" size={48} />;
|
||||
};
|
||||
```
|
||||
|
||||
</Tab>
|
||||
|
||||
<Tab title="Vlastnosti">
|
||||
|
||||
|
||||
| Vlastnosti | Typ | Popis | Výchozí |
|
||||
| ---------- | ------- | ------------------------------ | ------------- |
|
||||
| velikost | číslo | Výška a šířka ikony v pixelech | 24 |
|
||||
| barva | řetězec | Barva ikon | současnáBarva |
|
||||
| stroke | číslo | Šířka tahu ikony v pixelech | 2 |
|
||||
|
||||
|
||||
|
||||
</Tab>
|
||||
|
||||
</Tabs>
|
||||
|
||||
## Vlastní ikony
|
||||
|
||||
Kromě ikon Tabler aplikace používá také některé vlastní ikony.
|
||||
|
||||
### Ikona adresáře
|
||||
|
||||
Zobrazí ikonu adresáře.
|
||||
|
||||
<Tabs>
|
||||
|
||||
<Tab title="Použití">
|
||||
|
||||
```jsx
|
||||
import { IconAddressBook } from 'twenty-ui/display';
|
||||
|
||||
export const MyComponent = () => {
|
||||
return <IconAddressBook size={24} stroke={2} />;
|
||||
};
|
||||
```
|
||||
|
||||
</Tab>
|
||||
|
||||
<Tab title="Vlastnosti">
|
||||
|
||||
|
||||
| Vlastnosti | Typ | Popis | Výchozí |
|
||||
| ---------- | ----- | ------------------------------ | ------- |
|
||||
| velikost | číslo | Výška a šířka ikony v pixelech | 24 |
|
||||
| stroke | číslo | Šířka tahu ikony v pixelech | 2 |
|
||||
|
||||
|
||||
|
||||
</Tab>
|
||||
|
||||
</Tabs>
|
||||
@@ -1,13 +0,0 @@
|
||||
---
|
||||
title: Štítek „Brzy“
|
||||
---
|
||||
|
||||
Malý odznak nebo "pilulka" označující, že něco brzy přijde.
|
||||
|
||||
```jsx
|
||||
import { SoonPill } from "@/ui/display/pill/components/SoonPill";
|
||||
|
||||
export const MyComponent = () => {
|
||||
return <SoonPill />;
|
||||
};
|
||||
```
|
||||
@@ -1,43 +0,0 @@
|
||||
---
|
||||
title: Štítek
|
||||
icon: tag
|
||||
---
|
||||
|
||||
Komponenta pro vizuální kategorizaci nebo označení obsahu.
|
||||
|
||||
<Tabs>
|
||||
|
||||
<Tab title="Použití">
|
||||
|
||||
```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="Vlastnosti">
|
||||
|
||||
|
||||
| Vlastnosti | Typ | Popis |
|
||||
| ---------- | --------------- | --------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| className | řetězec | Volitelný název pro dodatečné stylování |
|
||||
| barva | ř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>
|
||||
@@ -1,7 +0,0 @@
|
||||
---
|
||||
title: Vstup
|
||||
---
|
||||
|
||||
<Frame>
|
||||
<img src="/images/user-guide/tips/light-bulb.png" alt="Hlavička" />
|
||||
</Frame>
|
||||
@@ -1,36 +0,0 @@
|
||||
---
|
||||
title: Blokový Editor
|
||||
---
|
||||
|
||||
<Frame>
|
||||
<img src="/images/user-guide/api/api.png" alt="Hlavička" />
|
||||
</Frame>
|
||||
|
||||
Používá blokově založený editor bohatého textu od [BlockNote](https://www.blocknotejs.org/) pro umožnění uživatelům editovat a zobrazovat bloky obsahu.
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Použití">
|
||||
|
||||
```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="Vlastnosti">
|
||||
|
||||
|
||||
| Vlastnosti | Typ | Popis |
|
||||
| ---------- | ----------------- | ------------------------------------------- |
|
||||
| editor | `BlockNoteEditor` | Instance nebo konfigurace blokového editoru |
|
||||
|
||||
|
||||
|
||||
</Tab>
|
||||
</Tabs>
|
||||
@@ -1,522 +0,0 @@
|
||||
---
|
||||
title: Tlačítka
|
||||
icon: hand-pointer
|
||||
---
|
||||
|
||||
<Frame>
|
||||
<img src="/images/user-guide/views/filter.png" alt="Hlavička" />
|
||||
</Frame>
|
||||
|
||||
Seznam tlačítek a skupin tlačítek používaných v celé aplikaci.
|
||||
|
||||
## Tlačítko
|
||||
|
||||
<Tabs>
|
||||
|
||||
<Tab title="Použití">
|
||||
|
||||
```jsx
|
||||
import { Button } from "@/ui/input/button/components/Button";
|
||||
|
||||
export const MyComponent = () => {
|
||||
return (
|
||||
<Button
|
||||
className
|
||||
Icon={null}
|
||||
title="Title"
|
||||
fullWidth={false}
|
||||
variant="primary"
|
||||
size="medium"
|
||||
position="standalone"
|
||||
accent="default"
|
||||
soon={false}
|
||||
disabled={false}
|
||||
focus={true}
|
||||
onClick={() => console.log("click")}
|
||||
/>
|
||||
);
|
||||
};
|
||||
```
|
||||
</Tab>
|
||||
|
||||
<Tab title="Vlastnosti">
|
||||
|
||||
|
||||
| Vlastnosti | Typ | Popis |
|
||||
| ---------- | --------------------- | ---------------------------------------------------------------------------------------------------------- |
|
||||
| className | řetězec | Volitelný název třídy pro dodatečné stylování |
|
||||
| Ikona | `React.ComponentType` | Volitelná komponenta ikony, která se zobrazuje v rámci tlačítka |
|
||||
| název | řetězec | Textový obsah tlačítka |
|
||||
| fullWidth | booleovská hodnota | Určuje, zda by tlačítko mělo zabírat celou šířku svého kontejneru |
|
||||
| varianta | řetězec | Vizualní stylová varianta tlačítka. Možnosti zahrnují `primární`, `sekundární` a `terciární` |
|
||||
| velikost | řetězec | Velikost tlačítka. Má dvě možnosti: `malé` a `střední` |
|
||||
| pozice | řetězec | Pozice tlačítka ve vztahu k jeho sourozencům. Možnosti zahrnují: `samostatné`, `levé`, `pravé` a `střední` |
|
||||
| akcent | řetězec | Barva akcentu tlačítka. Možnosti zahrnují: `default`, `blue`, a `danger` |
|
||||
| brzy | booleovská hodnota | Indikuje, jestli je tlačítko označené jako "brzy" (například pro nadcházející funkce) |
|
||||
| neaktivní | booleovská hodnota | Určuje, zda je tlačítko zakázáno nebo ne |
|
||||
| ostření | booleovská hodnota | Určuje, zda tlačítko má zaměření |
|
||||
| onClick | funkce | Funkce zpětného volání, která se spustí, když uživatel klikne na tlačítko |
|
||||
|
||||
|
||||
|
||||
|
||||
</Tab>
|
||||
|
||||
</Tabs>
|
||||
|
||||
## Skupina tlačítek
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Použití">
|
||||
```jsx
|
||||
import { Button } from "@/ui/input/button/components/Button";
|
||||
import { ButtonGroup } from "@/ui/input/button/components/ButtonGroup";
|
||||
|
||||
export const MyComponent = () => {
|
||||
return (
|
||||
<ButtonGroup variant="primary" size="large" accent="blue" className>
|
||||
<Button
|
||||
className
|
||||
Icon={null}
|
||||
title="Button 1"
|
||||
fullWidth={false}
|
||||
variant="primary"
|
||||
size="medium"
|
||||
position="standalone"
|
||||
accent="blue"
|
||||
soon={false}
|
||||
disabled={false}
|
||||
focus={false}
|
||||
onClick={() => console.log("click")}
|
||||
/>
|
||||
<Button
|
||||
className
|
||||
Icon={null}
|
||||
title="Button 2"
|
||||
fullWidth={false}
|
||||
variant="secondary"
|
||||
size="medium"
|
||||
position="left"
|
||||
accent="blue"
|
||||
soon={false}
|
||||
disabled={false}
|
||||
focus={false}
|
||||
onClick={() => console.log("click")}
|
||||
/>
|
||||
<Button
|
||||
className
|
||||
Icon={null}
|
||||
title="Button 3"
|
||||
fullWidth={false}
|
||||
variant="tertiary"
|
||||
size="medium"
|
||||
position="right"
|
||||
accent="blue"
|
||||
soon={false}
|
||||
disabled={false}
|
||||
focus={false}
|
||||
onClick={() => console.log("click")}
|
||||
/>
|
||||
</ButtonGroup>
|
||||
);
|
||||
};
|
||||
|
||||
```
|
||||
</Tab>
|
||||
|
||||
<Tab title="Vlastnosti">
|
||||
|
||||
|
||||
| Vlastnosti | Typ | Popis |
|
||||
| ---------- | --------------- | ------------------------------------------------------------------------------------------- |
|
||||
| varianta | řetězec | Vizuální styl tlačítek ve skupině. Možnosti zahrnují `primární`, `sekundární` a `terciární` |
|
||||
| velikost | řetězec | Velikost tlačítek ve skupině. Má dvě možnosti: `střední` a `malé` |
|
||||
| akcent | textový řetězec | Barva akcentu tlačítek ve skupině. Mezi možnosti patří `default`, `blue` a `danger` |
|
||||
| className | řetězec | Volitelný název třídy pro dodatečné stylování |
|
||||
| děti | ReactNode | Pole prvků React představující jednotlivá tlačítka ve skupině |
|
||||
|
||||
|
||||
|
||||
</Tab>
|
||||
</Tabs>
|
||||
|
||||
## Plovoucí tlačítko
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Použití">
|
||||
|
||||
```jsx
|
||||
import { FloatingButton } from "@/ui/input/button/components/FloatingButton";
|
||||
import { IconSearch } from "@tabler/icons-react";
|
||||
|
||||
export const MyComponent = () => {
|
||||
return (
|
||||
<FloatingButton
|
||||
className
|
||||
Icon={IconSearch}
|
||||
title="Title"
|
||||
size="medium"
|
||||
position="standalone"
|
||||
applyShadow={true}
|
||||
applyBlur={true}
|
||||
disabled={false}
|
||||
focus={true}
|
||||
/>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
</Tab>
|
||||
|
||||
<Tab title="Vlastnosti">
|
||||
|
||||
|
||||
| Vlastnosti | Typ | Popis |
|
||||
| --------------- | --------------------- | ---------------------------------------------------------------------------------------------------------- |
|
||||
| className | řetězec | Volitelný název pro dodatečné stylování |
|
||||
| Ikona | `React.ComponentType` | Volitelná komponenta ikony, která se zobrazuje v rámci tlačítka |
|
||||
| název | řetězec | Textový obsah tlačítka |
|
||||
| velikost | řetězec | Velikost tlačítka. Má dvě možnosti: `malé` a `střední` |
|
||||
| pozice | řetězec | Pozice tlačítka ve vztahu k jeho sourozencům. Mezi možnosti patří: `standalone`, `left`, `middle`, `right` |
|
||||
| přidatStín | booleovská hodnota | Určuje, zda se má na tlačítko přidat stín |
|
||||
| použítRozmazání | booleovská hodnota | Určuje, zda se má na tlačítko použít rozostření |
|
||||
| neaktivní | booleovská hodnota | Určuje, zda je tlačítko zakázáno |
|
||||
| ostření | booleovská hodnota | Indikuje, zda tlačítko má zaměření |
|
||||
|
||||
|
||||
|
||||
</Tab>
|
||||
</Tabs>
|
||||
|
||||
## Plovoucí skupina tlačítek
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Použití">
|
||||
|
||||
```jsx
|
||||
import { FloatingButton } from "@/ui/input/button/components/FloatingButton";
|
||||
import { FloatingButtonGroup } from "@/ui/input/button/components/FloatingButtonGroup";
|
||||
import { IconClipboardText, IconCheckbox } from "@tabler/icons-react";
|
||||
|
||||
export const MyComponent = () => {
|
||||
return (
|
||||
<FloatingButtonGroup size="small">
|
||||
<FloatingButton
|
||||
className
|
||||
Icon={IconClipboardText}
|
||||
title
|
||||
size="small"
|
||||
position="standalone"
|
||||
applyShadow={true}
|
||||
applyBlur={true}
|
||||
disabled={false}
|
||||
focus={true}
|
||||
/>
|
||||
<FloatingButton
|
||||
className
|
||||
Icon={IconCheckbox}
|
||||
title
|
||||
size="small"
|
||||
position="standalone"
|
||||
applyShadow={true}
|
||||
applyBlur={true}
|
||||
disabled={false}
|
||||
/>
|
||||
</FloatingButtonGroup>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
</Tab>
|
||||
|
||||
<Tab title="Vlastnosti">
|
||||
|
||||
|
||||
| Vlastnosti | Typ | Popis | Výchozí |
|
||||
| ---------- | --------- | ------------------------------------------------------------- | ------- |
|
||||
| velikost | řetězec | Velikost tlačítka. Má dvě možnosti: `malé` a `střední` | malý |
|
||||
| děti | ReactNode | Pole prvků React představující jednotlivá tlačítka ve skupině | |
|
||||
|
||||
|
||||
|
||||
</Tab>
|
||||
|
||||
</Tabs>
|
||||
|
||||
## Plovoucí ikonové tlačítko
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Použití">
|
||||
|
||||
```jsx
|
||||
import { FloatingIconButton } from "@/ui/input/button/components/FloatingIconButton";
|
||||
import { IconSearch } from "@tabler/icons-react";
|
||||
|
||||
export const MyComponent = () => {
|
||||
return (
|
||||
<FloatingIconButton
|
||||
className
|
||||
Icon={IconSearch}
|
||||
size="small"
|
||||
position="standalone"
|
||||
applyShadow={true}
|
||||
applyBlur={true}
|
||||
disabled={false}
|
||||
focus={false}
|
||||
onClick={() => console.log("click")}
|
||||
isActive={true}
|
||||
/>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
</Tab>
|
||||
|
||||
<Tab title="Vlastnosti">
|
||||
|
||||
|
||||
| Vlastnosti | Typ | Popis |
|
||||
| --------------- | --------------------- | ---------------------------------------------------------------------------------------------------------- |
|
||||
| className | řetězec | Volitelný název pro dodatečné stylování |
|
||||
| Ikona | `React.ComponentType` | Volitelná komponenta ikony, která se zobrazuje v rámci tlačítka |
|
||||
| velikost | řetězec | Velikost tlačítka. Má dvě možnosti: `malé` a `střední` |
|
||||
| pozice | řetězec | Pozice tlačítka ve vztahu k jeho sourozencům. Možnosti zahrnují: `samostatné`, `levé`, `pravé` a `střední` |
|
||||
| přidatStín | booleovská hodnota | Určuje, zda se má na tlačítko přidat stín |
|
||||
| použítRozmazání | booleovská hodnota | Určuje, zda se má na tlačítko použít rozostření |
|
||||
| neaktivní | booleovská hodnota | Určuje, zda je tlačítko zakázáno |
|
||||
| ostření | booleovská hodnota | Indikuje, zda tlačítko má zaměření |
|
||||
| onClick | funkce | Funkce zpětného volání, která se spustí, když uživatel klikne na tlačítko |
|
||||
| jeAktivní | booleovská hodnota | Určuje, zda je tlačítko v aktivním stavu |
|
||||
|
||||
|
||||
|
||||
</Tab>
|
||||
|
||||
</Tabs>
|
||||
|
||||
## Plovoucí skupina ikonových tlačítek
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Použití">
|
||||
|
||||
```jsx
|
||||
import { FloatingIconButtonGroup } from "@/ui/input/button/components/FloatingIconButtonGroup";
|
||||
import { IconClipboardText, IconCheckbox } from "@tabler/icons-react";
|
||||
|
||||
export const MyComponent = () => {
|
||||
const iconButtons = [
|
||||
{
|
||||
Icon: IconClipboardText,
|
||||
onClick: () => console.log("Button 1 clicked"),
|
||||
isActive: true,
|
||||
},
|
||||
{
|
||||
Icon: IconCheckbox,
|
||||
onClick: () => console.log("Button 2 clicked"),
|
||||
isActive: true,
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<FloatingIconButtonGroup
|
||||
className
|
||||
size="small"
|
||||
iconButtons={iconButtons} />
|
||||
);
|
||||
};
|
||||
|
||||
```
|
||||
|
||||
</Tab>
|
||||
|
||||
<Tab title="Vlastnosti">
|
||||
|
||||
|
||||
| Vlastnosti | Typ | Popis |
|
||||
| ---------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| className | řetězec | Volitelný název pro dodatečné stylování |
|
||||
| velikost | řetězec | Velikost tlačítka. Má dvě možnosti: `malé` a `střední` |
|
||||
| ikonová tlačítka | pole | Pole objektů, z nichž každé představuje ikonové tlačítko ve skupině. Každý objekt by měl obsahovat ikonovou komponentu, kterou chcete zobrazit v tlačítku, funkci, kterou chcete vyvolat při kliknutí uživatele na tlačítko, a určení, zda by tlačítko mělo být aktivní či nikoli. |
|
||||
|
||||
|
||||
|
||||
</Tab>
|
||||
|
||||
</Tabs>
|
||||
|
||||
## Tlačítko světla
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Použití">
|
||||
|
||||
```jsx
|
||||
import { LightButton } from "@/ui/input/button/components/LightButton";
|
||||
|
||||
export const MyComponent = () => {
|
||||
return <LightButton
|
||||
className
|
||||
icon={null}
|
||||
title="Title"
|
||||
accent="secondary"
|
||||
active={false}
|
||||
disabled={false}
|
||||
focus={true}
|
||||
onClick={()=>console.log('click')}
|
||||
/>;
|
||||
};
|
||||
```
|
||||
|
||||
|
||||
</Tab>
|
||||
|
||||
<Tab title="Vlastnosti">
|
||||
|
||||
|
||||
| Vlastnosti | Typ | Popis |
|
||||
| ---------- | ------------------ | ------------------------------------------------------------------------- |
|
||||
| className | řetězec | Volitelný název pro dodatečné stylování |
|
||||
| ikona | `React.ReactNode` | Ikona, kterou chcete zobrazit v tlačítku |
|
||||
| název | řetězec | Textový obsah tlačítka |
|
||||
| akcent | řetězec | Barva akcentu tlačítka. Možnosti zahrnují: `sekundární` a `tertiary` |
|
||||
| aktivní | booleovská hodnota | Určuje, zda je tlačítko v aktivním stavu |
|
||||
| neaktivní | booleovská hodnota | Určuje, zda je tlačítko zakázáno |
|
||||
| ostření | booleovská hodnota | Indikuje, zda tlačítko má zaměření |
|
||||
| onClick | funkce | Funkce zpětného volání, která se spustí, když uživatel klikne na tlačítko |
|
||||
|
||||
|
||||
|
||||
|
||||
</Tab>
|
||||
|
||||
</Tabs>
|
||||
|
||||
## Tlačítko Světlé ikony
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Použití">
|
||||
|
||||
```jsx
|
||||
import { LightIconButton } from "@/ui/input/button/components/LightIconButton";
|
||||
import { IconSearch } from "@tabler/icons-react";
|
||||
|
||||
export const MyComponent = () => {
|
||||
return (
|
||||
<LightIconButton
|
||||
className
|
||||
testId="test1"
|
||||
Icon={IconSearch}
|
||||
title="Title"
|
||||
size="small"
|
||||
accent="secondary"
|
||||
active={true}
|
||||
disabled={false}
|
||||
focus={true}
|
||||
onClick={() => console.log("click")}
|
||||
/>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
|
||||
</Tab>
|
||||
|
||||
<Tab title="Vlastnosti">
|
||||
|
||||
|
||||
| Vlastnosti | Typ | Popis |
|
||||
| ---------- | --------------------- | ------------------------------------------------------------------------- |
|
||||
| className | řetězec | Volitelný název pro dodatečné stylování |
|
||||
| testId | řetězec | Testovací identifikátor pro tlačítko |
|
||||
| Ikona | `React.ComponentType` | Volitelná komponenta ikony, která se zobrazuje v rámci tlačítka |
|
||||
| název | řetězec | Textový obsah tlačítka |
|
||||
| velikost | řetězec | Velikost tlačítka. Má dvě možnosti: `malé` a `střední` |
|
||||
| akcent | řetězec | Barva akcentu tlačítka. Možnosti zahrnují: `sekundární` a `tertiary` |
|
||||
| aktivní | booleovská hodnota | Určuje, zda je tlačítko v aktivním stavu |
|
||||
| neaktivní | booleovská hodnota | Určuje, zda je tlačítko zakázáno |
|
||||
| ostření | booleovská hodnota | Indikuje, zda má tlačítko zaměření |
|
||||
| onClick | funkce | Funkce zpětného volání, která se spustí, když uživatel klikne na tlačítko |
|
||||
|
||||
|
||||
|
||||
</Tab>
|
||||
|
||||
</Tabs>
|
||||
|
||||
## Hlavní tlačítko
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Použití">
|
||||
|
||||
```jsx
|
||||
import { MainButton } from "@/ui/input/button/components/MainButton";
|
||||
import { IconCheckbox } from "@tabler/icons-react";
|
||||
|
||||
export const MyComponent = () => {
|
||||
return (
|
||||
<MainButton
|
||||
title="Checkbox"
|
||||
fullWidth={false}
|
||||
variant="primary"
|
||||
soon={false}
|
||||
Icon={IconCheckbox}
|
||||
/>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
|
||||
</Tab>
|
||||
|
||||
<Tab title="Vlastnosti">
|
||||
|
||||
|
||||
| Vlastnosti | Typ | Popis |
|
||||
| ---------------------------- | -------------------------------- | ---------------------------------------------------------------------------------- |
|
||||
| název | řetězec | Textový obsah tlačítka |
|
||||
| plná šířka | booleovská hodnota | Určuje, zda by tlačítko mělo zabírat celou šířku svého kontejneru |
|
||||
| varianta | řetězec | Vizuální stylová varianta tlačítka. Možnosti zahrnují `primární` a `sekundární` |
|
||||
| brzy | booleovská hodnota | Indikuje, zda je tlačítko označeno jako "brzy" (například pro nadcházející funkce) |
|
||||
| Ikona | `React.ComponentType` | Volitelná komponenta ikony, která se zobrazuje v rámci tlačítka |
|
||||
| Reagovat `tlačítko` výklopky | `React.ComponentProps<'button'>` | Všechny podpěry HTML tlačítek jsou podporovány |
|
||||
|
||||
|
||||
|
||||
|
||||
</Tab>
|
||||
|
||||
</Tabs>
|
||||
|
||||
## Zaoblené tlačítko s ikonou
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Použití">
|
||||
|
||||
```jsx
|
||||
import { RoundedIconButton } from "@/ui/input/button/components/RoundedIconButton";
|
||||
import { IconSearch } from "@tabler/icons-react";
|
||||
|
||||
export const MyComponent = () => {
|
||||
return (
|
||||
<RoundedIconButton
|
||||
Icon={IconSearch}
|
||||
/>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
|
||||
</Tab>
|
||||
|
||||
<Tab title="Vlastnosti">
|
||||
|
||||
|
||||
| Vlastnosti | Typ | Popis |
|
||||
| ---------------------------- | ----------------------------------------------- | ----- |
|
||||
| Ikona | `React.ComponentType` | |
|
||||
| Reagovat `tlačítko` výklopky | `React.ButtonHTMLAttributes<HTMLButtonElement>` | |
|
||||
|
||||
|
||||
|
||||
</Tab>
|
||||
|
||||
</Tabs>
|
||||
@@ -1,50 +0,0 @@
|
||||
---
|
||||
title: Zaškrtávací políčko
|
||||
icon: square-check
|
||||
---
|
||||
|
||||
<Frame>
|
||||
<img src="/images/user-guide/tasks/tasks_header.png" alt="Hlavička" />
|
||||
</Frame>
|
||||
|
||||
Používané, když uživatel potřebuje vybrat více hodnot z několika možností.
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Použití">
|
||||
|
||||
```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="Vlastnosti">
|
||||
|
||||
|
||||
| Vlastnosti | Typ | Popis |
|
||||
| --------------- | ------------------ | ------------------------------------------------------------------------------------------- |
|
||||
| zaškrtnuté | booleovská hodnota | Ukazuje, zda je zaškrtávací políčko zaškrtnuté |
|
||||
| neurčitý stav | booleovská hodnota | Ukazuje, zda je zaškrtávací políčko ve stavu neurčitosti (ani zaškrtnuté, ani nezaškrtnuté) |
|
||||
| onChange | funkce | Callback funkce, kterou chcete spustit, když se změní stav zaškrtávacího políčka |
|
||||
| onCheckedChange | funkce | Callback funkce, kterou chcete spustit, když se změní stav „zaškrtnutí“ |
|
||||
| varianta | textový řetězec | Vizuální stylová varianta boxu. Možnosti zahrnují: "primární", "sekundární" a "terciární" |
|
||||
| velikost | řetězec | Velikost zaškrtávacího políčka. Má dvě možnosti: "malý" a "velký" |
|
||||
| tvar | řetězec | Tvar zaškrtávacího políčka. Má dvě možnosti: "čtvercový" a "zaoblený" |
|
||||
|
||||
|
||||
|
||||
</Tab>
|
||||
</Tabs>
|
||||
@@ -1,79 +0,0 @@
|
||||
---
|
||||
title: Barevné schéma
|
||||
icon: palette
|
||||
---
|
||||
|
||||
<Frame>
|
||||
<img src="/images/user-guide/fields/field.png" alt="Hlavička" />
|
||||
</Frame>
|
||||
|
||||
## Karta barevného schématu
|
||||
|
||||
Zobrazuje různá barevná schémata a je speciálně přizpůsobená pro světlé a tmavé motivy.
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Použití">
|
||||
|
||||
```jsx
|
||||
import { ColorSchemeCard } from "twenty-ui/display";
|
||||
|
||||
export const MyComponent = () => {
|
||||
return (
|
||||
<ColorSchemeCard
|
||||
variant="Dark"
|
||||
selected={true}
|
||||
/>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
</Tab>
|
||||
|
||||
<Tab title="Vlastnosti">
|
||||
|
||||
|
||||
| Vlastnosti | Typ | Popis | Výchozí |
|
||||
| ---------------- | --------------------------------------- | ------------------------------------------------------------------------------ | ------- |
|
||||
| varianta | řetězec | Varianta barevného schématu. Možnosti zahrnují `Tmavý`, `Světlý` a `Systémový` | světlý |
|
||||
| vybráno | booleovská hodnota | Pokud 'true' zobrazí zaškrtnutí pro označení vybraného barevného schématu | |
|
||||
| další vlastnosti | `React.ComponentPropsWithoutRef<'div'>` | Standardní vlastnosti HTML `div` elementu | |
|
||||
|
||||
|
||||
|
||||
</Tab>
|
||||
|
||||
</Tabs>
|
||||
|
||||
## Výběr barevného schématu
|
||||
|
||||
Umožňuje uživatelům vybrat různá barevná schémata.
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Použití">
|
||||
|
||||
```jsx
|
||||
import { ColorSchemePicker } from "twenty-ui/display";
|
||||
|
||||
export const MyComponent = () => {
|
||||
return <ColorSchemePicker
|
||||
value="Dark"
|
||||
onChange
|
||||
/>;
|
||||
};
|
||||
```
|
||||
|
||||
</Tab>
|
||||
|
||||
<Tab title="Vlastnosti">
|
||||
|
||||
|
||||
| Vlastnosti | Typ | Popis |
|
||||
| ---------- | ---------------- | -------------------------------------------------------------------------------------- |
|
||||
| hodnota | `Barevné schéma` | Aktuálně vybrané barevné schéma |
|
||||
| onChange | funkce | Funkce zpětného volání, kterou chcete spustit při výběru barevného schématu uživatelem |
|
||||
|
||||
|
||||
|
||||
</Tab>
|
||||
|
||||
</Tabs>
|
||||
@@ -1,57 +0,0 @@
|
||||
---
|
||||
title: Výběr Ikony
|
||||
---
|
||||
|
||||
<Frame>
|
||||
<img src="/images/user-guide/github/github-header.png" alt="Hlavička" />
|
||||
</Frame>
|
||||
|
||||
Rozbalovací výběr ikon, který uživatelům umožňuje vybrat ikonu ze seznamu.
|
||||
|
||||
<Tabs>
|
||||
|
||||
<Tab title="Použití">
|
||||
|
||||
```jsx
|
||||
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 (
|
||||
<IconPicker
|
||||
disabled={false}
|
||||
onChange={handleIconChange}
|
||||
selectedIconKey={selectedIcon}
|
||||
variant="primary"
|
||||
/>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
|
||||
</Tab>
|
||||
<Tab title="Vlastnosti">
|
||||
|
||||
|
||||
| Vlastnosti | Typ | Popis |
|
||||
| --------------- | ------------------ | ------------------------------------------------------------------------------------------------------------- |
|
||||
| neaktivní | booleovská hodnota | Deaktivuje výběr ikon, pokud je nastavena hodnota `true` |
|
||||
| onChange | funkce | Vyvolá se funkce zpětného volání, když uživatel vybere ikonu. Přijímá objekt s vlastnostmi `iconKey` a `Icon` |
|
||||
| selectedIconKey | textový řetězec | Klíč výchozí vybrané ikony |
|
||||
| onClickOutside | funkce | Funkce zpětného volání, vyvolaná, když uživatel klikne mimo rozbalovací nabídku. |
|
||||
| onClose | funkce | Funkce zpětného volání, vyvolaná, když je rozbalovací nabídka zavřena. |
|
||||
| onOpen | funkce | Funkce zpětného volání, vyvolaná, když je rozbalovací nabídka otevřena. |
|
||||
| varianta | řetězec | Vizuální stylová varianta klikatelné ikony. Možnosti zahrnují: "primární", "sekundární" a "terciární" |
|
||||
|
||||
|
||||
|
||||
|
||||
</Tab>
|
||||
</Tabs>
|
||||
@@ -1,40 +0,0 @@
|
||||
---
|
||||
title: Vstup obrázku
|
||||
---
|
||||
|
||||
<Frame>
|
||||
<img src="/images/user-guide/objects/objects.png" alt="Hlavička" />
|
||||
</Frame>
|
||||
|
||||
Umožňuje uživatelům nahrát a odstranit obrázek.
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Použití">
|
||||
|
||||
```jsx
|
||||
import { ImageInput } from "@/ui/input/components/ImageInput";
|
||||
|
||||
export const MyComponent = () => {
|
||||
return <ImageInput/>;
|
||||
};
|
||||
```
|
||||
|
||||
</Tab>
|
||||
<Tab title="Vlastnosti">
|
||||
|
||||
|
||||
| Vlastnosti | Typ | Popis |
|
||||
| -------------- | ------------------ | -------------------------------------------------------------------------------------------------- |
|
||||
| obrázek | řetězec | URL zdroje obrázku |
|
||||
| onUpload | funkce | Funkce, která se spustí při nahrání nového obrázku uživatelem. Přijímá objekt `File` jako parametr |
|
||||
| onRemove | funkce | Funkce, která se spustí po kliknutí uživatele na tlačítko odstranění |
|
||||
| onAbort | funkce | Funkce, která se spustí při kliknutí uživatele na tlačítko přerušení během nahrávání obrázku |
|
||||
| isUploading | booleovská hodnota | Označuje, zda se obrázek aktuálně nahrává |
|
||||
| chybová zpráva | řetězec | Volitelná chybová zpráva k zobrazení pod vstupním polem pro obrázek |
|
||||
| neaktivní | booleovská hodnota | Pokud je `true`, je celý vstup deaktivován a na tlačítka nelze kliknout |
|
||||
|
||||
|
||||
|
||||
|
||||
</Tab>
|
||||
</Tabs>
|
||||
@@ -1,113 +0,0 @@
|
||||
---
|
||||
title: Rádio
|
||||
icon: circle-dot
|
||||
---
|
||||
|
||||
<Frame>
|
||||
<img src="/images/user-guide/create-workspace/workspace-cover.png" alt="Hlavička" />
|
||||
</Frame>
|
||||
|
||||
Používá se, když uživatelé mohou vybrat pouze jednu možnost ze série možností.
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Použití">
|
||||
|
||||
```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="Vlastnosti">
|
||||
|
||||
|
||||
| Vlastnosti | Typ | Popis |
|
||||
| --------------- | ---------------------- | ---------------------------------------------------------------------------------- |
|
||||
| styl | Vlastnosti `React.CSS` | Další inline styly pro komponentu |
|
||||
| className | řetězec | Volitelná CSS třída pro další stylování |
|
||||
| zaškrtnuté | booleovská hodnota | Označuje, zda je zaškrtnuto rádiové tlačítko |
|
||||
| hodnota | řetězec | Označení nebo text spojený s radiobuttonem |
|
||||
| onChange | funkce | Funkce volaná při změně vybraného přepínače |
|
||||
| onCheckedChange | funkce | Funkce volaná, když se změní stav tlačítka "zaškrtnuto" |
|
||||
| velikost | řetězec | Velikost radiobuttonu. Možnosti zahrnují: `velký` a `malý` |
|
||||
| neaktivní | booleovská hodnota | Pokud je 'pravda', rádiové tlačítko je zakázáno a nelze kliknout |
|
||||
| Pozice štítku | řetězec | Pozice textu označení vzhledem k radiobuttonu. Má dvě možnosti: `vlevo` a `vpravo` |
|
||||
|
||||
|
||||
|
||||
|
||||
</Tab>
|
||||
</Tabs>
|
||||
|
||||
## Rozhlasová skupina
|
||||
|
||||
Skupiny společně související rádiová tlačítka.
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Použití">
|
||||
|
||||
```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="Vlastnosti">
|
||||
|
||||
|
||||
| Vlastnosti | Typ | Popis |
|
||||
| --------------- | ----------------- | ------------------------------------------------------------------------------ |
|
||||
| hodnota | řetězec | Hodnota aktuálně vybraného radiobuttonu |
|
||||
| onChange | funkce | Funkce zpětného volání spuštěná při změně rádiového tlačítka |
|
||||
| přiZměněHodnoty | funkce | Funkce spouštěná při změně vybrané hodnoty ve skupině. |
|
||||
| děti | `React.ReactNode` | Umožňuje předávat React komponenty (např. Radio) jako potomky do skupiny rádií |
|
||||
|
||||
|
||||
|
||||
|
||||
</Tab>
|
||||
|
||||
</Tabs>
|
||||
@@ -1,54 +0,0 @@
|
||||
---
|
||||
title: Vybrat
|
||||
---
|
||||
|
||||
<Frame>
|
||||
<img src="/images/user-guide/what-is-twenty/20.png" alt="Hlavička" />
|
||||
</Frame>
|
||||
|
||||
Umožňuje uživatelům vybrat hodnotu z nabídky předdefinovaných možností.
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Použití">
|
||||
|
||||
```jsx
|
||||
import { IconTwentyStar } from 'twenty-ui/display';
|
||||
|
||||
import { Select } from '@/ui/input/components/Select';
|
||||
|
||||
export const MyComponent = () => {
|
||||
|
||||
return (
|
||||
<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"
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
```
|
||||
|
||||
</Tab>
|
||||
<Tab title="Vlastnosti">
|
||||
|
||||
|
||||
| Vlastnosti | Typ | Popis |
|
||||
| ---------- | ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| className | řetězec | Volitelná CSS třída pro dodatečné stylování. |
|
||||
| neaktivní | booleovská hodnota | Pokud je nastaveno na `true`, zakáže interakci uživatele s komponentou. |
|
||||
| štítek | textový řetězec | Štítek popisující účel komponenty `Vybrat`. |
|
||||
| onChange | funkce | Funkce volaná při změně vybraných hodnot. |
|
||||
| možnosti | pole | Představuje možnosti dostupné pro komponentu `Selected`. Je to pole objektů, kde každý objekt má `value` (jedinečný identifikátor), `label` (jedinečný identifikátor) a volitelný `Icon` |
|
||||
| hodnota | řetězec | Reprezentuje aktuálně vybranou hodnotu. Měla by odpovídat jedné z `hodnot` v poli `možnosti`. |
|
||||
|
||||
|
||||
|
||||
|
||||
</Tab>
|
||||
</Tabs>
|
||||
@@ -1,161 +0,0 @@
|
||||
---
|
||||
title: Text
|
||||
---
|
||||
|
||||
<Frame>
|
||||
<img src="/images/user-guide/notes/notes_header.png" alt="Hlavička" />
|
||||
</Frame>
|
||||
|
||||
## Textové pole
|
||||
|
||||
Umožňuje uživatelům zadávat a upravovat text.
|
||||
|
||||
<Tabs>
|
||||
|
||||
<Tab title="Použití">
|
||||
|
||||
```jsx
|
||||
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 (
|
||||
<TextInput
|
||||
className
|
||||
label="Username"
|
||||
onChange={handleChange}
|
||||
fullWidth={false}
|
||||
disableHotkeys={false}
|
||||
error="Invalid username"
|
||||
onKeyDown={handleKeyDown}
|
||||
RightIcon={null}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
```
|
||||
|
||||
|
||||
</Tab>
|
||||
|
||||
<Tab title="Vlastnosti">
|
||||
|
||||
|
||||
| Vlastnosti | Typ | Popis |
|
||||
| -------------- | ------------------ | ------------------------------------------------------------------------------------------------------------------------- |
|
||||
| className | řetězec | Volitelný název pro další stylování |
|
||||
| štítek | řetězec | Reprezentuje štítek pro vstup |
|
||||
| onChange | funkce | Funkce, která se zavolá, když se změní hodnota vstupu |
|
||||
| fullWidth | booleovská hodnota | Udává, zda by měl vstup zabírat 100 % šířky |
|
||||
| disableHotkeys | booleovská hodnota | Indikuje, zda jsou pro vstup povoleny horké klávesy |
|
||||
| chyba | řetězec | Reprezentuje chybovou zprávu, která se má zobrazit. Pokud je poskytnuta, také přidává ikonu chyby na pravou stranu vstupu |
|
||||
| onKeyDown | funkce | Volá se při stisknutí klávesy, když je vstupní pole ve fokusu. Přijímá `React.KeyboardEvent` jako argument |
|
||||
| Pravá Ikona | Ikonová komponenta | Volitelná komponenta ikony zobrazená na pravé straně vstupu |
|
||||
|
||||
|
||||
|
||||
|
||||
Komponenta také přijímá jiné vlastnosti HTML vstupního prvku.
|
||||
|
||||
</Tab>
|
||||
|
||||
</Tabs>
|
||||
|
||||
## Automatická velikost vstupního textu
|
||||
|
||||
Textová vstupní komponenta, která automaticky přizpůsobuje svou výšku na základě obsahu.
|
||||
|
||||
<Tabs>
|
||||
|
||||
<Tab title="Použití">
|
||||
|
||||
```jsx
|
||||
import { AutosizeTextInput } from "@/ui/input/components/AutosizeTextInput";
|
||||
|
||||
export const MyComponent = () => {
|
||||
return (
|
||||
<AutosizeTextInput
|
||||
onValidate={() => console.log("onValidate function fired")}
|
||||
minRows={1}
|
||||
placeholder="Write a comment"
|
||||
onFocus={() => console.log("onFocus function fired")}
|
||||
variant="icon"
|
||||
buttonTitle
|
||||
value="Task: "
|
||||
/>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
|
||||
</Tab>
|
||||
|
||||
<Tab title="Vlastnosti">
|
||||
|
||||
|
||||
| Vlastnosti | Typ | Popis |
|
||||
| ------------- | ------- | ----------------------------------------------------------------------- |
|
||||
| onValidate | funkce | Callback funkce, kterou chcete spustit, když uživatel potvrdí vstup |
|
||||
| minRows | číslo | Minimální počet řádků pro textovou oblast |
|
||||
| zástupný text | řetězec | Náhradní text, který chcete zobrazit, když je textová oblast prázdná |
|
||||
| onFocus | funkce | Callback funkce, kterou chcete spustit, když textová oblast získá fokus |
|
||||
| varianta | řetězec | Varianta vstupu. Možnosti zahrnují: `výchozí`, `ikona`, a `tlačítko` |
|
||||
| buttonTitle | řetězec | Název pro tlačítko (pouze pro variantu tlačítka) |
|
||||
| hodnota | řetězec | Úvodní hodnota pro textovou oblast |
|
||||
|
||||
|
||||
|
||||
|
||||
</Tab>
|
||||
|
||||
</Tabs>
|
||||
|
||||
## Textová Oblast
|
||||
|
||||
Umožňuje vytvoření víceřádkových textových vstupů.
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Použití">
|
||||
|
||||
```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="Vlastnosti">
|
||||
|
||||
|
||||
| Vlastnosti | Typ | Popis |
|
||||
| ------------- | ------------------ | --------------------------------------------------------- |
|
||||
| neaktivní | booleovská hodnota | Naznačuje, zda je textová oblast deaktivovaná |
|
||||
| minRows | číslo | Minimální počet viditelných řádků pro textovou oblast. |
|
||||
| onChange | funkce | Callback funkce spuštěná při změně obsahu textové oblasti |
|
||||
| zástupný text | řetězec | Zástupný text zobrazený, když je textová oblast prázdná |
|
||||
| hodnota | řetězec | Aktuální hodnota textové oblasti |
|
||||
|
||||
|
||||
|
||||
|
||||
</Tab>
|
||||
</Tabs>
|
||||
@@ -1,38 +0,0 @@
|
||||
---
|
||||
title: Přepínač
|
||||
icon: toggle-on
|
||||
---
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Použití">
|
||||
|
||||
```jsx
|
||||
import { Toggle } from "twenty-ui/input";
|
||||
|
||||
export const MyComponent = () => {
|
||||
return (
|
||||
<Toggle
|
||||
value = {true}
|
||||
onChange = {()=>console.log('On Change event')}
|
||||
color="green"
|
||||
toggleSize = "medium"
|
||||
/>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
</Tab>
|
||||
<Tab title="Vlastnosti">
|
||||
|
||||
|
||||
| Vlastnosti | Typ | Popis | Výchozí |
|
||||
| ----------------- | ------------------ | --------------------------------------------------------------------------------------------- | ------------ |
|
||||
| hodnota | booleovská hodnota | Aktuální stav přepínače | `nepravdivé` |
|
||||
| onChange | funkce | Callback funkce spuštěná při změně stavu přepínače | |
|
||||
| barva | řetězec | Barva přepínače, když je\ | modré barvy |
|
||||
| velikostPřepínače | řetězec | Velikost přepínače, která ovlivňuje jak výšku, tak šířku. Má dvě možnosti: `malé` a `střední` | střední |
|
||||
|
||||
|
||||
|
||||
</Tab>
|
||||
</Tabs>
|
||||
@@ -1,31 +0,0 @@
|
||||
---
|
||||
title: Přehled
|
||||
icon: palette
|
||||
description: Knihovna komponent pro Twenty CRM
|
||||
---
|
||||
|
||||
import { CardTitle } from "/snippets/card-title.mdx"
|
||||
|
||||
## Komponenty
|
||||
|
||||
<CardGroup cols={2}>
|
||||
<Card href="/l/cs/twenty-ui/display" img="/images/user-guide/views/filter.png">
|
||||
<CardTitle>Display</CardTitle>
|
||||
Zobrazovací komponenty pro vizuální prezentaci informací
|
||||
</Card>
|
||||
|
||||
<Card href="/l/cs/twenty-ui/progress-bar" img="/images/user-guide/fields/field.png">
|
||||
<CardTitle>Feedback</CardTitle>
|
||||
Komponenty pro zpětnou vazbu pro uživatelská oznámení
|
||||
</Card>
|
||||
|
||||
<Card href="/l/cs/twenty-ui/input" img="/images/user-guide/tips/light-bulb.png">
|
||||
<CardTitle>Input</CardTitle>
|
||||
Vstupní komponenty pro interakci s uživatelem
|
||||
</Card>
|
||||
|
||||
<Card href="/l/cs/twenty-ui/navigation" img="/images/user-guide/tasks/tasks_header.png">
|
||||
<CardTitle>Navigation</CardTitle>
|
||||
Navigační komponenty pro uživatelské rozhraní
|
||||
</Card>
|
||||
</CardGroup>
|
||||
@@ -1,8 +0,0 @@
|
||||
---
|
||||
title: Navigace
|
||||
icon: compass
|
||||
---
|
||||
|
||||
<Frame>
|
||||
<img src="/images/user-guide/tasks/tasks_header.png" alt="Hlavička" />
|
||||
</Frame>
|
||||
@@ -1,46 +0,0 @@
|
||||
---
|
||||
title: Drobečková navigace
|
||||
---
|
||||
|
||||
<Frame>
|
||||
<img src="/images/user-guide/fields/field.png" alt="Hlavička" />
|
||||
</Frame>
|
||||
|
||||
Zobrazuje drobečkovou navigační lištu.
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Použití">
|
||||
|
||||
```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="Vlastnosti">
|
||||
|
||||
|
||||
| Vlastnosti | Typ | Popis |
|
||||
| ---------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| className | ř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>
|
||||
@@ -1,185 +0,0 @@
|
||||
---
|
||||
title: Odkazy
|
||||
icon: link
|
||||
---
|
||||
|
||||
<Frame>
|
||||
<img src="/images/user-guide/what-is-twenty/20.png" alt="Hlavička" />
|
||||
</Frame>
|
||||
|
||||
## Odkaz na kontakt
|
||||
|
||||
Stylizovaná komponenta odkazu pro zobrazení kontaktních informací.
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Použití">
|
||||
|
||||
```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="Vlastnosti">
|
||||
|
||||
|
||||
| Vlastnosti | Typ | Popis |
|
||||
| ---------- | ----------------- | ----------------------------------------------------- |
|
||||
| className | řetězec | Volitelný název pro další stylování |
|
||||
| href | ř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="Použití">
|
||||
|
||||
```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="Vlastnosti">
|
||||
|
||||
|
||||
| Vlastnosti | Typ | Popis |
|
||||
| ---------- | ----------------- | ----------------------------------------------------- |
|
||||
| className | řetězec | Volitelný název pro dodatečné stylování |
|
||||
| href | ř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="Použití">
|
||||
|
||||
```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="Vlastnosti">
|
||||
|
||||
|
||||
| Vlastnosti | Typ | Popis |
|
||||
| ---------- | ----------------- | ----------------------------------------------------- |
|
||||
| href | ř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="Použití">
|
||||
|
||||
```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="Vlastnosti">
|
||||
|
||||
|
||||
| Vlastnosti | Typ | Popis |
|
||||
| ---------- | ----------------- | ----------------------------------------------------------------------- |
|
||||
| href | řetězec | Cílová URL adresa nebo cesta pro odkaz |
|
||||
| děti | `React.ReactNode` | Obsah, který se má zobrazovat uvnitř odkazu |
|
||||
| typ | ř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>
|
||||
@@ -1,495 +0,0 @@
|
||||
---
|
||||
title: Položka menu
|
||||
icon: bars
|
||||
---
|
||||
|
||||
Univerzální položka menu navržená k použití v menu nebo navigačním seznamu.
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Použití">
|
||||
|
||||
```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="Vlastnosti">
|
||||
|
||||
|
||||
| Vlastnosti | Typ | Popis |
|
||||
| ---------------- | ------------------ | ----------------------------------------------------------------------------------------- |
|
||||
| Levá ikona | Ikonová komponenta | Volitelná levá ikona zobrazená před textem v položce menu |
|
||||
| akcent | řetězec | Určuje barvu akcentu položky menu. Možnosti zahrnují: `default`, `danger` a `placeholder` |
|
||||
| text | textový řetězec | Textový obsah položky menu |
|
||||
| ikonová tlačítka | pole | Seznam objektů představujících další ikony tlačítek spojené s položkou menu |
|
||||
| isTooltipOpen | booleovská hodnota | Řídí viditelnost tooltipu spojeného s položkou menu |
|
||||
| testId | řetězec | Atribut data-testid pro testovací účely |
|
||||
| onClick | funkce | Funkce zpětného volání spuštěná při kliknutí na položku menu |
|
||||
| className | řetězec | Volitelný název pro dodatečné stylování |
|
||||
|
||||
|
||||
|
||||
|
||||
</Tab>
|
||||
</Tabs>
|
||||
|
||||
## Varianty
|
||||
|
||||
Různé varianty komponenty položky menu zahrnují následující:
|
||||
|
||||
### Příkaz
|
||||
|
||||
Položka menu ve stylu příkazu v menu pro označení klávesových zkratek.
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Použití">
|
||||
|
||||
```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="Vlastnosti">
|
||||
|
||||
|
||||
| Vlastnosti | Typ | Popis |
|
||||
| ------------ | ------------------ | ------------------------------------------------------------ |
|
||||
| Levá ikona | Ikonová komponenta | Volitelná levá ikona zobrazená před textem v položce menu |
|
||||
| text | řetězec | Textový obsah položky menu |
|
||||
| firstHotKey | řetězec | První klávesová zkratka spojená s příkazem |
|
||||
| secondHotKey | řetězec | Druhá klávesová zkratka spojená s příkazem |
|
||||
| isSelected | booleovská hodnota | Určuje, zda je položka menu vybrána nebo zvýrazněna |
|
||||
| onClick | funkce | Funkce zpětného volání spuštěná při kliknutí na položku menu |
|
||||
| className | řetězec | Volitelný název pro dodatečné stylování |
|
||||
|
||||
|
||||
|
||||
</Tab>
|
||||
</Tabs>
|
||||
|
||||
### Přetahovatelný
|
||||
|
||||
Komponenta položky menu s možností přetahování, určená k použití v nabídce nebo seznamu, kde je možné položky přetahovat, a prostřednictvím tlačítek s ikonami lze provádět další akce.
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Použití">
|
||||
|
||||
```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="Vlastnosti">
|
||||
|
||||
|
||||
| Vlastnosti | Typ | Popis |
|
||||
| ---------------- | ------------------ | ---------------------------------------------------------------------------- |
|
||||
| Levá ikona | Ikonová komponenta | Volitelná levá ikona zobrazená před textem v položce menu |
|
||||
| akcent | řetězec | Barva akcentu položky menu. Může být `default`, `placeholder`, nebo `danger` |
|
||||
| ikonová tlačítka | pole | Seznam objektů představujících další ikony tlačítek spojené s položkou menu |
|
||||
| isTooltipOpen | booleovská hodnota | Řídí viditelnost tooltipu spojeného s položkou menu |
|
||||
| onClick | funkce | Funkce zpětného volání spuštěná při kliknutí na odkaz |
|
||||
| text | řetězec | Textový obsah položky menu |
|
||||
| isDragDisabled | booleovská hodnota | Určuje, zda je táhnutí zakázáno |
|
||||
| className | řetězec | Volitelný název pro dodatečné stylování |
|
||||
|
||||
|
||||
|
||||
|
||||
</Tab>
|
||||
</Tabs>
|
||||
|
||||
### Vícenásobný výběr
|
||||
|
||||
Poskytuje způsob, jak implementovat funkci vícenásobného výběru s přidruženým zaškrtávacím políčkem.
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Použití">
|
||||
|
||||
```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="Vlastnosti">
|
||||
|
||||
|
||||
| Vlastnosti | Typ | Popis |
|
||||
| ------------- | ------------------ | --------------------------------------------------------------------- |
|
||||
| Levá ikona | Ikonová komponenta | Volitelná levá ikona zobrazená před textem v položce menu |
|
||||
| text | řetězec | Textový obsah položky menu |
|
||||
| vybráno | booleovská hodnota | Určuje, zda je položka menu vybrána (zaškrtnuto) |
|
||||
| poZměněVýběru | funkce | Funkce zpětného volání spuštěná při změně stavu zaškrtávacího políčka |
|
||||
| className | řetězec | Volitelný název pro dodatečné stylování |
|
||||
|
||||
|
||||
|
||||
|
||||
</Tab>
|
||||
</Tabs>
|
||||
|
||||
### Vícenásobný výběr s avatarem
|
||||
|
||||
Položka menu pro vícenásobný výběr s avatarem, zaškrtávacím políčkem pro výběr a textovým obsahem.
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Použití">
|
||||
|
||||
```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="Vlastnosti">
|
||||
|
||||
|
||||
| Vlastnosti | Typ | Popis |
|
||||
| ------------- | ------------------ | --------------------------------------------------------------------- |
|
||||
| avatar | `ReactNode` | Avatar nebo ikona, která má být zobrazena na levé straně položky menu |
|
||||
| text | řetězec | Textový obsah položky menu |
|
||||
| vybráno | booleovská hodnota | Určuje, zda je položka menu vybrána (zaškrtnuto) |
|
||||
| poZměněVýběru | funkce | Funkce zpětného volání spuštěná při změně stavu zaškrtávacího políčka |
|
||||
| className | řetězec | Volitelný název pro dodatečné stylování |
|
||||
|
||||
|
||||
|
||||
|
||||
</Tab>
|
||||
</Tabs>
|
||||
|
||||
### Navigovat
|
||||
|
||||
Položka menu s volitelnou levou ikonou, textovým obsahem a ikonou šipky vpravo.
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Použití">
|
||||
|
||||
```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="Vlastnosti">
|
||||
|
||||
|
||||
| Vlastnosti | Typ | Popis |
|
||||
| ---------- | --------------- | ------------------------------------------------------------ |
|
||||
| LeváIkona | KomponentaIkony | Volitelná levá ikona zobrazená před textem v položce menu |
|
||||
| text | řetězec | Textový obsah položky menu |
|
||||
| poKliknutí | funkce | Funkce zpětného volání spuštěná při kliknutí na položku menu |
|
||||
| className | řetězec | Volitelný název pro dodatečné stylování |
|
||||
|
||||
|
||||
|
||||
|
||||
</Tab>
|
||||
</Tabs>
|
||||
|
||||
### Vybrat
|
||||
|
||||
Výběrová položka menu, s volitelným levým obsahem (ikonou a textem) a indikátorem (ikonou zaškrtnutí) pro vybraný stav.
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Použití">
|
||||
|
||||
```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="Vlastnosti">
|
||||
|
||||
|
||||
| Vlastnosti | Typ | Popis |
|
||||
| ---------- | ------------------ | ------------------------------------------------------------ |
|
||||
| LeváIkona | KomponentaIkony | Volitelná levá ikona zobrazená před textem v položce menu |
|
||||
| text | řetězec | Textový obsah položky menu |
|
||||
| vybráno | booleovská hodnota | Určuje, zda je položka menu vybrána (zaškrtnuto) |
|
||||
| neaktivní | booleovská hodnota | Určuje, zda je položka menu neaktivní |
|
||||
| zvýrazněno | booleovská hodnota | Určuje, zda je položka menu aktuálně přejeta kurzorem |
|
||||
| poKliknutí | funkce | Funkce zpětného volání spuštěná při kliknutí na položku menu |
|
||||
| className | řetězec | Volitelný název pro dodatečné stylování |
|
||||
|
||||
|
||||
|
||||
|
||||
</Tab>
|
||||
</Tabs>
|
||||
|
||||
### Vybrat Avatar
|
||||
|
||||
Výběrová položka menu s avatarem, s volitelným levým obsahem (avatar a text) a indikátorem (ikonou zaškrtnutí) pro vybraný stav.
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Použití">
|
||||
|
||||
```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="Vlastnosti">
|
||||
|
||||
|
||||
| Vlastnosti | Typ | Popis |
|
||||
| ---------- | ------------------ | ----------------------------------------------------------------- |
|
||||
| avatar | `ReactNode` | Avatar nebo ikona, která se zobrazuje na levé straně položky menu |
|
||||
| text | řetězec | Textový obsah položky menu |
|
||||
| vybráno | booleovská hodnota | Označuje, zda je položka menu vybrána (zaškrtnuta) |
|
||||
| neaktivní | booleovská hodnota | Označuje, zda je položka menu deaktivována |
|
||||
| zvýrazněno | booleovská hodnota | Označuje, zda je položka menu aktuálně zvýrazněna |
|
||||
| testId | řetězec | Atribut data-testid pro testovací účely |
|
||||
| onClick | funkce | Funkce zpětného volání spuštěná při kliknutí na položku menu |
|
||||
| className | řetězec | Volitelný název pro dodatečné stylování |
|
||||
|
||||
|
||||
|
||||
|
||||
</Tab>
|
||||
</Tabs>
|
||||
|
||||
### Vybrat barvu
|
||||
|
||||
Volitelná položka menu s ukázkou barvy pro situace, kdy chcete, aby uživatelé zvolili barvu z menu.
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Použití">
|
||||
|
||||
```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="Vlastnosti">
|
||||
|
||||
|
||||
| Vlastnosti | Typ | Popis |
|
||||
| ---------- | ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| barva | řetězec | Barva motivu, která se zobrazí jako ukázka v položce menu. Možnosti zahrnují: `green`, `turquoise`, `sky`, `blue`, `purple`, `pink`, `red`, `orange`, `yellow` a `gray` |
|
||||
| vybráno | booleovská hodnota | Označuje, zda je položka menu vybrána (zaškrtnuta) |
|
||||
| neaktivní | booleovská hodnota | Označuje, zda je položka menu deaktivována |
|
||||
| zvýrazněno | booleovská hodnota | Označuje, zda je položka menu aktuálně zvýrazněna |
|
||||
| varianta | řetězec | Varianta ukázky barvy. Může být buďto `default` nebo `pipeline` |
|
||||
| onClick | funkce | Funkce zpětného volání spuštěná při kliknutí na položku menu |
|
||||
| className | řetězec | Volitelný název pro dodatečné stylování |
|
||||
|
||||
|
||||
|
||||
|
||||
</Tab>
|
||||
</Tabs>
|
||||
|
||||
### Přepnout
|
||||
|
||||
Položka menu s přidruženým přepínačem k umožnění nebo zakázání určité funkce
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Použití">
|
||||
|
||||
```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="Vlastnosti">
|
||||
|
||||
|
||||
| Vlastnosti | Typ | Popis |
|
||||
| ---------------- | ------------------ | ------------------------------------------------------------ |
|
||||
| Levá ikona | Ikonová komponenta | Volitelná levá ikona zobrazená před textem v položce menu |
|
||||
| text | řetězec | Textový obsah položky menu |
|
||||
| přepnuto | booleovská hodnota | Označuje, zda je přepínač v "zapnutém" nebo "vypnutém" stavu |
|
||||
| naZměnuPřepnutí | funkce | Funkce zpětného volání spuštěná při změně stavu přepínače |
|
||||
| velikostPřepnutí | řetězec | Velikost přepínače. Může být buď \ |
|
||||
| className | řetězec | Volitelný název pro dodatečné stylování |
|
||||
|
||||
|
||||
|
||||
|
||||
</Tab>
|
||||
</Tabs>
|
||||
@@ -1,52 +0,0 @@
|
||||
---
|
||||
title: Navigační panel
|
||||
icon: bars
|
||||
---
|
||||
|
||||
Zobrazuje navigační panel, který obsahuje více komponent `NavigationBarItem`.
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Použití">
|
||||
|
||||
```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="Vlastnosti">
|
||||
|
||||
|
||||
| Vlastnosti | Typ | Popis |
|
||||
| -------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| activeItemName | ř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>
|
||||
@@ -1,41 +0,0 @@
|
||||
---
|
||||
title: Pruh kroků
|
||||
---
|
||||
|
||||
<Frame>
|
||||
<img src="/images/user-guide/api/api.png" alt="Hlavička" />
|
||||
</Frame>
|
||||
|
||||
Zobrazuje postup přes sekvenci číslovaných kroků zvýrazněním aktuálního kroku. Vykreslí kontejner s kroky, z nichž každý je reprezentován komponentou `Step`.
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Použití">
|
||||
|
||||
```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="Vlastnosti">
|
||||
|
||||
|
||||
| Vlastnosti | Typ | Popis |
|
||||
| ---------- | ----- | ------------------------------------------------------------------------------------ |
|
||||
| activeStep | číslo | Index aktuálně aktivního kroku. To určuje, který krok by měl být vizuálně zvýrazněn. |
|
||||
|
||||
|
||||
|
||||
|
||||
</Tab>
|
||||
</Tabs>
|
||||
@@ -1,78 +0,0 @@
|
||||
---
|
||||
title: Zpětná vazba
|
||||
---
|
||||
|
||||
Udává průběh nebo odpočítávání a pohybuje se zprava doleva.
|
||||
|
||||
<Tabs>
|
||||
|
||||
<Tab title="Použití">
|
||||
|
||||
```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="Vlastnosti">
|
||||
|
||||
|
||||
| Vlastnosti | Typ | Popis | Výchozí |
|
||||
| ---------- | ------------------ | ------------------------------------------------------------------------------------ | --------- |
|
||||
| trvání | číslo | Celková doba trvání animace indikačního pruhu v milisekundách | 3 |
|
||||
| zpoždění | číslo | Zpoždění spuštění animace indikačního pruhu v milisekundách | 0 |
|
||||
| easing | textový řetězec | Easingová funkce pro animaci indikačního pruhu | easeInOut |
|
||||
| barHeight | číslo | Výška pruhu v pixelech | 24 |
|
||||
| barvaPruhu | textový řetězec | Barva pruhu | gray80 |
|
||||
| autoStart | booleovská hodnota | Pokud `true`, animace indikačního pruhu se automaticky spustí při načtení komponenty | `pravda` |
|
||||
|
||||
|
||||
|
||||
</Tab>
|
||||
</Tabs>
|
||||
|
||||
## Kruhový indikátor průběhu
|
||||
|
||||
Udává průběh úkolu, často používané na načítacích obrazovkách nebo v oblastech, kde chcete uživateli sdělovat probíhající procesy.
|
||||
|
||||
<Tabs>
|
||||
|
||||
<Tab title="Použití">
|
||||
|
||||
```jsx
|
||||
import { CircularProgressBar } from "@/ui/feedback/progress-bar/components/CircularProgressBar";
|
||||
|
||||
export const MyComponent = () => {
|
||||
return <CircularProgressBar size={80} barWidth={6} barColor="green" />;
|
||||
};
|
||||
```
|
||||
|
||||
</Tab>
|
||||
|
||||
<Tab title="Vlastnosti">
|
||||
|
||||
|
||||
| Vlastnosti | Typ | Popis | Výchozí |
|
||||
| ---------- | --------------- | ------------------------------------ | ------------- |
|
||||
| velikost | číslo | Velikost kruhového indikačního pruhu | 50 |
|
||||
| barWidth | číslo | Šířka čáry indikačního pruhu | 5 |
|
||||
| barvaPruhu | textový řetězec | Barva indikačního pruhu | současnáBarva |
|
||||
|
||||
|
||||
|
||||
</Tab>
|
||||
|
||||
</Tabs>
|
||||
Reference in New Issue
Block a user