github-actions[bot]
8cadd00d34
Created by Github action --------- Co-authored-by: Crowdin Bot <support+bot@crowdin.com> Co-authored-by: github-actions <github-actions@twenty.com>
489 lines
25 KiB
Plaintext
489 lines
25 KiB
Plaintext
---
|
|
title: Κουμπιά
|
|
image: /images/user-guide/views/filter.png
|
|
---
|
|
|
|
<Frame>
|
|
<img src="/images/user-guide/views/filter.png" alt="Header" />
|
|
</Frame>
|
|
|
|
Μια λίστα κουμπιών και ομάδων κουμπιών που χρησιμοποιούνται σε όλη την εφαρμογή.
|
|
|
|
## Κουμπί
|
|
|
|
<Tabs>
|
|
|
|
<Tab title="Usage">
|
|
|
|
```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">
|
|
|
|
| Ιδιότητες | Τύπος | Περιγραφή |
|
|
| ------------- | --------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
| όνομαΚλάσης | αλφαριθμητικό | Προαιρετικό όνομα κλάσης για επιπλέον στυλ |
|
|
| Εικονίδιο | `React.ComponentType` | Ένα προαιρετικό εικονίδιο που εμφανίζεται μέσα στο κουμπί |
|
|
| τίτλος | αλφαριθμητικό | Το περιεχόμενο κειμένου του κουμπιού |
|
|
| πλήρες πλάτος | boolean | Ορίζει αν το κουμπί πρέπει να καταλαμβάνει όλο το πλάτος του κοντέινερ του |
|
|
| "variant" | αλφαριθμητικό | The visual style variant of the button. Options include `primary`, `secondary`, and `tertiary` |
|
|
| μέγεθος | αλφαριθμητικό | Το μέγεθος του κουμπιού. Έχει δύο επιλογές: `μικρό` και `μεσαίο` |
|
|
| θέση | αλφαριθμητικό | Η θέση του κουμπιού σε σχέση με τα αδέλφια του. Οι επιλογές περιλαμβάνουν: `ανεξάρτητο`, `αριστερό`, `δεξί`, και `μεσαίο` |
|
|
| τονισμός | αλφαριθμητικό | The accent color of the button. Options include: `default`, `blue`, and `danger` |
|
|
| σύντομα | boolean | Δείχνει αν το κουμπί είναι χαρακτηρισμένο ως "σύντομα" (π.χ. για επερχόμενες λειτουργίες) |
|
|
| disabled | boolean | Καθορίζει αν το κουμπί είναι απενεργοποιημένο ή όχι |
|
|
| εστίαση | boolean | Καθορίζει αν το κουμπί έχει εστίαση |
|
|
| onClick | συνάρτηση | Μία λειτουργία επιστροφής κλήσης που ενεργοποιείται όταν ο χρήστης κάνει κλικ στο κουμπί |
|
|
|
|
</Tab>
|
|
|
|
</Tabs>
|
|
|
|
## Ομάδα Κουμπιών
|
|
|
|
<Tabs>
|
|
<Tab title="Usage">
|
|
```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 | Type | Description |
|
|
|-------|------|-------------|
|
|
| variant | string | The visual style variant of the buttons within the group. Options include `primary`, `secondary`, and `tertiary` |
|
|
| size | string | The size of the buttons within the group. Has two options: `medium` and `small` |
|
|
| accent | string | The accent color of the buttons within the group. Options include `default`, `blue` and `danger` |
|
|
| className | string | Optional class name for additional styling |
|
|
| children | ReactNode | An array of React elements representing the individual buttons within the group |
|
|
|
|
|
|
|
|
</Tab>
|
|
</Tabs>
|
|
|
|
|
|
## Floating Button
|
|
|
|
<Tabs>
|
|
<Tab title="Usage">
|
|
|
|
```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">
|
|
|
|
| Ιδιότητες | Τύπος | Περιγραφή |
|
|
| ------------------ | --------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
| όνομαΚλάσης | αλφαριθμητικό | Προαιρετική ονομασία για επιπλέον στυλ |
|
|
| Εικονίδιο | `React.ComponentType` | Ένα προαιρετικό εικονίδιο που εμφανίζεται μέσα στο κουμπί |
|
|
| τίτλος | αλφαριθμητικό | Το περιεχόμενο κειμένου του κουμπιού |
|
|
| μέγεθος | αλφαριθμητικό | Το μέγεθος του κουμπιού. Έχει δύο επιλογές: `μικρό` και `μεσαίο` |
|
|
| θέση | αλφαριθμητικό | Η θέση του κουμπιού σε σχέση με τα αδέλφια του. Οι επιλογές περιλαμβάνουν: `ανεξάρτητο`, `αριστερό`, `μεσαίο`, `δεξί` |
|
|
| εφαρμογή σκιάς | boolean | Καθορίζει αν θα εφαρμοστεί σκιά σε ένα κουμπί |
|
|
| εφαρμογή θολότητας | boolean | Determines whether to apply a blur effect to the button |
|
|
| disabled | boolean | Καθορίζει αν το κουμπί είναι απενεργοποιημένο |
|
|
| εστίαση | boolean | Δείχνει αν το κουμπί έχει εστίαση |
|
|
|
|
</Tab>
|
|
</Tabs>
|
|
|
|
## Ομάδα Πλωτών Κουμπιών
|
|
|
|
<Tabs>
|
|
<Tab title="Usage">
|
|
|
|
```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">
|
|
|
|
| Ιδιότητες | Τύπος | Περιγραφή | Προεπιλογή |
|
|
| --------- | ------------- | ------------------------------------------------------------------------------------------------ | ---------- |
|
|
| μέγεθος | αλφαριθμητικό | Το μέγεθος του κουμπιού. Έχει δύο επιλογές: `μικρό` και `μεσαίο` | μικρό |
|
|
| παιδιά | ReactNode | An array of React elements representing the individual buttons within the group | |
|
|
|
|
</Tab>
|
|
|
|
</Tabs>
|
|
|
|
## Πλωτό Εικονίδιο Κουμπιού
|
|
|
|
<Tabs>
|
|
<Tab title="Usage">
|
|
|
|
```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">
|
|
|
|
| Ιδιότητες | Τύπος | Περιγραφή |
|
|
| ------------------ | --------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
| όνομαΚλάσης | αλφαριθμητικό | Προαιρετική ονομασία για επιπλέον στυλ |
|
|
| Εικονίδιο | `React.ComponentType` | Ένα προαιρετικό εικονίδιο που εμφανίζεται μέσα στο κουμπί |
|
|
| μέγεθος | αλφαριθμητικό | Το μέγεθος του κουμπιού. Έχει δύο επιλογές: `μικρό` και `μεσαίο` |
|
|
| θέση | αλφαριθμητικό | Η θέση του κουμπιού σε σχέση με τα αδέλφια του. Οι επιλογές περιλαμβάνουν: `ανεξάρτητο`, `αριστερό`, `δεξί`, και `μεσαίο` |
|
|
| εφαρμογή σκιάς | boolean | Καθορίζει αν θα εφαρμοστεί σκιά σε ένα κουμπί |
|
|
| εφαρμογή θολότητας | boolean | Determines whether to apply a blur effect to the button |
|
|
| disabled | boolean | Καθορίζει αν το κουμπί είναι απενεργοποιημένο |
|
|
| εστίαση | boolean | Δείχνει αν το κουμπί έχει εστίαση |
|
|
| onClick | συνάρτηση | Μία λειτουργία επιστροφής κλήσης που ενεργοποιείται όταν ο χρήστης κάνει κλικ στο κουμπί |
|
|
| είναι ενεργό | boolean | Καθορίζει αν το κουμπί βρίσκεται σε κατάσταση ενεργοποίησης |
|
|
|
|
</Tab>
|
|
|
|
</Tabs>
|
|
|
|
## Ομάδα Πλωτών Εικονιδίων Κουμπιών
|
|
|
|
<Tabs>
|
|
<Tab title="Usage">
|
|
|
|
```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">
|
|
|
|
| Ιδιότητες | Τύπος | Περιγραφή |
|
|
| ----------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
| όνομαΚλάσης | αλφαριθμητικό | Προαιρετική ονομασία για επιπλέον στυλ |
|
|
| μέγεθος | αλφαριθμητικό | Το μέγεθος του κουμπιού. Έχει δύο επιλογές: `μικρό` και `μεσαίο` |
|
|
| κουμπιάΕικονιδίων | σειρά | An array of objects, each representing an icon button in the group. Κάθε αντικείμενο θα πρέπει να περιλαμβάνει το εικονίδιο που θέλετε να εμφανιστεί στο κουμπί, τη λειτουργία που θέλετε να καλέσετε όταν ο χρήστης κάνει κλικ στο κουμπί και αν το κουμπί πρέπει να είναι ενεργό ή όχι. |
|
|
|
|
</Tab>
|
|
|
|
</Tabs>
|
|
|
|
## Light Button
|
|
|
|
<Tabs>
|
|
<Tab title="Usage">
|
|
|
|
```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">
|
|
|
|
| Ιδιότητες | Τύπος | Περιγραφή |
|
|
| ----------- | ----------------- | ------------------------------------------------------------------------------------------------------------------------ |
|
|
| όνομαΚλάσης | αλφαριθμητικό | Προαιρετική ονομασία για επιπλέον στυλ |
|
|
| εικονίδιο | `React.ReactNode` | Το εικονίδιο που θέλετε να εμφανιστεί στο κουμπί |
|
|
| τίτλος | αλφαριθμητικό | Το περιεχόμενο κειμένου του κουμπιού |
|
|
| τονισμός | αλφαριθμητικό | The accent color of the button. Οι επιλογές περιλαμβάνουν: `δευτερεύον` και `τριτογενές` |
|
|
| ενεργό | boolean | Καθορίζει αν το κουμπί βρίσκεται σε κατάσταση ενεργοποίησης |
|
|
| disabled | boolean | Καθορίζει αν το κουμπί είναι απενεργοποιημένο |
|
|
| εστίαση | boolean | Δείχνει αν το κουμπί έχει εστίαση |
|
|
| onClick | συνάρτηση | Μία λειτουργία επιστροφής κλήσης που ενεργοποιείται όταν ο χρήστης κάνει κλικ στο κουμπί |
|
|
|
|
</Tab>
|
|
|
|
</Tabs>
|
|
|
|
## Light Icon Button
|
|
|
|
<Tabs>
|
|
<Tab title="Usage">
|
|
|
|
```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">
|
|
|
|
| Ιδιότητες | Τύπος | Περιγραφή |
|
|
| ----------- | --------------------- | ------------------------------------------------------------------------------------------------------------------------ |
|
|
| όνομαΚλάσης | αλφαριθμητικό | Προαιρετική ονομασία για επιπλέον στυλ |
|
|
| testId | αλφαριθμητικό | Αναγνωριστικό δοκιμής για το κουμπί |
|
|
| Εικονίδιο | `React.ComponentType` | Ένα προαιρετικό εικονίδιο που εμφανίζεται μέσα στο κουμπί |
|
|
| τίτλος | αλφαριθμητικό | Το περιεχόμενο κειμένου του κουμπιού |
|
|
| μέγεθος | αλφαριθμητικό | Το μέγεθος του κουμπιού. Έχει δύο επιλογές: `μικρό` και `μεσαίο` |
|
|
| τονισμός | αλφαριθμητικό | The accent color of the button. Οι επιλογές περιλαμβάνουν: `δευτερεύον` και `τριτογενές` |
|
|
| ενεργό | boolean | Καθορίζει αν το κουμπί βρίσκεται σε κατάσταση ενεργοποίησης |
|
|
| disabled | boolean | Καθορίζει αν το κουμπί είναι απενεργοποιημένο |
|
|
| εστίαση | boolean | Δείχνει αν το κουμπί έχει εστίαση |
|
|
| onClick | λειτουργία | Μία λειτουργία επιστροφής κλήσης που ενεργοποιείται όταν ο χρήστης κάνει κλικ στο κουμπί |
|
|
|
|
</Tab>
|
|
|
|
</Tabs>
|
|
|
|
## Main Button
|
|
|
|
<Tabs>
|
|
<Tab title="Usage">
|
|
|
|
```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="Props">
|
|
|
|
| Ιδιότητες | Τύπος | Περιγραφή |
|
|
| -------------------------- | -------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
| τίτλος | αλφαριθμητικό | Το περιεχόμενο κειμένου του κουμπιού |
|
|
| πλήρες πλάτος | boolean | Ορίζει αν το κουμπί πρέπει να καταλαμβάνει όλο το πλάτος του κοντέινερ του |
|
|
| "variant" | αλφαριθμητικό | The visual style variant of the button. Οι επιλογές περιλαμβάνουν `πρωτεύον` και `δευτερεύον` |
|
|
| σύντομα | boolean | Δείχνει αν το κουμπί είναι χαρακτηρισμένο ως "σύντομα" (π.χ. για επερχόμενες λειτουργίες) |
|
|
| Εικονίδιο | `React.ComponentType` | Ένα προαιρετικό εικονίδιο που εμφανίζεται μέσα στο κουμπί |
|
|
| React `ιδιότητες κουμπιού` | `React.ComponentProps<'button'>` | Υποστηρίζονται όλες οι ιδιότητες τυπικού κουμπιού HTML |
|
|
|
|
</Tab>
|
|
|
|
</Tabs>
|
|
|
|
## Rounded Icon Button
|
|
|
|
<Tabs>
|
|
<Tab title="Usage">
|
|
|
|
```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">
|
|
|
|
| Ιδιότητες | Τύπος | Περιγραφή |
|
|
| -------------------------- | ----------------------------------------------- | --------- |
|
|
| Εικονίδιο | `React.ComponentType` | |
|
|
| React `ιδιότητες κουμπιού` | `React.ButtonHTMLAttributes<HTMLButtonElement>` | |
|
|
|
|
</Tab>
|
|
|
|
</Tabs>
|