Стилови

Виџет се приказује као стакласта трака са уграђеним светлом и тамним темама. Прилагођавање је доступно на три нивоа: пропси за уобичајене опције, CSS прилагођена својства за теме и замене CSS класа за потпуну контролу.

Теме

Пропс theme контролише шему боја виџета. Примењује класу tp--light или tp--dark на корен виџета:

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

Обе теме користе дизајн стакласте траке са замућењем позадине и суптилном провидношћу.

CSS прилагођена својства

Виџет излаже CSS прилагођена својства (променљиве) која можете заменити да бисте променили боје без измене појединачних класа. Дефинисана су класом теме (.tp--light или .tp--dark) примењеном на корен .tp-widget:

Замена прилагођених својстава

Поставите боју наглашавања преко својства primaryColor:

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

Замените остала прилагођена својства помоћу CSS-а. Користите селектор са две класе (.tp-widget.tp--light / .tp-widget.tp--dark) како би ваше правило имало предност над класом теме која дефинише подразумеване вредности, без обзира на редослед стилских листова:

.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 класе

Све класе виџета имају префикс tp- како би се избегли сукоби са вашим постојећим стиловима.

Примери

Прилагођена акцентна боја путем пропса

Најједноставнији начин да брендирате виџет:

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

Прилагођене боје путем CSS-а

Замените прилагођена својства за потпуну контролу боја. Имајте на уму да акцентна боја долази из пропса primaryColor, а не из 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);
}

Прилагођена величина

Повећајте или смањите виџет прилагођавањем димензија траке, дугмади и текста:

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

Сакријте текстуалне ознаке

Сав текст виџета налази се у .tp-meta. У потпуности га сакријте да бисте задржали само таласни облик и дугмад:

.tp-meta {
  display: none;
}

Или сакријте појединачне делове:

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

Замене специфичне за тему

Циљајте одређену тему помоћу класе теме:

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

Ограничавање опсега помоћу className

Када користите React компоненту, проследите пропс className да бисте ограничили замене на одређену инстанцу виџета:

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

Затим циљајте ту класу у свом CSS-у:

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

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

Ово вам омогућава да на истој страници имате више инстанци виџета са различитим стиловима. Свакој инстанци доделите сопствену акцентну боју путем њеног пропса primaryColor (CSS не може да замени --tp-accent -- постављен је уметнуто).

Потпуно прилагођен UI

Ако CSS замене нису довољне, headless hook вам пружа потпуну контролу. Ви обезбеђујете сав HTML и стилизовање, док useThunderPhone управља гласовном сесијом. Hook такође обезбеђује audioLevelRef за израду визуелизација које реагују на звук, као што су таласни облици.

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