Stiilimine

Vidin kuvatakse sisseehitatud heleda ja tumeda teemaga klaasiefektiga ribana. Kohandamine on võimalik kolmel tasemel: propsid levinud valikute jaoks, CSS-i kohandatud omadused teemastamiseks ja CSS-klassi ülekirjutused täielikuks kontrolliks.

Teemad

Prop theme juhib vidina värviskeemi. See rakendab vidina juurelemendile klassi tp--light või tp--dark:

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

Mõlemad teemad kasutavad klaasiefektiga ribakujundust tausta hägustuse ja peene läbipaistvusega.

CSS-i kohandatud omadused

Vidin pakub CSS-i kohandatud omadusi (muutujaid), mida saad värvide muutmiseks üle kirjutada ilma üksikuid klasse puudutamata. Need määrab teema klass (.tp--light või .tp--dark), mis on rakendatud .tp-widget juurelemendile:

Kohandatud omaduste üle kirjutamine

Määra rõhuvärv atribuudi primaryColor kaudu:

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

Kirjuta muud kohandatud omadused CSS-iga üle. Kasuta kahe klassiga selektorit (.tp-widget.tp--light / .tp-widget.tp--dark), et sinu reegel oleks vaikimisi väärtusi määravast teemaklassist suurema prioriteediga sõltumata stiililehe järjekorrast:

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

Kõik vidina klassid algavad eesliitega tp-, et vältida konflikte sinu olemasolevate stiilidega.

Näited

Kohandatud aktsent propide kaudu

Lihtsaim viis vidina brändimiseks:

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

Kohandatud värvid CSS-i kaudu

Värvide täielikuks juhtimiseks alista kohandatud omadused. Pea meeles, et aktsent tuleb primaryColor propist, mitte CSS-ist:

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

Kohandatud suurus

Muuda vidin suuremaks või väiksemaks, kohandades riba, nuppude ja teksti mõõtmeid:

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

Peida tekstisildid

Kogu vidina tekst asub .tp-meta-s. Peida see täielikult, et alles jääksid ainult lainekuju ja nupud:

.tp-meta {
  display: none;
}

Või peida üksikud osad:

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

Teemapõhised alistused

Konkreetse teema sihtimiseks kasuta teemaklassi:

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

Ulatuse määramine className'i abil

Reacti komponendi kasutamisel anna className prop, et piirata alistused konkreetse vidinaeksemplariga:

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

Seejärel sihi seda klassi oma CSS-is:

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

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

See võimaldab samal lehel kasutada mitut eri stiilidega vidinaeksemplari. Anna igale eksemplarile oma aktsent primaryColor propi kaudu (CSS ei saa --tp-accent-i alistada -- see määratakse siseselt).

Täielikult kohandatud kasutajaliides

Kui CSS-i alistustest ei piisa, annab ilma kasutajaliideseta hook sulle täieliku kontrolli. Sina määrad kogu HTML-i ja stiilid, samal ajal kui useThunderPhone haldab häälesessiooni. Hook pakub ka audioLevelRef-i helile reageerivate visualiseeringute, näiteks lainekujude, loomiseks.

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