Stílusok - ThunderPhone

A widget üvegmorf sávként jelenik meg beépített világos és sötét témákkal. A testreszabás három szinten érhető el: propok a gyakori beállításokhoz, CSS-egyéni tulajdonságok a témázáshoz, valamint CSS-osztályfelülírások a teljes körű vezérléshez.

Ezek a stílusbeállítások a ThunderPhoneWidget React-komponens és a ThunderPhone.mount() CDN-metódus által megjelenített előre elkészített widgetre vonatkoznak. Ha teljesen egyéni felhasználói felületre van szüksége, használja inkább a headless hookot.

Témák

A theme prop vezérli a widget színsémáját. A widget gyökére a tp--light vagy tp--dark osztályt alkalmazza:

<ThunderPhoneWidget
  publishableKey="pk_live_your_publishable_key"
  theme="dark"
/>

Téma	Osztály	Leírás
`'light'`	`tp--light`	Világos háttér sötét szöveggel. Alapértelmezett.
`'dark'`	`tp--dark`	Sötét háttér világos szöveggel.

Mindkét téma az üvegmorf sávdizájnt használja háttérelmosással és visszafogott átlátszósággal.

CSS egyéni tulajdonságok

A widget CSS egyéni tulajdonságokat (változókat) tesz elérhetővé, amelyeket felülírhat a színek módosításához anélkül, hogy az egyes osztályokat érintené. Ezeket a .tp-widget gyökérelemre alkalmazott témaklassz (.tp--light vagy .tp--dark) határozza meg:

Tulajdonság	Alapértelmezett (világos)	Alapértelmezett (sötét)	Leírás
`--tp-accent`	`#000`	`#fff`	Kiemelőszín: indítógomb, hullámforma-sávok, csatlakozási pont, csatlakoztatott állapot szövege. A `primaryColor` prop alapján inline van beállítva.
`--tp-bg`	`rgba(255, 255, 255, 0.82)`	`rgba(15, 15, 15, 0.85)`	Sáv háttere (áttetsző; a `--tp-glass` elhomályosítja).
`--tp-surface`	`rgba(0, 0, 0, 0.04)`	`rgba(255, 255, 255, 0.07)`	Némítás gombjának háttere.
`--tp-surface-hover`	`rgba(0, 0, 0, 0.07)`	`rgba(255, 255, 255, 0.12)`	Némítás gombjának háttérszíne rámutatáskor.
`--tp-border`	`rgba(0, 0, 0, 0.08)`	`rgba(255, 255, 255, 0.1)`	Sáv- és gombszegélyek.
`--tp-border-hover`	`rgba(0, 0, 0, 0.14)`	`rgba(255, 255, 255, 0.18)`	Szegélyszín rámutatáskor.
`--tp-text`	`rgba(0, 0, 0, 0.88)`	`rgba(255, 255, 255, 0.95)`	Elsődleges szöveg (cím, ügynök neve).
`--tp-text-2`	`rgba(0, 0, 0, 0.5)`	`rgba(255, 255, 255, 0.55)`	Másodlagos szöveg (alcím, állapotsor, hívásidőzítő).
`--tp-glass`	`blur(32px) saturate(180%)`	`blur(32px) saturate(180%)`	A sáv üveghatását létrehozó `backdrop-filter`.
`--tp-shadow`	háromrétegű árnyékkészlet	háromrétegű árnyékkészlet	A sáv `box-shadow` értéke (gyűrű + közeli + távoli rétegek).
`--tp-shadow-hover`	háromrétegű árnyékkészlet	háromrétegű árnyékkészlet	Rámutatáskor alkalmazott kiemeléshez van deklarálva; jelenleg egyetlen szabály sem alkalmazza.
`--tp-glow`	`inset 0 1px 0 0 rgba(255,255,255,0.5)`	`inset 0 1px 0 0 rgba(255,255,255,0.06)`	A sáv árnyékára rétegzett belső felső kiemelés.
`--tp-connected`	`#059669`	`#34d399`	Csatlakoztatott állapot jelzőszíne (állapotpont).
`--tp-error`	`#dc2626`	`#fb7185`	Hibaállapot szövegének színe.
`--tp-end-bg`	`rgba(239, 68, 68, 0.08)`	`rgba(251, 113, 133, 0.12)`	Hívás befejezése gomb háttere.
`--tp-end-color`	`#ef4444`	`#fb7185`	Hívás befejezése gomb ikonjának színe.
`--tp-end-border`	`rgba(239, 68, 68, 0.12)`	`rgba(251, 113, 133, 0.15)`	Hívás befejezése gomb szegélye.
`--tp-end-hover`	`rgba(239, 68, 68, 0.14)`	`rgba(251, 113, 133, 0.2)`	Hívás befejezése gomb háttérszíne rámutatáskor.
`--tp-idle-opacity`	`0.4`	`0.3`	Üresjárati állapot halványításához van deklarálva; jelenleg egyetlen szabály sem alkalmazza.

Egyéni tulajdonságok felülírása

Állítsa be a kiemelőszínt a primaryColor prop segítségével:

<ThunderPhoneWidget
  publishableKey="pk_live_your_publishable_key"
  primaryColor="#e11d48"
/>

A --tp-accent a primaryColor prop alapján inline stílusként van beállítva, ezért a --tp-accent stíluslapban történő felülírása nem érvényesül. A kiemelőszínt a prop segítségével módosítsa. Minden más egyéni tulajdonság felülírható CSS-ben.

A többi egyéni tulajdonságot CSS-sel írja felül. Használjon kétosztályos szelektort (.tp-widget.tp--light / .tp-widget.tp--dark), hogy a szabálya a stíluslap sorrendjétől függetlenül felülírja az alapértelmezett értékeket meghatározó témaklaszt:

.tp-widget.tp--light {
  --tp-bg: rgba(0, 0, 0, 0.9);
  --tp-text: rgba(255, 255, 255, 0.95);
  --tp-text-2: rgba(255, 255, 255, 0.55);
  --tp-border: rgba(255, 255, 255, 0.15);
}

CSS-osztályok

Az összes widgetosztály tp- előtaggal rendelkezik, hogy elkerülje az ütközéseket a meglévő stílusokkal.

Osztály	Elem	Leírás
`.tp-widget`	Gyökérburkoló	Rögzített pozíciójú tároló (`position: fixed`, a sarok beállítása a `position` prop alapján, `z-index: 9999`). Tartalmazza a témához tartozó osztályt és az alap betűtípus-beállításokat; önmagában nincs vizuális kerete.
`.tp--light` / `.tp--dark`	Témamódosítók	A téma mellett a `.tp-widget` elemre kerülnek; meghatározzák az összes `--tp-*` egyéni tulajdonságot.
`.tp-bar`	Sáv	Maga az üveghatású kapszula: háttér, háttérelmosás, szegély, `99px`-es sugár, árnyék. `300px` széles.
`.tp-meta`	Szövegblokk	Az összes szöveg tárolója — üresjáratban a cím és az alcím, hívás közben az ügynök neve és állapota.
`.tp-name`	Elsődleges címke	Üresjáratban a `title` prop értékét, hívás közben pedig a kapcsolódott ügynök nevét jeleníti meg (`title` tartalék értékként).
`.tp-sub`	Alcím	Az üresjáratban megjelenő „Most elérhető” sor.
`.tp-start`	Üresjárati hívásgomb	A kör alakú, kiemelt indítógomb (42px). Háttérként a `--tp-accent` értékét használja.
`.tp-dot`	Kapcsolódási pont	A kapcsolódás közben a sáv bal oldalán megjelenő, pulzáló kiemelő pont.
`.tp-wave` / `.tp-wave--idle`	Hullámforma	Az ötsávos hullámforma. Az `--idle` hozzáadja a lassú légzésanimációt; hívás közben a sávok hangra reagálnak.
`.tp-button`	Hívás közbeni gombok	A hívás közbeni vezérlők alapstílusa (42px, lekerekítés: 12px).
`.tp-button-group`	Gombsor	Hívás közben a némítási és a hívásbefejezési gombokat foglalja magába.
`.tp-button--start`	Kapcsolódógomb-változat	Kiemelő színű változat, amely a hívás indításakor jelenik meg.
`.tp-button--mute`	Némítás kapcsoló	Hívás közben némítja vagy visszakapcsolja a mikrofont. A `--tp-surface` értékét használja.
`.tp-button--end`	Hívásbefejező gomb	Bontja a hívást. A `--tp-end-*` palettát használja.
`.tp-button--loading`	Betöltési módosító	Kapcsolódás közben halványítja a gombot.
`.tp-icon` / `.tp-spin`	Ikonok	A gombikonok méretezése; a `tp-spin` animálja a kapcsolódási forgó ikont.
`.tp-status`	Hívás közbeni állapotblokk	A kapcsolódási/kapcsolódott/hiba állapotok során az állapotsort foglalja magába.
`.tp-status__text`	Állapotsor	A kapcsolat állapotának szövege (például „Kapcsolódás…”) vagy a hívásidőzítő. Állapottól függően `.tp-status--connected` (kiemelő szín) vagy `.tp-status--error` (hibaszín) osztályt kap.
`.tp-status__name`	Ügynöknév-hely	Az állapotblokk része, de a jelenlegi sávelrendezésben nem jelenik meg — az ügynök neve helyette a `.tp-name` elemben látható.
`.tp-status__dot`	Állapotpont	Pulzáló, kapcsolódott állapotú pontstílus (a `--tp-connected` értékét használja).

Példák

Egyéni kiemelőszín propokon keresztül

A widget arculathoz igazításának legegyszerűbb módja:

<ThunderPhoneWidget
  publishableKey="pk_live_your_publishable_key"
  theme="light"
  primaryColor="#059669"
  title="Talk to support"
/>

Egyéni színek CSS-en keresztül

A teljes színvezérléshez írja felül az egyéni tulajdonságokat. Ne feledje, hogy a kiemelőszín a primaryColor propból származik, nem a CSS-ből:

<ThunderPhoneWidget
  publishableKey="pk_live_your_publishable_key"
  primaryColor="#059669"
/>

/* Emerald theme for everything else */
.tp-widget.tp--light {
  --tp-bg: rgba(236, 253, 245, 0.85);
  --tp-text: rgba(6, 78, 59, 0.95);
  --tp-text-2: rgba(4, 120, 87, 0.8);
  --tp-border: rgba(5, 150, 105, 0.2);
}

Egyéni méret

A sáv, a gombok és a szöveg méreteinek módosításával növelheti vagy csökkentheti a widget méretét:

/* Wider bar */
.tp-bar {
  width: 340px;
}

/* Larger buttons (42px by default) */
.tp-start,
.tp-button {
  width: 56px;
  height: 56px;
}

/* Larger text */
.tp-name {
  font-size: 16px;
}

.tp-sub,
.tp-status__text {
  font-size: 14px;
}

Szövegcímkék elrejtése

A widget teljes szövege a .tp-meta elemben található. Rejtse el teljesen, hogy csak a hullámforma és a gombok maradjanak:

.tp-meta {
  display: none;
}

Vagy rejtse el az egyes részeket:

/* Hide only the idle "Available now" subtitle */
.tp-sub {
  display: none;
}

/* Hide only the in-call status line (connection state / timer) */
.tp-status {
  display: none;
}

Az üresjárati címke a .tp-name/.tp-sub elemben található, nem a .tp-status elemben — önmagában a .tp-status elrejtése esetén a cím továbbra is látható, amikor a widget üresjáratban van.

Témaspecifikus felülírások

A témaosztály használatával célozzon meg egy adott témát:

/* Only affect dark theme */
.tp--dark .tp-start {
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.25);
}

/* Only affect light theme */
.tp-widget.tp--light {
  --tp-bg: rgba(255, 255, 255, 0.95);
}

Hatókör beállítása className használatával

A React-komponens használatakor adjon át egy className propot, hogy a felülírások egy adott widgetpéldányra vonatkozzanak:

<ThunderPhoneWidget
  publishableKey="pk_live_your_publishable_key"
  theme="dark"
  className="support-widget"
/>

Ezután célozza meg ezt az osztályt a CSS-ben:

.support-widget.tp--dark {
  --tp-bg: rgba(30, 30, 46, 0.9);
}

.support-widget .tp-name {
  font-weight: 700;
}

Így ugyanazon az oldalon több, eltérő stílusú widgetpéldányt is használhat. Adjon minden példánynak saját kiemelőszínt a primaryColor propján keresztül (a CSS nem írhatja felül a --tp-accent értékét — azt a rendszer inline állítja be).

Teljesen egyéni felhasználói felület

Ha a CSS-felülírások nem elegendők, a headless hook teljes körű irányítást biztosít. Ön biztosítja az összes HTML-t és stílust, míg a useThunderPhone kezeli a hangmunkamenetet. A hook az audioLevelRef értéket is biztosítja hangra reagáló vizualizációk, például hullámformák készítéséhez.

import { useThunderPhone } from '@thunderphone/widget'

function MyWidget() {
  const phone = useThunderPhone({
    publishableKey: 'pk_live_your_publishable_key',
  })

  return (
    <div className="my-totally-custom-widget">
      {/* Your own buttons, animations, layouts -- anything */}
      <button onClick={phone.state === 'connected' ? phone.disconnect : phone.connect}>
        {phone.state === 'connected' ? 'Hang up' : 'Call us'}
      </button>
      {phone.audio}
    </div>
  )
}

A headless hook a megfelelő választás, ha hangra reagáló animációkra, egyéni elrendezésekre vagy meglévő komponenskönyvtárba való integrációra van szüksége. A CSS-felülírások és az egyéni tulajdonságok gyors témabeállításokhoz jobbak.

​Témák

​CSS egyéni tulajdonságok

​Egyéni tulajdonságok felülírása

​CSS-osztályok

​Példák

​Egyéni kiemelőszín propokon keresztül

​Egyéni színek CSS-en keresztül

​Egyéni méret

​Szövegcímkék elrejtése

​Témaspecifikus felülírások

​Hatókör beállítása className használatával

​Teljesen egyéni felhasználói felület

Témák

CSS egyéni tulajdonságok

Egyéni tulajdonságok felülírása

CSS-osztályok

Példák

Egyéni kiemelőszín propokon keresztül

Egyéni színek CSS-en keresztül

Egyéni méret

Szövegcímkék elrejtése

Témaspecifikus felülírások

Hatókör beállítása className használatával

Teljesen egyéni felhasználói felület