API-referencia

A @kkwaenggwari/animated-chorus minden exportja a props-aival, típusaival és alapértékeivel. Ugyanazok a nevek működnek weben és React Native alatt.

Szűrő17 API

Számok és szöveg

MotionNumber

Szám, amelynek helyiértékei kerékként pörögnek.

Prop	Típus	Alapérték	Leírás
`value`	`number \| bigint \| string`	`—`kötelező	A szám, vagy a hívó által formázott numerikus szöveg.
`mode`	`'replace' \| 'roll'`	`'replace'`	A `replace` minden megváltozott helyiértéket egy lépéssel mozgat; a `roll` végigmegy a köztes számjegyeken.
`direction`	`'auto' \| 'digit' \| 'up' \| 'down'`	`'auto'`	Az `auto` a nagyságrend változását követi, így az átvitelek egy irányba pörögnek; a `digit` minden helyiértéket külön hasonlít össze.
`stagger`	`number`	`45`	Ezredmásodperc a megváltozott helyiértékek között, az egyesektől kifelé. A teljes hullám korlátozott.
`format`	`(value) => string \| Intl.NumberFormatOptions`		A megjelenítendő szöveget visszaadó függvény, vagy `Intl.NumberFormat` beállítások (`intl` mellett).
`intl`	`boolean`	`false`	A beépített `Intl.NumberFormat` használata. Alapértelmezés szerint ki van kapcsolva, így egyetlen futtatókörnyezetnek sincs szüksége `Intl`-re.
`locale`	`string \| string[]`		Területi beállítás az `intl` számára.
`prefix`	`string`		Szöveg a szám előtt.
`suffix`	`string`		Szöveg a szám után.
`transition`	`Transition`	`spring`	Timing-görbe `{ duration, easing }` vagy rugó `{ tempo: 'spring', spring }`. A rugók megszakításkor megtartják a lendületüket.
`onMotionComplete`	`(value) => void`		Az értékkel fut le, amikor a helyiértékek megálltak.

Komponensoldal és munkapad

MotionText

Változáskor animálódó szöveg: a numerikus szöveg helyiértékenként pörög, a többi szöveg cserélődik.

Prop	Típus	Alapérték	Leírás
`children`	`ReactNode`		A megjelenítendő szöveg.
`as`	`element`	`'span'`	A renderelendő elem.
`transition`	`Transition`	`spring`	Timing-görbe `{ duration, easing }` vagy rugó `{ tempo: 'spring', spring }`. A rugók megszakításkor megtartják a lendületüket.
`onMotionComplete`	`(text) => void`		Akkor fut le, amikor a mozgás megáll.

Komponensoldal és munkapad

MotionStream

Egyenletes ütemben megjelenített folyamatos szöveg, amely utoléri a löketeket.

Prop	Típus	Alapérték	Leírás
`text`	`string`	`—`kötelező	Az eddigi szöveg. A növekvő szöveg egyenletes ütemben jelenik meg; az újraírás a közös kezdettől folytatódik.
`speed`	`number`	`90`	Az alap megjelenítési ütem karakter per másodpercben.
`catchUp`	`number`	`900`	A lemaradás gyorsítással körülbelül ennyi ezredmásodperc alatt jelenik meg.
`initial`	`boolean`	`false`	A csatoláskor meglévő szöveget is fokozatosan jelenítse meg (különben azonnal látszik).
`effect`	`'fade' \| 'none'`	`'fade'`	A `fade` beúsztatja az új karaktereket; a `none` közvetlenül megjeleníti őket.
`children`	`(visible: string) => ReactNode`		Az ütemezett szöveget kapó függvény, például Markdown rendereléséhez.
`as`	`element`	`'span'`	A renderelendő elem.
`onMotionComplete`	`(text) => void`		Akkor fut le, amikor a megjelenítés utoléri a `text` értéket.

Komponensoldal és munkapad

Tartalom és méret

MotionSwap

Áttűnéssel cserélődő tartalom, miközben az elem átméreteződik.

Prop	Típus	Alapérték	Leírás
`value`	`unknown`		A tartalom identitása; új érték cserét indít. A sima szöveges gyermekek saját maguk identitása.
`children`	`ReactNode`		A tartalom.
`as`	`element`	`'span'`	A renderelendő elem.
`inline`	`boolean`	`as === 'span'`	A `true` a tartalomhoz méretez (címkék, ikonok); a `false` kitölti a szülő szélességét, és a magasságot animálja.
`align`	`'start' \| 'center' \| 'end'`	`'center'`	Hol van a tartalom, amíg a méret változik.
`effect`	`'fade' \| 'up' \| 'down' \| 'scale'`	`'fade'`	Hogyan lép be és ki a tartalom: az `up` felemelkedik, a `down` lesüllyed, a `scale` megnő.
`transition`	`Transition`	`spring`	Timing-görbe `{ duration, easing }` vagy rugó `{ tempo: 'spring', spring }`. A rugók megszakításkor megtartják a lendületüket.
`onMotionComplete`	`(value) => void`		Akkor fut le, amikor a mozgás megáll.

Komponensoldal és munkapad

MotionHeight

A magasságot a tartalomhoz animálja: összecsukás, kinyitás és tartalomváltozás.

Prop	Típus	Alapérték	Leírás
`open`	`boolean`	`true`	A `false` nulla magasságra csuk össze; a tartalom csatolva marad, de rejtett és inaktív.
`children`	`ReactNode`		A tartalom.
`as`	`element`	`'div'`	A renderelendő elem.
`transition`	`Transition`	`spring`	Timing-görbe `{ duration, easing }` vagy rugó `{ tempo: 'spring', spring }`. A rugók megszakításkor megtartják a lendületüket.
`onMotionComplete`	`(open) => void`		Az `open` értékkel fut le, amikor a magasság megállt.

Komponensoldal és munkapad

MotionPresence

Csatolva tartja a tartalmat, miközben be- és kianimálódik.

Prop	Típus	Alapérték	Leírás
`present`	`boolean`	`—`kötelező	A tartalom megjelenítése vagy elrejtése. Leválasztás helyett ezt módosítsa.
`enter`	`Pose`	`{ opacity: 1, translateY: 0 }`	A nyugalmi póz.
`exit`	`Pose`	`{ opacity: 0, translateY: -12 }`	A póz, amellyel a tartalom távozik, és ahonnan belép.
`as`	`element`	`'div'`	A renderelendő elem.
`transition`	`Transition`	`spring`	Timing-görbe `{ duration, easing }` vagy rugó `{ tempo: 'spring', spring }`. A rugók megszakításkor megtartják a lendületüket.
`onExitComplete`	`() => void`		Azután fut le, hogy a tartalom távozott és eltávolították.

Komponensoldal és munkapad

Kiválasztás és lapozás

MotionHighlight

Elemek adatokból, egyetlen kiemeléssel, amely a kijelölt elemhez vándorol.

Prop	Típus	Alapérték	Leírás
`items`	`readonly T[]`	`—`kötelező	Az Ön adattömbje.
`value`	`key \| null`	`—`kötelező	A kiemelt elem key-e; a `null` elrejti a kiemelést.
`onValueChange`	`(key, item) => void`		Elem megnyomásakor a key-jel és az elemmel fut le.
`getKey`	`(item) => string \| number`	`item.id`	Egyedi, stabil key-t ad vissza egy elemhez. Alapértelmezés `item.id`, illetve karakterláncoknál és számoknál maga az elem.
`renderItem`	`(item, { selected, index }) => ReactNode`	`item.label`	Megrajzol egy elemet; megkapja, hogy ki van-e jelölve.
`hover`	`boolean`	`false`	Követi a mutatót az elemek felett, és kilépéskor visszatér a `value` értékhez (web).
`itemAs`	`element`	`'button'`	Az egyes listaelemek eleme.
`itemClassName`	`string`		Osztály minden listaelemhez; az `itemStyle` az inline stílusát állítja be.
`highlightClassName`	`string`		Osztály a kiemeléshez; a `highlightStyle` az inline stílusát állítja be.
`transition`	`Transition`	`spring`	Timing-görbe `{ duration, easing }` vagy rugó `{ tempo: 'spring', spring }`. A rugók megszakításkor megtartják a lendületüket.

Komponensoldal és munkapad

MotionPager

Lapozható oldalak adatokból.

Prop	Típus	Alapérték	Leírás
`items`	`readonly T[]`	`—`kötelező	Az Ön adattömbje.
`index`	`number`		A megjelenített oldal. Hagyja el, hogy a lapozó maga kezelje.
`defaultIndex`	`number`	`0`	Kezdőoldal, ha az `index` nem vezérelt.
`onIndexChange`	`(index, item) => void`		Az indexszel és az elemmel fut le, amint egy csúsztatás, billentyű vagy görgetőkerék-gesztus megáll.
`getKey`	`(item) => string \| number`	`item.id`	Egyedi, stabil key-t ad vissza egy elemhez. Alapértelmezés `item.id`, illetve karakterláncoknál és számoknál maga az elem.
`renderItem`	`(item, { index, active }) => ReactNode`	`item.label`	Megrajzol egy oldalt; megkapja az indexét, és hogy aktív-e.
`gap`	`number`	`0`	Távolság az oldalak között pixelben.
`itemClassName`	`string`		Osztály minden listaelemhez; az `itemStyle` az inline stílusát állítja be.
`transition`	`Transition`	`spring`	Timing-görbe `{ duration, easing }` vagy rugó `{ tempo: 'spring', spring }`. A rugók megszakításkor megtartják a lendületüket.

Komponensoldal és munkapad

Listák

MotionList

Key-ekkel ellátott lista adatokból, amely csak a változást animálja.

Prop	Típus	Alapérték	Leírás
`items`	`readonly T[]`	`—`kötelező	Az Ön adattömbje.
`getKey`	`(item) => string \| number`	`item.id`	Egyedi, stabil key-t ad vissza egy elemhez. Alapértelmezés `item.id`, illetve karakterláncoknál és számoknál maga az elem.
`renderItem`	`(item, index) => ReactNode`	`item.label`	Megrajzol egy elemet.
`as`	`element`	`'div'`	A renderelendő elem.
`itemAs`	`element`	`'li' \| 'div'`	Az egyes listaelemek eleme.
`itemClassName`	`string`		Osztály minden listaelemhez; az `itemStyle` az inline stílusát állítja be.
`effect`	`'rise' \| 'fade' \| 'scale' \| 'slide'`	`'rise'`	Hogyan lépnek be és ki az elemek.
`distance`	`number`	`16`	A `rise` és a `slide` útja pixelben.
`stagger`	`number`	`40`	Ezredmásodperc a belépő elemek között.
`order`	`'forward' \| 'reverse'`	`'forward'`	A lépcsőzés iránya.
`present`	`boolean`	`true`	A `false` az elrendezés megtartásával minden elemet kianimál; a `true` visszahozza őket.
`initial`	`boolean`	`true`	A belépés lejátszása a lista csatolásakor.
`playKey`	`string \| number`		Módosítása újrajátssza a belépést.
`transition`	`Transition`	`spring`	Átmenet a belépő és kilépő elemekhez.
`layoutTransition`	`Transition`	`spring`	Átmenet az új helyükre sikló elemekhez.

Komponensoldal és munkapad

MotionReorder

Lista vagy rács átrendezése húzással, billentyűzetes mozgatással.

Prop	Típus	Alapérték	Leírás
`items`	`readonly T[]`		Az elemek, ha Ön vezérli a sorrendet.
`defaultItems`	`readonly T[]`	`[]`	Kezdeti elemek, ha a komponens tartja a sorrendet.
`onItemsChange`	`(items, { reason, key }) => void`		Az új sorrenddel fut le, és megadja, hogy húzásból, elengedésből vagy billentyűzetről jött-e.
`getKey`	`(item) => string \| number`	`item`	Egyedi key-t ad vissza egy elemhez. Alapértelmezés szerint maga az elem.
`renderItem`	`(item, { index, dragging }) => ReactNode`	`item.label`	Megrajzol egy elemet; megkapja az indexét, és hogy éppen húzzák-e.
`reorder`	`'live' \| 'drop'`	`'live'`	A `live` húzás közben mozgatja a többi elemet; a `drop` megvárja az elengedést.
`layout`	`'list' \| 'grid'`	`'grid'`	`list` vagy `grid`.
`columns`	`number`	`3`	Oszlopok egy rácsban.
`gap`	`number`	`12`	Távolság az elemek között pixelben.
`disabled`	`boolean`	`false`	Kikapcsolja a húzást.
`duration`	`number`	`260`	Ezredmásodperc a félreálló elemekhez.
`itemClassName`	`string`		Osztály minden listaelemhez; az `itemStyle` az inline stílusát állítja be.

Komponensoldal és munkapad

Gesztusok

MotionSwipe

Sor, amely vízszintes csúsztatásra műveleteket fed fel, és elcsúsztatható.

Prop	Típus	Alapérték	Leírás
`children`	`ReactNode`		A sor tartalma.
`startActions`	`ReactNode`		A sor elején jelennek meg, ha a sort a vége felé húzzák.
`endActions`	`ReactNode`		A sor végén jelennek meg, ha a sort az eleje felé húzzák.
`dismiss`	`'start' \| 'end' \| 'both'`		Azok az oldalak, ahol egy hosszú csúsztatás vagy dobás eltávolítja a sort.
`onDismiss`	`(side) => void`		Azután fut le, hogy a sor kicsúszott és összecsukódott; itt távolítsa el az elemet az adataiból.
`onOpenChange`	`(side \| null) => void`		A nyitott oldallal fut le, vagy `null` értékkel, amikor a sor bezárul.
`disabled`	`boolean`	`false`	Kikapcsolja a csúsztatást.
`contentClassName`	`string`		Osztály a sor tartalmához; a `contentStyle` az inline stílusát állítja be.
`transition`	`Transition`	`spring`	Timing-görbe `{ duration, easing }` vagy rugó `{ tempo: 'spring', spring }`. A rugók megszakításkor megtartják a lendületüket.

Komponensoldal és munkapad

MotionHold

Tartsa lenyomva a megerősítéshez; a korai elengedés visszatekeri.

Prop	Típus	Alapérték	Leírás
`children`	`ReactNode`		A gomb címkéje.
`onConfirm`	`() => void`		Akkor fut le, amikor a lenyomva tartás teljesül.
`duration`	`number`	`1200`	Ezredmásodperc, ameddig a nyomást tartani kell.
`disabled`	`boolean`	`false`	Kikapcsolja a gombot.
`fillClassName`	`string`		Osztály a növekvő kitöltéshez; a `fillStyle` az inline stílusát állítja be.

Komponensoldal és munkapad

Rétegek

MotionSheet

Alsó sheet, felső sheet vagy oldalsó fiók megállási pontokkal.

Prop	Típus	Alapérték	Leírás
`open`	`boolean`	`false`	Megjelenik-e a sheet.
`onOpenChange`	`(open) => void`		`false` értékkel fut le, amikor a sheetet húzással, koppintással vagy Escape-pel bezárják.
`detents`	`(number \| 'content')[]`	`['content']`	Nyugalmi méretek: a képernyő hányada, pixel vagy `'content'`.
`detent`	`number`		Vezérelt megállásipont-index.
`defaultDetent`	`number`	`0`	A `detent` nélküli nyitáskor használt megállásipont-index.
`onDetentChange`	`(index) => void`		Annak a megállási pontnak az indexével fut le, amelyen a sheet megáll.
`side`	`'bottom' \| 'top' \| 'start' \| 'end'`	`'bottom'`	Az él, ahonnan a sheet érkezik.
`modal`	`boolean`	`true`	Hátteret ad hozzá, bent tartja a fókuszt, és inaktívvá teszi az oldalt.
`dismissible`	`boolean`	`true`	A legkisebb megállási ponton túli húzás, a háttér és az Escape bezárja.
`backdropClassName`	`string`		Osztály a háttérhez; a `backdropStyle` az inline stílusát állítja be.
`transition`	`Transition`	`spring`	Timing-görbe `{ duration, easing }` vagy rugó `{ tempo: 'spring', spring }`. A rugók megszakításkor megtartják a lendületüket.

Komponensoldal és munkapad

MotionZoom

Kép, amely a helyéről addig nagyít, amíg kitölti a képernyőt.

Prop	Típus	Alapérték	Leírás
`src`	`string`		A helyben megjelenített kép.
`zoomSrc`	`string`		Nagyobb kép, amely betöltés után jelenik meg; tartsa meg ugyanazt a képarányt.
`margin`	`number`	`24`	A nagyított kép körül hagyott hely pixelben.
`disabled`	`boolean`	`false`	Kikapcsolja a nagyítást.
`onZoomChange`	`(zoomed) => void`		Nagyításkor `true`, bezáráskor `false` értékkel fut le.
`backdropStyle`	`CSSProperties`		A háttér inline stílusa.
`transition`	`Transition`	`spring`	Timing-görbe `{ duration, easing }` vagy rugó `{ tempo: 'spring', spring }`. A rugók megszakításkor megtartják a lendületüket.

Komponensoldal és munkapad

Haladás

ProgressBar

Vezérelt folyamatjelző vonal határozatlan állapottal.

Prop	Típus	Alapérték	Leírás
`value`	`number \| null`		Haladás `0` és `max` között; a `null` határozatlan.
`max`	`number`	`100`	A befejezést jelentő érték.
`color`	`string`	`'currentColor'`	A kitöltés színe.
`trackColor`	`string`	`'#e7ece9'`	A sáv színe.
`thickness`	`number`	`8`	A vonal vastagsága pixelben.
`direction`	`'ltr' \| 'rtl'`	`'ltr'`	Kitöltés balról (`ltr`) vagy jobbról (`rtl`).
`transition`	`Transition`	`spring`	Timing-görbe `{ duration, easing }` vagy rugó `{ tempo: 'spring', spring }`. A rugók megszakításkor megtartják a lendületüket.

Komponensoldal és munkapad

ProgressRing

Vezérelt folyamatjelző gyűrű határozatlan állapottal.

Prop	Típus	Alapérték	Leírás
`value`	`number \| null`		Haladás `0` és `max` között; a `null` határozatlan.
`max`	`number`	`100`	A befejezést jelentő érték.
`size`	`number`	`96`	Átmérő pixelben.
`thickness`	`number`	`8`	A gyűrű vastagsága pixelben.
`color`	`string`	`'currentColor'`	Az ív színe.
`trackColor`	`string`	`'#e7ece9'`	A sáv színe.
`children`	`ReactNode`		Középen megjelenített címke.
`transition`	`Transition`	`spring`	Timing-görbe `{ duration, easing }` vagy rugó `{ tempo: 'spring', spring }`. A rugók megszakításkor megtartják a lendületüket.

Komponensoldal és munkapad

Átmenetek

motionTokens

Kész értékek bármely transition prophoz.

Prop	Típus	Alapérték	Leírás
`duration`	`{ instant, fast, normal, slow }`	`0 · 140 · 280 · 520`	Időtartamok ezredmásodpercben.
`easing`	`{ ease, easeOut, expoOut, backOut }`	`Transition`	Timing-átmenetek időtartammal és elnevezett görbével.
`spring`	`{ quick, basic, gentle, bouncy }`	`Transition`	Rugós átmenetek, a gyors és feszestől a lágy és pattogósig.

Átmenetek

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} />
    </>
  );
}