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
@@ -30,13 +30,6 @@ files: [
|
|||||||
"exclude_code_blocks": true,
|
"exclude_code_blocks": true,
|
||||||
"excluded_front_matter_elements": ["icon"],
|
"excluded_front_matter_elements": ["icon"],
|
||||||
},
|
},
|
||||||
{
|
|
||||||
"source": "packages/twenty-docs/twenty-ui/**/*.mdx",
|
|
||||||
"translation": "packages/twenty-docs/l/%two_letters_code%/twenty-ui/**/%original_file_name%",
|
|
||||||
"type": "mdx_v2",
|
|
||||||
"exclude_code_blocks": true,
|
|
||||||
"excluded_front_matter_elements": ["icon"],
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
#
|
#
|
||||||
# Navigation labels template - translated into per-locale navigation.json
|
# Navigation labels template - translated into per-locale navigation.json
|
||||||
|
|||||||
@@ -23,7 +23,7 @@ Contributing code to Twenty starts with a pull request (PR).
|
|||||||
|
|
||||||
1. Check [existing issues](https://github.com/twentyhq/twenty/issues) for related work
|
1. Check [existing issues](https://github.com/twentyhq/twenty/issues) for related work
|
||||||
2. For new features, open an issue first to discuss
|
2. For new features, open an issue first to discuss
|
||||||
3. Review our [Code of Conduct](https://github.com/twentyhq/twenty/blob/main/CODE_OF_CONDUCT.md)
|
3. Review our [Code of Conduct](https://github.com/twentyhq/twenty/blob/main/.github/CODE_OF_CONDUCT.md)
|
||||||
|
|
||||||
### Fork and Clone
|
### Fork and Clone
|
||||||
|
|
||||||
|
|||||||
@@ -24,7 +24,7 @@ Twenty is open-source and welcomes contributions from the community. Whether you
|
|||||||
<Card title="Bug Reports & Requests" icon="bug" href="/developers/contribute/capabilities/bug-and-requests">
|
<Card title="Bug Reports & Requests" icon="bug" href="/developers/contribute/capabilities/bug-and-requests">
|
||||||
Report issues or request features
|
Report issues or request features
|
||||||
</Card>
|
</Card>
|
||||||
<Card title="Frontend Development" icon="browser" href="/developers/contribute/capabilities/frontend-development">
|
<Card title="Frontend Development" icon="browser" href="/developers/contribute/capabilities/frontend-development/folder-architecture-front">
|
||||||
Contribute to the UI
|
Contribute to the UI
|
||||||
</Card>
|
</Card>
|
||||||
</CardGroup>
|
</CardGroup>
|
||||||
|
|||||||
@@ -209,4 +209,4 @@ Notes:
|
|||||||
- Start from the scaffolded role, then progressively restrict it — the default grants broad read access, which is rarely what you want in production.
|
- Start from the scaffolded role, then progressively restrict it — the default grants broad read access, which is rarely what you want in production.
|
||||||
- Replace `objectPermissions` and `fieldPermissions` with the exact objects and fields your functions actually need.
|
- Replace `objectPermissions` and `fieldPermissions` with the exact objects and fields your functions actually need.
|
||||||
- `permissionFlagUniversalIdentifiers` control access to platform-level capabilities. Keep them minimal.
|
- `permissionFlagUniversalIdentifiers` control access to platform-level capabilities. Keep them minimal.
|
||||||
- See a working example: [`hello-world/src/roles/function-role.ts`](https://github.com/twentyhq/twenty/blob/main/packages/twenty-apps/hello-world/src/roles/function-role.ts).
|
- See a working example: [`examples/hello-world/src/roles/default-role.ts`](https://github.com/twentyhq/twenty/blob/main/packages/twenty-apps/examples/hello-world/src/roles/default-role.ts).
|
||||||
|
|||||||
@@ -49,11 +49,7 @@ yarn twenty app:publish --private
|
|||||||
|
|
||||||
### Sharing a deployed app
|
### Sharing a deployed app
|
||||||
|
|
||||||
<Warning>
|
Tarball apps are not listed in the public marketplace, so other workspaces on the same server won't discover them by browsing. To share a deployed app:
|
||||||
Sharing private (tarball) apps across workspaces is an **Enterprise** feature. The **Distribution** tab will show an upgrade prompt instead of the share controls until your workspace has a valid Enterprise key. See [Settings > Admin Panel > Enterprise](/settings/admin-panel#enterprise) to activate it.
|
|
||||||
</Warning>
|
|
||||||
|
|
||||||
Tarball apps are not listed in the public marketplace, so other workspaces on the same server won't discover them by browsing. Once your workspace is on the Enterprise plan, you can share a deployed app like this:
|
|
||||||
|
|
||||||
1. Go to **Settings > Applications > Registrations** and open your app
|
1. Go to **Settings > Applications > Registrations** and open your app
|
||||||
2. In the **Distribution** tab, click **Copy share link**
|
2. In the **Distribution** tab, click **Copy share link**
|
||||||
|
|||||||
@@ -25,7 +25,7 @@ Twenty is designed to be extensible. Use our APIs, webhooks, and app framework t
|
|||||||
<Card title="Webhooks" icon="bell" href="/developers/extend/webhooks">
|
<Card title="Webhooks" icon="bell" href="/developers/extend/webhooks">
|
||||||
Get notified of events in real-time
|
Get notified of events in real-time
|
||||||
</Card>
|
</Card>
|
||||||
<Card title="Apps" icon="puzzle-piece" href="/developers/extend/apps/getting-started">
|
<Card title="Apps" icon="puzzle-piece" href="/developers/extend/apps/getting-started/quick-start">
|
||||||
Build customizations as code
|
Build customizations as code
|
||||||
</Card>
|
</Card>
|
||||||
</CardGroup>
|
</CardGroup>
|
||||||
|
|||||||
@@ -13,7 +13,7 @@ Twenty implements OAuth 2.0 with authorization code + PKCE for user-facing apps
|
|||||||
| Internal scripts, automation | [API Key](/developers/extend/api#authentication) |
|
| Internal scripts, automation | [API Key](/developers/extend/api#authentication) |
|
||||||
| External app acting on behalf of a user | **OAuth — Authorization Code** |
|
| External app acting on behalf of a user | **OAuth — Authorization Code** |
|
||||||
| Server-to-server, no user context | **OAuth — Client Credentials** |
|
| Server-to-server, no user context | **OAuth — Client Credentials** |
|
||||||
| Twenty App with UI extensions | [Apps](/developers/extend/apps/getting-started) (OAuth is handled automatically) |
|
| Twenty App with UI extensions | [Apps](/developers/extend/apps/getting-started/quick-start) (OAuth is handled automatically) |
|
||||||
|
|
||||||
## Register a Client
|
## Register a Client
|
||||||
|
|
||||||
|
|||||||
@@ -6,7 +6,7 @@ description: Build apps, use the API, self-host, or contribute to the codebase.
|
|||||||
import { CardTitle } from "/snippets/card-title.mdx"
|
import { CardTitle } from "/snippets/card-title.mdx"
|
||||||
|
|
||||||
<CardGroup cols={3}>
|
<CardGroup cols={3}>
|
||||||
<Card href="/developers/extend/apps/getting-started" img="/images/user-guide/halftone/dev-apps.png">
|
<Card href="/developers/extend/apps/getting-started/quick-start" img="/images/user-guide/halftone/dev-apps.png">
|
||||||
<CardTitle>Apps</CardTitle>
|
<CardTitle>Apps</CardTitle>
|
||||||
Extend Twenty with custom objects, server-side logic, UI components, and AI agents — all as TypeScript packages.
|
Extend Twenty with custom objects, server-side logic, UI components, and AI agents — all as TypeScript packages.
|
||||||
</Card>
|
</Card>
|
||||||
|
|||||||
@@ -263,9 +263,9 @@ yarn command:prod cron:workflow:automated-cron-trigger
|
|||||||
2. Find the **Email** section
|
2. Find the **Email** section
|
||||||
3. Configure your SMTP settings:
|
3. Configure your SMTP settings:
|
||||||
|
|
||||||
<ArticleTabs label1="Gmail" label2="Office365" label3="Smtp4dev">
|
<Tabs>
|
||||||
|
|
||||||
<ArticleTab>
|
<Tab title="Gmail">
|
||||||
|
|
||||||
You will need to provision an [App Password](https://support.google.com/accounts/answer/185833).
|
You will need to provision an [App Password](https://support.google.com/accounts/answer/185833).
|
||||||
- EMAIL_DRIVER=smtp
|
- EMAIL_DRIVER=smtp
|
||||||
@@ -274,9 +274,9 @@ yarn command:prod cron:workflow:automated-cron-trigger
|
|||||||
- EMAIL_SMTP_USER=gmail_email_address
|
- EMAIL_SMTP_USER=gmail_email_address
|
||||||
- EMAIL_SMTP_PASSWORD='gmail_app_password'
|
- EMAIL_SMTP_PASSWORD='gmail_app_password'
|
||||||
|
|
||||||
</ArticleTab>
|
</Tab>
|
||||||
|
|
||||||
<ArticleTab>
|
<Tab title="Office365">
|
||||||
|
|
||||||
Keep in mind that if you have 2FA enabled, you will need to provision an [App Password](https://support.microsoft.com/en-us/account-billing/manage-app-passwords-for-two-step-verification-d6dc8c6d-4bf7-4851-ad95-6d07799387e9).
|
Keep in mind that if you have 2FA enabled, you will need to provision an [App Password](https://support.microsoft.com/en-us/account-billing/manage-app-passwords-for-two-step-verification-d6dc8c6d-4bf7-4851-ad95-6d07799387e9).
|
||||||
- EMAIL_DRIVER=smtp
|
- EMAIL_DRIVER=smtp
|
||||||
@@ -285,9 +285,9 @@ yarn command:prod cron:workflow:automated-cron-trigger
|
|||||||
- EMAIL_SMTP_USER=office365_email_address
|
- EMAIL_SMTP_USER=office365_email_address
|
||||||
- EMAIL_SMTP_PASSWORD='office365_password'
|
- EMAIL_SMTP_PASSWORD='office365_password'
|
||||||
|
|
||||||
</ArticleTab>
|
</Tab>
|
||||||
|
|
||||||
<ArticleTab>
|
<Tab title="smtp4dev">
|
||||||
|
|
||||||
**smtp4dev** is a fake SMTP email server for development and testing.
|
**smtp4dev** is a fake SMTP email server for development and testing.
|
||||||
- Run the smtp4dev image: `docker run --rm -it -p 8090:80 -p 2525:25 rnwood/smtp4dev`
|
- Run the smtp4dev image: `docker run --rm -it -p 8090:80 -p 2525:25 rnwood/smtp4dev`
|
||||||
@@ -297,9 +297,9 @@ yarn command:prod cron:workflow:automated-cron-trigger
|
|||||||
- EMAIL_SMTP_HOST=localhost
|
- EMAIL_SMTP_HOST=localhost
|
||||||
- EMAIL_SMTP_PORT=2525
|
- EMAIL_SMTP_PORT=2525
|
||||||
|
|
||||||
</ArticleTab>
|
</Tab>
|
||||||
|
|
||||||
</ArticleTabs>
|
</Tabs>
|
||||||
|
|
||||||
<Warning>
|
<Warning>
|
||||||
**Environment-only mode:** If you set `IS_CONFIG_VARIABLES_IN_DB_ENABLED=false`, add these variables to your `.env` file instead.
|
**Environment-only mode:** If you set `IS_CONFIG_VARIABLES_IN_DB_ENABLED=false`, add these variables to your `.env` file instead.
|
||||||
|
|||||||
@@ -6610,7 +6610,7 @@
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
"source": "/developers/extend/capabilities/apps",
|
"source": "/developers/extend/capabilities/apps",
|
||||||
"destination": "/developers/extend/apps/getting-started"
|
"destination": "/developers/extend/apps/getting-started/quick-start"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"source": "/developers/extend/mcp",
|
"source": "/developers/extend/mcp",
|
||||||
@@ -7058,7 +7058,7 @@
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
"source": "/user-guide/settings/releases-settings",
|
"source": "/user-guide/settings/releases-settings",
|
||||||
"destination": "/user-guide/settings/capabilities/updates-settings"
|
"destination": "/user-guide/settings/capabilities/community-settings"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"source": "/user-guide/settings/settings-faq",
|
"source": "/user-guide/settings/settings-faq",
|
||||||
|
|||||||
@@ -37,6 +37,6 @@ Everything is detected via AST analysis at build time — no config files, no re
|
|||||||
|
|
||||||
You write your app as a TypeScript project on your machine. The CLI watches your source files and live-syncs them to a running Twenty server — edit a file, see the change in the UI within a second. The typed API client regenerates automatically when the schema changes. When you're ready, `yarn twenty app:publish --private` pushes to a production server, or `yarn twenty app:publish` lists your app on npm and the Twenty marketplace.
|
You write your app as a TypeScript project on your machine. The CLI watches your source files and live-syncs them to a running Twenty server — edit a file, see the change in the UI within a second. The typed API client regenerates automatically when the schema changes. When you're ready, `yarn twenty app:publish --private` pushes to a production server, or `yarn twenty app:publish` lists your app on npm and the Twenty marketplace.
|
||||||
|
|
||||||
<Card title="Build your first app" icon="arrow-right" href="/developers/extend/apps/getting-started">
|
<Card title="Build your first app" icon="arrow-right" href="/developers/extend/apps/getting-started/quick-start">
|
||||||
Three-phase walkthrough — scaffold, run a local server, sync your changes.
|
Three-phase walkthrough — scaffold, run a local server, sync your changes.
|
||||||
</Card>
|
</Card>
|
||||||
|
|||||||
@@ -1,94 +0,0 @@
|
|||||||
---
|
|
||||||
title: تلميح التطبيق
|
|
||||||
icon: message
|
|
||||||
---
|
|
||||||
|
|
||||||
<Frame>
|
|
||||||
<img src="/images/user-guide/tips/light-bulb.png" alt="رأس الصفحة" />
|
|
||||||
</Frame>
|
|
||||||
|
|
||||||
رسالة مختصرة تعرض معلومات إضافية عند تفاعل المستخدم مع عنصر.
|
|
||||||
|
|
||||||
<Tabs>
|
|
||||||
<Tab title="استخدام">
|
|
||||||
|
|
||||||
```jsx
|
|
||||||
import { AppTooltip } from "@/ui/display/tooltip/AppTooltip";
|
|
||||||
|
|
||||||
export const MyComponent = () => {
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<p id="hoverText" style={{ display: "inline-block" }}>
|
|
||||||
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="المحددات">
|
|
||||||
|
|
||||||
|
|
||||||
| المحددات | النوع | الوصف |
|
|
||||||
| ------------------ | ---------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
|
||||||
| اسم الفئة | نص | فئة CSS اختيارية للتنسيق الإضافي |
|
|
||||||
| اختيار الربط | محدد CSS | المحدِّد لمرساة التلميح (العنصر الذي يُفعّل التلميح) |
|
|
||||||
| المحتوى | نص | المحتوى الذي تريد عرضه داخل التلميح |
|
|
||||||
| تأخير الإخفاء | رقم | التأخير بالثواني قبل إخفاء التلميح بعد مغادرة المؤشر للمرساة |
|
|
||||||
| الإزاحة | رقم | الإزاحة بالبكسل لتحديد موضع التلميح |
|
|
||||||
| بدون سهم | قيمة منطقية | إذا كانت القيمة `صحيح`, سيتم إخفاء السهم في المربط التنبيهي |
|
|
||||||
| مفتوح | قيمة منطقية | إذا كانت القيمة `صحيح`, يكون المربط التنبيهي مفتوحًا افتراضيًا |
|
|
||||||
| المكان | نص `PlacesType` من `react-tooltip` | يحدد موضع المربط التنبيهي. تتضمن القيم `bottom`، `left`، `right`، `top`، `top-start`، `top-end`، `right-start`، `right-end`، `bottom-start`، `bottom-end`، `left-start`، و`left-end` |
|
|
||||||
| استراتيجية الوضعية | نص `PositionStrategy` من `react-tooltip` | استراتيجية وضعية للمربط التنبيهي. له قيمتان: `absolute` و`fixed` |
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</Tab>
|
|
||||||
|
|
||||||
</Tabs>
|
|
||||||
|
|
||||||
## نص متجاوز مع تلميح
|
|
||||||
|
|
||||||
يعالج النص الزائد ويعرض مربط تنبيهي عند فيضان النص.
|
|
||||||
|
|
||||||
<Tabs>
|
|
||||||
<Tab title="استخدام">
|
|
||||||
|
|
||||||
```jsx
|
|
||||||
import { OverflowingTextWithTooltip } from 'twenty-ui/display';
|
|
||||||
|
|
||||||
export const MyComponent = () => {
|
|
||||||
const crmTaskDescription =
|
|
||||||
'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="الخصائص">
|
|
||||||
|
|
||||||
|
|
||||||
| الخصائص | النوع | الوصف |
|
|
||||||
| ------- | ------ | --------------------------------------------- |
|
|
||||||
| نص | string | المحتوى الذي تريد عرضه في منطقة النص المتجاوز |
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</Tab>
|
|
||||||
|
|
||||||
</Tabs>
|
|
||||||
@@ -1,73 +0,0 @@
|
|||||||
---
|
|
||||||
title: علامة صحيح
|
|
||||||
icon: circle-check
|
|
||||||
---
|
|
||||||
|
|
||||||
<Frame>
|
|
||||||
<img src="/images/user-guide/tasks/tasks_header.png" alt="رأس الصفحة" />
|
|
||||||
</Frame>
|
|
||||||
|
|
||||||
يمثل إجراءً ناجحًا أو مكتملًا.
|
|
||||||
|
|
||||||
<Tabs>
|
|
||||||
<Tab title="استخدام">
|
|
||||||
|
|
||||||
```jsx
|
|
||||||
import { Checkmark } from 'twenty-ui/display';
|
|
||||||
|
|
||||||
export const MyComponent = () => {
|
|
||||||
return <Checkmark />;
|
|
||||||
};
|
|
||||||
```
|
|
||||||
|
|
||||||
|
|
||||||
</Tab>
|
|
||||||
|
|
||||||
<Tab title="المحددات">
|
|
||||||
|
|
||||||
يمتد `React.ComponentPropsWithoutRef<'div'>` و يقبل جميع خصائص عنصر `div` العادي.
|
|
||||||
|
|
||||||
</Tab>
|
|
||||||
|
|
||||||
</Tabs>
|
|
||||||
|
|
||||||
## علامة صحيح متحركة
|
|
||||||
|
|
||||||
يمثل رمز علامة صحيح مع ميزة الإضافة للحركة.
|
|
||||||
|
|
||||||
<Tabs>
|
|
||||||
|
|
||||||
<Tab title="استخدام">
|
|
||||||
|
|
||||||
```jsx
|
|
||||||
import { AnimatedCheckmark } from 'twenty-ui/display';
|
|
||||||
|
|
||||||
export const MyComponent = () => {
|
|
||||||
return (
|
|
||||||
<AnimatedCheckmark
|
|
||||||
isAnimating={true}
|
|
||||||
color="green"
|
|
||||||
duration={0.5}
|
|
||||||
size={30}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
```
|
|
||||||
|
|
||||||
</Tab>
|
|
||||||
|
|
||||||
<Tab title="الخصائص">
|
|
||||||
|
|
||||||
|
|
||||||
| الخصائص | النوع | الوصف | الإعداد الافتراضي |
|
|
||||||
| ----------- | ----------- | ------------------------------------- | ----------------- |
|
|
||||||
| isAnimating | قيمة منطقية | يتحكم فيما إذا كانت علامة صحيح متحركة | خاطئ |
|
|
||||||
| اللون | string | لون علامة الاختيار | |
|
|
||||||
| المدة | رقم | مدة الحركة بالثواني | 0.5 ثانية |
|
|
||||||
| الحجم | رقم | حجم علامة الاختيار | 28 بكسل |
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</Tab>
|
|
||||||
|
|
||||||
</Tabs>
|
|
||||||
@@ -1,153 +0,0 @@
|
|||||||
---
|
|
||||||
title: رقاقة
|
|
||||||
---
|
|
||||||
|
|
||||||
<Frame>
|
|
||||||
<img src="/images/user-guide/github/github-header.png" alt="رأس الصفحة" />
|
|
||||||
</Frame>
|
|
||||||
|
|
||||||
عنصر مرئي يمكن استخدامه كحاوية قابلة للنقر أو غير قابلة للنقر، مع علامة وعناصر اختيارية يسار ويمين، وخيارات تصميم متنوعة لعرض العلامات والبطاقات.
|
|
||||||
|
|
||||||
<Tabs>
|
|
||||||
|
|
||||||
<Tab title="استخدام">
|
|
||||||
|
|
||||||
```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="المحددات">
|
|
||||||
|
|
||||||
|
|
||||||
| الخصائص | النوع | الوصف |
|
|
||||||
| ------------------ | ----------------------- | ---------------------------------------------------------------------- |
|
|
||||||
| ربطوكي | نص | الرابط إلى الكيان |
|
|
||||||
| معرف الكيان | نص | المعرف الفريد للكيان |
|
|
||||||
| الاسم | نص | اسم الكيان |
|
|
||||||
| رابط الصورة | نص | ص صورة،" |
|
|
||||||
| نوع الصورة الرمزية | نوع الصورة الرمزية | نوع الصورة الرمزية التي تريد عرضها. لديه خياران: `مستدير` و `مربع` |
|
|
||||||
| التنوع | تعداد EntityChipVariant | تنوع الرقاقة الكيانية التي ترغب في عرضها. لديه خياران: `عادي` و `شفاف` |
|
|
||||||
| الأيقونة اليسرى | مكون رمز | مكون React يمثل رمزًا. يظهر على الجانب الأيسر من الرقاقة |
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</Tab>
|
|
||||||
</Tabs>
|
|
||||||
|
|
||||||
## الأمثلة
|
|
||||||
|
|
||||||
### رقاقة شفافة معطلة
|
|
||||||
|
|
||||||
```jsx
|
|
||||||
import { Chip } from 'twenty-ui/components';
|
|
||||||
|
|
||||||
export const MyComponent = () => {
|
|
||||||
return (
|
|
||||||
<Chip
|
|
||||||
size="large"
|
|
||||||
label="Transparent Disabled Chip"
|
|
||||||
clickable={false}
|
|
||||||
variant="rounded"
|
|
||||||
accent="text-secondary"
|
|
||||||
leftComponent
|
|
||||||
rightComponent
|
|
||||||
maxWidth="200px"
|
|
||||||
className
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
```
|
|
||||||
|
|
||||||
<br />
|
|
||||||
|
|
||||||
### رقاقة معطلة مع تلميح
|
|
||||||
|
|
||||||
```jsx
|
|
||||||
import { Chip } from "twenty-ui/components";
|
|
||||||
|
|
||||||
export const MyComponent = () => {
|
|
||||||
return (
|
|
||||||
<Chip
|
|
||||||
size="large"
|
|
||||||
label="Disabled chip that triggers a tooltip when overflowing."
|
|
||||||
clickable={false}
|
|
||||||
variant="regular"
|
|
||||||
accent="text-primary"
|
|
||||||
leftComponent
|
|
||||||
rightComponent
|
|
||||||
maxWidth="200px"
|
|
||||||
className
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
```
|
|
||||||
|
|
||||||
## رقاقة كيان
|
|
||||||
|
|
||||||
عنصر يشبه الرقاقة لعرض معلومات عن كيان.
|
|
||||||
|
|
||||||
<Tabs>
|
|
||||||
|
|
||||||
<Tab title="الاستخدام">
|
|
||||||
|
|
||||||
```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="الخصائص">
|
|
||||||
|
|
||||||
|
|
||||||
| الخصائص | النوع | الوصف |
|
|
||||||
| ------------------ | ----------------------- | ---------------------------------------------------------------------- |
|
|
||||||
| ربطوكي | نص | الرابط إلى الكيان |
|
|
||||||
| معرف الكيان | نص | المعرف الفريد للكيان |
|
|
||||||
| الاسم | نص | اسم الكيان |
|
|
||||||
| رابط الصورة | نص | ص صورة،" |
|
|
||||||
| نوع الصورة الرمزية | نوع الصورة الرمزية | نوع الصورة الرمزية التي تريد عرضها. لديه خياران: `مستدير` و `مربع` |
|
|
||||||
| التنوع | تعداد EntityChipVariant | تنوع الرقاقة الكيانية التي ترغب في عرضها. لديه خياران: `عادي` و `شفاف` |
|
|
||||||
| الأيقونة اليسرى | مكون رمز | مكون React يمثل رمزًا. يظهر على الجانب الأيسر من الرقاقة |
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</Tab>
|
|
||||||
</Tabs>
|
|
||||||
@@ -1,91 +0,0 @@
|
|||||||
---
|
|
||||||
title: الأيقونات
|
|
||||||
icon: icons
|
|
||||||
---
|
|
||||||
|
|
||||||
<Frame>
|
|
||||||
<img src="/images/user-guide/objects/objects.png" alt="رأس الصفحة" />
|
|
||||||
</Frame>
|
|
||||||
|
|
||||||
قائمة بالأيقونات المستخدمة في جميع أنحاء تطبيقنا.
|
|
||||||
|
|
||||||
## أيقونات Tabler
|
|
||||||
|
|
||||||
نستخدم أيقونات Tabler لـ React في جميع أنحاء التطبيق.
|
|
||||||
|
|
||||||
<Tabs>
|
|
||||||
|
|
||||||
<Tab title="التثبيت">
|
|
||||||
<br />
|
|
||||||
|
|
||||||
```
|
|
||||||
yarn add @tabler/icons-react
|
|
||||||
```
|
|
||||||
|
|
||||||
</Tab>
|
|
||||||
|
|
||||||
<Tab title="الإزاحة">
|
|
||||||
|
|
||||||
يمكنك استيراد كل أيقونة كمكون. إليك مثال:
|
|
||||||
<br />
|
|
||||||
|
|
||||||
```jsx
|
|
||||||
import { IconArrowLeft } from "@tabler/icons-react";
|
|
||||||
|
|
||||||
export const MyComponent = () => {
|
|
||||||
return <IconArrowLeft color="red" size={48} />;
|
|
||||||
};
|
|
||||||
```
|
|
||||||
|
|
||||||
</Tab>
|
|
||||||
|
|
||||||
<Tab title="الإزاحة">
|
|
||||||
|
|
||||||
|
|
||||||
| الإزاحة | النوع | الوصف | الإعداد الافتراضي |
|
|
||||||
| ----------- | ------ | -------------------------------- | ----------------- |
|
|
||||||
| الحجم | رقم | ارتفاع وعرض الأيقونة بالبكسل | 24 |
|
|
||||||
| اللون | string | لون الأيقونات | اللون الحالي |
|
|
||||||
| الخط العريض | رقم | عرض الخط العريض للأيقونة بالبكسل | 2 |
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</Tab>
|
|
||||||
|
|
||||||
</Tabs>
|
|
||||||
|
|
||||||
## أيقونات مخصصة
|
|
||||||
|
|
||||||
بالإضافة إلى أيقونات Tabler، يستخدم التطبيق أيضًا بعض الأيقونات المخصصة.
|
|
||||||
|
|
||||||
### أيقونة دفتر العناوين
|
|
||||||
|
|
||||||
يعرض أيقونة دفتر العناوين.
|
|
||||||
|
|
||||||
<Tabs>
|
|
||||||
|
|
||||||
<Tab title="الاستخدام">
|
|
||||||
|
|
||||||
```jsx
|
|
||||||
import { IconAddressBook } from 'twenty-ui/display';
|
|
||||||
|
|
||||||
export const MyComponent = () => {
|
|
||||||
return <IconAddressBook size={24} stroke={2} />;
|
|
||||||
};
|
|
||||||
```
|
|
||||||
|
|
||||||
</Tab>
|
|
||||||
|
|
||||||
<Tab title="خصائص">
|
|
||||||
|
|
||||||
|
|
||||||
| خصائص | النوع | الوصف | الإعداد الافتراضي |
|
|
||||||
| ----------- | ----- | -------------------------------- | ----------------- |
|
|
||||||
| الحجم | رقم | ارتفاع وعرض الأيقونة بالبكسل | 24 |
|
|
||||||
| الخط العريض | رقم | عرض الخط العريض للأيقونة بالبكسل | 2 |
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</Tab>
|
|
||||||
|
|
||||||
</Tabs>
|
|
||||||
@@ -1,13 +0,0 @@
|
|||||||
---
|
|
||||||
title: شارة قريبًا
|
|
||||||
---
|
|
||||||
|
|
||||||
شارة صغيرة أو "كبسولة" للإشارة إلى أن شيئًا ما قادم قريبًا.
|
|
||||||
|
|
||||||
```jsx
|
|
||||||
import { SoonPill } from "@/ui/display/pill/components/SoonPill";
|
|
||||||
|
|
||||||
export const MyComponent = () => {
|
|
||||||
return <SoonPill />;
|
|
||||||
};
|
|
||||||
```
|
|
||||||
@@ -1,43 +0,0 @@
|
|||||||
---
|
|
||||||
title: علامة
|
|
||||||
icon: tag
|
|
||||||
---
|
|
||||||
|
|
||||||
مكوّن لتصنيف المحتوى أو وسمه بصريًا.
|
|
||||||
|
|
||||||
<Tabs>
|
|
||||||
|
|
||||||
<Tab title="استخدام">
|
|
||||||
|
|
||||||
```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="المحددات">
|
|
||||||
|
|
||||||
|
|
||||||
| المحددات | النوع | الوصف |
|
|
||||||
| --------- | ----- | --------------------------------------------------------------------------------------------------------------------- |
|
|
||||||
| اسم الفئة | نص | اسم اختياري لتنسيقات إضافية |
|
|
||||||
| اللون | نص | لون العلامة. الخيارات تشمل: `أخضر`, `تركواز`, `سماوي`, `أزرق`, `أرجواني`, `وردي`, `أحمر`, `برتقالي`, `أصفر`, `رمادي`. |
|
|
||||||
| نص | نص | محتوى العلامة |
|
|
||||||
| عند_النقر | دالة | دالة اختيارية تُستدعى عند نقر المستخدم على العلامة |
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</Tab>
|
|
||||||
|
|
||||||
</Tabs>
|
|
||||||
@@ -1,7 +0,0 @@
|
|||||||
---
|
|
||||||
title: إدخال
|
|
||||||
---
|
|
||||||
|
|
||||||
<Frame>
|
|
||||||
<img src="/images/user-guide/tips/light-bulb.png" alt="رأس الصفحة" />
|
|
||||||
</Frame>
|
|
||||||
@@ -1,36 +0,0 @@
|
|||||||
---
|
|
||||||
title: محرر الكتل
|
|
||||||
---
|
|
||||||
|
|
||||||
<Frame>
|
|
||||||
<img src="/images/user-guide/api/api.png" alt="رأس الصفحة" />
|
|
||||||
</Frame>
|
|
||||||
|
|
||||||
يستخدم محرر نصوص غني يعتمد على الكتل من [BlockNote](https://www.blocknotejs.org/) للسماح للمستخدمين بتحرير وعرض كتل المحتوى.
|
|
||||||
|
|
||||||
<Tabs>
|
|
||||||
<Tab title="استخدام">
|
|
||||||
|
|
||||||
```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="المحددات">
|
|
||||||
|
|
||||||
|
|
||||||
| الخصائص | النوع | الوصف |
|
|
||||||
| ------- | ----------------- | ------------------------ |
|
|
||||||
| محرر | `BlockNoteEditor` | مثيل أو تكوين محرر الكتل |
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</Tab>
|
|
||||||
</Tabs>
|
|
||||||
@@ -1,522 +0,0 @@
|
|||||||
---
|
|
||||||
title: الأزرار
|
|
||||||
icon: hand-pointer
|
|
||||||
---
|
|
||||||
|
|
||||||
<Frame>
|
|
||||||
<img src="/images/user-guide/views/filter.png" alt="رأس الصفحة" />
|
|
||||||
</Frame>
|
|
||||||
|
|
||||||
قائمة الأزرار ومجموعات الأزرار المستخدمة في التطبيق.
|
|
||||||
|
|
||||||
## زر
|
|
||||||
|
|
||||||
<Tabs>
|
|
||||||
|
|
||||||
<Tab title="الاستخدام">
|
|
||||||
|
|
||||||
```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="خصائص">
|
|
||||||
|
|
||||||
|
|
||||||
| خصائص | النوع | الوصف |
|
|
||||||
| --------- | --------------------- | ---------------------------------------------------------------------------------- |
|
|
||||||
| className | string | اسم فئة اختياري لتنسيقات إضافية |
|
|
||||||
| أيقونة | `React.ComponentType` | مكون رمز اختياري يُعرض داخل الزر |
|
|
||||||
| العنوان | string | محتوى نص الزر |
|
|
||||||
| عرض كامل | قيمة منطقية | يُحدد إذا كان الزر يجب أن يمتد ليغطي العرض الكامل للحاوية الخاصة به |
|
|
||||||
| التنوع | string | النمط المرئي للزر. تشمل الخيارات `primary`، `secondary`، و`tertiary`. |
|
|
||||||
| الحجم | string | حجم الزر. يوجد خياران: `صغير` و `متوسط` |
|
|
||||||
| الموقع | string | موقع الزر بالنسبة لأخوته. تشمل الخيارات: `standalone`، `left`، `right`، و`middle`. |
|
|
||||||
| accent | string | موقع الزر بالنسبة لأخوته. تشمل الخيارات: `default`، `blue`، `danger` |
|
|
||||||
| قريباً | قيمة منطقية | يشير إلى ما إذا كان الزر معلمًا "قريبًا" (مثل الميزات القادمة) |
|
|
||||||
| معطل | قيمة منطقية | يحدد إذا كان الزر معطل أم لا |
|
|
||||||
| تركيز | قيمة منطقية | يحدد إذا كان الزر في وضع التركيز |
|
|
||||||
| عند النقر | وظيفة | وظيفة رد فعل تنطلق عند نقر المستخدم على الزر |
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</Tab>
|
|
||||||
|
|
||||||
</Tabs>
|
|
||||||
|
|
||||||
## مجموعة الأزرار
|
|
||||||
|
|
||||||
<Tabs>
|
|
||||||
<Tab title="استخدام">
|
|
||||||
```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="الخصائص">
|
|
||||||
|
|
||||||
|
|
||||||
| الخصائص | النوع | الوصف |
|
|
||||||
| --------- | --------- | -------------------------------------------------------------------------------------- |
|
|
||||||
| التنوع | string | النمط المرئي للأزرار داخل المجموعة. تشمل الخيارات `primary`، `secondary`، و`tertiary`. |
|
|
||||||
| الحجم | string | حجم الأزرار داخل المجموعة. يوجد خياران: `medium` و`small`. |
|
|
||||||
| accent | نص | لون تمييز الأزرار داخل المجموعة. تشمل الخيارات `default`، `blue` و`danger`. |
|
|
||||||
| className | string | اسم فئة اختياري لتنسيقات إضافية |
|
|
||||||
| الأبناء | ReactNode | مجموعة من عناصر React تمثل الأزرار الفردية داخل المجموعة |
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</Tab>
|
|
||||||
</Tabs>
|
|
||||||
|
|
||||||
## زر عائم
|
|
||||||
|
|
||||||
<Tabs>
|
|
||||||
<Tab title="الاستخدام">
|
|
||||||
|
|
||||||
```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="الخصائص">
|
|
||||||
|
|
||||||
|
|
||||||
| الخصائص | النوع | الوصف |
|
|
||||||
| ------------ | --------------------- | --------------------------------------------------------------------------------- |
|
|
||||||
| className | string | اسم اختياري لتنسيقات إضافية |
|
|
||||||
| أيقونة | `React.ComponentType` | مكون أيقونة اختياري يظهر داخل الزر |
|
|
||||||
| العنوان | string | محتوى نص الزر |
|
|
||||||
| الحجم | string | حجم الزر. يوجد خياران: `صغير` و `متوسط` |
|
|
||||||
| الموقع | string | موقع الزر بالنسبة لأخوته. تشمل الخيارات: `standalone`، `left`، `middle`، `right`. |
|
|
||||||
| تطبيق الظل | قيمة منطقية | يحدد إذا ما سيتم تطبيق الظلال على الزر |
|
|
||||||
| تطبيق الضباب | قيمة منطقية | يحدد ما إذا كان ينبغي تطبيق تأثير الضباب على الزر |
|
|
||||||
| معطل | قيمة منطقية | يحدد ما إذا كان الزر معطل |
|
|
||||||
| تركيز | قيمة منطقية | يحدد إذا كان الزر في وضع التركيز |
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</Tab>
|
|
||||||
</Tabs>
|
|
||||||
|
|
||||||
## مجموعة الأزرار العائمة
|
|
||||||
|
|
||||||
<Tabs>
|
|
||||||
<Tab title="الاستخدام">
|
|
||||||
|
|
||||||
```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="خصائص">
|
|
||||||
|
|
||||||
|
|
||||||
| خصائص | النوع | الوصف | الإعداد الافتراضي |
|
|
||||||
| ------- | --------- | -------------------------------------------------------- | ----------------- |
|
|
||||||
| الحجم | string | حجم الزر. يوجد خياران: `صغير` و `متوسط` | صغير |
|
|
||||||
| الأبناء | ReactNode | مجموعة من عناصر React تمثل الأزرار الفردية داخل المجموعة | |
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</Tab>
|
|
||||||
|
|
||||||
</Tabs>
|
|
||||||
|
|
||||||
## زر رمز عائم
|
|
||||||
|
|
||||||
<Tabs>
|
|
||||||
<Tab title="الاستخدام">
|
|
||||||
|
|
||||||
```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="الخصائص">
|
|
||||||
|
|
||||||
|
|
||||||
| الخصائص | النوع | الوصف |
|
|
||||||
| ------------ | --------------------- | ---------------------------------------------------------------------------------- |
|
|
||||||
| className | نص | اسم اختياري لتنسيقات إضافية |
|
|
||||||
| أيقونة | `React.ComponentType` | مكون أيقونة اختياري يظهر داخل الزر |
|
|
||||||
| الحجم | نص | حجم الزر. يوجد خياران: `صغير` و `متوسط` |
|
|
||||||
| الموقع | نص | موقع الزر بالنسبة لأخوته. تشمل الخيارات: `standalone`، `left`، `right`، و`middle`. |
|
|
||||||
| تطبيق الظل | قيمة منطقية | يحدد إذا ما سيتم تطبيق الظلال على الزر |
|
|
||||||
| تطبيق الضباب | قيمة منطقية | يحدد ما إذا كان ينبغي تطبيق تأثير الضباب على الزر |
|
|
||||||
| معطل | قيمة منطقية | يحدد ما إذا كان الزر معطل |
|
|
||||||
| تركيز | قيمة منطقية | يحدد إذا كان الزر في وضع التركيز |
|
|
||||||
| عند النقر | وظيفة | وظيفة رد فعل تنطلق عند نقر المستخدم على الزر |
|
|
||||||
| فعّال | قيمة منطقية | يحدد إذا كان الزر في وضع فعّال |
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</Tab>
|
|
||||||
|
|
||||||
</Tabs>
|
|
||||||
|
|
||||||
## مجموعة أزرار الرموز العائمة
|
|
||||||
|
|
||||||
<Tabs>
|
|
||||||
<Tab title="الاستخدام">
|
|
||||||
|
|
||||||
```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="الخصائص">
|
|
||||||
|
|
||||||
|
|
||||||
| الخصائص | النوع | الوصف |
|
|
||||||
| ------------ | ------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
||||||
| className | string | اسم اختياري لتنسيقات إضافية |
|
|
||||||
| الحجم | string | حجم الزر. يوجد خياران: `صغير` و `متوسط` |
|
|
||||||
| أزرار الرموز | array | مجموعة من الكائنات، يمثل كل منها زر رمز في المجموعة. يجب أن يشمل كل كائن مكون الرمز الذي تريد عرضه في الزر، الوظيفة التي ترغب في استدعائها عند نقر المستخدم على الزر، وما إذا كان الزر ينبغي أن يكون نشطًا أم لا. |
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</Tab>
|
|
||||||
|
|
||||||
</Tabs>
|
|
||||||
|
|
||||||
## زر خفيف
|
|
||||||
|
|
||||||
<Tabs>
|
|
||||||
<Tab title="الاستخدام">
|
|
||||||
|
|
||||||
```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="الإزاحة">
|
|
||||||
|
|
||||||
|
|
||||||
| الإزاحة | النوع | الوصف |
|
|
||||||
| --------- | ----------------- | -------------------------------------------------------------------------- |
|
|
||||||
| className | string | اسم اختياري لتنسيقات إضافية |
|
|
||||||
| أيقونة | `React.ReactNode` | الرمز الذي تريد عرضه في الزر |
|
|
||||||
| العنوان | string | محتوى نص الزر |
|
|
||||||
| accent | string | موقع الزر بالنسبة لأخوته. لون الزر المميز تشمل الخيارات: `ثانوي` و `ثالثي` |
|
|
||||||
| نشط | قيمة منطقية | يحدد إذا كان الزر في وضع فعّال |
|
|
||||||
| معطل | قيمة منطقية | يحدد ما إذا كان الزر معطل |
|
|
||||||
| تركيز | قيمة منطقية | يحدد إذا كان الزر في وضع التركيز |
|
|
||||||
| عند النقر | وظيفة | وظيفة رد فعل تنطلق عند نقر المستخدم على الزر |
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</Tab>
|
|
||||||
|
|
||||||
</Tabs>
|
|
||||||
|
|
||||||
## زر أيقونة خفيف
|
|
||||||
|
|
||||||
<Tabs>
|
|
||||||
<Tab title="الاستخدام">
|
|
||||||
|
|
||||||
```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="العناصر">
|
|
||||||
|
|
||||||
|
|
||||||
| العناصر | النوع | الوصف |
|
|
||||||
| --------- | --------------------- | ------------------------------------------------ |
|
|
||||||
| className | string | اسم اختياري لتنسيقات إضافية |
|
|
||||||
| testId | string | معرف اختبار للزر |
|
|
||||||
| أيقونة | `React.ComponentType` | مكون أيقونة اختياري يظهر داخل الزر |
|
|
||||||
| العنوان | string | محتوى نصي للزر |
|
|
||||||
| الحجم | string | حجم الزر. يوجد خياران: `صغير` و `متوسط` |
|
|
||||||
| accent | string | لون الزر المميز تشمل الخيارات: `ثانوي` و `ثالثي` |
|
|
||||||
| نشط | قيمة منطقية | يحدد ما إذا كان الزر في حالة نشطة |
|
|
||||||
| معطل | قيمة منطقية | يحدد ما إذا كان الزر معطلاً |
|
|
||||||
| التركيز | قيمة منطقية | يشير إلى ما إذا كان الزر لديه تركيز |
|
|
||||||
| عند النقر | function | وظيفة رد اتصال تتفعّل عند نقر المستخدم على الزر |
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</Tab>
|
|
||||||
|
|
||||||
</Tabs>
|
|
||||||
|
|
||||||
## الزر الرئيسي
|
|
||||||
|
|
||||||
<Tabs>
|
|
||||||
<Tab title="الاستخدام">
|
|
||||||
|
|
||||||
```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="العناصر">
|
|
||||||
|
|
||||||
|
|
||||||
| العناصر | النوع | الوصف |
|
|
||||||
| -------------- | -------------------------------- | -------------------------------------------------------------- |
|
|
||||||
| العنوان | string | محتوى نصي للزر |
|
|
||||||
| عرض كامل | قيمة منطقية | يحدد ما إذا كان الزر يجب أن يمتد على كامل عرض الحاوية |
|
|
||||||
| التنوع | string | النمط البصري للزر. تشمل الخيارات `أساسي` و `ثانوي` |
|
|
||||||
| قريباً | قيمة منطقية | يشير إلى ما إذا كان الزر معلمًا "قريبًا" (مثل الميزات القادمة) |
|
|
||||||
| أيقونة | `React.ComponentType` | مكون أيقونة اختياري يظهر داخل الزر |
|
|
||||||
| خصائص زر React | `React.ComponentProps<'button'>` | كل خصائص زر HTML القياسية مدعومة |
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</Tab>
|
|
||||||
|
|
||||||
</Tabs>
|
|
||||||
|
|
||||||
## زر أيقونة دائري
|
|
||||||
|
|
||||||
<Tabs>
|
|
||||||
<Tab title="الاستخدام">
|
|
||||||
|
|
||||||
```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="العناصر">
|
|
||||||
|
|
||||||
|
|
||||||
| العناصر | النوع | الوصف |
|
|
||||||
| -------------- | ----------------------------------------------- | ----- |
|
|
||||||
| أيقونة | `React.ComponentType` | |
|
|
||||||
| خصائص زر React | `React.ButtonHTMLAttributes<HTMLButtonElement>` | |
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</Tab>
|
|
||||||
|
|
||||||
</Tabs>
|
|
||||||
@@ -1,50 +0,0 @@
|
|||||||
---
|
|
||||||
title: مربع اختيار
|
|
||||||
icon: square-check
|
|
||||||
---
|
|
||||||
|
|
||||||
<Frame>
|
|
||||||
<img src="/images/user-guide/tasks/tasks_header.png" alt="رأس الصفحة" />
|
|
||||||
</Frame>
|
|
||||||
|
|
||||||
يُستخدم عندما يحتاج المستخدم إلى اختيار قيم متعددة من بين عدة خيارات.
|
|
||||||
|
|
||||||
<Tabs>
|
|
||||||
<Tab title="استخدام">
|
|
||||||
|
|
||||||
```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="المحددات">
|
|
||||||
|
|
||||||
|
|
||||||
| المحددات | النوع | الوصف |
|
|
||||||
| ------------------------ | ----------- | ----------------------------------------------------------------------------- |
|
|
||||||
| مختار | قيمة منطقية | يشير إلى ما إذا كان مربع الاختيار محددًا |
|
|
||||||
| غير محدد | قيمة منطقية | يشير إلى ما إذا كان مربع الاختيار في حالة غير محددة (لا هو محدد ولا غير محدد) |
|
|
||||||
| عند التغيير | دالة | الدالة التي ترغب في تفعيلها عند تغيير حالة مربع الاختيار |
|
|
||||||
| عند تغيير الحالة المحددة | دالة | الدالة التي ترغب في تفعيلها عند تغيّر حالة `checked` |
|
|
||||||
| نموذج | نص | النمط البصري للصندوق. تتضمن الخيارات: 'أساسي'، 'ثانوي'، و 'ثالثي' |
|
|
||||||
| الحجم | نص | حجم مربع الاختيار. له خياران: `small` و `large` |
|
|
||||||
| الشكل | نص | شكل مربع الاختيار. لديه خياران: 'مربع' و 'مدور' |
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</Tab>
|
|
||||||
</Tabs>
|
|
||||||
@@ -1,79 +0,0 @@
|
|||||||
---
|
|
||||||
title: طريقة عرض الألوان
|
|
||||||
icon: palette
|
|
||||||
---
|
|
||||||
|
|
||||||
<Frame>
|
|
||||||
<img src="/images/user-guide/fields/field.png" alt="رأس الصفحة" />
|
|
||||||
</Frame>
|
|
||||||
|
|
||||||
## بطاقة مخطط الألوان
|
|
||||||
|
|
||||||
يمثل مخططات ألوان مختلفة ومخصص بشكل خاص للمواضيع الفاتحة والداكنة.
|
|
||||||
|
|
||||||
<Tabs>
|
|
||||||
<Tab title="الاستخدام">
|
|
||||||
|
|
||||||
```jsx
|
|
||||||
import { ColorSchemeCard } from "twenty-ui/display";
|
|
||||||
|
|
||||||
export const MyComponent = () => {
|
|
||||||
return (
|
|
||||||
<ColorSchemeCard
|
|
||||||
variant="Dark"
|
|
||||||
selected={true}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
```
|
|
||||||
|
|
||||||
</Tab>
|
|
||||||
|
|
||||||
<Tab title="خصائص">
|
|
||||||
|
|
||||||
|
|
||||||
| خصائص | النوع | الوصف | الإعداد الافتراضي |
|
|
||||||
| ------------ | --------------------------------------- | ---------------------------------------------------------------------- | ----------------- |
|
|
||||||
| التنوع | string | نوع مخطط الألوان. تشمل الخيارات `داكنة`, `فاتحة`, و `النظام` | فاتح |
|
|
||||||
| المحدد | قيمة منطقية | إذا كان `صحيح`, يتم عرض علامة الاختيار للدلالة على مخطط الألوان المحدد | |
|
|
||||||
| خصائص إضافية | `React.ComponentPropsWithoutRef<'div'>` | خصائص عنصر `div` العادي في HTML | |
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</Tab>
|
|
||||||
|
|
||||||
</Tabs>
|
|
||||||
|
|
||||||
## منتقي مخطط الألوان
|
|
||||||
|
|
||||||
يتيح للمستخدمين اختيار بين مخططات الألوان المختلفة.
|
|
||||||
|
|
||||||
<Tabs>
|
|
||||||
<Tab title="الاستخدام">
|
|
||||||
|
|
||||||
```jsx
|
|
||||||
import { ColorSchemePicker } from "twenty-ui/display";
|
|
||||||
|
|
||||||
export const MyComponent = () => {
|
|
||||||
return <ColorSchemePicker
|
|
||||||
value="Dark"
|
|
||||||
onChange
|
|
||||||
/>;
|
|
||||||
};
|
|
||||||
```
|
|
||||||
|
|
||||||
</Tab>
|
|
||||||
|
|
||||||
<Tab title="خصائص">
|
|
||||||
|
|
||||||
|
|
||||||
| خصائص | النوع | الوصف |
|
|
||||||
| ----------- | ------------------- | ------------------------------------------------------------- |
|
|
||||||
| القيمة | `طريقة عرض الألوان` | مخطط الألوان المحدد حاليًا |
|
|
||||||
| عند التغيير | function | الدالة التي ترغب في تفعيلها عندما يختار المستخدم نظام الألوان |
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</Tab>
|
|
||||||
|
|
||||||
</Tabs>
|
|
||||||
@@ -1,57 +0,0 @@
|
|||||||
---
|
|
||||||
title: منتقى الأيقونات
|
|
||||||
---
|
|
||||||
|
|
||||||
<Frame>
|
|
||||||
<img src="/images/user-guide/github/github-header.png" alt="رأس الصفحة" />
|
|
||||||
</Frame>
|
|
||||||
|
|
||||||
منتقى الأيقونات المعتمد على القائمة المنسدلة الذي يتيح للمستخدمين اختيار أيقونة من قائمة.
|
|
||||||
|
|
||||||
<Tabs>
|
|
||||||
|
|
||||||
<Tab title="استخدام">
|
|
||||||
|
|
||||||
```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="المحددات">
|
|
||||||
|
|
||||||
|
|
||||||
| الخصائص | النوع | الوصف |
|
|
||||||
| ----------------------- | ----------- | ------------------------------------------------------------------------------------------------------------ |
|
|
||||||
| معطل | قيمة منطقية | يقوم بتعطيل منتقى الأيقونات إذا تم تعيينه إلى `true` |
|
|
||||||
| عند التغيير | دالة | الدالة الارتجاعية التي تُفعل عندما يختار المستخدم أيقونة. يستقبل كائنًا يحتوي على الخصائص `iconKey` و `Icon` |
|
|
||||||
| مفتاح الأيقونة المختارة | نص | مفتاح الأيقونة المختارة في البداية |
|
|
||||||
| النقر بالخارج | دالة | الدالة الارتجاعية التي تُفعل عندما ينقر المستخدم خارج القائمة المنسدلة |
|
|
||||||
| عند الإغلاق | دالة | الدالة الارتجاعية التي تُفعل عند إغلاق القائمة المنسدلة |
|
|
||||||
| عند الفتح | دالة | الدالة الارتجاعية التي تُفعل عند فتح القائمة المنسدلة |
|
|
||||||
| التنوع | نص | متغير النمط البصري للأيقونة القابلة للنقر. تشمل الخيارات: `رئيسي`, `ثانوي`, و `ثالثي` |
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</Tab>
|
|
||||||
</Tabs>
|
|
||||||
@@ -1,40 +0,0 @@
|
|||||||
---
|
|
||||||
title: إدخال الصورة
|
|
||||||
---
|
|
||||||
|
|
||||||
<Frame>
|
|
||||||
<img src="/images/user-guide/objects/objects.png" alt="رأس الصفحة" />
|
|
||||||
</Frame>
|
|
||||||
|
|
||||||
يسمح للمستخدمين برفع وإزالة صورة.
|
|
||||||
|
|
||||||
<Tabs>
|
|
||||||
<Tab title="استخدام">
|
|
||||||
|
|
||||||
```jsx
|
|
||||||
import { ImageInput } from "@/ui/input/components/ImageInput";
|
|
||||||
|
|
||||||
export const MyComponent = () => {
|
|
||||||
return <ImageInput/>;
|
|
||||||
};
|
|
||||||
```
|
|
||||||
|
|
||||||
</Tab>
|
|
||||||
<Tab title="المحددات">
|
|
||||||
|
|
||||||
|
|
||||||
| الخصائص | النوع | الوصف |
|
|
||||||
| ------------ | ----------- | --------------------------------------------------------------------------------- |
|
|
||||||
| صورة | نص | رابط مصدر الصورة |
|
|
||||||
| onUpload | دالة | الدالة التي تُستدعى عند قيام المستخدم بتحميل صورة جديدة. تستقبل كائن `File` كوسيط |
|
|
||||||
| onRemove | دالة | الدالة التي تُستدعى عند نقر المستخدم على زر الإزالة |
|
|
||||||
| onAbort | دالة | الدالة التي تُستدعى عند نقر المستخدم على زر الإلغاء أثناء تحميل الصورة |
|
|
||||||
| isUploading | قيمة منطقية | يشير إلى ما إذا كان يتم تحميل صورة حاليًا |
|
|
||||||
| errorMessage | نص | رسالة خطأ اختيارية لعرضها أسفل حقل إدخال الصورة |
|
|
||||||
| معطل | قيمة منطقية | إذا كانت `true`، فسيكون حقل الإدخال بأكمله معطلاً، ولن تكون الأزرار قابلة للنقر |
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</Tab>
|
|
||||||
</Tabs>
|
|
||||||
@@ -1,113 +0,0 @@
|
|||||||
---
|
|
||||||
title: راديو
|
|
||||||
icon: circle-dot
|
|
||||||
---
|
|
||||||
|
|
||||||
<Frame>
|
|
||||||
<img src="/images/user-guide/create-workspace/workspace-cover.png" alt="رأس الصفحة" />
|
|
||||||
</Frame>
|
|
||||||
|
|
||||||
تستخدم عندما يمكن للمستخدمين اختيار خيار واحد فقط من سلسلة من الخيارات.
|
|
||||||
|
|
||||||
<Tabs>
|
|
||||||
<Tab title="استخدام">
|
|
||||||
|
|
||||||
```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="المحددات">
|
|
||||||
|
|
||||||
|
|
||||||
| المحددات | النوع | الوصف |
|
|
||||||
| ------------------------ | ----------------- | ------------------------------------------------------------------ |
|
|
||||||
| النمط | خصائص `React.CSS` | أنماط إضافية مضمنة للمكون |
|
|
||||||
| اسم الفئة | نص | فئة CSS اختيارية لتصميم إضافي |
|
|
||||||
| مختار | قيمة منطقية | يشير إلى ما إذا كان زر الراديو محددًا |
|
|
||||||
| القيمة | نص | التسمية أو النص المرتبط بزر الراديو |
|
|
||||||
| عند التغيير | دالة | الدالة التي تُستدعى عند تغيير زر الاختيار المحدد. |
|
|
||||||
| عند تغيير الحالة المحددة | دالة | الدالة التي تُستدعى عند تغيير حالة `checked` لزر الاختيار. |
|
|
||||||
| الحجم | نص | حجم زر الراديو. تشمل الخيارات: `large` و `small` |
|
|
||||||
| معطل | قيمة منطقية | إذا كانت `true`، فسيكون زر الاختيار معطلاً وغير قابل للنقر |
|
|
||||||
| موضع التسمية | نص | موضع نص التسمية بالنسبة لزر الراديو. يوجد خياران: `left` و `right` |
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</Tab>
|
|
||||||
</Tabs>
|
|
||||||
|
|
||||||
## مجموعة الراديو
|
|
||||||
|
|
||||||
يجمع أزرار الراديو ذات الصلة معًا.
|
|
||||||
|
|
||||||
<Tabs>
|
|
||||||
<Tab title="استخدام">
|
|
||||||
|
|
||||||
```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="الخصائص">
|
|
||||||
|
|
||||||
|
|
||||||
| الخصائص | النوع | الوصف |
|
|
||||||
| ------------- | ----------------- | --------------------------------------------------------------------- |
|
|
||||||
| القيمة | string | قيمة زر الراديو المحدد حاليًا |
|
|
||||||
| عند التغيير | دالة | دالة الاستدعاء التي يتم تشغيلها عند تغيير زر الاختيار. |
|
|
||||||
| onValueChange | دالة | دالة الاستدعاء التي يتم تشغيلها عند تغيير القيمة المحددة في المجموعة. |
|
|
||||||
| الأبناء | `React.ReactNode` | يتيح لك تمرير مكوّنات React (مثل Radio) كعناصر فرعية إلى Radio Group |
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</Tab>
|
|
||||||
|
|
||||||
</Tabs>
|
|
||||||
@@ -1,54 +0,0 @@
|
|||||||
---
|
|
||||||
title: اختيار
|
|
||||||
---
|
|
||||||
|
|
||||||
<Frame>
|
|
||||||
<img src="/images/user-guide/what-is-twenty/20.png" alt="رأس الصفحة" />
|
|
||||||
</Frame>
|
|
||||||
|
|
||||||
يتيح للمستخدمين اختيار قيمة من قائمة من الخيارات المحددة مسبقًا.
|
|
||||||
|
|
||||||
<Tabs>
|
|
||||||
<Tab title="استخدام">
|
|
||||||
|
|
||||||
```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="المحددات">
|
|
||||||
|
|
||||||
|
|
||||||
| الخصائص | النوع | الوصف |
|
|
||||||
| ----------- | ----------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
||||||
| اسم الفئة | نص | فئة CSS اختيارية للتنسيق الإضافي |
|
|
||||||
| معطل | قيمة منطقية | عند ضبطها على `true`، يتم تعطيل تفاعل المستخدم مع المكون |
|
|
||||||
| التسمية | نص | التسمية التي تصف غرض مكوّن `Select` |
|
|
||||||
| عند التغيير | دالة | الدالة التي تُستدعى عند تغيير القيم المحددة |
|
|
||||||
| خيارات | مصفوفة | تمثل الخيارات المتاحة في مكون `الاختيار`. إنها مصفوفة من الكائنات حيث يحتوي كل كائن على `قيمة` (معرف فريد)، `تسمية` (معرف فريد)، و`أيقونة` اختيارية |
|
|
||||||
| القيمة | نص | تمثل القيمة المحددة حاليًا. يجب أن تطابق إحدى خصائص `القيمة` في مصفوفة `الخيارات` |
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</Tab>
|
|
||||||
</Tabs>
|
|
||||||
@@ -1,161 +0,0 @@
|
|||||||
---
|
|
||||||
title: نص
|
|
||||||
---
|
|
||||||
|
|
||||||
<Frame>
|
|
||||||
<img src="/images/user-guide/notes/notes_header.png" alt="رأس الصفحة" />
|
|
||||||
</Frame>
|
|
||||||
|
|
||||||
## إدخال نص
|
|
||||||
|
|
||||||
يسمح للمستخدمين بإدخال وتحرير النص.
|
|
||||||
|
|
||||||
<Tabs>
|
|
||||||
|
|
||||||
<Tab title="الاستخدام">
|
|
||||||
|
|
||||||
```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="خصائص">
|
|
||||||
|
|
||||||
|
|
||||||
| خصائص | النوع | الوصف |
|
|
||||||
| ---------------- | ------------- | ------------------------------------------------------------------------------------------------------- |
|
|
||||||
| className | string | اسم اختياري للتنسيق الإضافي. |
|
|
||||||
| التسمية | نص | يمثل التسمية للإدخال. |
|
|
||||||
| onChange | وظيفة | الدالة التي تُستدعى عند تغيير قيمة الإدخال. |
|
|
||||||
| عرض كامل | قيمة منطقية | يشير إلى ما إذا كان الإدخال يجب أن يشغل 100% من العرض. |
|
|
||||||
| تعطيل الإختصارات | قيمة منطقية | يشير إلى ما إذا كانت الاختصارات ممكنة للإدخال. |
|
|
||||||
| خطأ | string | يمثل رسالة الخطأ التي سيتم عرضها. عند توفرها، تضيف رمز خطأ على الجانب الأيمن من الإدخال. |
|
|
||||||
| onKeyDown | دالة | يتم الاستدعاء عندما يتم الضغط على مفتاح عند التركيز على حقل الإدخال. يتلقى `React.KeyboardEvent` كمعلمة |
|
|
||||||
| أيقونة يمين | مكون الأيقونة | مكون أيقونة اختياري معروض على الجانب الأيمن من الإدخال. |
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
يقبل المكون أيضًا دعم خصائص HTML أخرى لعناصر الإدخال.
|
|
||||||
|
|
||||||
</Tab>
|
|
||||||
|
|
||||||
</Tabs>
|
|
||||||
|
|
||||||
## إدخال نص بالحجم التلقائي
|
|
||||||
|
|
||||||
مكون إدخال نصي يعدل ارتفاعه تلقائيًا بناءً على المحتوى.
|
|
||||||
|
|
||||||
<Tabs>
|
|
||||||
|
|
||||||
<Tab title="الاستخدام">
|
|
||||||
|
|
||||||
```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="خصائص">
|
|
||||||
|
|
||||||
|
|
||||||
| خصائص | النوع | الوصف |
|
|
||||||
| ------------------ | ----- | ------------------------------------------------------------- |
|
|
||||||
| onValidate | دالة | الدالة التي ترغب في تفعيلها عند تصديق المستخدم الإدخال. |
|
|
||||||
| الحد الأدنى للأسطر | رقم | عدد الأسطر الأدنى للمساحة النصية. |
|
|
||||||
| النص التوضيحي | نص | النص التوضيحي الذي ترغب في عرضه عند كون المساحة النصية فارغة. |
|
|
||||||
| onFocus | دالة | الدالة التي ترغب في تفعيلها عند تركيز المساحة النصية. |
|
|
||||||
| البديل | نص | البديل للإدخال. تشمل الخيارات: `افتراضي`، `أيقونة`، و`زر`. |
|
|
||||||
| عنوان الزر | نص | العنوان للزر (فقط للبديل الزر). |
|
|
||||||
| القيمة | نص | القيمة الأولية للمساحة النصية. |
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</Tab>
|
|
||||||
|
|
||||||
</Tabs>
|
|
||||||
|
|
||||||
## مساحة نصية
|
|
||||||
|
|
||||||
تتيح لك إنشاء إدخالات نصية متعددة الأسطر.
|
|
||||||
|
|
||||||
<Tabs>
|
|
||||||
<Tab title="الاستخدام">
|
|
||||||
|
|
||||||
```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="خصائص">
|
|
||||||
|
|
||||||
|
|
||||||
| خصائص | النوع | الوصف |
|
|
||||||
| ------------------ | ----------- | ------------------------------------------------ |
|
|
||||||
| تعطيل | قيمة منطقية | يشير إلى ما إذا كانت المساحة النصية معطلة. |
|
|
||||||
| الحد الأدنى للأسطر | رقم | العدد الأدنى للأسطر الظاهرة للمساحة النصية. |
|
|
||||||
| onChange | وظيفة | دالة الاستدعاء تُشغّل عند تغيّر محتوى منطقة النص |
|
|
||||||
| نص توضيحي | نص | النص المُوضّح عندما تكون منطقة النص فارغة |
|
|
||||||
| القيمة | نص | القيمة الحالية لمنطقة النص |
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</Tab>
|
|
||||||
</Tabs>
|
|
||||||
@@ -1,38 +0,0 @@
|
|||||||
---
|
|
||||||
title: تبديل
|
|
||||||
icon: toggle-on
|
|
||||||
---
|
|
||||||
|
|
||||||
<Tabs>
|
|
||||||
<Tab title="الاستخدام">
|
|
||||||
|
|
||||||
```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="الخصائص">
|
|
||||||
|
|
||||||
|
|
||||||
| الخصائص | النوع | الوصف | الإعداد الافتراضي |
|
|
||||||
| ----------- | ----------- | --------------------------------------------------------------------------- | ----------------- |
|
|
||||||
| القيمة | قيمة منطقية | الحالة الحالية لمفتاح التبديل | `خاطئ` |
|
|
||||||
| عند التغيير | دالة | دالة الاستدعاء التي يتم تحفيزها عند تغيير حالة مفتاح التبديل | |
|
|
||||||
| اللون | string | لون التبديل عند كونه | لون أزرق |
|
|
||||||
| حجم التبديل | نص | حجم التبديل الذي يؤثر على كل من الطول والوزن. لديها خياران: `صغير` و`متوسط` | متوسط |
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</Tab>
|
|
||||||
</Tabs>
|
|
||||||
@@ -1,31 +0,0 @@
|
|||||||
---
|
|
||||||
title: نظرة عامة
|
|
||||||
icon: palette
|
|
||||||
description: مكتبة المكونات لتطبيق Twenty CRM
|
|
||||||
---
|
|
||||||
|
|
||||||
import { CardTitle } from "/snippets/card-title.mdx"
|
|
||||||
|
|
||||||
## مكونات
|
|
||||||
|
|
||||||
<CardGroup cols={2}>
|
|
||||||
<Card href="/l/ar/twenty-ui/display" img="/images/user-guide/views/filter.png">
|
|
||||||
<CardTitle>العرض</CardTitle>
|
|
||||||
مكونات العرض لعرض المعلومات بصريًا
|
|
||||||
</Card>
|
|
||||||
|
|
||||||
<Card href="/l/ar/twenty-ui/progress-bar" img="/images/user-guide/fields/field.png">
|
|
||||||
<CardTitle>التغذية الراجعة</CardTitle>
|
|
||||||
مكونات التغذية الراجعة لإبلاغ المستخدمين
|
|
||||||
</Card>
|
|
||||||
|
|
||||||
<Card href="/l/ar/twenty-ui/input" img="/images/user-guide/tips/light-bulb.png">
|
|
||||||
<CardTitle>الإدخال</CardTitle>
|
|
||||||
مكونات الإدخال لتفاعل المستخدم
|
|
||||||
</Card>
|
|
||||||
|
|
||||||
<Card href="/l/ar/twenty-ui/navigation" img="/images/user-guide/tasks/tasks_header.png">
|
|
||||||
<CardTitle>التنقل</CardTitle>
|
|
||||||
مكونات التنقل لواجهة المستخدم
|
|
||||||
</Card>
|
|
||||||
</CardGroup>
|
|
||||||
@@ -1,8 +0,0 @@
|
|||||||
---
|
|
||||||
title: التنقل
|
|
||||||
icon: compass
|
|
||||||
---
|
|
||||||
|
|
||||||
<Frame>
|
|
||||||
<img src="/images/user-guide/tasks/tasks_header.png" alt="رأس الصفحة" />
|
|
||||||
</Frame>
|
|
||||||
@@ -1,46 +0,0 @@
|
|||||||
---
|
|
||||||
title: مسار التنقّل
|
|
||||||
---
|
|
||||||
|
|
||||||
<Frame>
|
|
||||||
<img src="/images/user-guide/fields/field.png" alt="رأس الصفحة" />
|
|
||||||
</Frame>
|
|
||||||
|
|
||||||
يعرض شريط مسار التنقّل.
|
|
||||||
|
|
||||||
<Tabs>
|
|
||||||
<Tab title="استخدام">
|
|
||||||
|
|
||||||
```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="المحددات">
|
|
||||||
|
|
||||||
|
|
||||||
| الخصائص | النوع | الوصف |
|
|
||||||
| --------- | ------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
||||||
| اسم الفئة | نص | اسم فئة اختياري لتنسيقات إضافية |
|
|
||||||
| روابط | مصفوفة | مصفوفة من الكائنات، يمثّل كلٌّ منها رابطًا في مسار التنقّل. كل كائن يحتوي على خاصية `children` (محتوى النص للرابط) وخاصية `href` اختيارية (رابط URL للتنقل إليه عند النقر على الرابط) |
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</Tab>
|
|
||||||
</Tabs>
|
|
||||||
@@ -1,185 +0,0 @@
|
|||||||
---
|
|
||||||
title: روابط
|
|
||||||
icon: link
|
|
||||||
---
|
|
||||||
|
|
||||||
<Frame>
|
|
||||||
<img src="/images/user-guide/what-is-twenty/20.png" alt="رأس الصفحة" />
|
|
||||||
</Frame>
|
|
||||||
|
|
||||||
## رابط الاتصال
|
|
||||||
|
|
||||||
مكون رابط منمق لعرض معلومات الاتصال.
|
|
||||||
|
|
||||||
<Tabs>
|
|
||||||
<Tab title="الاستخدام">
|
|
||||||
|
|
||||||
```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="خصائص">
|
|
||||||
|
|
||||||
|
|
||||||
| خصائص | النوع | الوصف |
|
|
||||||
| --------- | ----------------- | ------------------------------------------------ |
|
|
||||||
| className | string | اسم اختياري للتنسيق الإضافي. |
|
|
||||||
| رابط | نص | عنوان URL المستهدف أو المسار للرابط |
|
|
||||||
| عند النقر | وظيفة | دالة رد النداء ليتم تفعيلها عند النقر على الرابط |
|
|
||||||
| الأبناء | `React.ReactNode` | المحتوى ليتم عرضه داخل الرابط |
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</Tab>
|
|
||||||
|
|
||||||
</Tabs>
|
|
||||||
|
|
||||||
## رابط خام
|
|
||||||
|
|
||||||
مكون رابط منمق لعرض الروابط.
|
|
||||||
|
|
||||||
<Tabs>
|
|
||||||
<Tab title="الاستخدام">
|
|
||||||
|
|
||||||
```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="خصائص">
|
|
||||||
|
|
||||||
|
|
||||||
| خصائص | النوع | الوصف |
|
|
||||||
| --------- | ----------------- | ------------------------------------------------ |
|
|
||||||
| اسم الصنف | string | اسم اختياري لتنسيقات إضافية |
|
|
||||||
| رابط | string | عنوان URL المستهدف أو المسار للرابط |
|
|
||||||
| عند النقر | وظيفة | دالة رد النداء ليتم تفعيلها عند النقر على الرابط |
|
|
||||||
| الأبناء | `React.ReactNode` | المحتوى ليتم عرضه داخل الرابط |
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</Tab>
|
|
||||||
</Tabs>
|
|
||||||
|
|
||||||
## رابط مستدير
|
|
||||||
|
|
||||||
رابط مستدير مثبت مع مكون Chip للروابط.
|
|
||||||
|
|
||||||
<Tabs>
|
|
||||||
<Tab title="الاستخدام">
|
|
||||||
|
|
||||||
```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="خصائص">
|
|
||||||
|
|
||||||
|
|
||||||
| خصائص | النوع | الوصف |
|
|
||||||
| --------- | ----------------- | ------------------------------------------------ |
|
|
||||||
| رابط | string | عنوان URL المستهدف أو المسار للرابط |
|
|
||||||
| الأبناء | `React.ReactNode` | المحتوى ليتم عرضه داخل الرابط |
|
|
||||||
| عند النقر | وظيفة | دالة رد النداء ليتم تفعيلها عند النقر على الرابط |
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</Tab>
|
|
||||||
</Tabs>
|
|
||||||
|
|
||||||
## رابط التواصل الاجتماعي
|
|
||||||
|
|
||||||
روابط اجتماعية منمقة، مع دعم لأنواع متعددة من الروابط الاجتماعية، مثل العناوين الإلكترونية، LinkedIn، وX (أو Twitter).
|
|
||||||
|
|
||||||
<Tabs>
|
|
||||||
<Tab title="استخدام">
|
|
||||||
|
|
||||||
```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="خصائص">
|
|
||||||
|
|
||||||
|
|
||||||
| خصائص | النوع | الوصف |
|
|
||||||
| --------- | ----------------- | -------------------------------------------------------------------- |
|
|
||||||
| رابط | string | عنوان URL المستهدف أو المسار للرابط |
|
|
||||||
| الأبناء | `React.ReactNode` | المحتوى ليتم عرضه داخل الرابط |
|
|
||||||
| النوع | string | نوع الروابط الاجتماعية. تشمل الخيارات: `url`, `LinkedIn`, و`Twitter` |
|
|
||||||
| عند النقر | وظيفة | دالة رد النداء ليتم تفعيلها عند النقر على الرابط |
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</Tab>
|
|
||||||
</Tabs>
|
|
||||||
@@ -1,495 +0,0 @@
|
|||||||
---
|
|
||||||
title: عنصر قائمة
|
|
||||||
icon: bars
|
|
||||||
---
|
|
||||||
|
|
||||||
عنصر قائمة متعدد الاستخدامات مصمم للاستخدام في قائمة أو قائمة تنقل.
|
|
||||||
|
|
||||||
<Tabs>
|
|
||||||
<Tab title="استخدام">
|
|
||||||
|
|
||||||
```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="المحددات">
|
|
||||||
|
|
||||||
|
|
||||||
| المحددات | النوع | الوصف |
|
|
||||||
| -------------- | ------------- | ---------------------------------------------------------------------------- |
|
|
||||||
| أيقونة اليسار | مكون الأيقونة | أيقونة اختيارية تظهر قبل النص في عنصر القائمة |
|
|
||||||
| accent | نص | يحدد لون الإبراز لعنصر القائمة. تشمل الخيارات: `افتراضي`, `خطر`, `موضع مؤقت` |
|
|
||||||
| نص | نص | المحتوى النصي لعنصر القائمة |
|
|
||||||
| أزرار الأيقونة | array | مجموعة من الكائنات التي تمثل أيقونات إضافية مرتبطة بعنصر القائمة |
|
|
||||||
| isTooltipOpen | قيمة منطقية | يتحكم في ظهور تلميح الأدوات المرتبط بعنصر القائمة |
|
|
||||||
| معرف الفحص | نص | السمة data-testid لأغراض الاختبار |
|
|
||||||
| عند النقر | function | دالة الاستدعاء يتم تنشيطها عند النقر فوق عنصر القائمة |
|
|
||||||
| اسم الفئة | نص | اسم اختياري لتصميم إضافي |
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</Tab>
|
|
||||||
</Tabs>
|
|
||||||
|
|
||||||
## الأشكال
|
|
||||||
|
|
||||||
تتضمن الأشكال المختلفة لمكون عنصر القائمة ما يلي:
|
|
||||||
|
|
||||||
### أمر
|
|
||||||
|
|
||||||
عنصر قائمة على نمط الأوامر داخل القائمة للإشارة إلى اختصارات لوحة المفاتيح.
|
|
||||||
|
|
||||||
<Tabs>
|
|
||||||
<Tab title="الاستخدام">
|
|
||||||
|
|
||||||
```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="الخصائص">
|
|
||||||
|
|
||||||
|
|
||||||
| الخصائص | النوع | الوصف |
|
|
||||||
| --------------- | ------------- | ----------------------------------------------------- |
|
|
||||||
| الأيقونة اليسرى | مكون الأيقونة | أيقونة اختيارية إذا ظهرت قبل النص في عنصر القائمة |
|
|
||||||
| نص | نص | محتوى النص لعنصر القائمة |
|
|
||||||
| firstHotKey | string | أول اختصار لوحة مفاتيح مرتبط بالأمر |
|
|
||||||
| secondHotKey | string | اختصار لوحة المفاتيح الثاني المرتبط بالأمر |
|
|
||||||
| isSelected | قيمة منطقية | يشير إلى ما إذا كان عنصر القائمة محددا أو مميزا |
|
|
||||||
| عند النقر | دالة | دالة الاستدعاء يتم تنشيطها عند النقر فوق عنصر القائمة |
|
|
||||||
| اسم الفئة | نص | اسم اختياري لإضافة التنسيق |
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</Tab>
|
|
||||||
</Tabs>
|
|
||||||
|
|
||||||
### قابلة للسحب
|
|
||||||
|
|
||||||
مكون عنصر قائمة قابل للسحب مصمم ليتم استخدامه في قائمة أو قائمة حيث يمكن سحب العناصر، ويتم تنفيذ إجراءات إضافية عبر أزرار الأيقونات.
|
|
||||||
|
|
||||||
<Tabs>
|
|
||||||
<Tab title="الاستخدام">
|
|
||||||
|
|
||||||
```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="الخصائص">
|
|
||||||
|
|
||||||
|
|
||||||
| الخصائص | النوع | الوصف |
|
|
||||||
| --------------- | ------------- | ------------------------------------------------------------------------------------- |
|
|
||||||
| الأيقونة اليسرى | مكون الأيقونة | أيقونة اختيارية تظهر قبل النص في عنصر القائمة |
|
|
||||||
| accent | نص | لون العنصر لهجة القائمة. يمكن أن يكون إحدى القيم: `default`، `placeholder`، و`danger` |
|
|
||||||
| أزرار الأيقونات | array | مصفوفة الكائنات التي تمثل أزرار الأيقونات الإضافية المرتبطة بعنصر القائمة |
|
|
||||||
| isTooltipOpen | قيمة منطقية | يتحكم في ظهور تلميح الأدوات المرتبط بعنصر القائمة |
|
|
||||||
| عند_النقر | دالة | وظيفة استدعاء ليتم تشغيلها عند النقر فوق الرابط |
|
|
||||||
| نص | نص | محتوى النص لعنصر القائمة |
|
|
||||||
| isDragDisabled | قيمة منطقية | يشير إلى ما إذا كان تم تعطيل السحب |
|
|
||||||
| اسم الفئة | نص | اسم اختياري لإضافة التنسيق |
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</Tab>
|
|
||||||
</Tabs>
|
|
||||||
|
|
||||||
### التحديد المتعدد
|
|
||||||
|
|
||||||
يوفر طريقة لتنفيذ وظيفة التحديد المتعدد مع مربع اختيار مصاحب.
|
|
||||||
|
|
||||||
<Tabs>
|
|
||||||
<Tab title="الاستخدام">
|
|
||||||
|
|
||||||
```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="الخصائص">
|
|
||||||
|
|
||||||
|
|
||||||
| الخصائص | النوع | الوصف |
|
|
||||||
| --------------- | ------------- | ------------------------------------------------------ |
|
|
||||||
| الأيقونة اليسرى | مكون الأيقونة | أيقونة اختيارية تظهر قبل النص في عنصر القائمة |
|
|
||||||
| نص | string | محتوى النص لعنصر القائمة |
|
|
||||||
| المحدد | قيمة منطقية | يشير إلى ما إذا كان عنصر القائمة محددًا (مفحوص) |
|
|
||||||
| onSelectChange | دالة | وظيفة استدعاء يتم تشغيلها عند تغيير حالة مربع الاختيار |
|
|
||||||
| اسم الفئة | نص | اسم اختياري لتنسيقات إضافية |
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</Tab>
|
|
||||||
</Tabs>
|
|
||||||
|
|
||||||
### التحديد المتعدد للصورة الرمزية
|
|
||||||
|
|
||||||
عنصر قائمة متعدد الخيارات مع صورة رمزية، ومربع اختيار للتحديد، ومحتوى نصي.
|
|
||||||
|
|
||||||
<Tabs>
|
|
||||||
<Tab title="الاستخدام">
|
|
||||||
|
|
||||||
```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="الخصائص">
|
|
||||||
|
|
||||||
|
|
||||||
| الخصائص | النوع | الوصف |
|
|
||||||
| --------------- | ----------- | -------------------------------------------------------------------- |
|
|
||||||
| الصورة الرمزبية | `ReactNode` | الصورة الرمزبية أو الأيقونة لعرضها على الجانب الأيسر من عنصر القائمة |
|
|
||||||
| نص | نص | محتوى النص لعنصر القائمة |
|
|
||||||
| المحدد | قيمة منطقية | يشير إلى ما إذا كان عنصر القائمة محددًا (مفحوص) |
|
|
||||||
| onSelectChange | دالة | وظيفة استدعاء يتم تشغيلها عند تغيير حالة مربع الاختيار |
|
|
||||||
| اسم الفئة | نص | اسم اختياري لتنسيقات إضافية |
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</Tab>
|
|
||||||
</Tabs>
|
|
||||||
|
|
||||||
### التنقل
|
|
||||||
|
|
||||||
عنصر قائمة يتضمن أيقونة يسارية اختيارية، محتوى نصي، وأيقونة سهم إلى اليمين.
|
|
||||||
|
|
||||||
<Tabs>
|
|
||||||
<Tab title="الاستخدام">
|
|
||||||
|
|
||||||
```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="العناصر">
|
|
||||||
|
|
||||||
|
|
||||||
| العناصر | النوع | الوصف |
|
|
||||||
| --------------- | ------------- | ------------------------------------------------------ |
|
|
||||||
| الأيقونة اليسرى | مكون الأيقونة | أيقونة اختيارية تظهر قبل النص في عنصر القائمة |
|
|
||||||
| نص | نص | محتوى النص لعنصر القائمة |
|
|
||||||
| عند_النقر | دالة | وظيفة الاستدعاء يتم تنشيطها عند النقر على عنصر القائمة |
|
|
||||||
| اسم الفئة | نص | اسم اختياري لتنسيقات إضافية |
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</Tab>
|
|
||||||
</Tabs>
|
|
||||||
|
|
||||||
### اختيار
|
|
||||||
|
|
||||||
عنصر قائمة يمكن تحديده، مع شكل محتوى متاح (أيقونة ونص) ومُؤشر (أيقونة تحقق) لحالة الاختيار.
|
|
||||||
|
|
||||||
<Tabs>
|
|
||||||
<Tab title="الاستخدام">
|
|
||||||
|
|
||||||
```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="الخصائص">
|
|
||||||
|
|
||||||
|
|
||||||
| الخصائص | النوع | الوصف |
|
|
||||||
| --------------- | ------------- | ---------------------------------------------------------- |
|
|
||||||
| الأيقونة اليسرى | مكون الأيقونة | أيقونة اختيارية تظهر قبل النص في عنصر القائمة |
|
|
||||||
| نص | نص | محتوى النص لعنصر القائمة |
|
|
||||||
| المحدد | قيمة منطقية | يشير إلى ما إذا كان عنصر القائمة محددًا (مفحوص) |
|
|
||||||
| تعطيل | قيمة منطقية | يشير إلى ما إذا كان عنصر القائمة معطلا |
|
|
||||||
| معطل | قيمة منطقية | يشير إلى ما إذا كان يتم التحويم حاليًا على عنصر القائمة |
|
|
||||||
| عند_النقر | دالة | دالة الاستدعاء التي يتم تحفيزها عند النقر على عنصر القائمة |
|
|
||||||
| اسم الفئة | نص | اسم اختياري لتنسيقات إضافية |
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</Tab>
|
|
||||||
</Tabs>
|
|
||||||
|
|
||||||
### اختيار الصورة الرمزية
|
|
||||||
|
|
||||||
عنصر قائمة قابل للتحديد مع صورة رمزية، يتضمن محتوى يسارياً اختيارياً (صورة رمزية ونصاً) ومؤشراً (أيقونة التحقق) لحالة التحديد.
|
|
||||||
|
|
||||||
<Tabs>
|
|
||||||
<Tab title="الاستخدام">
|
|
||||||
|
|
||||||
```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="الخصائص">
|
|
||||||
|
|
||||||
|
|
||||||
| الخصائص | النوع | الوصف |
|
|
||||||
| -------------- | ------------ | ---------------------------------------------------------------------------- |
|
|
||||||
| الصورة الرمزية | `مكون React` | الصورة الرمزية أو الأيقونة التي سيتم عرضها على الجانب الأيسر من عنصر القائمة |
|
|
||||||
| نص | نص | محتوى النص في عنصر القائمة |
|
|
||||||
| المحدد | قيمة منطقية | يشير إلى ما إذا كان عنصر القائمة محددًا (مفحوص) |
|
|
||||||
| تعطيل | قيمة منطقية | يشير إلى ما إذا كان عنصر القائمة معطلاً |
|
|
||||||
| معلق عليه | قيمة منطقية | يشير إلى ما إذا كان يتم التحويم حاليًا على عنصر القائمة |
|
|
||||||
| testId | نص | سمة data-testid لأغراض الاختبار |
|
|
||||||
| عند_النقر | دالة | دالة الاستدعاء التي يتم تحفيزها عند النقر على عنصر القائمة |
|
|
||||||
| اسم الفئة | نص | اسم اختياري للتنسيق الإضافي. |
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</Tab>
|
|
||||||
</Tabs>
|
|
||||||
|
|
||||||
### اختيار اللون
|
|
||||||
|
|
||||||
عنصر قائمة قابل للتحديد يتضمن عينة لون للسيناريوهات التي تريد فيها من المستخدمين اختيار لون من القائمة.
|
|
||||||
|
|
||||||
<Tabs>
|
|
||||||
<Tab title="الاستخدام">
|
|
||||||
|
|
||||||
```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="الخصائص">
|
|
||||||
|
|
||||||
|
|
||||||
| الخصائص | النوع | الوصف |
|
|
||||||
| --------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
||||||
| اللون | نص | لون الثيم المعروض كعينة في عنصر القائمة. الخيارات تشمل: `أخضر`, `تركواز`, `سماوي`, `أزرق`, `أرجواني`, `وردي`, `أحمر`, `برتقالي`, `أصفر`, `رمادي`. |
|
|
||||||
| المحدد | قيمة منطقية | يشير إلى ما إذا كان عنصر القائمة محددًا (مفحوص) |
|
|
||||||
| تعطيل | قيمة منطقية | يشير إلى ما إذا كان عنصر القائمة معطلاً |
|
|
||||||
| معلق عليه | قيمة منطقية | يشير إلى ما إذا كان يتم التحويم حاليًا على عنصر القائمة |
|
|
||||||
| البديل | نص | المتغير لعينة اللون. يمكن أن يكون إما `افتراضي` أو `خط أنابيب` |
|
|
||||||
| عند_النقر | دالة | دالة الاستدعاء التي يتم تحفيزها عند النقر على عنصر القائمة |
|
|
||||||
| اسم الفئة | نص | اسم اختياري للتنسيق الإضافي. |
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</Tab>
|
|
||||||
</Tabs>
|
|
||||||
|
|
||||||
### تبديل
|
|
||||||
|
|
||||||
عنصر قائمة مع مفتاح تبديل مرتبط للسماح للمستخدمين بتمكين أو تعطيل ميزة معينة
|
|
||||||
|
|
||||||
<Tabs>
|
|
||||||
<Tab title="الاستخدام">
|
|
||||||
|
|
||||||
```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="الخصائص">
|
|
||||||
|
|
||||||
|
|
||||||
| الخصائص | النوع | الوصف |
|
|
||||||
| --------------- | ------------- | ------------------------------------------------------------ |
|
|
||||||
| الأيقونة اليسرى | مكون الأيقونة | أيقونة اختيارية تُعرض قبل النص في عنصر القائمة |
|
|
||||||
| نص | نص | محتوى النص في عنصر القائمة |
|
|
||||||
| مبدل | قيمة منطقية | يشير إلى ما إذا كان مفتاح التبديل في حالة "تشغيل" أو "إيقاف" |
|
|
||||||
| onToggleChange | دالة | دالة الاستدعاء التي يتم تحفيزها عند تغيير حالة مفتاح التبديل |
|
|
||||||
| حجم التبديل | نص | حجم مفتاح التبديل. يمكن أن يكون إما \ |
|
|
||||||
| اسم الفئة | نص | اسم اختياري لتنسيقات إضافية |
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</Tab>
|
|
||||||
</Tabs>
|
|
||||||
@@ -1,52 +0,0 @@
|
|||||||
---
|
|
||||||
title: شريط التنقل
|
|
||||||
icon: bars
|
|
||||||
---
|
|
||||||
|
|
||||||
يستعرض شريط التنقل الذي يحتوي على عدة مكونات `NavigationBarItem`.
|
|
||||||
|
|
||||||
<Tabs>
|
|
||||||
<Tab title="استخدام">
|
|
||||||
|
|
||||||
```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="المحددات">
|
|
||||||
|
|
||||||
|
|
||||||
| المحددات | النوع | الوصف |
|
|
||||||
| ---------------- | ------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
||||||
| اسم العنصر النشط | نص | اسم العنصر النشط حاليًا في قائمة التنقل |
|
|
||||||
| العناصر | مصفوفة | مصفوفة من الكائنات التي تمثل كل عنصر من عناصر التنقل. كل كائن يحتوي على `الاسم` للعنصر، ومكون `الأيقونة` للعرض، ودالة `onClick` التي تستدعي عند النقر على العنصر |
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</Tab>
|
|
||||||
</Tabs>
|
|
||||||
@@ -1,41 +0,0 @@
|
|||||||
---
|
|
||||||
title: شريط الخطوات
|
|
||||||
---
|
|
||||||
|
|
||||||
<Frame>
|
|
||||||
<img src="/images/user-guide/api/api.png" alt="رأس الصفحة" />
|
|
||||||
</Frame>
|
|
||||||
|
|
||||||
يعرض التقدم من خلال سلسلة من الخطوات المرقمة عن طريق تمييز الخطوة النشطة. يولد حاوية تحتوي على خطوات، يتم تمثيل كل منها بواسطة مكون 'Step'.
|
|
||||||
|
|
||||||
<Tabs>
|
|
||||||
<Tab title="استخدام">
|
|
||||||
|
|
||||||
```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="المحددات">
|
|
||||||
|
|
||||||
|
|
||||||
| الخصائص | النوع | الوصف |
|
|
||||||
| ------------- | ----- | ----------------------------------------------------------------- |
|
|
||||||
| الخطوة النشطة | رقم | مؤشر للخطوة النشطة حاليًا. هذا يحدد أي خطوة يجب إبرازها بشكل مرئي |
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</Tab>
|
|
||||||
</Tabs>
|
|
||||||
@@ -1,78 +0,0 @@
|
|||||||
---
|
|
||||||
title: التغذية الراجعة
|
|
||||||
---
|
|
||||||
|
|
||||||
يشير إلى تقدم أو عد تنازلي ويتحرك من اليمين إلى اليسار.
|
|
||||||
|
|
||||||
<Tabs>
|
|
||||||
|
|
||||||
<Tab title="استخدام">
|
|
||||||
|
|
||||||
```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="المحددات">
|
|
||||||
|
|
||||||
|
|
||||||
| المحددات | النوع | الوصف | الإعداد الافتراضي |
|
|
||||||
| ---------------- | ----------- | ------------------------------------------------------------------------------- | ----------------- |
|
|
||||||
| المدة | رقم | إجمالي مدة الرسوم المتحركة لشريط التقدم بالميلي ثانية | 3 |
|
|
||||||
| التأخير | رقم | التأخير في بدء الرسوم المتحركة لشريط التقدم بالميلي ثانية | 0 |
|
|
||||||
| التخفيف | نص | وظيفة التخفيف للرسوم المتحركة لشريط التقدم | easeInOut |
|
|
||||||
| ارتفاع الشريط | رقم | ارتفاع الشريط بالبكسل | 24 |
|
|
||||||
| لون الشريط | نص | لون الشريط | gray80 |
|
|
||||||
| التشغيل التلقائي | قيمة منطقية | إذا كان `true`، فإن الرسوم المتحركة لشريط التقدم تبدأ تلقائيًا عند تحميل المكون | `صحيح` |
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</Tab>
|
|
||||||
</Tabs>
|
|
||||||
|
|
||||||
## شريط التقدم الدائري
|
|
||||||
|
|
||||||
يشير إلى تقدم المهمة، ويستخدم غالباً في شاشات التحميل أو الأماكن التي ترغب فيها في إبلاغ العمليات الجارية إلى المستخدم.
|
|
||||||
|
|
||||||
<Tabs>
|
|
||||||
|
|
||||||
<Tab title="استخدام">
|
|
||||||
|
|
||||||
```jsx
|
|
||||||
import { CircularProgressBar } from "@/ui/feedback/progress-bar/components/CircularProgressBar";
|
|
||||||
|
|
||||||
export const MyComponent = () => {
|
|
||||||
return <CircularProgressBar size={80} barWidth={6} barColor="green" />;
|
|
||||||
};
|
|
||||||
```
|
|
||||||
|
|
||||||
</Tab>
|
|
||||||
|
|
||||||
<Tab title="الخصائص">
|
|
||||||
|
|
||||||
|
|
||||||
| الخصائص | النوع | الوصف | الإعداد الافتراضي |
|
|
||||||
| ---------- | ----- | ----------------------- | ----------------- |
|
|
||||||
| الحجم | رقم | حجم شريط التقدم الدائري | 50 |
|
|
||||||
| عرض الشريط | رقم | عرض خط شريط التقدم | 5 |
|
|
||||||
| لون الشريط | نص | لون شريط التقدم | currentColor |
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</Tab>
|
|
||||||
|
|
||||||
</Tabs>
|
|
||||||
@@ -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>
|
|
||||||
@@ -1,94 +0,0 @@
|
|||||||
---
|
|
||||||
title: App-Tooltip
|
|
||||||
icon: message
|
|
||||||
---
|
|
||||||
|
|
||||||
<Frame>
|
|
||||||
<img src="/images/user-guide/tips/light-bulb.png" alt="Kopfzeile" />
|
|
||||||
</Frame>
|
|
||||||
|
|
||||||
Eine kurze Nachricht, die zusätzliche Informationen anzeigt, wenn ein Benutzer mit einem Element interagiert.
|
|
||||||
|
|
||||||
<Tabs>
|
|
||||||
<Tab title=""Verwendung"">
|
|
||||||
|
|
||||||
```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=""Eigenschaften"">
|
|
||||||
|
|
||||||
|
|
||||||
| "Eigenschaften" | Typ | Beschreibung |
|
|
||||||
| ---------------- | --------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
||||||
| Klassenname | Zeichenkette | Optionale CSS-Klasse für zusätzliche Stilgebung |
|
|
||||||
| anchorSelect | CSS-Selektor | Selektor für den Tooltip-Anker (das Element, das den Tooltip triggert) |
|
|
||||||
| Inhalt | string | Der Inhalt, den Sie im Tooltip anzeigen möchten |
|
|
||||||
| delayHide | nummer | Die Verzögerung in Sekunden, bis der Tooltip nach dem Verlassen des Ankers ausgeblendet wird |
|
|
||||||
| offset | nummer | Der Versatz in Pixeln zur Positionierung des Tooltips |
|
|
||||||
| noArrow | boolesch | Wenn `wahr`, wird der Pfeil am Tooltip ausgeblendet |
|
|
||||||
| isOpen | boolesch | Wenn `wahr`, ist der Tooltip standardmäßig geöffnet |
|
|
||||||
| place | `PlacesType` Zeichenkette von `react-tooltip` | Gibt die Platzierung des Tooltips an. Werte umfassen `unten`, `links`, `rechts`, `oben`, `oben-start`, `oben-end`, `rechts-start`, `rechts-end`, `unten-start`, `unten-end`, `links-start`, und `links-end` |
|
|
||||||
| positionStrategy | `PositionStrategy` Zeichenkette von `react-tooltip` | Positionsstrategie für den Tooltip. Hat zwei Werte: `absolut` und `fest` |
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</Tab>
|
|
||||||
|
|
||||||
</Tabs>
|
|
||||||
|
|
||||||
## Überlaufender Text mit Tooltip
|
|
||||||
|
|
||||||
Behandelt überlaufenden Text und zeigt einen Tooltip an, wenn der Text überläuft.
|
|
||||||
|
|
||||||
<Tabs>
|
|
||||||
<Tab title="Verwendung">
|
|
||||||
|
|
||||||
```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="Eigenschaften">
|
|
||||||
|
|
||||||
|
|
||||||
| Eigenschaften | Typ | Beschreibung |
|
|
||||||
| ------------- | ------------ | ----------------------------------------------------------------- |
|
|
||||||
| text | Zeichenkette | Der Inhalt, den Sie im überlaufenden Textbereich anzeigen möchten |
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</Tab>
|
|
||||||
|
|
||||||
</Tabs>
|
|
||||||
@@ -1,73 +0,0 @@
|
|||||||
---
|
|
||||||
title: Häkchen
|
|
||||||
icon: circle-check
|
|
||||||
---
|
|
||||||
|
|
||||||
<Frame>
|
|
||||||
<img src="/images/user-guide/tasks/tasks_header.png" alt="Kopfzeile" />
|
|
||||||
</Frame>
|
|
||||||
|
|
||||||
Stellt eine erfolgreiche oder abgeschlossene Aktion dar.
|
|
||||||
|
|
||||||
<Tabs>
|
|
||||||
<Tab title=""Verwendung"">
|
|
||||||
|
|
||||||
```jsx
|
|
||||||
import { Checkmark } from 'twenty-ui/display';
|
|
||||||
|
|
||||||
export const MyComponent = () => {
|
|
||||||
return <Checkmark />;
|
|
||||||
};
|
|
||||||
```
|
|
||||||
|
|
||||||
|
|
||||||
</Tab>
|
|
||||||
|
|
||||||
<Tab title=""Eigenschaften"">
|
|
||||||
|
|
||||||
Erweitert `React.ComponentPropsWithoutRef<'div'>` und akzeptiert alle Eigenschaften eines regulären `div`-Elements.
|
|
||||||
|
|
||||||
</Tab>
|
|
||||||
|
|
||||||
</Tabs>
|
|
||||||
|
|
||||||
## Animiertes Häkchen
|
|
||||||
|
|
||||||
Stellt ein Häkchen-Symbol mit der zusätzlichen Funktion der Animation dar.
|
|
||||||
|
|
||||||
<Tabs>
|
|
||||||
|
|
||||||
<Tab title="Verwendung">
|
|
||||||
|
|
||||||
```jsx
|
|
||||||
import { AnimatedCheckmark } from 'twenty-ui/display';
|
|
||||||
|
|
||||||
export const MyComponent = () => {
|
|
||||||
return (
|
|
||||||
<AnimatedCheckmark
|
|
||||||
isAnimating={true}
|
|
||||||
color="green"
|
|
||||||
duration={0.5}
|
|
||||||
size={30}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
```
|
|
||||||
|
|
||||||
</Tab>
|
|
||||||
|
|
||||||
<Tab title="Eigenschaften">
|
|
||||||
|
|
||||||
|
|
||||||
| Eigenschaften | Typ | Beschreibung | Standard |
|
|
||||||
| ------------- | ------------ | ------------------------------------- | ------------ |
|
|
||||||
| isAnimating | boolesch | Steuert, ob das Häkchen animiert wird | falsch |
|
|
||||||
| farbe | Zeichenkette | Farbe des Häkchens | |
|
|
||||||
| Dauer | nummer | Die Dauer der Animation in Sekunden | 0,5 Sekunden |
|
|
||||||
| größe | nummer | Die Größe des Häkchens | 28 Pixel |
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</Tab>
|
|
||||||
|
|
||||||
</Tabs>
|
|
||||||
@@ -1,153 +0,0 @@
|
|||||||
---
|
|
||||||
title: Chip
|
|
||||||
---
|
|
||||||
|
|
||||||
<Frame>
|
|
||||||
<img src="/images/user-guide/github/github-header.png" alt="Kopfzeile" />
|
|
||||||
</Frame>
|
|
||||||
|
|
||||||
Ein visuelles Element, das Sie als klickbaren oder nicht klickbaren Container mit einem Etikett, optionalen linken und rechten Komponenten und verschiedenen Stiloptionen verwenden können, um Etiketten und Tags anzuzeigen.
|
|
||||||
|
|
||||||
<Tabs>
|
|
||||||
|
|
||||||
<Tab title=""Verwendung"">
|
|
||||||
|
|
||||||
```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=""Eigenschaften"">
|
|
||||||
|
|
||||||
|
|
||||||
| Props | Typ | Beschreibung |
|
|
||||||
| ------------ | ------------------------- | ------------------------------------------------------------------------------------------------------ |
|
|
||||||
| linkToEntity | Zeichenkette | Der Link zur Entität |
|
|
||||||
| entityId | Zeichenkette | Der eindeutige Identifikator für die Entität |
|
|
||||||
| name | string | Der Name der Entität |
|
|
||||||
| pictureUrl | Zeichenkette | s Bild", |
|
|
||||||
| avatarType | Avatar-Typ | Der Typ des Avatars, den Sie anzeigen möchten. Hat zwei Optionen: `abgerundet` und `quadratisch` |
|
|
||||||
| Variante | `EntityChipVariante` enum | Variante des Entity-Chips, die Sie anzeigen möchten. Hat zwei Optionen: `regelmäßig` und `transparent` |
|
|
||||||
| LeftIcon | Icon-Komponente | Eine React-Komponente, die ein Symbol darstellt. Wird auf der linken Seite des Chips angezeigt |
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</Tab>
|
|
||||||
</Tabs>
|
|
||||||
|
|
||||||
## Beispiele
|
|
||||||
|
|
||||||
### Transparenter deaktivierter Chip
|
|
||||||
|
|
||||||
```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 />
|
|
||||||
|
|
||||||
### Deaktivierter Chip mit Tooltip
|
|
||||||
|
|
||||||
```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
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
```
|
|
||||||
|
|
||||||
## Entity-Chip
|
|
||||||
|
|
||||||
Ein Chip-ähnliches Element, um Informationen über eine Entität anzuzeigen.
|
|
||||||
|
|
||||||
<Tabs>
|
|
||||||
|
|
||||||
<Tab title="Verwendung">
|
|
||||||
|
|
||||||
```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="Eigenschaften">
|
|
||||||
|
|
||||||
|
|
||||||
| Props | Typ | Beschreibung |
|
|
||||||
| ------------ | ------------------------- | ------------------------------------------------------------------------------------------------------ |
|
|
||||||
| linkToEntity | string | Der Link zur Entität |
|
|
||||||
| entityId | string | Der eindeutige Identifikator für die Entität |
|
|
||||||
| name | string | Der Name der Entität |
|
|
||||||
| pictureUrl | Zeichenfolge | s Bild", |
|
|
||||||
| avatarType | Avatar-Typ | Der Typ des Avatars, den Sie anzeigen möchten. Hat zwei Optionen: `abgerundet` und `quadratisch` |
|
|
||||||
| Variante | `EntityChipVariante` enum | Variante des Entity-Chips, die Sie anzeigen möchten. Hat zwei Optionen: `regelmäßig` und `transparent` |
|
|
||||||
| LeftIcon | Icon-Komponente | Eine React-Komponente, die ein Symbol darstellt. Wird auf der linken Seite des Chips angezeigt |
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</Tab>
|
|
||||||
</Tabs>
|
|
||||||
@@ -1,91 +0,0 @@
|
|||||||
---
|
|
||||||
title: Icons
|
|
||||||
icon: icons
|
|
||||||
---
|
|
||||||
|
|
||||||
<Frame>
|
|
||||||
<img src="/images/user-guide/objects/objects.png" alt="Kopfzeile" />
|
|
||||||
</Frame>
|
|
||||||
|
|
||||||
Eine Liste von Symbolen, die in unserer App verwendet werden.
|
|
||||||
|
|
||||||
## Tabler-Symbole
|
|
||||||
|
|
||||||
Wir verwenden Tabler-Symbole für React in der gesamten App.
|
|
||||||
|
|
||||||
<Tabs>
|
|
||||||
|
|
||||||
<Tab title="Installation">
|
|
||||||
<br />
|
|
||||||
|
|
||||||
```
|
|
||||||
yarn add @tabler/icons-react
|
|
||||||
```
|
|
||||||
|
|
||||||
</Tab>
|
|
||||||
|
|
||||||
<Tab title="Props">
|
|
||||||
|
|
||||||
Sie können jedes Symbol als Komponente importieren. Hier ist ein Beispiel:
|
|
||||||
<br />
|
|
||||||
|
|
||||||
```jsx
|
|
||||||
import { IconArrowLeft } from "@tabler/icons-react";
|
|
||||||
|
|
||||||
export const MyComponent = () => {
|
|
||||||
return <IconArrowLeft color="red" size={48} />;
|
|
||||||
};
|
|
||||||
```
|
|
||||||
|
|
||||||
</Tab>
|
|
||||||
|
|
||||||
<Tab title="Props">
|
|
||||||
|
|
||||||
|
|
||||||
| Props | Typ | Beschreibung | Standard |
|
|
||||||
| ------ | ------------ | ----------------------------------------- | ------------ |
|
|
||||||
| größe | nummer | Die Höhe und Breite des Symbols in Pixeln | 24 |
|
|
||||||
| farbe | Zeichenkette | Die Farbe der Symbole | currentColor |
|
|
||||||
| Strich | nummer | Die Strichbreite des Symbols in Pixeln | 2 |
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</Tab>
|
|
||||||
|
|
||||||
</Tabs>
|
|
||||||
|
|
||||||
## Benutzerdefinierte Symbole
|
|
||||||
|
|
||||||
Zusätzlich zu den Tabler-Symbolen verwendet die App auch einige benutzerdefinierte Symbole.
|
|
||||||
|
|
||||||
### Symbol: Adressbuch
|
|
||||||
|
|
||||||
Zeigt ein Adressbuchsymbol an.
|
|
||||||
|
|
||||||
<Tabs>
|
|
||||||
|
|
||||||
<Tab title="Verwendung">
|
|
||||||
|
|
||||||
```jsx
|
|
||||||
import { IconAddressBook } from 'twenty-ui/display';
|
|
||||||
|
|
||||||
export const MyComponent = () => {
|
|
||||||
return <IconAddressBook size={24} stroke={2} />;
|
|
||||||
};
|
|
||||||
```
|
|
||||||
|
|
||||||
</Tab>
|
|
||||||
|
|
||||||
<Tab title="Eigenschaften">
|
|
||||||
|
|
||||||
|
|
||||||
| Eigenschaften | Typ | Beschreibung | Standard |
|
|
||||||
| ------------- | ------ | ----------------------------------------- | -------- |
|
|
||||||
| größe | nummer | Die Höhe und Breite des Symbols in Pixeln | 24 |
|
|
||||||
| Strich | nummer | Die Strichbreite des Symbols in Pixeln | 2 |
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</Tab>
|
|
||||||
|
|
||||||
</Tabs>
|
|
||||||
@@ -1,13 +0,0 @@
|
|||||||
---
|
|
||||||
title: Soon Pill
|
|
||||||
---
|
|
||||||
|
|
||||||
Ein kleines Abzeichen oder "Pille", um anzuzeigen, dass etwas bald kommt.
|
|
||||||
|
|
||||||
```jsx
|
|
||||||
import { SoonPill } from "@/ui/display/pill/components/SoonPill";
|
|
||||||
|
|
||||||
export const MyComponent = () => {
|
|
||||||
return <SoonPill />;
|
|
||||||
};
|
|
||||||
```
|
|
||||||
@@ -1,43 +0,0 @@
|
|||||||
---
|
|
||||||
title: '"Tag"'
|
|
||||||
icon: tag
|
|
||||||
---
|
|
||||||
|
|
||||||
Komponente zur visuellen Kategorisierung oder Kennzeichnung von Inhalten.
|
|
||||||
|
|
||||||
<Tabs>
|
|
||||||
|
|
||||||
<Tab title=""Verwendung"">
|
|
||||||
|
|
||||||
```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=""Eigenschaften"">
|
|
||||||
|
|
||||||
|
|
||||||
| "Eigenschaften" | Typ | Beschreibung |
|
|
||||||
| --------------- | ------------ | --------------------------------------------------------------------------------------------------------------------------- |
|
|
||||||
| Klassenname | Zeichenkette | Optionaler Name für zusätzliche Gestaltung |
|
|
||||||
| farbe | Zeichenkette | Farbe des Tags. Optionen umfassen: `green`, `turquoise`, `sky`, `blue`, `purple`, `pink`, `red`, `orange`, `yellow`, `gray` |
|
|
||||||
| text | string | Der Inhalt des Tags |
|
|
||||||
| onClick | Funktion | Optionale Funktion, die aufgerufen wird, wenn ein Benutzer auf das Tag klickt |
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</Tab>
|
|
||||||
|
|
||||||
</Tabs>
|
|
||||||
@@ -1,7 +0,0 @@
|
|||||||
---
|
|
||||||
title: Eingabe
|
|
||||||
---
|
|
||||||
|
|
||||||
<Frame>
|
|
||||||
<img src="/images/user-guide/tips/light-bulb.png" alt="Kopfzeile" />
|
|
||||||
</Frame>
|
|
||||||
@@ -1,36 +0,0 @@
|
|||||||
---
|
|
||||||
title: Block-Editor
|
|
||||||
---
|
|
||||||
|
|
||||||
<Frame>
|
|
||||||
<img src="/images/user-guide/api/api.png" alt="Kopfzeile" />
|
|
||||||
</Frame>
|
|
||||||
|
|
||||||
Verwendet einen blockbasierten Rich-Text-Editor von [BlockNote](https://www.blocknotejs.org/), um Benutzern das Bearbeiten und Anzeigen von Inhaltsblöcken zu ermöglichen.
|
|
||||||
|
|
||||||
<Tabs>
|
|
||||||
<Tab title=""Verwendung"">
|
|
||||||
|
|
||||||
```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=""Eigenschaften"">
|
|
||||||
|
|
||||||
|
|
||||||
| Props | Typ | Beschreibung |
|
|
||||||
| ------ | ----------------- | ------------------------------------------- |
|
|
||||||
| Editor | `BlockNoteEditor` | Instanz oder Konfiguration des Blockeditors |
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</Tab>
|
|
||||||
</Tabs>
|
|
||||||
@@ -1,522 +0,0 @@
|
|||||||
---
|
|
||||||
title: Schaltflächen
|
|
||||||
icon: hand-pointer
|
|
||||||
---
|
|
||||||
|
|
||||||
<Frame>
|
|
||||||
<img src="/images/user-guide/views/filter.png" alt="Kopfzeile" />
|
|
||||||
</Frame>
|
|
||||||
|
|
||||||
Eine Liste von Schaltflächen und Schaltflächengruppen, die in der gesamten App verwendet werden.
|
|
||||||
|
|
||||||
## Schaltfläche
|
|
||||||
|
|
||||||
<Tabs>
|
|
||||||
|
|
||||||
<Tab title="Verwendung">
|
|
||||||
|
|
||||||
```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="Eigenschaften">
|
|
||||||
|
|
||||||
|
|
||||||
| Eigenschaften | Typ | Beschreibung |
|
|
||||||
| ------------- | --------------------- | -------------------------------------------------------------------------------------------------------------------- |
|
|
||||||
| className | Zeichenkette | Optionaler Klassenname für zusätzliche Stilierung |
|
|
||||||
| Symbol | `React.ComponentType` | Eine optionale Symbolkomponente, die innerhalb der Schaltfläche angezeigt wird |
|
|
||||||
| titel | Zeichenkette | Der Textinhalt der Schaltfläche |
|
|
||||||
| volle Breite | boolesch | Definiert, ob die Schaltfläche die gesamte Breite ihres Containers einnehmen soll |
|
|
||||||
| Variante | Zeichenkette | Die visuelle Stilvariante der Schaltfläche. Optionen umfassen `primär`, `sekundär` und `tertiär` |
|
|
||||||
| größe | Zeichenkette | Die Größe der Schaltfläche. Hat zwei Optionen: `klein` und `mittel` |
|
|
||||||
| position | Zeichenkette | Die Position des Knopfes in Bezug auf seine Geschwister. Optionen umfassen: `einzeln`, `links`, `rechts` und `mitte` |
|
|
||||||
| Akzent | Zeichenkette | Die Akzentfarbe der Schaltfläche. Optionen umfassen: `Standard`, `blau` und `Gefahr` |
|
|
||||||
| bald | boolesch | Gibt an, ob die Schaltfläche als "bald" markiert ist (z.B. für kommende Features) |
|
|
||||||
| deaktiviert | boolesch | Gibt an, ob die Schaltfläche deaktiviert ist. |
|
|
||||||
| Fokus | boolesch | Bestimmt, ob die Schaltfläche den Fokus hat. |
|
|
||||||
| beiKlick | Funktion | Eine Rückruffunktion, die ausgelöst wird, wenn der Benutzer auf die Schaltfläche klickt |
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</Tab>
|
|
||||||
|
|
||||||
</Tabs>
|
|
||||||
|
|
||||||
## Schaltflächengruppe
|
|
||||||
|
|
||||||
<Tabs>
|
|
||||||
<Tab title="Verwendung">
|
|
||||||
```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="Eigenschaften">
|
|
||||||
|
|
||||||
|
|
||||||
| Eigenschaften | Typ | Beschreibung |
|
|
||||||
| ------------- | ------------ | ---------------------------------------------------------------------------------------------------------------------- |
|
|
||||||
| Variante | Zeichenkette | Die visuelle Stilvariante der Schaltflächen innerhalb der Gruppe. Optionen umfassen `primär`, `sekundär` und `tertiär` |
|
|
||||||
| größe | Zeichenkette | Die Größe der Schaltflächen innerhalb der Gruppe. Hat zwei Optionen: `mittel` und `klein` |
|
|
||||||
| Akzent | Zeichenkette | Die Akzentfarbe der Schaltflächen innerhalb der Gruppe. Optionen umfassen: `Standard`, `blau` und `Gefahr` |
|
|
||||||
| Klassenname | Zeichenkette | Optionaler Klassenname für zusätzliche Stilierung |
|
|
||||||
| Kinder | ReactNode | Ein Array von React-Elementen, die die einzelnen Schaltflächen innerhalb der Gruppe darstellen |
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</Tab>
|
|
||||||
</Tabs>
|
|
||||||
|
|
||||||
## Schwebende Schaltfläche
|
|
||||||
|
|
||||||
<Tabs>
|
|
||||||
<Tab title="Verwendung">
|
|
||||||
|
|
||||||
```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="Eigenschaften">
|
|
||||||
|
|
||||||
|
|
||||||
| Eigenschaften | Typ | Beschreibung |
|
|
||||||
| ---------------- | --------------------- | ----------------------------------------------------------------------------------------------------------------- |
|
|
||||||
| Klassenname | Zeichenkette | Optionaler Name für zusätzliche Stilierung |
|
|
||||||
| Symbol | `React.ComponentType` | Eine optionale Symbolkomponente, die innerhalb der Schaltfläche angezeigt wird |
|
|
||||||
| titel | Zeichenfolge | Der Textinhalt der Schaltfläche |
|
|
||||||
| größe | Zeichenfolge | Die Größe der Schaltfläche. Hat zwei Optionen: `klein` und `mittel` |
|
|
||||||
| position | Zeichenkette | Die Position des Knopfes in Bezug auf seine Geschwister. Optionen umfassen: `einzeln`, `links`, `mitte`, `rechts` |
|
|
||||||
| SchattenAnwenden | boolesch | Bestimmt, ob auf die Schaltfläche ein Schatten angewendet wird |
|
|
||||||
| applyBlur | boolesch | Bestimmt, ob ein Unschärfeeffekt auf die Schaltfläche angewendet wird |
|
|
||||||
| deaktiviert | boolesch | Bestimmt, ob die Schaltfläche deaktiviert ist |
|
|
||||||
| Fokus | boolesch | Gibt an, ob die Schaltfläche den Fokus hat |
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</Tab>
|
|
||||||
</Tabs>
|
|
||||||
|
|
||||||
## Schwebende Schaltflächengruppe
|
|
||||||
|
|
||||||
<Tabs>
|
|
||||||
<Tab title="Verwendung">
|
|
||||||
|
|
||||||
```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="Eigenschaften">
|
|
||||||
|
|
||||||
|
|
||||||
| Eigenschaften | Typ | Beschreibung | Standard |
|
|
||||||
| ------------- | --------- | ---------------------------------------------------------------------------------------------- | -------- |
|
|
||||||
| größe | string | Die Größe der Schaltfläche. Hat zwei Optionen: `klein` und `mittel` | klein |
|
|
||||||
| Kinder | ReactNode | Ein Array von React-Elementen, die die einzelnen Schaltflächen innerhalb der Gruppe darstellen | |
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</Tab>
|
|
||||||
|
|
||||||
</Tabs>
|
|
||||||
|
|
||||||
## Schwebende Symbolschaltfläche
|
|
||||||
|
|
||||||
<Tabs>
|
|
||||||
<Tab title="Verwendung">
|
|
||||||
|
|
||||||
```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="Eigenschaften">
|
|
||||||
|
|
||||||
|
|
||||||
| Eigenschaften | Typ | Beschreibung |
|
|
||||||
| ---------------- | --------------------- | -------------------------------------------------------------------------------------------------------------------- |
|
|
||||||
| Klassenname | string | Optionaler Name für zusätzliche Stilierung |
|
|
||||||
| Symbol | `React.ComponentType` | Eine optionale Symbolkomponente, die innerhalb des Knopfes angezeigt wird. |
|
|
||||||
| größe | string | Die Größe des Knopfes. Hat zwei Optionen: `klein` und `mittel` |
|
|
||||||
| position | Zeichenfolge | Die Position des Knopfes in Bezug auf seine Geschwister. Optionen umfassen: `einzeln`, `links`, `rechts` und `mitte` |
|
|
||||||
| SchattenAnwenden | boolesch | Bestimmt, ob auf die Schaltfläche ein Schatten angewendet wird |
|
|
||||||
| applyBlur | boolesch | Bestimmt, ob ein Unschärfeeffekt auf die Schaltfläche angewendet wird |
|
|
||||||
| deaktiviert | boolesch | Bestimmt, ob der Knopf deaktiviert ist |
|
|
||||||
| Fokus | boolesch | Gibt an, ob der Knopf im Fokus steht |
|
|
||||||
| onClick | Funktion | Eine Callback-Funktion, die ausgelöst wird, wenn der Benutzer auf den Knopf klickt. |
|
|
||||||
| isActive | boolesch | Bestimmt, ob der Knopf in einem aktiven Zustand ist |
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</Tab>
|
|
||||||
|
|
||||||
</Tabs>
|
|
||||||
|
|
||||||
## Schwebende Symbolschaltflächengruppe
|
|
||||||
|
|
||||||
<Tabs>
|
|
||||||
<Tab title="Verwendung">
|
|
||||||
|
|
||||||
```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="Eigenschaften">
|
|
||||||
|
|
||||||
|
|
||||||
| Eigenschaften | Typ | Beschreibung |
|
|
||||||
| ------------- | ------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
||||||
| Klassenname | Zeichenkette | Optionaler Name für zusätzliche Stilierung |
|
|
||||||
| größe | Zeichenfolge | Die Größe des Knopfes. Hat zwei Optionen: `klein` und `mittel` |
|
|
||||||
| Symbolknöpfe | Array | Ein Array von Objekten, die jeweils einen Symbolknopf in der Gruppe darstellen. Jedes Objekt sollte die Symbolkomponente enthalten, die Sie im Knopf anzeigen möchten, die Funktion, die aufgerufen werden soll, wenn ein Benutzer auf den Knopf klickt, und ob der Knopf aktiv sein soll oder nicht. |
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</Tab>
|
|
||||||
|
|
||||||
</Tabs>
|
|
||||||
|
|
||||||
## Leichter Knopf
|
|
||||||
|
|
||||||
<Tabs>
|
|
||||||
<Tab title="Verwendung">
|
|
||||||
|
|
||||||
```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="Einstellungen">
|
|
||||||
|
|
||||||
|
|
||||||
| Einstellungen | Typ | Beschreibung |
|
|
||||||
| ------------- | ----------------- | ----------------------------------------------------------------------------------- |
|
|
||||||
| Klassenname | Zeichenkette | Optionaler Name für zusätzliche Stilierung |
|
|
||||||
| symbol | `React.ReactNode` | Das Symbol, das Sie im Knopf anzeigen möchten. |
|
|
||||||
| titel | Zeichenkette | Der Textinhalt des Knopfes |
|
|
||||||
| Akzent | Zeichenfolge | Die Akzentfarbe des Knopfes. Optionen umfassen: `sekundär` und `tertiär` |
|
|
||||||
| aktiv | boolesch | Bestimmt, ob der Knopf in einem aktiven Zustand ist |
|
|
||||||
| deaktiviert | boolesch | Bestimmt, ob der Knopf deaktiviert ist |
|
|
||||||
| Fokus | boolesch | Gibt an, ob der Knopf im Fokus steht |
|
|
||||||
| beiKlick | Funktion | Eine Callback-Funktion, die ausgelöst wird, wenn der Benutzer auf den Knopf klickt. |
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</Tab>
|
|
||||||
|
|
||||||
</Tabs>
|
|
||||||
|
|
||||||
## Leichte Symbolschaltfläche
|
|
||||||
|
|
||||||
<Tabs>
|
|
||||||
<Tab title="Verwendung">
|
|
||||||
|
|
||||||
```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="Props">
|
|
||||||
|
|
||||||
|
|
||||||
| Props | Typ | Beschreibung |
|
|
||||||
| ----------- | --------------------- | --------------------------------------------------------------------------------------- |
|
|
||||||
| Klassenname | Zeichenkette | Optionaler Name für zusätzliche Gestaltung |
|
|
||||||
| TestId | Zeichenkette | Testidentifikator für die Schaltfläche |
|
|
||||||
| Symbol | `React.ComponentType` | Eine optionale Symbolkomponente, die innerhalb der Schaltfläche angezeigt wird |
|
|
||||||
| titel | Zeichenfolge | Der Textinhalt der Schaltfläche |
|
|
||||||
| größe | Zeichenfolge | Die Größe der Schaltfläche. Hat zwei Optionen: `klein` und `mittel` |
|
|
||||||
| Akzent | Zeichenfolge | Die Akzentfarbe der Schaltfläche. Optionen beinhalten: `sekundär` und `tertiär` |
|
|
||||||
| aktiv | boolesch | Bestimmt, ob die Schaltfläche im aktiven Zustand ist |
|
|
||||||
| deaktiviert | boolesch | Bestimmt, ob die Schaltfläche deaktiviert ist |
|
|
||||||
| Fokus | boolesch | Gibt an, ob die Schaltfläche den Fokus hat |
|
|
||||||
| beiKlick | Funktion | Eine Rückruffunktion, die ausgelöst wird, wenn der Benutzer auf die Schaltfläche klickt |
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</Tab>
|
|
||||||
|
|
||||||
</Tabs>
|
|
||||||
|
|
||||||
## Hauptschaltfläche
|
|
||||||
|
|
||||||
<Tabs>
|
|
||||||
<Tab title="Verwendung">
|
|
||||||
|
|
||||||
```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="Eigenschaften">
|
|
||||||
|
|
||||||
|
|
||||||
| Eigenschaften | Typ | Beschreibung |
|
|
||||||
| -------------------- | -------------------------------- | --------------------------------------------------------------------------------------- |
|
|
||||||
| titel | Zeichenkette | Der Textinhalt der Schaltfläche |
|
|
||||||
| volle Breite | boolesch | Definiert, ob die Schaltfläche die gesamte Breite ihres Containers einnehmen soll |
|
|
||||||
| Variante | Zeichenkette | Die visuelle Stilvariante der Schaltfläche. Optionen beinhalten `primär` und `sekundär` |
|
|
||||||
| bald | boolesch | Gibt an, ob die Schaltfläche als "bald" markiert ist (z.B. für kommende Features) |
|
|
||||||
| Symbol | `React.ComponentType` | Eine optionale Symbolkomponente, die innerhalb der Schaltfläche angezeigt wird |
|
|
||||||
| React-`button`-Props | `React.ComponentProps<'button'>` | Alle Standard-HTML-Schaltflächeneigenschaften werden unterstützt |
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</Tab>
|
|
||||||
|
|
||||||
</Tabs>
|
|
||||||
|
|
||||||
## Abgerundete Symbolschaltfläche
|
|
||||||
|
|
||||||
<Tabs>
|
|
||||||
<Tab title="Verwendung">
|
|
||||||
|
|
||||||
```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="Eigenschaften">
|
|
||||||
|
|
||||||
|
|
||||||
| Eigenschaften | Typ | Beschreibung |
|
|
||||||
| -------------------- | ----------------------------------------------- | ------------ |
|
|
||||||
| Symbol | `React.ComponentType` | |
|
|
||||||
| React-`button`-Props | `React.ButtonHTMLAttributes<HTMLButtonElement>` | |
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</Tab>
|
|
||||||
|
|
||||||
</Tabs>
|
|
||||||
@@ -1,50 +0,0 @@
|
|||||||
---
|
|
||||||
title: Kontrollkästchen
|
|
||||||
icon: square-check
|
|
||||||
---
|
|
||||||
|
|
||||||
<Frame>
|
|
||||||
<img src="/images/user-guide/tasks/tasks_header.png" alt="Kopfzeile" />
|
|
||||||
</Frame>
|
|
||||||
|
|
||||||
Wird verwendet, wenn ein Benutzer mehrere Werte aus mehreren Optionen auswählen muss.
|
|
||||||
|
|
||||||
<Tabs>
|
|
||||||
<Tab title=""Verwendung"">
|
|
||||||
|
|
||||||
```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=""Eigenschaften"">
|
|
||||||
|
|
||||||
|
|
||||||
| "Eigenschaften" | Typ | Beschreibung |
|
|
||||||
| ---------------------- | ------------ | ------------------------------------------------------------------------------------------------------------- |
|
|
||||||
| markiert | boolesch | Gibt an, ob das Kontrollkästchen markiert ist |
|
|
||||||
| unbestimmt | boolesch | Gibt an, ob sich das Kontrollkästchen in einem unbestimmten Zustand befindet (weder markiert noch unmarkiert) |
|
|
||||||
| beiÄnderung | Funktion | Die Rückruffunktion, die ausgelöst werden soll, wenn sich der Zustand des Kontrollkästchens ändert |
|
|
||||||
| beiMarkierungsÄnderung | Funktion | Die Rückruffunktion, die ausgelöst werden soll, wenn sich der `markiert` Zustand ändert |
|
|
||||||
| Variante | Zeichenkette | Der visuelle Stil der Box. Optionen umfassen: `primary`, `secondary` und `tertiary` |
|
|
||||||
| größe | Zeichenkette | Die Größe des Kontrollkästchens. Hat zwei Optionen: `klein` und `groß` |
|
|
||||||
| Form | Zeichenkette | Die Form des Kontrollkästchens. Hat zwei Optionen: `squared` und `rounded` |
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</Tab>
|
|
||||||
</Tabs>
|
|
||||||
@@ -1,79 +0,0 @@
|
|||||||
---
|
|
||||||
title: Farbschema
|
|
||||||
icon: palette
|
|
||||||
---
|
|
||||||
|
|
||||||
<Frame>
|
|
||||||
<img src="/images/user-guide/fields/field.png" alt="Kopfzeile" />
|
|
||||||
</Frame>
|
|
||||||
|
|
||||||
## Farbschema Karte
|
|
||||||
|
|
||||||
Repräsentiert verschiedene Farbschemata und ist speziell für helle und dunkle Themen abgestimmt.
|
|
||||||
|
|
||||||
<Tabs>
|
|
||||||
<Tab title="Verwendung">
|
|
||||||
|
|
||||||
```jsx
|
|
||||||
import { ColorSchemeCard } from "twenty-ui/display";
|
|
||||||
|
|
||||||
export const MyComponent = () => {
|
|
||||||
return (
|
|
||||||
<ColorSchemeCard
|
|
||||||
variant="Dark"
|
|
||||||
selected={true}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
```
|
|
||||||
|
|
||||||
</Tab>
|
|
||||||
|
|
||||||
<Tab title="Eigenschaften">
|
|
||||||
|
|
||||||
|
|
||||||
| Eigenschaften | Typ | Beschreibung | Standard |
|
|
||||||
| ----------------- | --------------------------------------- | --------------------------------------------------------------------------------- | -------- |
|
|
||||||
| Variante | Zeichenkette | Die Variante des Farbschemas. Optionen umfassen `Dunkel`, `Hell` und `System` | hell |
|
|
||||||
| ausgewählt | boolesch | Wenn `true`, wird ein Häkchen angezeigt, um das ausgewählte Farbschema anzuzeigen | |
|
|
||||||
| zusätzliche Props | `React.ComponentPropsWithoutRef<'div'>` | Standard HTML `div` Elementeigenschaften | |
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</Tab>
|
|
||||||
|
|
||||||
</Tabs>
|
|
||||||
|
|
||||||
## Farbschema-Auswahl
|
|
||||||
|
|
||||||
Ermöglicht es den Benutzern, zwischen verschiedenen Farbschemata zu wählen.
|
|
||||||
|
|
||||||
<Tabs>
|
|
||||||
<Tab title="Verwendung">
|
|
||||||
|
|
||||||
```jsx
|
|
||||||
import { ColorSchemePicker } from "twenty-ui/display";
|
|
||||||
|
|
||||||
export const MyComponent = () => {
|
|
||||||
return <ColorSchemePicker
|
|
||||||
value="Dark"
|
|
||||||
onChange
|
|
||||||
/>;
|
|
||||||
};
|
|
||||||
```
|
|
||||||
|
|
||||||
</Tab>
|
|
||||||
|
|
||||||
<Tab title="Eigenschaften">
|
|
||||||
|
|
||||||
|
|
||||||
| Eigenschaften | Typ | Beschreibung |
|
|
||||||
| ------------- | ------------ | ------------------------------------------------------------------------------ |
|
|
||||||
| wert | `Farbschema` | Das aktuell ausgewählte Farbschema |
|
|
||||||
| onChange | Funktion | Die Rückruffunktion, die Sie beim Auswählen eines Farbschemas auslösen möchten |
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</Tab>
|
|
||||||
|
|
||||||
</Tabs>
|
|
||||||
@@ -1,57 +0,0 @@
|
|||||||
---
|
|
||||||
title: Symbolauswahl
|
|
||||||
---
|
|
||||||
|
|
||||||
<Frame>
|
|
||||||
<img src="/images/user-guide/github/github-header.png" alt="Kopfzeile" />
|
|
||||||
</Frame>
|
|
||||||
|
|
||||||
Eine Dropdown-basierte Symbolauswahl, mit der Benutzer ein Symbol aus einer Liste auswählen können.
|
|
||||||
|
|
||||||
<Tabs>
|
|
||||||
|
|
||||||
<Tab title=""Verwendung"">
|
|
||||||
|
|
||||||
```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=""Eigenschaften"">
|
|
||||||
|
|
||||||
|
|
||||||
| Props | Typ | Beschreibung |
|
|
||||||
| --------------- | ------------ | -------------------------------------------------------------------------------------------------------------------------------------- |
|
|
||||||
| deaktiviert | boolesch | Deaktiviert die Symbolauswahl, wenn auf `true` gesetzt ist. |
|
|
||||||
| beiÄnderung | function | Die Rückruffunktion wird ausgelöst, wenn der Benutzer ein Symbol auswählt. Es erhält ein Objekt mit `iconKey` und `Icon` Eigenschaften |
|
|
||||||
| selectedIconKey | string | Der Schlüssel des ursprünglich ausgewählten Symbols |
|
|
||||||
| onClickOutside | Funktion | Rückruffunktion wird ausgelöst, wenn der Benutzer außerhalb des Dropdowns klickt |
|
|
||||||
| onClose | Funktion | Rückruffunktion wird ausgelöst, wenn das Dropdown geschlossen wird |
|
|
||||||
| onOpen | Funktion | Rückruffunktion wird ausgelöst, wenn das Dropdown geöffnet wird |
|
|
||||||
| Variante | Zeichenkette | Die visuelle Stilvariante des klickbaren Symbols. Optionen umfassen: `primary`, `secondary` und `tertiary` |
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</Tab>
|
|
||||||
</Tabs>
|
|
||||||
@@ -1,40 +0,0 @@
|
|||||||
---
|
|
||||||
title: Bildeingabe
|
|
||||||
---
|
|
||||||
|
|
||||||
<Frame>
|
|
||||||
<img src="/images/user-guide/objects/objects.png" alt="Kopfzeile" />
|
|
||||||
</Frame>
|
|
||||||
|
|
||||||
Ermöglicht Benutzern das Hochladen und Entfernen eines Bildes.
|
|
||||||
|
|
||||||
<Tabs>
|
|
||||||
<Tab title=""Verwendung"">
|
|
||||||
|
|
||||||
```jsx
|
|
||||||
import { ImageInput } from "@/ui/input/components/ImageInput";
|
|
||||||
|
|
||||||
export const MyComponent = () => {
|
|
||||||
return <ImageInput/>;
|
|
||||||
};
|
|
||||||
```
|
|
||||||
|
|
||||||
</Tab>
|
|
||||||
<Tab title=""Eigenschaften"">
|
|
||||||
|
|
||||||
|
|
||||||
| Props | Typ | Beschreibung |
|
|
||||||
| ------------- | ------------ | ------------------------------------------------------------------------------------------------------------------------ |
|
|
||||||
| bild | Zeichenkette | Die Bildquellen-URL |
|
|
||||||
| onUpload | Funktion | Die Funktion, die aufgerufen wird, wenn ein Benutzer ein neues Bild hochlädt. Es erhält das `Datei` Objekt als Parameter |
|
|
||||||
| onRemove | Funktion | Die Funktion wird aufgerufen, wenn der Benutzer auf die Entfernen-Schaltfläche klickt. |
|
|
||||||
| onAbort | Funktion | Die Funktion wird aufgerufen, wenn der Benutzer während des Bilduploads auf die Abbrechen-Schaltfläche klickt. |
|
|
||||||
| isUploading | boolesch | Gibt an, ob ein Bild derzeit hochgeladen wird |
|
|
||||||
| Fehlermeldung | Zeichenkette | Eine optionale Fehlermeldung, die unterhalb des Bildeingangs angezeigt wird. |
|
|
||||||
| deaktiviert | boolesch | Wenn `true`, ist die gesamte Eingabe deaktiviert und die Schaltflächen sind nicht anklickbar |
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</Tab>
|
|
||||||
</Tabs>
|
|
||||||
@@ -1,113 +0,0 @@
|
|||||||
---
|
|
||||||
title: Radio
|
|
||||||
icon: circle-dot
|
|
||||||
---
|
|
||||||
|
|
||||||
<Frame>
|
|
||||||
<img src="/images/user-guide/create-workspace/workspace-cover.png" alt="Kopfzeile" />
|
|
||||||
</Frame>
|
|
||||||
|
|
||||||
Verwendet, wenn Benutzer nur eine Option aus einer Reihe von Optionen auswählen können.
|
|
||||||
|
|
||||||
<Tabs>
|
|
||||||
<Tab title=""Verwendung"">
|
|
||||||
|
|
||||||
```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=""Eigenschaften"">
|
|
||||||
|
|
||||||
|
|
||||||
| "Eigenschaften" | Typ | Beschreibung |
|
|
||||||
| ---------------------- | ------------------------- | --------------------------------------------------------------------------------------------------- |
|
|
||||||
| Stil | `React.CSS` Eigenschaften | Zusätzliche Inline-Stile für die Komponente |
|
|
||||||
| Klassenname | Zeichenkette | Optionale CSS-Klasse für zusätzliche Stilgebung |
|
|
||||||
| markiert | boolesch | Gibt an, ob das Optionsfeld ausgewählt ist |
|
|
||||||
| wert | Zeichenkette | Die dem Optionsfeld zugeordnete Beschriftung oder der Text |
|
|
||||||
| onChange | Funktion | Die Funktion, die aufgerufen wird, wenn sich das ausgewählte Optionsfeld ändert |
|
|
||||||
| beiMarkierungsÄnderung | Funktion | Die Funktion, die aufgerufen wird, wenn sich der `checked`-Status des Optionsfelds ändert |
|
|
||||||
| größe | Zeichenkette | Die Größe des Radiobuttons. Optionen umfassen: `groß` und `klein` |
|
|
||||||
| deaktiviert | boolesch | Wenn `true`, ist der Radiobutton deaktiviert und nicht anklickbar |
|
|
||||||
| labelPosition | Zeichenkette | Die Position des Labeltextes im Verhältnis zum Radiobutton. Hat zwei Optionen: `links` und `rechts` |
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</Tab>
|
|
||||||
</Tabs>
|
|
||||||
|
|
||||||
## Radio-Gruppe
|
|
||||||
|
|
||||||
Fasst zusammengehörige Optionsfelder zusammen.
|
|
||||||
|
|
||||||
<Tabs>
|
|
||||||
<Tab title="Verwendung">
|
|
||||||
|
|
||||||
```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="Eigenschaften">
|
|
||||||
|
|
||||||
|
|
||||||
| Eigenschaften | Typ | Beschreibung |
|
|
||||||
| --------------- | ----------------- | --------------------------------------------------------------------------------------------------------- |
|
|
||||||
| wert | Zeichenkette | Der Wert des aktuell ausgewählten Optionsfelds |
|
|
||||||
| onChange | Funktion | Die Rückruffunktion, die ausgelöst wird, wenn sich das Optionsfeld ändert |
|
|
||||||
| beiWertÄnderung | Funktion | Die Callback-Funktion, die ausgelöst wird, wenn sich der ausgewählte Wert in der Gruppe ändert. |
|
|
||||||
| Kinder | `React.ReactNode` | Ermöglicht es, React-Komponenten (wie Radio) als untergeordnete Elemente an die Radio-Gruppe zu übergeben |
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</Tab>
|
|
||||||
|
|
||||||
</Tabs>
|
|
||||||
@@ -1,54 +0,0 @@
|
|||||||
---
|
|
||||||
title: Auswahl
|
|
||||||
---
|
|
||||||
|
|
||||||
<Frame>
|
|
||||||
<img src="/images/user-guide/what-is-twenty/20.png" alt="Kopfzeile" />
|
|
||||||
</Frame>
|
|
||||||
|
|
||||||
Ermöglicht es Benutzern, einen Wert aus einer Liste vordefinierter Optionen auszuwählen.
|
|
||||||
|
|
||||||
<Tabs>
|
|
||||||
<Tab title=""Verwendung"">
|
|
||||||
|
|
||||||
```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=""Eigenschaften"">
|
|
||||||
|
|
||||||
|
|
||||||
| Props | Typ | Beschreibung |
|
|
||||||
| ------------ | ------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
||||||
| Klassenname | Zeichenkette | Optionale CSS-Klasse für zusätzliche Stilgebung |
|
|
||||||
| deaktiviert | boolesch | Wenn auf `true` gesetzt, wird die Benutzerinteraktion mit der Komponente deaktiviert |
|
|
||||||
| Beschriftung | string | Die Beschriftung, um den Zweck der `Select`-Komponente zu beschreiben |
|
|
||||||
| onChange | Funktion | Die Funktion, die aufgerufen wird, wenn sich die ausgewählten Werte ändern |
|
|
||||||
| optionen | Array | Repräsentiert die verfügbaren Optionen für die `Select`-Komponente. Es ist ein Array von Objekten, bei dem jedes Objekt ein `value` (die eindeutige Kennung), `label` (die eindeutige Kennung) und ein optionales `Icon` hat |
|
|
||||||
| wert | Zeichenkette | Repräsentiert den aktuell ausgewählten Wert. Es sollte mit einem der `value`-Eigenschaften im `options`-Array übereinstimmen |
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</Tab>
|
|
||||||
</Tabs>
|
|
||||||
@@ -1,161 +0,0 @@
|
|||||||
---
|
|
||||||
title: Text
|
|
||||||
---
|
|
||||||
|
|
||||||
<Frame>
|
|
||||||
<img src="/images/user-guide/notes/notes_header.png" alt="Kopfzeile" />
|
|
||||||
</Frame>
|
|
||||||
|
|
||||||
## Texteingabe
|
|
||||||
|
|
||||||
Ermöglicht es den Benutzern, Text einzugeben und zu bearbeiten.
|
|
||||||
|
|
||||||
<Tabs>
|
|
||||||
|
|
||||||
<Tab title="Verwendung">
|
|
||||||
|
|
||||||
```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="Eigenschaften">
|
|
||||||
|
|
||||||
|
|
||||||
| Props | Typ | Beschreibung |
|
|
||||||
| -------------------- | --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
||||||
| className | Zeichenkette | Optionaler Name für zusätzliche Stile |
|
|
||||||
| Beschriftung | Zeichenkette | Stellt die Beschriftung für das Eingabefeld dar |
|
|
||||||
| onChange | function | Die Funktion, die aufgerufen wird, wenn sich der Eingabewert ändert |
|
|
||||||
| volle Breite | boolesch | Gibt an, ob die Eingabe 100 % der Breite einnehmen soll |
|
|
||||||
| deaktivierte Hotkeys | boolesch | Gibt an, ob Hotkeys für die Eingabe aktiviert sind |
|
|
||||||
| fehler | Zeichenkette | Stellt die Fehlermeldung dar, die angezeigt werden soll. Wenn vorhanden, wird auch ein Fehler-Icon auf der rechten Seite des Eingabefelds angezeigt |
|
|
||||||
| onKeyDown | Funktion | Wird aufgerufen, wenn eine Taste gedrückt gehalten wird, während das Eingabefeld fokussiert ist. Erhält ein `React.KeyboardEvent` als Argument |
|
|
||||||
| Rechtes Icon | Icon-Komponente | Eine optionale Ikonenkomponente, die auf der rechten Seite des Eingabefelds angezeigt wird |
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
Die Komponente akzeptiert auch andere HTML-Eingabeelement-Eigenschaften.
|
|
||||||
|
|
||||||
</Tab>
|
|
||||||
|
|
||||||
</Tabs>
|
|
||||||
|
|
||||||
## Autosize Text Input
|
|
||||||
|
|
||||||
Textkomponente, die ihre Höhe automatisch anhand des Inhalts anpasst.
|
|
||||||
|
|
||||||
<Tabs>
|
|
||||||
|
|
||||||
<Tab title="Verwendung">
|
|
||||||
|
|
||||||
```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="Eigenschaften">
|
|
||||||
|
|
||||||
|
|
||||||
| Props | Typ | Beschreibung |
|
|
||||||
| ----------- | ------------ | ---------------------------------------------------------------------------------------- |
|
|
||||||
| onValidate | Funktion | Die Callback-Funktion, die Sie auslösen möchten, wenn der Benutzer die Eingabe validiert |
|
|
||||||
| minzeilen | nummer | Die minimale Anzahl von Zeilen für den Textbereich |
|
|
||||||
| Platzhalter | Zeichenkette | Der Platzhaltertext, den Sie anzeigen möchten, wenn der Textbereich leer ist |
|
|
||||||
| onFokus | Funktion | Die Callback-Funktion, die Sie auslösen möchten, wenn der Textbereich den Fokus erlangt |
|
|
||||||
| Variante | Zeichenkette | Die Variante der Eingabe. Optionen umfassen: `Standard`, `Ikone` und `Schaltfläche` |
|
|
||||||
| tastentitel | Zeichenkette | Der Titel für die Schaltfläche (nur für die Schaltflächenvariante anwendbar) |
|
|
||||||
| wert | Zeichenkette | Der Initialwert für den Textbereich |
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</Tab>
|
|
||||||
|
|
||||||
</Tabs>
|
|
||||||
|
|
||||||
## Textbereich
|
|
||||||
|
|
||||||
Ermöglicht es Ihnen, mehrzeilige Texteingaben zu erstellen.
|
|
||||||
|
|
||||||
<Tabs>
|
|
||||||
<Tab title="Verwendung">
|
|
||||||
|
|
||||||
```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="Eigenschaften">
|
|
||||||
|
|
||||||
|
|
||||||
| Props | Typ | Beschreibung |
|
|
||||||
| ----------- | ------------ | ---------------------------------------------------------------------------- |
|
|
||||||
| deaktiviert | boolesch | Gibt an, ob der Textbereich deaktiviert ist |
|
|
||||||
| minzeilen | nummer | Minimale Anzahl sichtbarer Zeilen für den Textbereich. |
|
|
||||||
| onChange | Funktion | Rückruffunktion wird ausgelöst, wenn sich der Inhalt des Textbereichs ändert |
|
|
||||||
| Platzhalter | Zeichenkette | Platzhaltertext, der angezeigt wird, wenn der Textbereich leer ist |
|
|
||||||
| wert | Zeichenkette | Der aktuelle Wert des Textbereichs |
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</Tab>
|
|
||||||
</Tabs>
|
|
||||||
@@ -1,38 +0,0 @@
|
|||||||
---
|
|
||||||
title: Umschalten
|
|
||||||
icon: toggle-on
|
|
||||||
---
|
|
||||||
|
|
||||||
<Tabs>
|
|
||||||
<Tab title="Verwendung">
|
|
||||||
|
|
||||||
```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="Eigenschaften">
|
|
||||||
|
|
||||||
|
|
||||||
| Eigenschaften | Typ | Beschreibung | Standard |
|
|
||||||
| ------------- | ------------ | -------------------------------------------------------------------------------------------------------- | ------------ |
|
|
||||||
| wert | boolesch | Der aktuelle Zustand des Umschalters | `falsch` |
|
|
||||||
| onChange | Funktion | Callback-Funktion, die ausgelöst wird, wenn sich der Umschaltzustand ändert | |
|
|
||||||
| farbe | Zeichenkette | Farbe des Umschalters, wenn er | s blau Farbe |
|
|
||||||
| ToggleSize | Zeichenkette | Größe des Umschalters, beeinflusst sowohl Höhe als auch Gewicht. Hat zwei Optionen: `klein` und `mittel` | mittel |
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</Tab>
|
|
||||||
</Tabs>
|
|
||||||
@@ -1,31 +0,0 @@
|
|||||||
---
|
|
||||||
title: Übersicht
|
|
||||||
icon: palette
|
|
||||||
description: Komponentenbibliothek für Twenty CRM
|
|
||||||
---
|
|
||||||
|
|
||||||
import { CardTitle } from "/snippets/card-title.mdx"
|
|
||||||
|
|
||||||
## Komponenten
|
|
||||||
|
|
||||||
<CardGroup cols={2}>
|
|
||||||
<Card href="/l/de/twenty-ui/display" img="/images/user-guide/views/filter.png">
|
|
||||||
<CardTitle>Anzeige</CardTitle>
|
|
||||||
Anzeigekomponenten für die visuelle Darstellung von Informationen
|
|
||||||
</Card>
|
|
||||||
|
|
||||||
<Card href="/l/de/twenty-ui/progress-bar" img="/images/user-guide/fields/field.png">
|
|
||||||
<CardTitle>Feedback</CardTitle>
|
|
||||||
Feedback-Komponenten für Benachrichtigungen an Benutzer
|
|
||||||
</Card>
|
|
||||||
|
|
||||||
<Card href="/l/de/twenty-ui/input" img="/images/user-guide/tips/light-bulb.png">
|
|
||||||
<CardTitle>Input</CardTitle>
|
|
||||||
Eingabekomponenten für Benutzerinteraktion
|
|
||||||
</Card>
|
|
||||||
|
|
||||||
<Card href="/l/de/twenty-ui/navigation" img="/images/user-guide/tasks/tasks_header.png">
|
|
||||||
<CardTitle>Navigation</CardTitle>
|
|
||||||
Navigationskomponenten für die Benutzeroberfläche
|
|
||||||
</Card>
|
|
||||||
</CardGroup>
|
|
||||||
@@ -1,8 +0,0 @@
|
|||||||
---
|
|
||||||
title: Navigation
|
|
||||||
icon: compass
|
|
||||||
---
|
|
||||||
|
|
||||||
<Frame>
|
|
||||||
<img src="/images/user-guide/tasks/tasks_header.png" alt="Kopfzeile" />
|
|
||||||
</Frame>
|
|
||||||
@@ -1,46 +0,0 @@
|
|||||||
---
|
|
||||||
title: Breadcrumb
|
|
||||||
---
|
|
||||||
|
|
||||||
<Frame>
|
|
||||||
<img src="/images/user-guide/fields/field.png" alt="Kopfzeile" />
|
|
||||||
</Frame>
|
|
||||||
|
|
||||||
Erstellt eine Navigationsleiste mit Brotkrumen.
|
|
||||||
|
|
||||||
<Tabs>
|
|
||||||
<Tab title=""Verwendung"">
|
|
||||||
|
|
||||||
```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=""Eigenschaften"">
|
|
||||||
|
|
||||||
|
|
||||||
| Props | Typ | Beschreibung |
|
|
||||||
| ----------- | ------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
||||||
| Klassenname | Zeichenkette | Optionaler Klassenname für zusätzliche Stilierung |
|
|
||||||
| Links | array | Ein Array von Objekten, die jeweils einen Breadcrumb-Link darstellen. Jedes Objekt hat eine `children`-Eigenschaft (den textlichen Inhalt des Links) und eine optionale `href`-Eigenschaft (die URL, zu der navigiert wird, wenn der Link angeklickt wird) |
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</Tab>
|
|
||||||
</Tabs>
|
|
||||||
@@ -1,185 +0,0 @@
|
|||||||
---
|
|
||||||
title: Links
|
|
||||||
icon: link
|
|
||||||
---
|
|
||||||
|
|
||||||
<Frame>
|
|
||||||
<img src="/images/user-guide/what-is-twenty/20.png" alt="Kopfzeile" />
|
|
||||||
</Frame>
|
|
||||||
|
|
||||||
## Kontaktlink
|
|
||||||
|
|
||||||
Eine stilisierte Link-Komponente zur Anzeige von Kontaktinformationen.
|
|
||||||
|
|
||||||
<Tabs>
|
|
||||||
<Tab title="Verwendung">
|
|
||||||
|
|
||||||
```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="Eigenschaften">
|
|
||||||
|
|
||||||
|
|
||||||
| Eigenschaften | Typ | Beschreibung |
|
|
||||||
| ------------- | ----------------- | --------------------------------------------------------------- |
|
|
||||||
| className | Zeichenkette | Optionaler Name für zusätzliche Stile |
|
|
||||||
| href | Zeichenkette | Die Ziel-URL oder der Pfad für den Link |
|
|
||||||
| onClick | function | Callback-Funktion, die beim Klicken auf den Link ausgelöst wird |
|
|
||||||
| children | `React.ReactNode` | Der Inhalt, der innerhalb des Links angezeigt wird |
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</Tab>
|
|
||||||
|
|
||||||
</Tabs>
|
|
||||||
|
|
||||||
## Rohlink
|
|
||||||
|
|
||||||
Eine stilisierte Link-Komponente zur Anzeige von Links.
|
|
||||||
|
|
||||||
<Tabs>
|
|
||||||
<Tab title="Verwendung">
|
|
||||||
|
|
||||||
```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="Eigenschaften">
|
|
||||||
|
|
||||||
|
|
||||||
| Eigenschaften | Typ | Beschreibung |
|
|
||||||
| ------------- | ----------------- | --------------------------------------------------------------- |
|
|
||||||
| className | string | Optionaler Name für zusätzliche Stile |
|
|
||||||
| href | string | Die Ziel-URL oder der Pfad für den Link |
|
|
||||||
| onClick | function | Callback-Funktion, die beim Klicken auf den Link ausgelöst wird |
|
|
||||||
| children | `React.ReactNode` | Der Inhalt, der innerhalb des Links angezeigt wird |
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</Tab>
|
|
||||||
</Tabs>
|
|
||||||
|
|
||||||
## Rundlink
|
|
||||||
|
|
||||||
Ein abgerundet gestalteter Link mit einer Chip-Komponente für Links.
|
|
||||||
|
|
||||||
<Tabs>
|
|
||||||
<Tab title="Verwendung">
|
|
||||||
|
|
||||||
```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="Eigenschaften">
|
|
||||||
|
|
||||||
|
|
||||||
| Eigenschaften | Typ | Beschreibung |
|
|
||||||
| ------------- | ----------------- | --------------------------------------------------------------- |
|
|
||||||
| href | string | Die Ziel-URL oder der Pfad für den Link |
|
|
||||||
| Kinder | `React.ReactNode` | Der Inhalt, der innerhalb des Links angezeigt wird |
|
|
||||||
| onClick | Funktion | Callback-Funktion, die beim Klicken auf den Link ausgelöst wird |
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</Tab>
|
|
||||||
</Tabs>
|
|
||||||
|
|
||||||
## Sozialer Link
|
|
||||||
|
|
||||||
Stilisierte soziale Links mit Unterstützung für verschiedene soziale Linktypen wie URLs, LinkedIn und X (oder Twitter).
|
|
||||||
|
|
||||||
<Tabs>
|
|
||||||
<Tab title="Verwendung">
|
|
||||||
|
|
||||||
```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="Eigenschaften">
|
|
||||||
|
|
||||||
|
|
||||||
| Eigenschaften | Typ | Beschreibung |
|
|
||||||
| ------------- | ----------------- | -------------------------------------------------------------------------- |
|
|
||||||
| href | string | Die Ziel-URL oder der Pfad für den Link |
|
|
||||||
| children | `React.ReactNode` | Der Inhalt, der innerhalb des Links angezeigt wird |
|
|
||||||
| typ | string | Die Art der sozialen Links. Optionen sind: `url`, `LinkedIn` und `Twitter` |
|
|
||||||
| onClick | function | Callback-Funktion, die beim Klicken auf den Link ausgelöst wird |
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</Tab>
|
|
||||||
</Tabs>
|
|
||||||
@@ -1,495 +0,0 @@
|
|||||||
---
|
|
||||||
title: Menüpunkt
|
|
||||||
icon: bars
|
|
||||||
---
|
|
||||||
|
|
||||||
Ein vielseitiger Menüpunkt, der in einem Menü oder einer Navigationsliste verwendet werden kann.
|
|
||||||
|
|
||||||
<Tabs>
|
|
||||||
<Tab title=""Verwendung"">
|
|
||||||
|
|
||||||
```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=""Eigenschaften"">
|
|
||||||
|
|
||||||
|
|
||||||
| "Eigenschaften" | Typ | Beschreibung |
|
|
||||||
| ------------------- | ---------------- | ----------------------------------------------------------------------------------------------------------- |
|
|
||||||
| Linkes Symbol | Symbolkomponente | Ein optionales linkes Symbol, das vor dem Text im Menüpunkt angezeigt wird. |
|
|
||||||
| Akzent | Zeichenkette | Gibt die Akzentfarbe des Menüelements an. Optionen umfassen: `default`, `danger` und `placeholder` |
|
|
||||||
| text | string | Der Textinhalt des Menüelements |
|
|
||||||
| Symbolschaltflächen | Array | Ein Array von Objekten, das zusätzliche Symbolschaltflächen beschreibt, die dem Menüelement zugeordnet sind |
|
|
||||||
| isTooltipOpen | boolesch | Steuert die Sichtbarkeit des mit dem Menüpunkt verbundenen Tooltips |
|
|
||||||
| testId | Zeichenkette | Das Attribut „data-testid“ für Testzwecke |
|
|
||||||
| beiKlick | Funktion | Rückruffunktion, die ausgelöst wird, wenn auf den Menüpunkt geklickt wird |
|
|
||||||
| Klassenname | Zeichenkette | Optionaler Name für zusätzliches Styling |
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</Tab>
|
|
||||||
</Tabs>
|
|
||||||
|
|
||||||
## Varianten
|
|
||||||
|
|
||||||
Die verschiedenen Varianten der Menükomponente umfassen Folgendes:
|
|
||||||
|
|
||||||
### Befehl
|
|
||||||
|
|
||||||
Ein befehlsartiger Menüpunkt innerhalb eines Menüs zur Anzeige von Tastaturkürzeln.
|
|
||||||
|
|
||||||
<Tabs>
|
|
||||||
<Tab title="Verwendung">
|
|
||||||
|
|
||||||
```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="Eigenschaften">
|
|
||||||
|
|
||||||
|
|
||||||
| Eigenschaften | Typ | Beschreibung |
|
|
||||||
| ------------- | ---------------- | ----------------------------------------------------------------------------- |
|
|
||||||
| Linkes Symbol | Symbolkomponente | Ein optionales linkes Symbol, das vor dem Text im Menüelement angezeigt wird. |
|
|
||||||
| text | Zeichenfolge | Der Textinhalt des Menüelements |
|
|
||||||
| firstHotKey | Zeichenfolge | Die erste Tastenkombination, die dem Befehl zugeordnet ist |
|
|
||||||
| secondHotKey | Zeichenfolge | Die zweite Tastenkombination, die dem Befehl zugeordnet ist |
|
|
||||||
| ausgewählt | boolesch | Gibt an, ob das Menüelement ausgewählt oder hervorgehoben ist |
|
|
||||||
| bei Klick | Funktion | Rückruffunktion, die ausgelöst wird, wenn das Menüelement angeklickt wird |
|
|
||||||
| Klassenname | Zeichenfolge | Optionaler Name für zusätzliche Styling |
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</Tab>
|
|
||||||
</Tabs>
|
|
||||||
|
|
||||||
### Ziehen
|
|
||||||
|
|
||||||
Ein verschiebbares Menüelement, das in einem Menü oder einer Liste verwendet werden soll, bei denen Elemente gezogen werden können und zusätzliche Aktionen über Symbolschaltflächen durchgeführt werden können.
|
|
||||||
|
|
||||||
<Tabs>
|
|
||||||
<Tab title="Verwendung">
|
|
||||||
|
|
||||||
```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="Eigenschaften">
|
|
||||||
|
|
||||||
|
|
||||||
| Eigenschaften | Typ | Beschreibung |
|
|
||||||
| ----------------- | ---------------- | -------------------------------------------------------------------------------------------------------------- |
|
|
||||||
| Linkes Symbol | Symbolkomponente | Ein optionales linkes Symbol, das vor dem Text im Menüelement angezeigt wird. |
|
|
||||||
| Akzent | Zeichenfolge | Die Akzentfarbe des Menüelements. Es kann entweder sein `standard`, `platzhalter` und `gefahr` |
|
|
||||||
| Symbolknöpfe | Array | Ein Array von Objekten, die zusätzliche Symbolschaltflächen darstellen, die mit dem Menüelement verknüpft sind |
|
|
||||||
| isTooltipOpen | boolesch | Steuert die Sichtbarkeit des Tooltips, der mit dem Menüelement verknüpft ist |
|
|
||||||
| bei Klick | Funktion | Rückruffunktion, die ausgelöst wird, wenn der Link geklickt wird |
|
|
||||||
| text | Zeichenfolge | Der Textinhalt des Menüelements |
|
|
||||||
| ZiehenDeaktiviert | boolesch | Gibt an, ob das Ziehen deaktiviert ist |
|
|
||||||
| Klassenname | Zeichenfolge | Optionaler Name für zusätzliche Styling |
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</Tab>
|
|
||||||
</Tabs>
|
|
||||||
|
|
||||||
### Mehrfachauswahl
|
|
||||||
|
|
||||||
Bietet eine Möglichkeit, eine Mehrfachauswahl-Funktionalität mit einem zugehörigen Kontrollkästchen zu implementieren.
|
|
||||||
|
|
||||||
<Tabs>
|
|
||||||
<Tab title="Verwendung">
|
|
||||||
|
|
||||||
```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="Eigenschaften">
|
|
||||||
|
|
||||||
|
|
||||||
| Eigenschaften | Typ | Beschreibung |
|
|
||||||
| -------------- | ---------------- | ---------------------------------------------------------------------------------- |
|
|
||||||
| Linkes Symbol | Symbolkomponente | Ein optionales linkes Symbol, das vor dem Text im Menüelement angezeigt wird. |
|
|
||||||
| text | Zeichenfolge | Der Textinhalt des Menüelements |
|
|
||||||
| ausgewählt | boolesch | Gibt an, ob das Menüelement ausgewählt (angehakt) ist |
|
|
||||||
| onSelectChange | Funktion | Rückruffunktion, die ausgelöst wird, wenn der Kontrollkästchenstatus geändert wird |
|
|
||||||
| Klassenname | Zeichenfolge | Optionaler Name für zusätzliche Styling |
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</Tab>
|
|
||||||
</Tabs>
|
|
||||||
|
|
||||||
### Mehrfachauswahl Avatar
|
|
||||||
|
|
||||||
Ein Mehrfachauswahl-Menüelement mit einem Avatar, einem Kontrollkästchen zur Auswahl und einem Textinhalt.
|
|
||||||
|
|
||||||
<Tabs>
|
|
||||||
<Tab title="Verwendung">
|
|
||||||
|
|
||||||
```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="Eigenschaften">
|
|
||||||
|
|
||||||
|
|
||||||
| Eigenschaften | Typ | Beschreibung |
|
|
||||||
| -------------- | ------------ | ------------------------------------------------------------------------------------------- |
|
|
||||||
| Avatar | `ReactNode` | Der Avatar oder das Symbol, das auf der linken Seite des Menüelements angezeigt werden soll |
|
|
||||||
| text | Zeichenfolge | Der Textinhalt des Menüelements |
|
|
||||||
| ausgewählt | boolesch | Gibt an, ob das Menüelement ausgewählt (angehakt) ist |
|
|
||||||
| onSelectChange | Funktion | Rückruffunktion, die ausgelöst wird, wenn der Kontrollkästchenstatus geändert wird |
|
|
||||||
| Klassenname | Zeichenfolge | Optionaler Name für zusätzliche Styling |
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</Tab>
|
|
||||||
</Tabs>
|
|
||||||
|
|
||||||
### Navigieren
|
|
||||||
|
|
||||||
Ein Menüelement mit einem optionalen linken Symbol, Textinhalt und einem nach rechts zeigenden Chevron-Symbol.
|
|
||||||
|
|
||||||
<Tabs>
|
|
||||||
<Tab title="Verwendung">
|
|
||||||
|
|
||||||
```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="Eigenschaften">
|
|
||||||
|
|
||||||
|
|
||||||
| Eigenschaften | Typ | Beschreibung |
|
|
||||||
| ------------- | ---------------- | ----------------------------------------------------------------------------- |
|
|
||||||
| Linkes Symbol | Symbolkomponente | Ein optionales linkes Symbol, das vor dem Text im Menüelement angezeigt wird. |
|
|
||||||
| text | Zeichenfolge | Der Textinhalt des Menüelements |
|
|
||||||
| bei Klick | Funktion | Rückruffunktion, die ausgelöst wird, wenn das Menüelement angeklickt wird |
|
|
||||||
| Klassenname | Zeichenfolge | Optionaler Name für zusätzliche Styling |
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</Tab>
|
|
||||||
</Tabs>
|
|
||||||
|
|
||||||
### Auswahl
|
|
||||||
|
|
||||||
Ein auswählbares Menüelement mit optionalem linken Inhalt (Symbol und Text) und einer Anzeige (Kontrollsymbol), die den ausgewählten Zustand anzeigt.
|
|
||||||
|
|
||||||
<Tabs>
|
|
||||||
<Tab title="Verwendung">
|
|
||||||
|
|
||||||
```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="Eigenschaften">
|
|
||||||
|
|
||||||
|
|
||||||
| Eigenschaften | Typ | Beschreibung |
|
|
||||||
| ------------- | ---------------- | ----------------------------------------------------------------------------- |
|
|
||||||
| Linkes Symbol | Symbolkomponente | Ein optionales linkes Symbol, das vor dem Text im Menüelement angezeigt wird. |
|
|
||||||
| text | Zeichenfolge | Der Textinhalt des Menüelements |
|
|
||||||
| ausgewählt | boolesch | Gibt an, ob das Menüelement ausgewählt (angehakt) ist |
|
|
||||||
| deaktiviert | boolesch | Gibt an, ob das Menüelement deaktiviert ist |
|
|
||||||
| hovered | boolesch | Gibt an, ob das Menüelement momentan überflogen wird |
|
|
||||||
| onClick | Funktion | Rückruffunktion, die ausgelöst wird, wenn das Menüelement angeklickt wird |
|
|
||||||
| Klassenname | Zeichenfolge | Optionaler Name für zusätzliche Stilierung |
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</Tab>
|
|
||||||
</Tabs>
|
|
||||||
|
|
||||||
### Avatar auswählen
|
|
||||||
|
|
||||||
Ein auswählbares Menüelement mit einem Avatar, mit optionalem linken Inhalt (Avatar und Text) und einer Anzeige (Kontrollsymbol) für den ausgewählten Zustand.
|
|
||||||
|
|
||||||
<Tabs>
|
|
||||||
<Tab title="Verwendung">
|
|
||||||
|
|
||||||
```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="Eigenschaften">
|
|
||||||
|
|
||||||
|
|
||||||
| Eigenschaften | Typ | Beschreibung |
|
|
||||||
| ------------- | ----------- | -------------------------------------------------------------------------------------------- |
|
|
||||||
| Avatar | `ReactNode` | Der Avatar oder das Symbol, das auf der linken Seite des Menüelements angezeigt werden soll. |
|
|
||||||
| text | string | Der Textinhalt des Menüelements |
|
|
||||||
| ausgewählt | boolesch | Gibt an, ob das Menüelement ausgewählt (aktiviert) ist. |
|
|
||||||
| deaktiviert | boolesch | Gibt an, ob das Menüelement deaktiviert ist. |
|
|
||||||
| hovered | boolesch | Gibt an, ob sich der Mauszeiger derzeit über dem Menüelement befindet. |
|
|
||||||
| TestId | string | Das data-testid-Attribut für Testzwecke |
|
|
||||||
| onClick | Funktion | Rückruffunktion, die ausgelöst wird, wenn das Menüelement angeklickt wird. |
|
|
||||||
| Klassenname | string | Optionaler Name für zusätzliche Stile |
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</Tab>
|
|
||||||
</Tabs>
|
|
||||||
|
|
||||||
### Farbe auswählen
|
|
||||||
|
|
||||||
Ein wählbares Menüelement mit Farbbeispiel für Situationen, in denen Benutzer eine Farbe aus einem Menü auswählen sollen.
|
|
||||||
|
|
||||||
<Tabs>
|
|
||||||
<Tab title="Verwendung">
|
|
||||||
|
|
||||||
```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="Eigenschaften">
|
|
||||||
|
|
||||||
|
|
||||||
| Eigenschaften | Typ | Beschreibung |
|
|
||||||
| ------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
||||||
| farbe | string | Die Themenfarbe, die als Muster im Menüelement angezeigt wird. Optionen umfassen: `grün`, `türkis`, `himmel`, `blau`, `lila`, `rosa`, `rot`, `orange`, `gelb` und `grau`. |
|
|
||||||
| ausgewählt | boolesch | Gibt an, ob das Menüelement ausgewählt (aktiviert) ist. |
|
|
||||||
| deaktiviert | boolesch | Gibt an, ob das Menüelement deaktiviert ist. |
|
|
||||||
| hovered | boolesch | Gibt an, ob sich der Mauszeiger derzeit über dem Menüelement befindet. |
|
|
||||||
| Variante | string | Die Variante des Farbmusters. Es kann entweder `default` oder `pipeline` sein |
|
|
||||||
| onClick | funktion | Rückruffunktion, die ausgelöst wird, wenn das Menüelement angeklickt wird. |
|
|
||||||
| className | string | Optionaler Name für zusätzliche Stile |
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</Tab>
|
|
||||||
</Tabs>
|
|
||||||
|
|
||||||
### Umschalten
|
|
||||||
|
|
||||||
Ein Menüelement mit einem zugehörigen Umschalter, mit dem Benutzer eine bestimmte Funktion aktivieren oder deaktivieren können.
|
|
||||||
|
|
||||||
<Tabs>
|
|
||||||
<Tab title="Verwendung">
|
|
||||||
|
|
||||||
```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="Eigenschaften">
|
|
||||||
|
|
||||||
|
|
||||||
| Eigenschaften | Typ | Beschreibung |
|
|
||||||
| -------------- | --------------- | ---------------------------------------------------------------------------------- |
|
|
||||||
| LeftIcon | Icon-Komponente | Ein optionales linkes Symbol, das vor dem Text im Menüelement angezeigt wird. |
|
|
||||||
| text | string | Der Textinhalt des Menüelements |
|
|
||||||
| umgeschaltet | boolesch | Gibt an, ob der Umschalter im Zustand "ein" oder "aus" ist. |
|
|
||||||
| onToggleChange | funktion | Rückruffunktion, die ausgelöst wird, wenn sich der Zustand des Umschalters ändert. |
|
|
||||||
| ToggleSize | String | Die Größe des Kippschalters. Es kann entweder \ |
|
|
||||||
| ClassName | String | Optionaler Name für zusätzliche Stile |
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</Tab>
|
|
||||||
</Tabs>
|
|
||||||
@@ -1,52 +0,0 @@
|
|||||||
---
|
|
||||||
title: Navigationsleiste
|
|
||||||
icon: bars
|
|
||||||
---
|
|
||||||
|
|
||||||
Rendert eine Navigationsleiste, die mehrere `NavigationBarItem`-Komponenten enthält.
|
|
||||||
|
|
||||||
<Tabs>
|
|
||||||
<Tab title=""Verwendung"">
|
|
||||||
|
|
||||||
```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=""Eigenschaften"">
|
|
||||||
|
|
||||||
|
|
||||||
| "Eigenschaften" | Typ | Beschreibung |
|
|
||||||
| --------------- | ------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
||||||
| activeItemName | Zeichenkette | Der Name des aktuell aktiven Navigationselements |
|
|
||||||
| items | array | Ein Array von Objekten, die jeweils ein Navigationselement repräsentieren. Jedes Objekt enthält den `name` des Elements, die zugehörige `Icon`-Komponente und eine Funktion `onClick`, die ausgeführt wird, wenn das Element angeklickt wird |
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</Tab>
|
|
||||||
</Tabs>
|
|
||||||
@@ -1,41 +0,0 @@
|
|||||||
---
|
|
||||||
title: Schrittleiste
|
|
||||||
---
|
|
||||||
|
|
||||||
<Frame>
|
|
||||||
<img src="/images/user-guide/api/api.png" alt="Kopfzeile" />
|
|
||||||
</Frame>
|
|
||||||
|
|
||||||
Zeigt den Fortschritt durch eine Folge von nummerierten Schritten, indem der aktive Schritt hervorgehoben wird. Es rendert einen Container mit Schritten, die jeweils durch die `Step`-Komponente dargestellt werden.
|
|
||||||
|
|
||||||
<Tabs>
|
|
||||||
<Tab title=""Verwendung"">
|
|
||||||
|
|
||||||
```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=""Eigenschaften"">
|
|
||||||
|
|
||||||
|
|
||||||
| Props | Typ | Beschreibung |
|
|
||||||
| -------------- | ------ | --------------------------------------------------------------------------------------------------------- |
|
|
||||||
| aktiverSchritt | nummer | Der Index des derzeit aktiven Schritts. Dies bestimmt, welcher Schritt visuell hervorgehoben werden soll. |
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</Tab>
|
|
||||||
</Tabs>
|
|
||||||
@@ -1,78 +0,0 @@
|
|||||||
---
|
|
||||||
title: Rückmeldung
|
|
||||||
---
|
|
||||||
|
|
||||||
Zeigt den Fortschritt oder Countdown an und bewegt sich von rechts nach links.
|
|
||||||
|
|
||||||
<Tabs>
|
|
||||||
|
|
||||||
<Tab title=""Verwendung"">
|
|
||||||
|
|
||||||
```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=""Eigenschaften"">
|
|
||||||
|
|
||||||
|
|
||||||
| "Eigenschaften" | Typ | Beschreibung | Standard |
|
|
||||||
| --------------- | ------------ | ----------------------------------------------------------------------------------------------------------- | --------- |
|
|
||||||
| Dauer | nummer | Die Gesamtdauer der Fortschrittsbalken-Animation in Millisekunden | 3 |
|
|
||||||
| Verzögerung | nummer | Die Verzögerung beim Starten der Fortschrittsbalken-Animation in Millisekunden | 0 |
|
|
||||||
| Easing | string | Easing-Funktion für die Fortschrittsbalken-Animation | easeInOut |
|
|
||||||
| Balkenhöhe | nummer | Die Höhe des Balkens in Pixeln | 24 |
|
|
||||||
| Balkenfarbe | Zeichenkette | Die Farbe des Balkens | gray80 |
|
|
||||||
| AutoStart | boolesch | Wenn `true`, startet die Animation des Fortschrittsbalkens automatisch, wenn die Komponente gemountet wird. | `wahr` |
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</Tab>
|
|
||||||
</Tabs>
|
|
||||||
|
|
||||||
## Zirkularer Fortschrittsbalken
|
|
||||||
|
|
||||||
Zeigt den Fortschritt einer Aufgabe an, wird häufig auf Ladebildschirmen oder in Bereichen verwendet, in denen Sie laufende Prozesse an den Benutzer kommunizieren möchten.
|
|
||||||
|
|
||||||
<Tabs>
|
|
||||||
|
|
||||||
<Tab title="Verwendung">
|
|
||||||
|
|
||||||
```jsx
|
|
||||||
import { CircularProgressBar } from "@/ui/feedback/progress-bar/components/CircularProgressBar";
|
|
||||||
|
|
||||||
export const MyComponent = () => {
|
|
||||||
return <CircularProgressBar size={80} barWidth={6} barColor="green" />;
|
|
||||||
};
|
|
||||||
```
|
|
||||||
|
|
||||||
</Tab>
|
|
||||||
|
|
||||||
<Tab title="Eigenschaften">
|
|
||||||
|
|
||||||
|
|
||||||
| Eigenschaften | Typ | Beschreibung | Standard |
|
|
||||||
| ------------- | ------------ | -------------------------------------------- | ------------ |
|
|
||||||
| größe | nummer | Die Größe des zirkularen Fortschrittsbalkens | 50 |
|
|
||||||
| Balkenbreite | nummer | Die Breite der Fortschrittsbalkenlinie | 5 |
|
|
||||||
| Balkenfarbe | Zeichenkette | Die Farbe des Fortschrittsbalkens | currentColor |
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</Tab>
|
|
||||||
|
|
||||||
</Tabs>
|
|
||||||
@@ -1,94 +0,0 @@
|
|||||||
---
|
|
||||||
title: Consejo de la aplicación
|
|
||||||
icon: message
|
|
||||||
---
|
|
||||||
|
|
||||||
<Frame>
|
|
||||||
<img src="/images/user-guide/tips/light-bulb.png" alt="Encabezado" />
|
|
||||||
</Frame>
|
|
||||||
|
|
||||||
Un breve mensaje que muestra información adicional cuando un usuario interactúa con un elemento.
|
|
||||||
|
|
||||||
<Tabs>
|
|
||||||
<Tab title="Uso">
|
|
||||||
|
|
||||||
```jsx
|
|
||||||
import { AppTooltip } from "@/ui/display/tooltip/AppTooltip";
|
|
||||||
|
|
||||||
export const MyComponent = () => {
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<p id="hoverText" style={{ display: "inline-block" }}>
|
|
||||||
Customer Insights
|
|
||||||
</p>
|
|
||||||
<AppTooltip
|
|
||||||
className
|
|
||||||
anchorSelect="#hoverText"
|
|
||||||
content="Explore customer behavior and preferences"
|
|
||||||
delayHide={0}
|
|
||||||
offset={6}
|
|
||||||
noArrow={false}
|
|
||||||
isOpen={true}
|
|
||||||
place="bottom"
|
|
||||||
positionStrategy="absolute"
|
|
||||||
/>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
```
|
|
||||||
|
|
||||||
</Tab>
|
|
||||||
|
|
||||||
<Tab title="Props">
|
|
||||||
|
|
||||||
|
|
||||||
| Props | Tipo | Descripción |
|
|
||||||
| -------------------- | -------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
|
||||||
| nombreDeClase | cadena | Clase CSS opcional para estilo adicional |
|
|
||||||
| selección de anclaje | Selector CSS | Selector para el ancla del consejo (el elemento que activa el consejo) |
|
|
||||||
| contenido | cadena | El contenido que desea mostrar dentro del consejo |
|
|
||||||
| retrasaresPie | número | El retraso en segundos antes de ocultar la descripción después de que el cursor deje el ancla |
|
|
||||||
| desplazamiento | número | El desplazamiento en píxeles para posicionar el consejo |
|
|
||||||
| sinFlecha | booleano | Si es `true`, oculta la flecha en el consejo |
|
|
||||||
| estáAbierto | booleano | Si es `true`, el consejo está abierto por defecto |
|
|
||||||
| lugar | Cadena `PlacesType` de `react-tooltip` | Especifica la colocación del consejo. Los valores incluyen `inferior`, `izquierda`, `derecha`, `superior`, `superior-inicio`, `superior-fin`, `derecha-inicio`, `derecha-fin`, `inferior-inicio`, `inferior-fin`, `izquierda-inicio` y `izquierda-fin` |
|
|
||||||
| estrategiaPosicion | Cadena `PositionStrategy` de `react-tooltip` | Estrategia de posición para el consejo. Tiene dos valores: `absoluto` y `fijo` |
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</Tab>
|
|
||||||
|
|
||||||
</Tabs>
|
|
||||||
|
|
||||||
## Texto Desbordante con Consejo
|
|
||||||
|
|
||||||
Maneja texto desbordante y muestra un consejo cuando el texto se desborda.
|
|
||||||
|
|
||||||
<Tabs>
|
|
||||||
<Tab title="Uso">
|
|
||||||
|
|
||||||
```jsx
|
|
||||||
import { OverflowingTextWithTooltip } from 'twenty-ui/display';
|
|
||||||
|
|
||||||
export const MyComponent = () => {
|
|
||||||
const crmTaskDescription =
|
|
||||||
'Follow up with client regarding their recent product inquiry. Discuss pricing options, address any concerns, and provide additional product information. Record the details of the conversation in the CRM for future reference.';
|
|
||||||
|
|
||||||
return <OverflowingTextWithTooltip text={crmTaskDescription} />;
|
|
||||||
};
|
|
||||||
```
|
|
||||||
|
|
||||||
</Tab>
|
|
||||||
|
|
||||||
<Tab title="Props">
|
|
||||||
|
|
||||||
|
|
||||||
| Props | Tipo | Descripción |
|
|
||||||
| ----- | ------ | -------------------------------------------------------------- |
|
|
||||||
| texto | cadena | El contenido que desea mostrar en el área de texto desbordante |
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</Tab>
|
|
||||||
|
|
||||||
</Tabs>
|
|
||||||
@@ -1,73 +0,0 @@
|
|||||||
---
|
|
||||||
title: Marca de verificación
|
|
||||||
icon: circle-check
|
|
||||||
---
|
|
||||||
|
|
||||||
<Frame>
|
|
||||||
<img src="/images/user-guide/tasks/tasks_header.png" alt="Encabezado" />
|
|
||||||
</Frame>
|
|
||||||
|
|
||||||
Representa una acción exitosa o completada.
|
|
||||||
|
|
||||||
<Tabs>
|
|
||||||
<Tab title="Uso">
|
|
||||||
|
|
||||||
```jsx
|
|
||||||
import { Checkmark } from 'twenty-ui/display';
|
|
||||||
|
|
||||||
export const MyComponent = () => {
|
|
||||||
return <Checkmark />;
|
|
||||||
};
|
|
||||||
```
|
|
||||||
|
|
||||||
|
|
||||||
</Tab>
|
|
||||||
|
|
||||||
<Tab title="Props">
|
|
||||||
|
|
||||||
Extiende `React.ComponentPropsWithoutRef<'div'>` y acepta todas las propiedades de un elemento `div` regular.
|
|
||||||
|
|
||||||
</Tab>
|
|
||||||
|
|
||||||
</Tabs>
|
|
||||||
|
|
||||||
## Marca de verificación animada
|
|
||||||
|
|
||||||
Representa un ícono de marca de verificación con la característica adicional de animación.
|
|
||||||
|
|
||||||
<Tabs>
|
|
||||||
|
|
||||||
<Tab title="Uso">
|
|
||||||
|
|
||||||
```jsx
|
|
||||||
import { AnimatedCheckmark } from 'twenty-ui/display';
|
|
||||||
|
|
||||||
export const MyComponent = () => {
|
|
||||||
return (
|
|
||||||
<AnimatedCheckmark
|
|
||||||
isAnimating={true}
|
|
||||||
color="green"
|
|
||||||
duration={0.5}
|
|
||||||
size={30}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
```
|
|
||||||
|
|
||||||
</Tab>
|
|
||||||
|
|
||||||
<Tab title="Props">
|
|
||||||
|
|
||||||
|
|
||||||
| Props | Tipo | Descripción | Predeterminado |
|
|
||||||
| ----------- | -------- | -------------------------------------------------- | -------------- |
|
|
||||||
| isAnimating | booleano | Controla si la marca de verificación está animando | falso |
|
|
||||||
| color | cadena | Color de la marca de verificación | |
|
|
||||||
| duración | número | La duración de la animación en segundos | 0.5 segundos |
|
|
||||||
| tamaño | número | El tamaño de la marca de verificación | 28 píxeles |
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</Tab>
|
|
||||||
|
|
||||||
</Tabs>
|
|
||||||
@@ -1,153 +0,0 @@
|
|||||||
---
|
|
||||||
title: Chip
|
|
||||||
---
|
|
||||||
|
|
||||||
<Frame>
|
|
||||||
<img src="/images/user-guide/github/github-header.png" alt="Encabezado" />
|
|
||||||
</Frame>
|
|
||||||
|
|
||||||
Un elemento visual que puedes usar como contenedor con o sin posibilidad de hacer clic, con una etiqueta, componentes opcionales a la izquierda y a la derecha y varias opciones de estilo para mostrar rótulos y etiquetas.
|
|
||||||
|
|
||||||
<Tabs>
|
|
||||||
|
|
||||||
<Tab title="Uso">
|
|
||||||
|
|
||||||
```jsx
|
|
||||||
import { Chip } from 'twenty-ui/components';
|
|
||||||
|
|
||||||
export const MyComponent = () => {
|
|
||||||
return (
|
|
||||||
<Chip
|
|
||||||
size="large"
|
|
||||||
label="Clickable Chip"
|
|
||||||
clickable={true}
|
|
||||||
variant="highlighted"
|
|
||||||
accent="text-primary"
|
|
||||||
leftComponent
|
|
||||||
rightComponent
|
|
||||||
maxWidth="200px"
|
|
||||||
className
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
```
|
|
||||||
|
|
||||||
</Tab>
|
|
||||||
|
|
||||||
<Tab title="Props">
|
|
||||||
|
|
||||||
|
|
||||||
| Props | Tipo | Descripción |
|
|
||||||
| ------------ | ------------------------ | ------------------------------------------------------------------------------------------------ |
|
|
||||||
| linkToEntity | cadena | El enlace a la entidad |
|
|
||||||
| entityId | cadena | El identificador único de la entidad |
|
|
||||||
| nombre | cadena | El nombre de la entidad |
|
|
||||||
| pictureUrl | cadena | s foto", |
|
|
||||||
| avatarType | Tipo de Avatar | El tipo de avatar que quieres mostrar. Tiene dos opciones: `redondeado` y `cuadrado` |
|
|
||||||
| variante | `EntityChipVariant` enum | Variante del chip de entidad que quieres mostrar. Tiene dos opciones: `regular` y `transparente` |
|
|
||||||
| LeftIcon | IconComponent | Un componente de React que representa un ícono. Mostrado en el lado izquierdo del chip |
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</Tab>
|
|
||||||
</Tabs>
|
|
||||||
|
|
||||||
## Ejemplos
|
|
||||||
|
|
||||||
### Chip Transparente Deshabilitado
|
|
||||||
|
|
||||||
```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 />
|
|
||||||
|
|
||||||
### Chip Deshabilitado con Tooltip
|
|
||||||
|
|
||||||
```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
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
```
|
|
||||||
|
|
||||||
## Chip de Entidad
|
|
||||||
|
|
||||||
Un elemento tipo Chip para mostrar información sobre una entidad.
|
|
||||||
|
|
||||||
<Tabs>
|
|
||||||
|
|
||||||
<Tab title="Uso">
|
|
||||||
|
|
||||||
```jsx
|
|
||||||
import { BrowserRouter as Router } from 'react-router-dom';
|
|
||||||
import { IconTwentyStar } from 'twenty-ui/display';
|
|
||||||
import { Chip } from 'twenty-ui/components';
|
|
||||||
|
|
||||||
export const MyComponent = () => {
|
|
||||||
return (
|
|
||||||
<Router>
|
|
||||||
<Chip
|
|
||||||
linkToEntity="/entity-link"
|
|
||||||
entityId="entityTest"
|
|
||||||
name="Entity name"
|
|
||||||
pictureUrl=""
|
|
||||||
avatarType="rounded"
|
|
||||||
variant="regular"
|
|
||||||
LeftIcon={IconTwentyStar}
|
|
||||||
/>
|
|
||||||
</Router>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
```
|
|
||||||
|
|
||||||
</Tab>
|
|
||||||
|
|
||||||
<Tab title="Props">
|
|
||||||
|
|
||||||
|
|
||||||
| Props | Tipo | Descripción |
|
|
||||||
| ------------ | ------------------------ | ------------------------------------------------------------------------------------------------ |
|
|
||||||
| linkToEntity | cadena | El enlace a la entidad |
|
|
||||||
| entityId | cadena | El identificador único de la entidad |
|
|
||||||
| nombre | cadena | El nombre de la entidad |
|
|
||||||
| pictureUrl | cadena | s foto", |
|
|
||||||
| avatarType | Tipo de Avatar | El tipo de avatar que quieres mostrar. Tiene dos opciones: `redondeado` y `cuadrado` |
|
|
||||||
| variante | `EntityChipVariant` enum | Variante del chip de entidad que quieres mostrar. Tiene dos opciones: `regular` y `transparente` |
|
|
||||||
| LeftIcon | IconComponent | Un componente de React que representa un ícono. Mostrado en el lado izquierdo del chip |
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</Tab>
|
|
||||||
</Tabs>
|
|
||||||
@@ -1,91 +0,0 @@
|
|||||||
---
|
|
||||||
title: Iconos
|
|
||||||
icon: icons
|
|
||||||
---
|
|
||||||
|
|
||||||
<Frame>
|
|
||||||
<img src="/images/user-guide/objects/objects.png" alt="Encabezado" />
|
|
||||||
</Frame>
|
|
||||||
|
|
||||||
Una lista de iconos utilizados en toda nuestra aplicación.
|
|
||||||
|
|
||||||
## Iconos Tabler
|
|
||||||
|
|
||||||
Usamos iconos Tabler para React en toda la aplicación.
|
|
||||||
|
|
||||||
<Tabs>
|
|
||||||
|
|
||||||
<Tab title="Instalación">
|
|
||||||
<br />
|
|
||||||
|
|
||||||
```
|
|
||||||
yarn add @tabler/icons-react
|
|
||||||
```
|
|
||||||
|
|
||||||
</Tab>
|
|
||||||
|
|
||||||
<Tab title="Propiedades">
|
|
||||||
|
|
||||||
Puede importar cada icono como un componente. Aquí hay un ejemplo:
|
|
||||||
<br />
|
|
||||||
|
|
||||||
```jsx
|
|
||||||
import { IconArrowLeft } from "@tabler/icons-react";
|
|
||||||
|
|
||||||
export const MyComponent = () => {
|
|
||||||
return <IconArrowLeft color="red" size={48} />;
|
|
||||||
};
|
|
||||||
```
|
|
||||||
|
|
||||||
</Tab>
|
|
||||||
|
|
||||||
<Tab title="Propiedades">
|
|
||||||
|
|
||||||
|
|
||||||
| Propiedades | Tipo | Descripción | Predeterminado |
|
|
||||||
| ----------- | ------ | ----------------------------------------- | -------------- |
|
|
||||||
| tamaño | número | La altura y el ancho del icono en píxeles | 24 |
|
|
||||||
| color | cadena | El color de los iconos | currentColor |
|
|
||||||
| trazo | número | El ancho del trazo del icono en píxeles | 2 |
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</Tab>
|
|
||||||
|
|
||||||
</Tabs>
|
|
||||||
|
|
||||||
## Iconos Personalizados
|
|
||||||
|
|
||||||
Además de los iconos Tabler, la aplicación también utiliza algunos iconos personalizados.
|
|
||||||
|
|
||||||
### Icono de Libreta de Direcciones
|
|
||||||
|
|
||||||
Muestra un icono de libreta de direcciones.
|
|
||||||
|
|
||||||
<Tabs>
|
|
||||||
|
|
||||||
<Tab title=""Uso"">
|
|
||||||
|
|
||||||
```jsx
|
|
||||||
import { IconAddressBook } from 'twenty-ui/display';
|
|
||||||
|
|
||||||
export const MyComponent = () => {
|
|
||||||
return <IconAddressBook size={24} stroke={2} />;
|
|
||||||
};
|
|
||||||
```
|
|
||||||
|
|
||||||
</Tab>
|
|
||||||
|
|
||||||
<Tab title=""Props"">
|
|
||||||
|
|
||||||
|
|
||||||
| "Props" | Tipo | Descripción | Predeterminado |
|
|
||||||
| ------- | ------ | ----------------------------------------- | -------------- |
|
|
||||||
| tamaño | número | La altura y el ancho del icono en píxeles | 24 |
|
|
||||||
| trazo | número | El ancho del trazo del icono en píxeles | 2 |
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</Tab>
|
|
||||||
|
|
||||||
</Tabs>
|
|
||||||
@@ -1,13 +0,0 @@
|
|||||||
---
|
|
||||||
title: Soon Pill
|
|
||||||
---
|
|
||||||
|
|
||||||
Una pequeña insignia o "pastilla" para indicar que algo estará disponible próximamente.
|
|
||||||
|
|
||||||
```jsx
|
|
||||||
import { SoonPill } from "@/ui/display/pill/components/SoonPill";
|
|
||||||
|
|
||||||
export const MyComponent = () => {
|
|
||||||
return <SoonPill />;
|
|
||||||
};
|
|
||||||
```
|
|
||||||
@@ -1,43 +0,0 @@
|
|||||||
---
|
|
||||||
title: Etiqueta
|
|
||||||
icon: tag
|
|
||||||
---
|
|
||||||
|
|
||||||
Componente para categorizar o etiquetar contenido visualmente.
|
|
||||||
|
|
||||||
<Tabs>
|
|
||||||
|
|
||||||
<Tab title="Uso">
|
|
||||||
|
|
||||||
```jsx
|
|
||||||
import { Tag } from "@/ui/display/tag/components/Tag";
|
|
||||||
|
|
||||||
export const MyComponent = () => {
|
|
||||||
return (
|
|
||||||
<Tag
|
|
||||||
className
|
|
||||||
color="red"
|
|
||||||
text="Urgent"
|
|
||||||
onClick={() => console.log("click")}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
```
|
|
||||||
|
|
||||||
</Tab>
|
|
||||||
|
|
||||||
<Tab title="Props">
|
|
||||||
|
|
||||||
|
|
||||||
| Props | Tipo | Descripción |
|
|
||||||
| ------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
||||||
| nombreDeClase | cadena | Nombre opcional para estilo adicional |
|
|
||||||
| color | cadena | Color de la etiqueta. Las opciones incluyen: `verde`, `turquesa`, `cielo`, `azul`, `púrpura`, `rosa`, `rojo`, `naranja`, `amarillo`, `gris` |
|
|
||||||
| texto | cadena | El contenido de la etiqueta |
|
|
||||||
| enClic | función | Función opcional llamada cuando un usuario hace clic en la etiqueta |
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</Tab>
|
|
||||||
|
|
||||||
</Tabs>
|
|
||||||
@@ -1,7 +0,0 @@
|
|||||||
---
|
|
||||||
title: Entrada
|
|
||||||
---
|
|
||||||
|
|
||||||
<Frame>
|
|
||||||
<img src="/images/user-guide/tips/light-bulb.png" alt="Encabezado" />
|
|
||||||
</Frame>
|
|
||||||
@@ -1,36 +0,0 @@
|
|||||||
---
|
|
||||||
title: Editor de Bloques
|
|
||||||
---
|
|
||||||
|
|
||||||
<Frame>
|
|
||||||
<img src="/images/user-guide/api/api.png" alt="Encabezado" />
|
|
||||||
</Frame>
|
|
||||||
|
|
||||||
Usa un editor de texto enriquecido basado en bloques de [BlockNote](https://www.blocknotejs.org/) para permitir a los usuarios editar y ver bloques de contenido.
|
|
||||||
|
|
||||||
<Tabs>
|
|
||||||
<Tab title="Uso">
|
|
||||||
|
|
||||||
```jsx
|
|
||||||
import { useBlockNote } from "@blocknote/react";
|
|
||||||
import { BlockEditor } from "@/ui/input/editor/components/BlockEditor";
|
|
||||||
|
|
||||||
export const MyComponent = () => {
|
|
||||||
const BlockNoteEditor = useBlockNote();
|
|
||||||
|
|
||||||
return <BlockEditor editor={BlockNoteEditor} />;
|
|
||||||
};
|
|
||||||
```
|
|
||||||
|
|
||||||
</Tab>
|
|
||||||
<Tab title="Props">
|
|
||||||
|
|
||||||
|
|
||||||
| Props | Tipo | Descripción |
|
|
||||||
| ------ | ----------------- | -------------------------------------------------- |
|
|
||||||
| editor | `BlockNoteEditor` | La instancia o configuración del editor de bloques |
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</Tab>
|
|
||||||
</Tabs>
|
|
||||||
@@ -1,522 +0,0 @@
|
|||||||
---
|
|
||||||
title: Botones
|
|
||||||
icon: hand-pointer
|
|
||||||
---
|
|
||||||
|
|
||||||
<Frame>
|
|
||||||
<img src="/images/user-guide/views/filter.png" alt="Encabezado" />
|
|
||||||
</Frame>
|
|
||||||
|
|
||||||
Una lista de botones y grupos de botones utilizados en toda la aplicación.
|
|
||||||
|
|
||||||
## Botón
|
|
||||||
|
|
||||||
<Tabs>
|
|
||||||
|
|
||||||
<Tab title=""Uso"">
|
|
||||||
|
|
||||||
```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=""Props"">
|
|
||||||
|
|
||||||
|
|
||||||
| "Props" | Tipo | Descripción |
|
|
||||||
| ------------- | --------------------- | -------------------------------------------------------------------------------------------------------------------------------- |
|
|
||||||
| "className" | string | Nombre de clase opcional para estilos adicionales |
|
|
||||||
| Ícono | `React.ComponentType` | Un componente de ícono opcional que se muestra dentro del botón |
|
|
||||||
| título | cadena | El contenido de texto del botón |
|
|
||||||
| "fullWidth" | booleano | Define si el botón debe ocupar todo el ancho de su contenedor |
|
|
||||||
| variante | cadena | La variante de estilo visual del botón. Las opciones incluyen `primario`, `secundario` y `terciario` |
|
|
||||||
| tamaño | cadena | El tamaño del botón. Tiene dos opciones: `pequeño` y `mediano` |
|
|
||||||
| posición | cadena | La posición del botón en relación con sus compañeros. Las opciones incluyen: `independiente`, `izquierda`, `derecha` y `central` |
|
|
||||||
| acento | cadena | El color de acento del botón. Las opciones incluyen: `predeterminado`, `azul` y `peligro` |
|
|
||||||
| próximamente | booleano | Indica si el botón está marcado como "pronto" (como para funciones próximas) |
|
|
||||||
| deshabilitado | booleano | Especifica si el botón está deshabilitado o no |
|
|
||||||
| enfoque | booleano | Determina si el botón tiene foco |
|
|
||||||
| alHacerClic | función | Una función de callback que se activa cuando el usuario hace clic en el botón |
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</Tab>
|
|
||||||
|
|
||||||
</Tabs>
|
|
||||||
|
|
||||||
## Grupo de Botones
|
|
||||||
|
|
||||||
<Tabs>
|
|
||||||
<Tab title="Uso">
|
|
||||||
```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="Props">
|
|
||||||
|
|
||||||
|
|
||||||
| Props | Tipo | Descripción |
|
|
||||||
| --------- | --------- | -------------------------------------------------------------------------------------------------------------------------- |
|
|
||||||
| variante | cadena | La variante de estilo visual de los botones dentro del grupo. Las opciones incluyen `primario`, `secundario` y `terciario` |
|
|
||||||
| tamaño | cadena | El tamaño de los botones dentro del grupo. Tiene dos opciones: `mediano` y `pequeño` |
|
|
||||||
| acento | cadena | El color de acento de los botones dentro del grupo. Las opciones incluyen `predeterminado`, `azul` y `peligro` |
|
|
||||||
| className | cadena | Nombre de clase opcional para estilos adicionales |
|
|
||||||
| hijos | ReactNode | Una matriz de elementos React que representan los botones individuales dentro del grupo |
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</Tab>
|
|
||||||
</Tabs>
|
|
||||||
|
|
||||||
## Botón Flotante
|
|
||||||
|
|
||||||
<Tabs>
|
|
||||||
<Tab title="Uso">
|
|
||||||
|
|
||||||
```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="Props">
|
|
||||||
|
|
||||||
|
|
||||||
| Props | Tipo | Descripción |
|
|
||||||
| ----------------- | --------------------- | ------------------------------------------------------------------------------------------------------------------------------- |
|
|
||||||
| className | cadena | Nombre opcional para estilos adicionales |
|
|
||||||
| Ícono | `React.ComponentType` | Un componente de ícono opcional que se muestra dentro del botón |
|
|
||||||
| título | cadena | El contenido de texto del botón |
|
|
||||||
| tamaño | cadena | El tamaño del botón. Tiene dos opciones: `pequeño` y `mediano` |
|
|
||||||
| posición | cadena | La posición del botón en relación con sus compañeros. Las opciones incluyen: `independiente`, `izquierda`, `central`, `derecha` |
|
|
||||||
| aplicarSombra | booleano | Determina si se aplica sombra a un botón |
|
|
||||||
| aplicarDesenfoque | booleano | Determina si se aplica un efecto de desenfoque al botón |
|
|
||||||
| deshabilitado | booleano | Determina si el botón está deshabilitado |
|
|
||||||
| enfoque | booleano | Indica si el botón tiene foco |
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</Tab>
|
|
||||||
</Tabs>
|
|
||||||
|
|
||||||
## Grupo de Botones Flotantes
|
|
||||||
|
|
||||||
<Tabs>
|
|
||||||
<Tab title=""Uso"">
|
|
||||||
|
|
||||||
```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=""Props"">
|
|
||||||
|
|
||||||
|
|
||||||
| "Props" | Tipo | Descripción | Predeterminado |
|
|
||||||
| ------- | --------- | --------------------------------------------------------------------------------------- | -------------- |
|
|
||||||
| tamaño | cadena | El tamaño del botón. Tiene dos opciones: `pequeño` y `mediano` | pequeño |
|
|
||||||
| hijos | ReactNode | Una matriz de elementos React que representan los botones individuales dentro del grupo | |
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</Tab>
|
|
||||||
|
|
||||||
</Tabs>
|
|
||||||
|
|
||||||
## Botón de Ícono Flotante
|
|
||||||
|
|
||||||
<Tabs>
|
|
||||||
<Tab title="Uso">
|
|
||||||
|
|
||||||
```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="Props">
|
|
||||||
|
|
||||||
|
|
||||||
| Props | Tipo | Descripción |
|
|
||||||
| ----------------- | --------------------- | -------------------------------------------------------------------------------------------------------------------------------- |
|
|
||||||
| className | cadena | "Nombre opcional para estilización adicional" |
|
|
||||||
| Ícono | `React.ComponentType` | Un componente de ícono opcional que se muestra dentro del botón |
|
|
||||||
| tamaño | cadena | El tamaño del botón. Tiene dos opciones: `pequeño` y `mediano` |
|
|
||||||
| posición | cadena | La posición del botón en relación con sus compañeros. Las opciones incluyen: `independiente`, `izquierda`, `derecha` y `central` |
|
|
||||||
| aplicarSombra | booleano | Determina si se aplica sombra a un botón |
|
|
||||||
| aplicarDesenfoque | booleano | Determina si se aplica un efecto de desenfoque al botón |
|
|
||||||
| deshabilitado | booleano | Determina si el botón está deshabilitado |
|
|
||||||
| enfoque | booleano | Indica si el botón tiene foco |
|
|
||||||
| alHacerClic | función | Una función de callback que se activa cuando el usuario hace clic en el botón |
|
|
||||||
| esActivo | booleano | Determina si el botón está en estado activo |
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</Tab>
|
|
||||||
|
|
||||||
</Tabs>
|
|
||||||
|
|
||||||
## Grupo de Botones de Ícono Flotante
|
|
||||||
|
|
||||||
<Tabs>
|
|
||||||
<Tab title="Uso">
|
|
||||||
|
|
||||||
```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="Props">
|
|
||||||
|
|
||||||
|
|
||||||
| Props | Tipo | Descripción |
|
|
||||||
| ----------- | ------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
|
||||||
| className | cadena | "Nombre opcional para estilización adicional" |
|
|
||||||
| tamaño | cadena | El tamaño del botón. Tiene dos opciones: `pequeño` y `mediano` |
|
|
||||||
| iconButtons | array | Una matriz de objetos, cada uno de los cuales representa un botón de icono del grupo. Cada objeto debe incluir el componente de ícono que desea mostrar en el botón, la función que desea llamar cuando un usuario hace clic en el botón y si el botón debe estar activo o no. |
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</Tab>
|
|
||||||
|
|
||||||
</Tabs>
|
|
||||||
|
|
||||||
## Botón Claro
|
|
||||||
|
|
||||||
<Tabs>
|
|
||||||
<Tab title="Uso">
|
|
||||||
|
|
||||||
```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="Props">
|
|
||||||
|
|
||||||
|
|
||||||
| Props | Tipo | Descripción |
|
|
||||||
| ------------- | ----------------- | ------------------------------------------------------------------------------- |
|
|
||||||
| className | cadena | "Nombre opcional para estilización adicional" |
|
|
||||||
| ícono | `React.ReactNode` | El ícono que desea mostrar en el botón |
|
|
||||||
| título | cadena | El contenido de texto del botón |
|
|
||||||
| acento | "cadena" | El color de acento del botón. Las opciones incluyen: `secundario` y `terciario` |
|
|
||||||
| activo | booleano | Determina si el botón está en estado activo |
|
|
||||||
| deshabilitado | booleano | Determina si el botón está deshabilitado |
|
|
||||||
| enfoque | booleano | Indica si el botón tiene foco |
|
|
||||||
| alHacerClic | función | Una función de callback que se activa cuando el usuario hace clic en el botón |
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</Tab>
|
|
||||||
|
|
||||||
</Tabs>
|
|
||||||
|
|
||||||
## Botón de Ícono Claro
|
|
||||||
|
|
||||||
<Tabs>
|
|
||||||
<Tab title=""Uso"">
|
|
||||||
|
|
||||||
```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=""Props"">
|
|
||||||
|
|
||||||
|
|
||||||
| "Props" | Tipo | Descripción |
|
|
||||||
| ------------- | --------------------- | ----------------------------------------------------------------------------- |
|
|
||||||
| "className" | cadena | "Nombre opcional para estilización adicional" |
|
|
||||||
| testId | "cadena" | Identificador de prueba para el botón |
|
|
||||||
| Ícono | `React.ComponentType` | Un componente de ícono opcional que se muestra dentro del botón |
|
|
||||||
| título | "cadena" | El contenido de texto del botón |
|
|
||||||
| tamaño | "cadena" | El tamaño del botón. Tiene dos opciones: `pequeño` y `mediano` |
|
|
||||||
| acento | "cadena" | El color de acento del botón. Opciones incluyen: `secundario` y `terciario` |
|
|
||||||
| activo | booleano | Determina si el botón está en estado activo |
|
|
||||||
| "desactivado" | booleano | Determina si el botón está deshabilitado |
|
|
||||||
| enfoque | booleano | Indica si el botón tiene foco |
|
|
||||||
| alHacerClic | función | Una función de callback que se activa cuando el usuario hace clic en el botón |
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</Tab>
|
|
||||||
|
|
||||||
</Tabs>
|
|
||||||
|
|
||||||
## Botón Principal
|
|
||||||
|
|
||||||
<Tabs>
|
|
||||||
<Tab title="Uso">
|
|
||||||
|
|
||||||
```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="Propiedades">
|
|
||||||
|
|
||||||
|
|
||||||
| Propiedades | Tipo | Descripción |
|
|
||||||
| -------------------------- | -------------------------------- | ------------------------------------------------------------------------------------- |
|
|
||||||
| título | "cadena" | El contenido de texto del botón |
|
|
||||||
| anchoCompleto | booleano | Define si el botón debe abarcar todo el ancho de su contenedor |
|
|
||||||
| variante | "cadena" | La variante de estilo visual del botón. Las opciones incluyen `primary` y `secondary` |
|
|
||||||
| próximamente | booleano | Indica si el botón está marcado como "próximamente" (como para funciones futuras) |
|
|
||||||
| Ícono | `React.ComponentType` | Un componente de ícono opcional que se muestra dentro del botón |
|
|
||||||
| Propiedades React `button` | `React.ComponentProps<'button'>` | Se admiten todas las propiedades estándar del botón HTML |
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</Tab>
|
|
||||||
|
|
||||||
</Tabs>
|
|
||||||
|
|
||||||
## Botón de Icono Redondeado
|
|
||||||
|
|
||||||
<Tabs>
|
|
||||||
<Tab title=""Uso"">
|
|
||||||
|
|
||||||
```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=""Props"">
|
|
||||||
|
|
||||||
|
|
||||||
| "Props" | Tipo | Descripción |
|
|
||||||
| -------------------------- | ----------------------------------------------- | ----------- |
|
|
||||||
| Ícono | `React.ComponentType` | |
|
|
||||||
| Propiedades React `button` | `React.ButtonHTMLAttributes<HTMLButtonElement>` | |
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</Tab>
|
|
||||||
|
|
||||||
</Tabs>
|
|
||||||
@@ -1,50 +0,0 @@
|
|||||||
---
|
|
||||||
title: Caja de selección
|
|
||||||
icon: square-check
|
|
||||||
---
|
|
||||||
|
|
||||||
<Frame>
|
|
||||||
<img src="/images/user-guide/tasks/tasks_header.png" alt="Encabezado" />
|
|
||||||
</Frame>
|
|
||||||
|
|
||||||
Usado cuando un usuario necesita seleccionar múltiples valores entre varias opciones.
|
|
||||||
|
|
||||||
<Tabs>
|
|
||||||
<Tab title="Uso">
|
|
||||||
|
|
||||||
```jsx
|
|
||||||
import { Checkbox } from "twenty-ui/display";
|
|
||||||
|
|
||||||
export const MyComponent = () => {
|
|
||||||
return (
|
|
||||||
<Checkbox
|
|
||||||
checked={true}
|
|
||||||
indeterminate={false}
|
|
||||||
onChange={() => console.log("onChange function fired")}
|
|
||||||
onCheckedChange={() => console.log("onCheckedChange function fired")}
|
|
||||||
variant="primary"
|
|
||||||
size="small"
|
|
||||||
shape="squared"
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
```
|
|
||||||
|
|
||||||
</Tab>
|
|
||||||
<Tab title="Props">
|
|
||||||
|
|
||||||
|
|
||||||
| Props | Tipo | Descripción |
|
|
||||||
| --------------- | -------- | ------------------------------------------------------------------------------------------------------ |
|
|
||||||
| marcado | booleano | Indica si la caja de selección está marcada |
|
|
||||||
| indeterminado | booleano | Indica si la caja de selección está en un estado indeterminado (ni marcada ni desmarcada) |
|
|
||||||
| onChange | función | La función de devolución de llamada que desea activar cuando cambia el estado de la caja de selección |
|
|
||||||
| onCheckedChange | función | La función de devolución de llamada que desea activar cuando cambia el estado `marcado` |
|
|
||||||
| variante | cadena | La variante de estilo visual de la caja. Las opciones incluyen: `primario`, `secundario` y `terciario` |
|
|
||||||
| tamaño | cadena | El tamaño de la caja de selección. Tiene dos opciones: `pequeño` y `grande` |
|
|
||||||
| forma | cadena | La forma de la caja de selección. Tiene dos opciones: `cuadrado` y `redondeado` |
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</Tab>
|
|
||||||
</Tabs>
|
|
||||||
@@ -1,79 +0,0 @@
|
|||||||
---
|
|
||||||
title: Esquema de colores
|
|
||||||
icon: palette
|
|
||||||
---
|
|
||||||
|
|
||||||
<Frame>
|
|
||||||
<img src="/images/user-guide/fields/field.png" alt="Encabezado" />
|
|
||||||
</Frame>
|
|
||||||
|
|
||||||
## Tarjeta de Esquema de Color
|
|
||||||
|
|
||||||
Representa diferentes esquemas de color y está diseñado especialmente para temas claros y oscuros.
|
|
||||||
|
|
||||||
<Tabs>
|
|
||||||
<Tab title=""Uso"">
|
|
||||||
|
|
||||||
```jsx
|
|
||||||
import { ColorSchemeCard } from "twenty-ui/display";
|
|
||||||
|
|
||||||
export const MyComponent = () => {
|
|
||||||
return (
|
|
||||||
<ColorSchemeCard
|
|
||||||
variant="Dark"
|
|
||||||
selected={true}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
```
|
|
||||||
|
|
||||||
</Tab>
|
|
||||||
|
|
||||||
<Tab title=""Props"">
|
|
||||||
|
|
||||||
|
|
||||||
| "Props" | Tipo | Descripción | Predeterminado |
|
|
||||||
| ----------------- | --------------------------------------- | -------------------------------------------------------------------------------------------------- | -------------- |
|
|
||||||
| variante | string | La variante del esquema de color. Las opciones incluyen `Oscuro`, `Claro` y `Sistema` | claro |
|
|
||||||
| seleccionado | booleano | Si es `verdadero`, muestra una marca de verificación para indicar el esquema de color seleccionado | |
|
|
||||||
| props adicionales | `React.ComponentPropsWithoutRef<'div'>` | Props del elemento HTML estándar `div` | |
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</Tab>
|
|
||||||
|
|
||||||
</Tabs>
|
|
||||||
|
|
||||||
## Selector de Esquema de Color
|
|
||||||
|
|
||||||
Permite a los usuarios elegir entre diferentes esquemas de color.
|
|
||||||
|
|
||||||
<Tabs>
|
|
||||||
<Tab title=""Uso"">
|
|
||||||
|
|
||||||
```jsx
|
|
||||||
import { ColorSchemePicker } from "twenty-ui/display";
|
|
||||||
|
|
||||||
export const MyComponent = () => {
|
|
||||||
return <ColorSchemePicker
|
|
||||||
value="Dark"
|
|
||||||
onChange
|
|
||||||
/>;
|
|
||||||
};
|
|
||||||
```
|
|
||||||
|
|
||||||
</Tab>
|
|
||||||
|
|
||||||
<Tab title=""Props"">
|
|
||||||
|
|
||||||
|
|
||||||
| "Props" | Tipo | Descripción |
|
|
||||||
| ---------- | -------------------- | ------------------------------------------------------------------------------------------------------ |
|
|
||||||
| valor | `Esquema de colores` | El esquema de color actualmente seleccionado |
|
|
||||||
| "onChange" | función | La función de devolución de llamada que desea activar cuando un usuario selecciona un esquema de color |
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</Tab>
|
|
||||||
|
|
||||||
</Tabs>
|
|
||||||
@@ -1,57 +0,0 @@
|
|||||||
---
|
|
||||||
title: Selector de Íconos
|
|
||||||
---
|
|
||||||
|
|
||||||
<Frame>
|
|
||||||
<img src="/images/user-guide/github/github-header.png" alt="Encabezado" />
|
|
||||||
</Frame>
|
|
||||||
|
|
||||||
Un selector de íconos basado en un menú desplegable que permite a los usuarios seleccionar un ícono de una lista.
|
|
||||||
|
|
||||||
<Tabs>
|
|
||||||
|
|
||||||
<Tab title="Uso">
|
|
||||||
|
|
||||||
```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="Props">
|
|
||||||
|
|
||||||
|
|
||||||
| Props | Tipo | Descripción |
|
|
||||||
| --------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
|
|
||||||
| deshabilitado | booleano | Desactiva el selector de íconos si está configurado en `true` |
|
|
||||||
| "onChange" | función | La función de devolución de llamada que se activa cuando el usuario selecciona un icono. Recibe un objeto con las propiedades `iconKey` y `Icon` |
|
|
||||||
| selectedIconKey | cadena | La clave del ícono seleccionado inicialmente |
|
|
||||||
| onClickOutside | función | Función de devolución de llamada que se activa cuando el usuario hace clic fuera del menú desplegable |
|
|
||||||
| onClose | función | Función de devolución de llamada que se activa cuando se cierra el menú desplegable |
|
|
||||||
| onOpen | función | Función de devolución de llamada que se activa cuando se abre el menú desplegable |
|
|
||||||
| variante | cadena | La variante de estilo visual del ícono clicable. Las opciones incluyen: `primario`, `secundario` y `terciario` |
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</Tab>
|
|
||||||
</Tabs>
|
|
||||||
@@ -1,40 +0,0 @@
|
|||||||
---
|
|
||||||
title: Entrada de imagen
|
|
||||||
---
|
|
||||||
|
|
||||||
<Frame>
|
|
||||||
<img src="/images/user-guide/objects/objects.png" alt="Encabezado" />
|
|
||||||
</Frame>
|
|
||||||
|
|
||||||
Permite a los usuarios subir y eliminar una imagen.
|
|
||||||
|
|
||||||
<Tabs>
|
|
||||||
<Tab title="Uso">
|
|
||||||
|
|
||||||
```jsx
|
|
||||||
import { ImageInput } from "@/ui/input/components/ImageInput";
|
|
||||||
|
|
||||||
export const MyComponent = () => {
|
|
||||||
return <ImageInput/>;
|
|
||||||
};
|
|
||||||
```
|
|
||||||
|
|
||||||
</Tab>
|
|
||||||
<Tab title="Props">
|
|
||||||
|
|
||||||
|
|
||||||
| Props | Tipo | Descripción |
|
|
||||||
| ------------- | -------- | ---------------------------------------------------------------------------------------------------------- |
|
|
||||||
| foto | cadena | La URL de origen de la imagen |
|
|
||||||
| onUpload | función | La función que se llama cuando un usuario sube una nueva imagen. Recibe el objeto `File` como un parámetro |
|
|
||||||
| onRemove | función | La función que se llama cuando el usuario hace clic en el botón eliminar |
|
|
||||||
| onAbort | función | La función que se llama cuando un usuario hace clic en el botón de abortar durante la subida de imagen |
|
|
||||||
| isUploading | booleano | Indica si una imagen se está cargando actualmente |
|
|
||||||
| errorMessage | cadena | Un mensaje de error opcional para mostrar debajo de la entrada de imagen |
|
|
||||||
| "desactivado" | booleano | Si es `true`, toda la entrada está deshabilitada y los botones no son clicables |
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</Tab>
|
|
||||||
</Tabs>
|
|
||||||
@@ -1,113 +0,0 @@
|
|||||||
---
|
|
||||||
title: Radio
|
|
||||||
icon: circle-dot
|
|
||||||
---
|
|
||||||
|
|
||||||
<Frame>
|
|
||||||
<img src="/images/user-guide/create-workspace/workspace-cover.png" alt="Encabezado" />
|
|
||||||
</Frame>
|
|
||||||
|
|
||||||
Usado cuando los usuarios solo pueden elegir una opción de una serie de opciones.
|
|
||||||
|
|
||||||
<Tabs>
|
|
||||||
<Tab title="Uso">
|
|
||||||
|
|
||||||
```jsx
|
|
||||||
import { Radio } from "twenty-ui/display";
|
|
||||||
|
|
||||||
export const MyComponent = () => {
|
|
||||||
|
|
||||||
const handleRadioChange = (event) => {
|
|
||||||
console.log("Radio button changed:", event.target.checked);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleCheckedChange = (checked) => {
|
|
||||||
console.log("Checked state changed:", checked);
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Radio
|
|
||||||
checked={true}
|
|
||||||
value="Option 1"
|
|
||||||
onChange={handleRadioChange}
|
|
||||||
onCheckedChange={handleCheckedChange}
|
|
||||||
size="large"
|
|
||||||
disabled={false}
|
|
||||||
labelPosition="right"
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
```
|
|
||||||
|
|
||||||
|
|
||||||
</Tab>
|
|
||||||
<Tab title="Props">
|
|
||||||
|
|
||||||
|
|
||||||
| Props | Tipo | Descripción |
|
|
||||||
| --------------- | -------------------------- | --------------------------------------------------------------------------------------------------------------------- |
|
|
||||||
| estilo | propiedades de `React.CSS` | Estilos en línea adicionales para el componente. |
|
|
||||||
| "className" | cadena | Clase CSS opcional para estilo adicional. |
|
|
||||||
| marcado | booleano | Indica si el botón de opción está marcado. |
|
|
||||||
| valor | cadena | La etiqueta o texto asociado con el botón de opción. |
|
|
||||||
| "onChange" | función | La función que se llama cuando se cambia el botón de opción seleccionado. |
|
|
||||||
| onCheckedChange | función | La función que se llama cuando el estado de `seleccionado` del botón de opción cambia. |
|
|
||||||
| tamaño | cadena | El tamaño del botón de opción. Las opciones incluyen: `grande` y `pequeño`. |
|
|
||||||
| "desactivado" | booleano | Si es `verdadero`, el botón de opción está deshabilitado y no se puede hacer clic. |
|
|
||||||
| labelPosition | cadena | La posición del texto de la etiqueta en relación con el botón de opción. Tiene dos opciones: `izquierda` y `derecha`. |
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</Tab>
|
|
||||||
</Tabs>
|
|
||||||
|
|
||||||
## Grupo de Radio
|
|
||||||
|
|
||||||
Agrupa botones de opción relacionados.
|
|
||||||
|
|
||||||
<Tabs>
|
|
||||||
<Tab title="Uso">
|
|
||||||
|
|
||||||
```jsx
|
|
||||||
import React, { useState } from "react";
|
|
||||||
import { Radio, RadioGroup } from "twenty-ui/display";
|
|
||||||
|
|
||||||
export const MyComponent = () => {
|
|
||||||
|
|
||||||
const [selectedValue, setSelectedValue] = useState("Option 1");
|
|
||||||
|
|
||||||
const handleChange = (event) => {
|
|
||||||
setSelectedValue(event.target.value);
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<RadioGroup value={selectedValue} onChange={handleChange}>
|
|
||||||
<Radio value="Option 1" />
|
|
||||||
<Radio value="Option 2" />
|
|
||||||
<Radio value="Option 3" />
|
|
||||||
</RadioGroup>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
```
|
|
||||||
|
|
||||||
</Tab>
|
|
||||||
<Tab title="Props">
|
|
||||||
|
|
||||||
|
|
||||||
| Props | Tipo | Descripción |
|
|
||||||
| --------------- | ----------------- | ----------------------------------------------------------------------------------------------------- |
|
|
||||||
| valor | cadena | El valor del botón de opción seleccionado actualmente. |
|
|
||||||
| "onChange" | función | La función de devolución de llamada que se activa cuando se cambia el botón de opción. |
|
|
||||||
| alCambioDeValor | función | La función de devolución de llamada que se activa cuando se cambia el valor seleccionado en el grupo. |
|
|
||||||
| hijos | `React.ReactNode` | Permite pasar componentes de React (como Radio) como hijos al Radio Group. |
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</Tab>
|
|
||||||
|
|
||||||
</Tabs>
|
|
||||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user