Stilius

Valdiklis pateikiamas kaip stiklo efektą turinti juosta su integruotomis šviesia ir tamsia temomis. Jį galima tinkinti trimis lygiais: naudojant rekvizitus bendroms parinktims, CSS pasirinktines ypatybes temoms ir CSS klasių perrašymus visiškai kontrolei.

Temos

Rekvizitas theme valdo valdiklio spalvų schemą. Jis pritaiko tp--light arba tp--dark klasę valdiklio šakniniam elementui:

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

Abi temos naudoja stiklo efektą turinčios juostos dizainą su fono suliejimu ir subtiliu skaidrumu.

CSS pasirinktinės savybės

Valdiklis pateikia CSS pasirinktines savybes (kintamuosius), kurias galite perrašyti, kad pakeistumėte spalvas nekeisdami atskirų klasių. Jos apibrėžiamos temos klasės (.tp--light arba .tp--dark), pritaikytos .tp-widget šakniniam elementui:

Pasirinktinių savybių perrašymas

Nustatykite akcento spalvą naudodami primaryColor parametrą:

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

Kitas pasirinktines savybes perrašykite naudodami CSS. Naudokite dviejų klasių parinkiklį (.tp-widget.tp--light / .tp-widget.tp--dark), kad jūsų taisyklė turėtų pirmenybę prieš numatytąsias reikšmes apibrėžiančią temos klasę, neatsižvelgiant į stilių lentelės eiliškumą:

.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 klasės

Visų valdiklio klasių pradžioje naudojamas tp-, kad nebūtų konfliktų su esamais stiliais.

Pavyzdžiai

Pasirinktinė akcentinė spalva per komponento savybes

Paprasčiausias būdas pritaikyti valdiklį savo prekės ženklui:

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

Pasirinktinės spalvos per CSS

Pakeiskite pasirinktines savybes, kad galėtumėte visiškai valdyti spalvas. Atminkite, kad akcentinė spalva nustatoma naudojant primaryColor komponento savybę, o ne CSS:

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

Pasirinktinis dydis

Padidinkite arba sumažinkite valdiklį koreguodami juostos, mygtukų ir teksto matmenis:

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

Slėpkite teksto etiketes

Visas valdiklio tekstas yra .tp-meta. Visiškai jį paslėpkite, kad liktų tik bangos forma ir mygtukai:

.tp-meta {
  display: none;
}

Arba paslėpkite atskiras dalis:

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

Konkrečiai temai skirti pakeitimai

Nukreipkite pakeitimus į konkrečią temą naudodami temos klasę:

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

Aprėpties nustatymas naudojant className

Naudodami React komponentą, perduokite className komponento savybę, kad pakeitimai būtų taikomi konkrečiam valdiklio egzemplioriui:

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

Tada CSS nukreipkite į tą klasę:

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

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

Taip tame pačiame puslapyje galite turėti kelis skirtingų stilių valdiklio egzempliorius. Kiekvienam egzemplioriui nustatykite atskirą akcentinę spalvą naudodami jo primaryColor komponento savybę (CSS negali pakeisti --tp-accent -- jis nustatomas įterptuoju stiliumi).

Visiškai pasirinktinė sąsaja

Jei CSS pakeitimų nepakanka, be sąsajos kabliukas suteikia jums visišką valdymą. Jūs pateikiate visą HTML ir stilių, o useThunderPhone tvarko balso sesiją. Kabliukas taip pat pateikia audioLevelRef, skirtą garsui reaguojančioms vizualizacijoms, pvz., bangos formoms, kurti.

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