Urembeshaji

Wijeti huonyeshwa kama upau wenye athari ya glassmorphism na mandhari ya mwanga na giza yaliyojengewa ndani. Ubinafsishaji unapatikana katika viwango vitatu: props kwa chaguo za kawaida, sifa maalum za CSS kwa mandhari, na ubatilishaji wa madarasa ya CSS kwa udhibiti kamili.

Mandhari

Prop ya theme hudhibiti mpangilio wa rangi wa wijeti. Huongeza darasa la tp--light au tp--dark kwenye mzizi wa wijeti:

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

Mandhari yote mawili hutumia muundo wa upau wenye athari ya glassmorphism, wenye ukungu wa mandharinyuma na uwazi hafifu.

Sifa Maalum za CSS

Wijeti hutoa sifa maalum za CSS (vigeu) unazoweza kubatilisha ili kubadilisha rangi bila kugusa madarasa binafsi. Zinafafanuliwa na darasa la mandhari (.tp--light au .tp--dark) linalotumika kwenye mzizi wa .tp-widget:

Kubatilisha Sifa Maalum

Weka rangi ya msisitizo kupitia prop ya primaryColor:

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

Batilisha sifa nyingine maalum kwa CSS. Tumia kiteuzi cha madarasa mawili (.tp-widget.tp--light / .tp-widget.tp--dark) ili kanuni yako izidi uzito wa darasa la mandhari linalofafanua chaguomsingi, bila kujali mpangilio wa stylesheet:

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

Madarasa ya CSS

Madarasa yote ya wijeti yana kiambishi awali tp- ili kuepuka migongano na mitindo yako iliyopo.

Mifano

Rangi Maalum ya Msisitizo kupitia Props

Njia rahisi zaidi ya kuweka chapa kwenye wijeti:

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

Rangi Maalum kupitia CSS

Batilisha sifa maalum ili kudhibiti rangi kikamilifu. Kumbuka kwamba rangi ya msisitizo hutoka kwenye prop ya primaryColor, si 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);
}

Ukubwa Maalum

Fanya wijeti iwe kubwa au ndogo zaidi kwa kurekebisha vipimo vya upau, kitufe na maandishi:

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

Ficha Lebo za Maandishi

Maandishi yote ya wijeti yapo katika .tp-meta. Yafiche yote ili kubakiza tu umbo la mawimbi na vitufe:

.tp-meta {
  display: none;
}

Au ficha sehemu mahususi:

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

Ubatilishaji Mahususi wa Mandhari

Lenga mandhari mahususi kwa kutumia darasa la mandhari:

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

Kuweka Wigo kwa className

Unapotumia kipengele cha React, pitisha prop ya className ili kuweka wigo wa ubatilishaji wako kwa instancia mahususi ya wijeti:

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

Kisha lenga darasa hilo katika CSS yako:

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

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

Hii hukuruhusu kuwa na instancia nyingi za wijeti kwenye ukurasa mmoja zenye mitindo tofauti. Ipe kila instancia rangi yake ya msisitizo kupitia prop yake ya primaryColor (CSS haiwezi kubatilisha --tp-accent -- huwekwa inline).

UI Maalum Kikamilifu

Ikiwa ubatilishaji wa CSS hautoshi, hook isiyo na kiolesura hukupa udhibiti kamili. Unatoa HTML na mtindo wote huku useThunderPhone ikishughulikia kipindi cha sauti. Hook pia hutoa audioLevelRef kwa ajili ya kuunda vielelezo vinavyoitikia sauti kama maumbo ya mawimbi.

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