Buton
- Utilizare
- Proprietăți
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")}
/>
);
};
| Proprietăți | Tip | Descriere |
|---|---|---|
| numeClasa | șir | Nume de clasă opțional pentru stilizare suplimentară |
| Pictogramă | React.ComponentType | Un component de pictogramă opțional care este afișat în cadrul butonului |
| titlu | șir | Conținutul text al butonului |
| lățimeCompletă | boolean | Definește dacă butonul ar trebui să se extindă pe toată lățimea containerului său |
| variantă | șir | Varianta stilului vizual al butonului. Opțiunile includ primar, secundar și terțiar |
| dimensiune | șir | Dimensiunea butonului. Are două opțiuni: mic și mediu |
| poziție | șir | Poziția butonului în raport cu frații săi. Opțiunile includ: independent, stânga, dreapta și mijloc |
| accent | șir | Culoarea accentului butonului. Opțiunile includ: implicit, albastru și pericol |
| în curând | boolean | Indică dacă butonul este marcat ca “în curând” (de exemplu, pentru funcționalități viitoare) |
| dezactivat | boolean | Specifică dacă butonul este dezactivat sau nu |
| focalizare | boolean | Determină dacă butonul are focalizare |
| laClick | funcție | O funcție de apel de întoarcere care se declanșează când utilizatorul face clic pe buton |
Grup de Butoane
- Utilizare
- Proprietăți
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>
);
};
| Proprietăți | Tip | Descriere |
|---|---|---|
| variantă | șir | Varianta stilului vizual al butoanelor din cadrul grupului. Opțiunile includ primar, secundar și terțiar |
| dimensiune | șir | Dimensiunea butoanelor din cadrul grupului. Are două opțiuni: mediu și mic |
| accent | șir | Culoarea accentului butoanelor din cadrul grupului. Opțiunile includ implicit, albastru și pericol |
| numeClasa | șir | Nume de clasă opțional pentru stilizare suplimentară |
| copii | ReactNode | O matrice de elemente React care reprezintă butoanele individuale din cadrul grupului |
Buton Plutitor
- Utilizare
- Proprietăți
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}
/>
);
};
| Proprietăți | Tip | Descriere |
|---|---|---|
| numeClasa | șir | Nume opțional pentru stilizare suplimentară |
| Pictogramă | React.ComponentType | O componentă opțională de pictogramă afișată în cadrul butonului |
| titlu | șir | Conținutul textului butonului |
| dimensiune | șir | Dimensiunea butonului. Are două opțiuni: mic și mediu |
| poziție | șir | Poziția butonului în raport cu frații săi. Opțiunile includ: standalone, left, middle, right |
| applyUmbră | boolean | Determină dacă să aplice umbra unui buton |
| Aplaurează | boolean | Determină dacă să aplice un efect de estompare pe buton |
| dezactivat | boolean | Determină dacă butonul este dezactivat |
| focalizare | boolean | Indică dacă butonul este focusat |
Grup butoane plutitoare
- Utilizare
- Proprietăți
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>
);
};
| Proprietăți | Tip | Descriere | Implicit |
|---|---|---|---|
| dimensiune | șir | Dimensiunea butonului. Are două opțiuni: mic și mediu | mic |
| copii | ReactNode | O matrice de elemente React care reprezintă butoanele individuale din cadrul grupului |
Buton Pictogramă Plutitor
- Utilizare
- Proprietăți
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}
/>
);
};
| Proprietăți | Tip | Descriere |
|---|---|---|
| numeClasa | șir | Nume opțional pentru stilizare suplimentară |
| Pictogramă | React.ComponentType | O componentă opțională de pictogramă afișată în cadrul butonului |
| dimensiune | șir | Dimensiunea butonului. Are două opțiuni: mic și mediu |
| poziție | șir | Poziția butonului în raport cu frații săi. Opțiunile includ: independent, stânga, dreapta și mijloc |
| applyUmbră | boolean | Determină dacă să aplice umbra unui buton |
| Aplaurează | boolean | Determină dacă să aplice un efect de estompare pe buton |
| dezactivat | boolean | Determină dacă butonul este dezactivat |
| focalizare | boolean | Indică dacă butonul este focusat |
| laClick | funcție | O funcție callback care se declanșează când utilizatorul face click pe buton |
| esteActiv | boolean | Determină dacă butonul este în stare activă |
Grup de butoane plutitoare
- Utilizare
- Proprietăți
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} />
);
};
| Proprietăți | Tip | Descriere |
|---|---|---|
| numeClasa | șir | Nume opțional pentru stilizare suplimentară |
| dimensiune | șir | Dimensiunea butonului. Are două opțiuni: mic și mediu |
| iconButtons | matrice | O serie de obiecte, fiecare reprezentând un buton de pictogramă din grup. Fiecare obiect ar trebui să includă componenta pictogramă pe care doriți să o afișați în buton, funcția pe care doriți să o apelați când un utilizator face clic pe buton și dacă butonul ar trebui să fie activ sau nu. |
Buton luminos
- Utilizare
- Proprietăți
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')}
/>;
};
| Proprietăți | Tip | Descriere |
|---|---|---|
| numeClasa | șir | Nume opțional pentru stilizare suplimentară |
| pictogramă | React.ReactNode | Pictograma pe care doriţi să o afişaţi în buton |
| titlu | șir | Conținutul textului butonului |
| accent | șir | Culoarea de accent a butonului. Opțiunile includ: secundar și terțiar |
| activ | boolean | Determină dacă butonul este în stare activă |
| dezactivat | boolean | Determină dacă butonul este dezactivat |
| focalizare | boolean | Indică dacă butonul este focusat |
| laClick | funcție | O funcție callback care se declanșează când utilizatorul face click pe buton |
Buton Pictogramă Luminoasă
- Utilizare
- Proprietăți
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")}
/>
);
};
| Proprietăți | Tip | Descriere |
|---|---|---|
| numeClasă | șir | Nume opțional pentru stilizare suplimentară |
| idTest | șir | Identificator test pentru buton |
| Pictogramă | React.ComponentType | O componentă opțională de pictogramă afișată în cadrul butonului |
| titlu | șir | Conținutul textului butonului |
| dimensiune | șir | Dimensiunea butonului. Are două opțiuni: mic și mediu |
| accent | șir | Culoarea de accent a butonului. Opțiunile includ: secundar și terțiar |
| activ | boolean | Determină dacă butonul este într-o stare activă |
| dezactivat | boolean | Determină dacă butonul este dezactivat |
| focalizare | boolean | Indică dacă butonul este focusat |
| laClick | funcție | O funcție callback care se declanșează când utilizatorul face click pe buton |
Buton Principal
- Utilizare
- Proprietăți
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}
/>
);
};
| Proprietăți | Tip | Descriere |
|---|---|---|
| titlu | șir | Conținutul textului butonului |
| lățimeCompletă | boolean | Definește dacă butonul ar trebui să ocupe toată lățimea containerului său |
| variantă | șir | Stilul vizual al butonului. Opțiunile includ primar și secundar |
| în curând | boolean | Indică dacă butonul este marcat ca “în curând” (de exemplu, pentru funcționalități viitoare) |
| Pictogramă | React.ComponentType | O componentă opțională de pictogramă afișată în cadrul butonului |
Reacţionaţi button reclame | React.ComponentProps<'button'> | Toate variantele standard pentru butoanele HTML sunt acceptate |
Buton Pictogramă Rotundă
- Utilizare
- Proprietăți
import { RoundedIconButton } from "@/ui/input/button/components/RoundedIconButton";
import { IconSearch } from "@tabler/icons-react";
export const MyComponent = () => {
return (
<RoundedIconButton
Icon={IconSearch}
/>
);
};
| Proprietăți | Tip | Descriere |
|---|---|---|
| Pictogramă | React.ComponentType | |
Reacţionaţi button reclame | React.ButtonHTMLAttributes<HTMLButtonElement> |