Referenca API-ja

Vsak izvoz @kkwaenggwari/animated-chorus s props, tipi in privzetimi vrednostmi. Ista imena delujejo na spletu in v React Nativu.

FilterAPI-jev: 17

Števila in besedilo

MotionNumber

Število, katerega mesta se vrtijo kot kolesca.

Prop	Tip	Privzeto	Opis
`value`	`number \| bigint \| string`	`—`obvezno	Število ali številsko besedilo, ki ga oblikuje klicatelj.
`mode`	`'replace' \| 'roll'`	`'replace'`	`replace` premakne vsako spremenjeno mesto za en korak; `roll` gre skozi vmesne števke.
`direction`	`'auto' \| 'digit' \| 'up' \| 'down'`	`'auto'`	`auto` sledi spremembi velikosti, da se prenosi vrtijo v eno smer; `digit` primerja vsako mesto posebej.
`stagger`	`number`	`45`	Milisekunde med spremenjenimi mesti, od enic navzven. Celoten val je omejen.
`format`	`(value) => string \| Intl.NumberFormatOptions`		Funkcija, ki vrne besedilo za prikaz, ali možnosti `Intl.NumberFormat` (z `intl`).
`intl`	`boolean`	`false`	Uporabi vgrajeni `Intl.NumberFormat`. Privzeto izklopljeno, da nobeno izvajalno okolje ne potrebuje `Intl`.
`locale`	`string \| string[]`		Jezikovna nastavitev za `intl`.
`prefix`	`string`		Besedilo pred številom.
`suffix`	`string`		Besedilo za številom.
`transition`	`Transition`	`spring`	Krivulja timinga `{ duration, easing }` ali vzmet `{ tempo: 'spring', spring }`. Vzmeti ob prekinitvi ohranijo zagon.
`onMotionComplete`	`(value) => void`		Se izvede z vrednostjo, ko se mesta umirijo.

Stran komponente in delovna miza

MotionText

Besedilo, ki se animira ob spremembi: številsko besedilo se vrti po mestih, drugo besedilo se zamenja.

Prop	Tip	Privzeto	Opis
`children`	`ReactNode`		Besedilo za prikaz.
`as`	`element`	`'span'`	Element za upodobitev.
`transition`	`Transition`	`spring`	Krivulja timinga `{ duration, easing }` ali vzmet `{ tempo: 'spring', spring }`. Vzmeti ob prekinitvi ohranijo zagon.
`onMotionComplete`	`(text) => void`		Se izvede, ko se gibanje umiri.

Stran komponente in delovna miza

MotionStream

Pretočno besedilo, prikazano v enakomernem tempu, ki dohiti izbruhe.

Prop	Tip	Privzeto	Opis
`text`	`string`	`—`obvezno	Besedilo do zdaj. Rastoče besedilo se prikazuje v enakomernem tempu; prepis nadaljuje od skupnega začetka.
`speed`	`number`	`90`	Osnovna hitrost prikaza v znakih na sekundo.
`catchUp`	`number`	`900`	Zaostanek se s pospeškom prikaže v približno toliko milisekundah.
`initial`	`boolean`	`false`	Prikaže tudi besedilo, prisotno ob priklopu (sicer se pokaže takoj).
`effect`	`'fade' \| 'none'`	`'fade'`	`fade` postopno prikaže nove znake; `none` jih pokaže neposredno.
`children`	`(visible: string) => ReactNode`		Funkcija, ki prejme odmerjeno besedilo, na primer za upodabljanje Markdowna.
`as`	`element`	`'span'`	Element za upodobitev.
`onMotionComplete`	`(text) => void`		Se izvede vsakič, ko prikaz dohiti `text`.

Stran komponente in delovna miza

Vsebina in velikost

MotionSwap

Vsebina, ki se prelije, medtem ko element spreminja velikost.

Prop	Tip	Privzeto	Opis
`value`	`unknown`		Identiteta vsebine; nova vrednost sproži zamenjavo. Otroci z navadnim besedilom so sami svoja identiteta.
`children`	`ReactNode`		Vsebina.
`as`	`element`	`'span'`	Element za upodobitev.
`inline`	`boolean`	`as === 'span'`	`true` prilagodi velikost vsebini (oznake, ikone); `false` zapolni širino starša in animira višino.
`align`	`'start' \| 'center' \| 'end'`	`'center'`	Kje je vsebina med spreminjanjem velikosti.
`effect`	`'fade' \| 'up' \| 'down' \| 'scale'`	`'fade'`	Kako vsebina vstopi in odide: `up` se dvigne, `down` pade, `scale` zraste.
`transition`	`Transition`	`spring`	Krivulja timinga `{ duration, easing }` ali vzmet `{ tempo: 'spring', spring }`. Vzmeti ob prekinitvi ohranijo zagon.
`onMotionComplete`	`(value) => void`		Se izvede, ko se gibanje umiri.

Stran komponente in delovna miza

MotionHeight

Animira višino do vsebine: strnitev, razširitev in spremembe vsebine.

Prop	Tip	Privzeto	Opis
`open`	`boolean`	`true`	`false` strne na ničelno višino; vsebina ostane priklopljena, a skrita in inertna.
`children`	`ReactNode`		Vsebina.
`as`	`element`	`'div'`	Element za upodobitev.
`transition`	`Transition`	`spring`	Krivulja timinga `{ duration, easing }` ali vzmet `{ tempo: 'spring', spring }`. Vzmeti ob prekinitvi ohranijo zagon.
`onMotionComplete`	`(open) => void`		Se izvede z `open`, ko se višina umiri.

Stran komponente in delovna miza

MotionPresence

Ohrani vsebino priklopljeno, medtem ko se animira noter in ven.

Prop	Tip	Privzeto	Opis
`present`	`boolean`	`—`obvezno	Pokaže ali skrije vsebino. Spremenite to namesto odklopa.
`enter`	`Pose`	`{ opacity: 1, translateY: 0 }`	Poza v mirovanju.
`exit`	`Pose`	`{ opacity: 0, translateY: -12 }`	Poza, s katero vsebina odide in iz katere vstopi.
`as`	`element`	`'div'`	Element za upodobitev.
`transition`	`Transition`	`spring`	Krivulja timinga `{ duration, easing }` ali vzmet `{ tempo: 'spring', spring }`. Vzmeti ob prekinitvi ohranijo zagon.
`onExitComplete`	`() => void`		Se izvede, ko je vsebina odšla in je bila odstranjena.

Stran komponente in delovna miza

Izbira in listanje

MotionHighlight

Elementi iz podatkov z enim poudarkom, ki potuje do izbranega elementa.

Prop	Tip	Privzeto	Opis
`items`	`readonly T[]`	`—`obvezno	Vaše polje podatkov.
`value`	`key \| null`	`—`obvezno	Ključ poudarjenega elementa; `null` skrije poudarek.
`onValueChange`	`(key, item) => void`		Se izvede s ključem in elementom, ko je element pritisnjen.
`getKey`	`(item) => string \| number`	`item.id`	Vrne enoličen, stabilen ključ za element. Privzeto `item.id` ali sam element za nize in števila.
`renderItem`	`(item, { selected, index }) => ReactNode`	`item.label`	Nariše element; prejme, ali je izbran.
`hover`	`boolean`	`false`	Sledi kazalcu nad elementi in se ob odhodu vrne k `value` (splet).
`itemAs`	`element`	`'button'`	Element za vsak element seznama.
`itemClassName`	`string`		Razred za vsak element; `itemStyle` nastavi njegov vrstični slog.
`highlightClassName`	`string`		Razred za poudarek; `highlightStyle` nastavi njegov vrstični slog.
`transition`	`Transition`	`spring`	Krivulja timinga `{ duration, easing }` ali vzmet `{ tempo: 'spring', spring }`. Vzmeti ob prekinitvi ohranijo zagon.

Stran komponente in delovna miza

MotionPager

Strani s potegom iz podatkov.

Prop	Tip	Privzeto	Opis
`items`	`readonly T[]`	`—`obvezno	Vaše polje podatkov.
`index`	`number`		Prikazana stran. Izpustite, da listanje vodi svojo.
`defaultIndex`	`number`	`0`	Začetna stran, ko `index` ni nadzorovan.
`onIndexChange`	`(index, item) => void`		Se izvede z indeksom in elementom, takoj ko se poteg, tipka ali gesta s kolescem umiri.
`getKey`	`(item) => string \| number`	`item.id`	Vrne enoličen, stabilen ključ za element. Privzeto `item.id` ali sam element za nize in števila.
`renderItem`	`(item, { index, active }) => ReactNode`	`item.label`	Nariše stran; prejme njen indeks in ali je aktivna.
`gap`	`number`	`0`	Razmik med stranmi v pikslih.
`itemClassName`	`string`		Razred za vsak element; `itemStyle` nastavi njegov vrstični slog.
`transition`	`Transition`	`spring`	Krivulja timinga `{ duration, easing }` ali vzmet `{ tempo: 'spring', spring }`. Vzmeti ob prekinitvi ohranijo zagon.

Stran komponente in delovna miza

Seznami

MotionList

Seznam s ključi iz podatkov, ki animira le spremenjeno.

Prop	Tip	Privzeto	Opis
`items`	`readonly T[]`	`—`obvezno	Vaše polje podatkov.
`getKey`	`(item) => string \| number`	`item.id`	Vrne enoličen, stabilen ključ za element. Privzeto `item.id` ali sam element za nize in števila.
`renderItem`	`(item, index) => ReactNode`	`item.label`	Nariše element.
`as`	`element`	`'div'`	Element za upodobitev.
`itemAs`	`element`	`'li' \| 'div'`	Element za vsak element seznama.
`itemClassName`	`string`		Razred za vsak element; `itemStyle` nastavi njegov vrstični slog.
`effect`	`'rise' \| 'fade' \| 'scale' \| 'slide'`	`'rise'`	Kako elementi vstopijo in odidejo.
`distance`	`number`	`16`	Pot `rise` in `slide` v pikslih.
`stagger`	`number`	`40`	Milisekunde med vstopajočimi elementi.
`order`	`'forward' \| 'reverse'`	`'forward'`	Smer kaskade.
`present`	`boolean`	`true`	`false` animira vse elemente ven in ohrani postavitev; `true` jih vrne.
`initial`	`boolean`	`true`	Predvaja vstop, ko se seznam priklopi.
`playKey`	`string \| number`		Njegova sprememba znova predvaja vstop.
`transition`	`Transition`	`spring`	Prehod za vstopajoče in odhajajoče elemente.
`layoutTransition`	`Transition`	`spring`	Prehod za elemente, ki drsijo na nove položaje.

Stran komponente in delovna miza

MotionReorder

Razvrščanje seznama ali mreže z vlečenjem in premiki s tipkovnico.

Prop	Tip	Privzeto	Opis
`items`	`readonly T[]`		Elementi, ko vrstni red nadzorujete vi.
`defaultItems`	`readonly T[]`	`[]`	Začetni elementi, ko vrstni red vodi komponenta.
`onItemsChange`	`(items, { reason, key }) => void`		Se izvede z novim vrstnim redom in podatkom, ali je prišel iz vlečenja, spusta ali tipkovnice.
`getKey`	`(item) => string \| number`	`item`	Vrne enoličen ključ za element. Privzeto sam element.
`renderItem`	`(item, { index, dragging }) => ReactNode`	`item.label`	Nariše element; prejme njegov indeks in ali ga vlečete.
`reorder`	`'live' \| 'drop'`	`'live'`	`live` premika druge elemente med vlečenjem; `drop` počaka na spust.
`layout`	`'list' \| 'grid'`	`'grid'`	`list` ali `grid`.
`columns`	`number`	`3`	Stolpci v mreži.
`gap`	`number`	`12`	Razmik med elementi v pikslih.
`disabled`	`boolean`	`false`	Izklopi vlečenje.
`duration`	`number`	`260`	Milisekunde za elemente, ki se umikajo.
`itemClassName`	`string`		Razred za vsak element; `itemStyle` nastavi njegov vrstični slog.

Stran komponente in delovna miza

Geste

MotionSwipe

Vrstica, ki z vodoravnim potegom razkrije dejanja in jo je mogoče odriniti s potegom.

Prop	Tip	Privzeto	Opis
`children`	`ReactNode`		Vsebina vrstice.
`startActions`	`ReactNode`		Razkrijejo se na začetku vrstice, ko vrstico vlečete proti koncu.
`endActions`	`ReactNode`		Razkrijejo se na koncu vrstice, ko vrstico vlečete proti začetku.
`dismiss`	`'start' \| 'end' \| 'both'`		Strani, na katerih dolg poteg ali met odstrani vrstico.
`onDismiss`	`(side) => void`		Se izvede, ko vrstica zdrsne ven in se strne; tukaj element odstranite iz svojih podatkov.
`onOpenChange`	`(side \| null) => void`		Se izvede z odprto stranjo ali z `null`, ko se vrstica zapre.
`disabled`	`boolean`	`false`	Izklopi potezanje.
`contentClassName`	`string`		Razred za vsebino vrstice; `contentStyle` nastavi njen vrstični slog.
`transition`	`Transition`	`spring`	Krivulja timinga `{ duration, easing }` ali vzmet `{ tempo: 'spring', spring }`. Vzmeti ob prekinitvi ohranijo zagon.

Stran komponente in delovna miza

MotionHold

Pritisnite in držite za potrditev; zgodnji spust previje nazaj.

Prop	Tip	Privzeto	Opis
`children`	`ReactNode`		Oznaka gumba.
`onConfirm`	`() => void`		Se izvede, ko se držanje zaključi.
`duration`	`number`	`1200`	Milisekunde, kolikor dolgo je treba držati pritisk.
`disabled`	`boolean`	`false`	Izklopi gumb.
`fillClassName`	`string`		Razred za rastočo zapolnitev; `fillStyle` nastavi njen vrstični slog.

Stran komponente in delovna miza

Prekrivni elementi

MotionSheet

Spodnji sheet, zgornji sheet ali stranski predal z zaskočnimi položaji.

Prop	Tip	Privzeto	Opis
`open`	`boolean`	`false`	Ali je sheet prikazan.
`onOpenChange`	`(open) => void`		Se izvede s `false`, ko se sheet zapre z vlečenjem, dotikom ali Escape.
`detents`	`(number \| 'content')[]`	`['content']`	Velikosti mirovanja: delež zaslona, piksli ali `'content'`.
`detent`	`number`		Nadzorovan indeks zaskočnega položaja.
`defaultDetent`	`number`	`0`	Indeks zaskočnega položaja ob odpiranju brez `detent`.
`onDetentChange`	`(index) => void`		Se izvede z indeksom zaskočnega položaja, na katerem se sheet umiri.
`side`	`'bottom' \| 'top' \| 'start' \| 'end'`	`'bottom'`	Rob, s katerega pride sheet.
`modal`	`boolean`	`true`	Doda ozadje, ohrani fokus v sebi in stran naredi inertno.
`dismissible`	`boolean`	`true`	Vlečenje čez najmanjši zaskočni položaj, ozadje in Escape ga zaprejo.
`backdropClassName`	`string`		Razred za ozadje; `backdropStyle` nastavi njegov vrstični slog.
`transition`	`Transition`	`spring`	Krivulja timinga `{ duration, easing }` ali vzmet `{ tempo: 'spring', spring }`. Vzmeti ob prekinitvi ohranijo zagon.

Stran komponente in delovna miza

MotionZoom

Slika, ki se poveča od tam, kjer je, da zapolni zaslon.

Prop	Tip	Privzeto	Opis
`src`	`string`		Slika, prikazana na mestu.
`zoomSrc`	`string`		Večja slika, prikazana, ko se naloži; ohranite isto razmerje stranic.
`margin`	`number`	`24`	Prostor okoli povečane slike v pikslih.
`disabled`	`boolean`	`false`	Izklopi povečavo.
`onZoomChange`	`(zoomed) => void`		Se izvede s `true` ob povečavi in s `false` ob zaprtju.
`backdropStyle`	`CSSProperties`		Vrstični slog za ozadje.
`transition`	`Transition`	`spring`	Krivulja timinga `{ duration, easing }` ali vzmet `{ tempo: 'spring', spring }`. Vzmeti ob prekinitvi ohranijo zagon.

Stran komponente in delovna miza

Napredek

ProgressBar

Nadzorovana črta napredka z nedoločenim stanjem.

Prop	Tip	Privzeto	Opis
`value`	`number \| null`		Napredek od `0` do `max`; `null` je nedoločeno.
`max`	`number`	`100`	Vrednost, ki pomeni dokončano.
`color`	`string`	`'currentColor'`	Barva zapolnitve.
`trackColor`	`string`	`'#e7ece9'`	Barva tira.
`thickness`	`number`	`8`	Debelina črte v pikslih.
`direction`	`'ltr' \| 'rtl'`	`'ltr'`	Polnjenje z leve (`ltr`) ali z desne (`rtl`).
`transition`	`Transition`	`spring`	Krivulja timinga `{ duration, easing }` ali vzmet `{ tempo: 'spring', spring }`. Vzmeti ob prekinitvi ohranijo zagon.

Stran komponente in delovna miza

ProgressRing

Nadzorovan obroč napredka z nedoločenim stanjem.

Prop	Tip	Privzeto	Opis
`value`	`number \| null`		Napredek od `0` do `max`; `null` je nedoločeno.
`max`	`number`	`100`	Vrednost, ki pomeni dokončano.
`size`	`number`	`96`	Premer v pikslih.
`thickness`	`number`	`8`	Debelina obroča v pikslih.
`color`	`string`	`'currentColor'`	Barva loka.
`trackColor`	`string`	`'#e7ece9'`	Barva tira.
`children`	`ReactNode`		Oznaka, prikazana v sredini.
`transition`	`Transition`	`spring`	Krivulja timinga `{ duration, easing }` ali vzmet `{ tempo: 'spring', spring }`. Vzmeti ob prekinitvi ohranijo zagon.

Stran komponente in delovna miza

Prehodi

motionTokens

Pripravljene vrednosti za kateri koli prop transition.

Prop	Tip	Privzeto	Opis
`duration`	`{ instant, fast, normal, slow }`	`0 · 140 · 280 · 520`	Trajanja v milisekundah.
`easing`	`{ ease, easeOut, expoOut, backOut }`	`Transition`	Prehodi timinga s trajanjem in poimenovano krivuljo.
`spring`	`{ quick, basic, gentle, bouncy }`	`Transition`	Vzmetni prehodi, od hitrih in čvrstih do nežnih in poskočnih.

Prehodi

App.jsx

// Web and React Native: the same import.
import { MotionNumber, MotionList } from '@kkwaenggwari/animated-chorus';

export function Score({ points, players }) {
  return (
    <>
      <MotionNumber value={points} />
      <MotionList items={players} renderItem={(player) => player.name} />
    </>
  );
}