Oblikovanje

Gradnik se upodobi kot steklast trak z vgrajenima svetlo in temno temo. Prilagajanje je na voljo na treh ravneh: lastnosti za pogoste možnosti, lastnosti CSS po meri za oblikovanje teme in preglasitve razredov CSS za popoln nadzor.

Teme

Lastnost theme nadzoruje barvno shemo gradnika. Koren gradnika dobi razred tp--light ali tp--dark:

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

Obe temi uporabljata zasnovo steklastega traku z zameglitvijo ozadja in nežno prosojnostjo.

CSS-lastnosti po meri

Gradnik izpostavlja CSS-lastnosti po meri (spremenljivke), ki jih lahko prepišete za spreminjanje barv, ne da bi spreminjali posamezne razrede. Določene so s razredom teme (.tp--light ali .tp--dark), uporabljenim na korenskem elementu .tp-widget:

Prepisovanje lastnosti po meri

Barvo poudarka nastavite z lastnostjo primaryColor:

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

Druge lastnosti po meri prepišite s CSS. Uporabite izbirnik z dvema razredoma (.tp-widget.tp--light / .tp-widget.tp--dark), da bo vaše pravilo prevladalo nad razredom teme, ki določa privzete vrednosti, ne glede na vrstni red slogovne predloge:

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

Razredi CSS

Vsi razredi pripomočka imajo predpono tp-, da preprečite spore z obstoječimi slogi.

Primeri

Barva poudarka po meri prek lastnosti

Najpreprostejši način za prilagoditev znamke gradnika:

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

Barve po meri prek CSS-ja

Za popoln nadzor nad barvami preglasite lastnosti po meri. Ne pozabite, da barva poudarka izhaja iz lastnosti primaryColor, ne iz CSS-ja:

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

Velikost po meri

Gradnik povečajte ali pomanjšajte s prilagoditvijo dimenzij vrstice, gumbov in besedila:

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

Skrijte besedilne oznake

Vse besedilo gradnika je v .tp-meta. Skrijte ga v celoti, da ostanejo samo valovna oblika in gumbi:

.tp-meta {
  display: none;
}

Lahko pa skrijete posamezne dele:

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

Preglasitve za posamezno temo

Določeno temo ciljajte z razredom teme:

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

Omejevanje obsega s className

Pri uporabi komponente React posredujte lastnost className, da preglasitve omejite na določen primerek gradnika:

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

Nato ta razred ciljajte v CSS-ju:

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

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

Tako lahko imate na isti strani več primerkov gradnika z različnimi slogi. Vsakemu primerku nastavite lastno barvo poudarka prek njegove lastnosti primaryColor (CSS ne more preglasiti --tp-accent -- nastavljen je v vrstici).

Popolnoma prilagojen uporabniški vmesnik

Če preglasitve CSS-ja niso dovolj, vam headless kavelj omogoča popoln nadzor. Zagotovite ves HTML in oblikovanje, medtem ko useThunderPhone upravlja glasovno sejo. Kavelj zagotavlja tudi audioLevelRef za izdelavo na zvok odzivnih vizualizacij, kot so valovne oblike.

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