Widget

Stílusok

Szabja testre a ThunderPhone hangwidget megjelenését CSS-sel

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.

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"
/>

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:

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 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.

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

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