ബട്ടൺ

ഇൻസ്റ്റലേഷൻ

npx gbs-add-block@latest -a Button -beta

എല്ലാ കമ്പോണന്റുകളും ഇംപോർട്ട് ചെയ്യുന്ന ചെറിയ shared ഫോൾഡറിനൊപ്പം, button ഫോൾഡർ ഈ ബ്ലോക്ക് നിങ്ങളുടെ പ്രോജക്ടിലേക്ക് കോപ്പി ചെയ്യുന്നു. കോഡ് നിങ്ങളുടേതാണ്, സ്വതന്ത്രമായി മാറ്റം വരുത്താം. React അല്ലാതെ peer dependencies ഒന്നും ഇല്ല.

ആവശ്യകതകൾ

• React 19-ഉം @types/react 19-ഉം
• TypeScript ടാർഗെറ്റ് ES2022 അല്ലെങ്കിൽ അതിനു ശേഷമുള്ളത്, "jsx": "react-jsx" എന്നതോടെ
• 2024-നു ശേഷമുള്ള ബ്രൗസറുകൾ (സ്റ്റൈലുകൾ light-dark(), color-mix() ഉപയോഗിക്കുന്നു)

സ്റ്റൈൽഷീറ്റ് ഒരു തവണ ഇംപോർട്ട് ചെയ്യുക, ഉദാഹരണത്തിന് നിങ്ങളുടെ ഗ്ലോബൽ CSS-ൽ:

@import "../components/button/styles.css";

അല്ലെങ്കിൽ നിങ്ങളുടെ റൂട്ട് ലേഔട്ട് / എൻട്രി ഫയലിൽ:

import "@/components/button/styles.css";

ദൈനംദിന ഓരോ പ്രവർത്തനവും ബട്ടൺ ഉൾക്കൊള്ളുന്നു: പ്രൈമറിയും സെക്കൻഡറിയും പ്രവർത്തനങ്ങൾ, ഔട്ട്‌ലൈനുകൾ, ശാന്തമായ ഗോസ്റ്റ് ബട്ടണുകൾ, വിനാശകരമായ (destructive) പ്രവർത്തനങ്ങൾ, ലിങ്ക്-സ്റ്റൈൽ ബട്ടണുകൾ, മൂന്ന് സൈസുകളിൽ, ഐക്കണുകളോടുകൂടി. അതിന്റെ ലോഡിംഗ് സ്റ്റേറ്റ് സ്വയം കൈകാര്യം ചെയ്യുന്നു: onClick-ൽ നിന്ന് ഒരു പ്രോമിസ് (promise) റിട്ടേൺ ചെയ്യുക, അല്ലെങ്കിൽ ഒരു Server Action ഉപയോഗിച്ച് ഫോം സമർപ്പിക്കുക, ജോലി പൂർത്തിയാകുന്നതുവരെ ബട്ടൺ ഒരു സ്പിന്നർ കാണിക്കും. ഇതിനിടയിൽ അതിന്റെ വീതിയും കീബോർഡ് ഫോക്കസും നിലനിർത്തുന്നു. ഒരു റൗട്ടർ ലിങ്ക് പോലുള്ള മറ്റൊരു എലമെന്റ് ആയും, അതേ രൂപത്തോടെ, ഇത് റെൻഡർ ചെയ്യാൻ കഴിയും.

ഡിഫോൾട്ട്

ക്വിക്ക് സ്റ്റാർട്ട്

"use client";
 
import { Button } from "@/components/button";
 
export function SaveBar({ onSave }: { onSave(): Promise<void> }) {
  return (
    <div>
      <Button variant="outline">Cancel</Button>
      <Button onClick={onSave}>Save changes</Button>
    </div>
  );
}

onSave ഒരു പ്രോമിസ് റിട്ടേൺ ചെയ്യുന്നു, അതിനാൽ Save ബട്ടൺ ഒരു സ്പിന്നർ കാണിക്കുകയും, അത് ഫലം കാണിക്കുന്നതുവരെ കൂടുതൽ ക്ലിക്കുകൾ അവഗണിക്കുകയും ചെയ്യുന്നു.

പ്രോപ്സ് ടേബിൾ

എല്ലാ <button> ആട്രിബ്യൂട്ടുകളും, കൂടാതെ:

വേരിയന്റുകൾ

<Button>Primary</Button>                     {/* the main action on a screen */}
<Button variant="secondary">Secondary</Button>
<Button variant="outline">Outline</Button>
<Button variant="ghost">Ghost</Button>       {/* toolbars, tables, low-emphasis actions */}
<Button variant="danger">Delete</Button>     {/* destructive actions */}
<Button variant="link">Learn more</Button>   {/* looks like a link, behaves like a button */}

ഐക്കണുകൾ

<Button leading={<PlusIcon />}>New invoice</Button>
<Button variant="outline" trailing={<ArrowRightIcon />}>Next</Button>
<Button variant="ghost" icon={<TrashIcon />} aria-label="Delete row" />

ഐക്കണുകൾ ടെക്സ്റ്റിന് അനുസൃതമായ വലുപ്പത്തിലാണ് (1.15 em). leading, trailing ഐക്കണുകൾ സ്ക്രീൻ റീഡറുകളിൽ നിന്ന് മറച്ചിരിക്കുന്നു, കാരണം ലേബൽ ബട്ടൺ എന്താണ് ചെയ്യുന്നതെന്ന് പറയുന്നു. ഒരു ഐക്കൺ-മാത്രം ബട്ടണിന് ദൃശ്യമായ ടെക്സ്റ്റ് ഇല്ല, അതിനാൽ അതിന്റെ aria-label മാത്രമാണ് അതിന്റെ പേര്.

ലോഡിംഗ്

ലോഡിംഗ് സ്റ്റേറ്റിന് മൂന്ന് സ്രോതസ്സുകളുണ്ട്:

<form action={createInvoice}>
  <Input name="customer" label="Customer" required />
  <Button type="submit">Create invoice</Button>
</form>

• ഫോക്കസ് ചെയ്യാവുന്നതായി തുടരുന്നു: ബിസി ആയിരിക്കുമ്പോൾ, ബട്ടൺ disabled-ന് പകരം aria-disabled ഉപയോഗിക്കുന്നു, അതിനാൽ കീബോർഡ് ഫോക്കസ് മറ്റെവിടെയും പോകുന്നില്ല.
• സ്ഥാനം മാറ്റുന്നില്ല: ലേബൽ മറഞ്ഞിരിക്കുന്നു, പക്ഷേ അതിന്റെ സ്ഥലം നിലനിർത്തുന്നു, അതിനാൽ ബട്ടണിന്റെ വീതി മാറുന്നില്ല. loadingText ലേബലിന് പകരം ടെക്സ്റ്റ് വെക്കുന്നു, അപ്പോൾ വീതി മാറാം.
• ആവർത്തനങ്ങൾ അവഗണിക്കുന്നു: ജോലി പൂർത്തിയാകുന്നതുവരെ കൂടുതൽ ക്ലിക്കുകളും ഫോം സമർപ്പണങ്ങളും തടയപ്പെടുന്നു.
• പിശകുകൾ ദൃശ്യമായി നിലനിർത്തുന്നു: പ്രോമിസ് നിരസിക്കപ്പെട്ടാൽ (reject), ലോഡിംഗ് സ്റ്റേറ്റ് അവസാനിക്കുകയും, പിശക് ഒരു കൈകാര്യം ചെയ്യപ്പെടാത്ത റിജക്ഷനായി ഇപ്പോഴും ഉയർന്നുവരികയും ചെയ്യുന്നു. ഒരു സന്ദേശം കാണിക്കാൻ നിങ്ങളുടെ ഹാൻഡ്‌ലറിൽ അത് പിടിക്കുക (catch).

ലിങ്കുകളും മറ്റ് എലമെന്റുകളും

ഒരു ലിങ്കിനെ ബട്ടൺ പോലെ കാണിക്കാൻ, render ഉപയോഗിക്കുക. ഇതിന് ബട്ടണിന്റെ ക്ലാസ് നെയിമുകൾ, ഡാറ്റ ആട്രിബ്യൂട്ടുകൾ, ക്ലിക്ക് ഹാൻഡ്‌ലിംഗ്, കണ്ടന്റ് എന്നിവ ലഭിക്കുന്നു:

import Link from "next/link";
 
<Button
  variant="outline"
  render={(props) => <Link href="/billing" {...props} />}
>
  Go to billing
</Button>;

<Button
  variant="link"
  render={(props) => (
    <a href="/docs" target="_blank" rel="noreferrer" {...props} />
  )}
>
  Documentation
</Button>

ബട്ടൺ-മാത്രമായ ആട്രിബ്യൂട്ടുകൾ (type, form, name, value) റെൻഡർ ചെയ്ത എലമെന്റിൽ നിന്ന് ഒഴിവാക്കപ്പെടുന്നു. ഡിസേബിൾ ചെയ്തതോ ബിസി ആയതോ ആയ ഒരു ലിങ്കിന് aria-disabled ലഭിക്കുകയും ക്ലിക്കുകൾ അവഗണിക്കുകയും ചെയ്യുന്നു.

കീബോർഡ്

ആക്സസിബിലിറ്റി: ഡിഫോൾട്ടായി ഒരു യഥാർത്ഥ <button>. ബിസി ആയിരിക്കുമ്പോൾ, ഇതിന് aria-busy="true" ഉണ്ട്, കൂടാതെ ദൃശ്യപരമായി മറച്ച ടെക്സ്റ്റിലൂടെ "Loading" അറിയിക്കുന്നു. leading, trailing ഐക്കണുകൾ aria-hidden ആണ്. കീബോർഡ് ഫോക്കസിൽ മാത്രം (:focus-visible) ഫോക്കസ് 2 px റിംഗായി കാണിക്കുന്നു.

സ്റ്റൈലിംഗും തീമിംഗും

എല്ലാ റൂളുകളും CSS components ലെയറിലാണ്, അതിനാൽ className / classNames വഴി കടന്നുപോകുന്ന യൂട്ടിലിറ്റി ക്ലാസുകൾ അവയെ ഓവർറൈഡ് ചെയ്യുന്നു.

<Button className="rounded-full px-6" />

CSS വേരിയബിളുകൾ

.bt-root-ലോ, :root-ലോ, അല്ലെങ്കിൽ style-ലൂടെയോ ഇവ ഓവർറൈഡ് ചെയ്യുക. ഓരോ വേരിയബിളും അതേ പേരിലുള്ള ഷെയേർഡ് --gbs-*-ലേക്ക് ഫാൾബാക്ക് ചെയ്യുന്നു, പിന്നീട് ആ സ്റ്റൈൽഷീറ്റ് ലോഡ് ചെയ്തിട്ടുണ്ടെങ്കിൽ DataGrid-ന്റെ --dg-*-ലേക്കും, അവസാനം ബിൽറ്റ്-ഇൻ പാലറ്റിലേക്കും.

/* A brand variant, without touching the component */
.bt-root.brand {
  --bt-fill: #7c3aed;
  --bt-fill-hover: #6d28d9;
  --bt-line: #7c3aed;
  --bt-ink: white;
}

ഡാറ്റ ആട്രിബ്യൂട്ടുകൾ

ലോക്കൽ ടെക്സ്റ്റ്

<Button localeText={{ loading: "Wird geladen" }} />

ഹെഡ്‌ലെസ് ഉപയോഗം

Next.js

ബട്ടൺ ഒരു ക്ലയന്റ് കമ്പോണന്റ് ആണ്, അതിന്റെ ഫയലിന്റെ മുകളിൽ "use client" ഉള്ളത്.

• Server Components-ൽ: ഫംഗ്ഷൻ പ്രോപ്‌സ് ഒന്നും കൈമാറാത്തിടത്തോളം ഇത് പ്രവർത്തിക്കും. <form action={serverAction}>-നുള്ളിലെ ഒരു type="submit" ബട്ടണിന് അതൊന്നും ആവശ്യമില്ല, കൂടാതെ അത് സ്വയം പുരോഗതി കാണിക്കുന്നു, അതിനാൽ ഇത് ഒരു Server Component പേജിൽ പ്രവർത്തിക്കും.
• onClick അല്ലെങ്കിൽ render ഉപയോഗിച്ച്: ഇവ ഫംഗ്ഷനുകളാണ്, ഒരു Server Component-ന് ഒരു ക്ലയന്റ് കമ്പോണന്റിലേക്ക് ഇവ കൈമാറാൻ കഴിയില്ല. ഒരു ക്ലയന്റ് കമ്പോണന്റിനുള്ളിൽ ഇവ ഉപയോഗിക്കുക, ഉദാഹരണത്തിന് render ഉപയോഗിച്ച് next/link റാപ്പ് ചെയ്യാൻ.

മുമ്പത്തെ കസ്റ്റം ബട്ടണിൽ നിന്ന് മൈഗ്രേറ്റ് ചെയ്യുന്നത്

കുറിപ്പുകൾ

• ഐക്കൺ-മാത്രം ബട്ടണുകൾക്ക് ഒരു aria-label ആവശ്യമാണ്; ഒരു ഐക്കണിൽ നിന്ന് കമ്പോണന്റിന് ഒന്ന് ഊഹിക്കാൻ കഴിയില്ല.
• render, അതിന് ലഭിക്കുന്ന പ്രോപ്‌സ് എലമെന്റിൽ സ്പ്രെഡ് ചെയ്യണം, അല്ലെങ്കിൽ രൂപവും ക്ലിക്ക് ഹാൻഡ്‌ലിംഗും നഷ്ടപ്പെടും.