React-നുള്ള ഒരു ഏജന്റ്-നേറ്റീവ് UI റൺടൈം.
നിങ്ങൾ സ്വന്തമാക്കുന്ന കോപ്പി-ഇൻ കമ്പോണന്റുകൾ: React 19, പിയർ ഡിപൻഡൻസികളില്ല, പൂർണമായ കീബോർഡ് പിന്തുണ, സാധാരണ CSS വേരിയബിളുകൾ വഴിയുള്ള തീമിങ്. ഓരോ കമ്പോണന്റും അതിന് എന്തു ചെയ്യാനാകും എന്ന് വിവരിക്കുന്ന ഒരു കരാറും പ്രസിദ്ധീകരിക്കുന്നു — അതിനാൽ ഒരു വ്യക്തിയോ സ്ക്രിപ്റ്റോ ഏജന്റോ ആകട്ടെ, എല്ലാവരും ഒരേ പരിശോധിത അതിർത്തിയിലൂടെയാണ് കടന്നുപോകുന്നത്.
npx gbs-add-block@latest -i -betaകമ്പോണന്റുകൾ
ബീറ്റയിൽ ലഭ്യമായവ
പുനർനിർമിക്കുന്ന മുറയ്ക്ക് കൂടുതൽ കമ്പോണന്റുകൾ 2.0-ലേക്ക് എത്തും. അതുവരെ 1.x ഡോക്യുമെന്റേഷൻ ലഭ്യമായിരിക്കും.
- പൊതുവായവ
തീമിംഗ്
:root-ൽ ഒരു കൂട്ടം --gbs-* വേരിയബിളുകൾ എല്ലാ കമ്പോണന്റുകളും ഒരുമിച്ച് തീം ചെയ്യുന്നു, ആവശ്യമുള്ളപ്പോൾ ഓരോ കമ്പോണന്റിനും ഓരോ വിഭാഗത്തിനും വേണ്ടിയുള്ള ഓവർറൈഡുകളോടുകൂടി.
ഡോക്യുമെന്റേഷൻ വായിക്കുക - ഇൻപുട്ടുകൾ
ബട്ടൺ
മൂന്ന് സൈസുകളിൽ പ്രൈമറി, സെക്കൻഡറി, ഔട്ട്ലൈൻ, ഗോസ്റ്റ്, ഡേഞ്ചർ, ലിങ്ക് ബട്ടണുകൾ, സ്വയം കൈകാര്യം ചെയ്യുന്ന ഒരു ലോഡിംഗ് സ്റ്റേറ്റോടുകൂടി.
ഡോക്യുമെന്റേഷൻ വായിക്കുക - ഡാറ്റ
Data Grid
A virtualized data grid for React 19 that stays fast with 100,000+ rows, in client or server mode.
ഡോക്യുമെന്റേഷൻ വായിക്കുക - ഇൻപുട്ടുകൾ
Input
Input and OtpInput — a text field with label, hint, error and adornments, plus a one-time-code field phones can fill from an SMS.
ഡോക്യുമെന്റേഷൻ വായിക്കുക - ഇൻപുട്ടുകൾ
Textarea
A multi-line text field with label, hint, error and character counter that can grow with its text.
ഡോക്യുമെന്റേഷൻ വായിക്കുക - ഇൻപുട്ടുകൾ
Checkbox
Checkbox and CheckboxGroup — the native checkbox, restyled, with labels, hints, errors, a mixed state and select all.
ഡോക്യുമെന്റേഷൻ വായിക്കുക - ഇൻപുട്ടുകൾ
Combobox
Select and MultiSelect — searchable comboboxes for one or many values, with options in the browser or from an API.
ഡോക്യുമെന്റേഷൻ വായിക്കുക - ഇൻപുട്ടുകൾ
Date Picker
DatePicker and DateRangePicker — a text field people can type into, plus a calendar that works from the keyboard.
ഡോക്യുമെന്റേഷൻ വായിക്കുക - ഇൻപുട്ടുകൾ
File Uploader
Drop, browse or paste files, validate them, and upload in chunks that can pause, resume and retry.
ഡോക്യുമെന്റേഷൻ വായിക്കുക - നാവിഗേഷൻ
ബ്രെഡ്‌ക്രമ്പ്
നിങ്ങളുടെ ആപ്പിൽ ഒരു പേജ് എവിടെ നിൽക്കുന്നു എന്ന് കാണിക്കുന്നു, നീണ്ട ട്രെയിലുകൾ ചുരുക്കുന്നു, നിങ്ങളുടെ റൗട്ടറിന്റെ ലിങ്കുകളുമായി പ്രവർത്തിക്കുന്നു, ഘടനാപരമായ ഡാറ്റ (structured data) പ്രസിദ്ധീകരിക്കാനും കഴിയും.
ഡോക്യുമെന്റേഷൻ വായിക്കുക - നാവിഗേഷൻ
Tabs
Accessible tabs in underline, pill or segmented styles, horizontal or vertical, with panels that can keep their state.
ഡോക്യുമെന്റേഷൻ വായിക്കുക - ഓവർലേകൾ
Dialog
Alert, confirm and prompt dialogs you call from any event handler and await — no open state to manage.
ഡോക്യുമെന്റേഷൻ വായിക്കുക - ഓവർലേകൾ
Modal
Forms, details and drawers above the page, built on the native dialog element with focus and dismiss handled for you.
ഡോക്യുമെന്റേഷൻ വായിക്കുക - ഫീഡ്ബാക്ക്
Spinner
A loading indicator on its own, beside a label or covering content, with a delay and minimum time so it never flickers.
ഡോക്യുമെന്റേഷൻ വായിക്കുക - ഫീഡ്ബാക്ക്
Toaster
Short notifications you mount once and call from anywhere — no hook, context or provider.
ഡോക്യുമെന്റേഷൻ വായിക്കുക - ഓവർലേകൾ
Menu
A menu of commands with arrow keys, typeahead, checkbox and radio items and submenus, following the WAI-ARIA menu button pattern.
ഡോക്യുമെന്റേഷൻ വായിക്കുക - ഓവർലേകൾ
Tooltip
A short label on hover or keyboard focus, with a delay, Escape to dismiss, and the accessibility rules a tooltip has to follow.
ഡോക്യുമെന്റേഷൻ വായിക്കുക - ഓവർലേകൾ
Popover
A panel anchored to the control that opens it, in the top layer, with light dismiss, Escape and focus returned to the trigger.
ഡോക്യുമെന്റേഷൻ വായിക്കുക - Display
കാർഡ്
ബന്ധപ്പെട്ട ഉള്ളടക്കം ഗ്രൂപ്പ് ചെയ്യുന്ന ഒരു സർഫേസ്, ഹെഡർ, ബോഡി, ഫൂട്ടർ എന്നിവയോടെ, കൂടാതെ ഒരൊറ്റ കണക്കും അതിന്റെ ട്രെൻഡും കാണിക്കാൻ Stat.
ഡോക്യുമെന്റേഷൻ വായിക്കുക - ഫീഡ്ബാക്ക്
Skeleton
Placeholders in the shape of the content that is loading, plus an Empty state for when there is nothing to show.
ഡോക്യുമെന്റേഷൻ വായിക്കുക - ഇൻപുട്ടുകൾ
Switch
A setting that takes effect as it is flipped, on a native checkbox with role=switch, with optimistic saving that puts itself back when the save fails.
ഡോക്യുമെന്റേഷൻ വായിക്കുക - ഇൻപുട്ടുകൾ
RadioGroup
One choice out of a few, on native radios: one tab stop, arrow keys between the choices, and a card variant for choices that need explaining.
ഡോക്യുമെന്റേഷൻ വായിക്കുക - ഇൻപുട്ടുകൾ
NumberInput
A numeric field that reads and writes numbers the way the locale does, with a spinner, steps that do not drift, and a wheel that cannot edit it by accident.
ഡോക്യുമെന്റേഷൻ വായിക്കുക - ഫീഡ്ബാക്ക്
Alert
A message that stays in the page — neither interrupting like a dialog nor leaving like a toast.
ഡോക്യുമെന്റേഷൻ വായിക്കുക - Display
Badge and Tag
Short labels: a status, a category, a count that stops at 99+, and chips the user can take off.
ഡോക്യുമെന്റേഷൻ വായിക്കുക - Display
Avatar
A person as a picture or their initials, on a colour derived from their name, with presence dots and overlapping groups.
ഡോക്യുമെന്റേഷൻ വായിക്കുക - ഫീഡ്ബാക്ക്
Progress
A bar or a ring for work with a known end, where an unknown length is a different thing from zero.
ഡോക്യുമെന്റേഷൻ വായിക്കുക - Display
Accordion
Sections that open and close, on native details and summary, with the group behaviour the platform cannot express.
ഡോക്യുമെന്റേഷൻ വായിക്കുക - പൊതുവായവ
Agent skill
Teach a coding agent this library's real API — imports, prop names and the traps — so it stops guessing and inventing props.
ഡോക്യുമെന്റേഷൻ വായിക്കുക
കോഡ് നിങ്ങളുടേത്
ഓരോ ബ്ലോക്കും ഒരൊറ്റ കമാൻഡിൽ നിങ്ങളുടെ പ്രോജക്ടിലേക്ക് പകർത്തുന്നു. React അല്ലാതെ മറ്റ് പിയർ ഡിപൻഡൻസികളില്ല.
എല്ലാത്തിനും ഒരേ തീം
:root-ൽ --gbs-* CSS വേരിയബിളുകൾ നൽകിയാൽ എല്ലാ കമ്പോണന്റുകളും അത് പിന്തുടരും; വേണമെങ്കിൽ ഓരോ കമ്പോണന്റിനും വെവ്വേറെ മാറ്റാം.
കീബോർഡിന് മുൻഗണന
ഓരോ കമ്പോണന്റിന്റെയും കീബോർഡ് നിയമങ്ങൾ ഡോക്യുമെന്റ് ചെയ്തിട്ടുണ്ട്. പിക്കറുകൾ ബ്രൗസറിന്റെ ടോപ് ലെയറിൽ വരുന്നതിനാൽ അവ ഒരിക്കലും മുറിഞ്ഞുപോകില്ല.
സോഫ്റ്റ്‌വെയറിന് വായിക്കാവുന്നത്
ഓരോ കമ്പോണന്റും അതിന്റെ പ്രവർത്തനങ്ങളും ഫീൽഡുകളും പരിധികളും വിവരിക്കുന്ന ഒരു കരാർ പ്രസിദ്ധീകരിക്കുന്നു. എന്തെങ്കിലും നടപ്പാക്കുന്നതിന് മുൻപ് ഓരോ അഭ്യർത്ഥനയും ആ കരാറിനെതിരെ പരിശോധിക്കപ്പെടുന്നു — ഫോമിൽ നിന്നായാലും വാചകത്തിൽ നിന്നായാലും ഒരേ വഴി.
മൈഗ്രേഷൻ
1.x-ൽ നിന്ന് വരുകയാണോ?
2.0 കമ്പോണന്റുകൾ പുതുതായി എഴുതിയവയാണ്, നേരിട്ട് പകരം വയ്ക്കാവുന്ന അപ്ഗ്രേഡുകളല്ല. ഓരോ പേജിന്റെയും അവസാനം പഴയ API-യും പുതിയതും തമ്മിൽ ബന്ധിപ്പിക്കുന്ന പട്ടികയുണ്ട്.
ബീറ്റ: ഈ കമ്പോണന്റുകൾ പരീക്ഷണാത്മകമാണ്; നിങ്ങളുടെ കോഡ് തകരാറിലാക്കുന്ന വിധത്തിൽ അവ മാറിയേക്കാം.
- Data GridMigrating from the Previous Grid
- InputMigrating from the Previous Text Box
- TextareaMigrating from the Previous Text Area
- CheckboxMigrating from the Previous Check Box
- ComboboxMigrating from the Previous Select / MultiSelect
- Date PickerMigrating from the Previous DatePicker
- File UploaderMigrating from the Previous Uploader
- DialogMigrating from the Previous Dialog Box
- ModalMigrating from the Previous Modal
- ToasterMigrating from the Previous Toast