Widget

Stil

ThunderPhone sesli bileşeninin görünümünü CSS ile özelleştirin

Widget, yerleşik açık ve koyu temalara sahip cam efektli bir çubuk olarak oluşturulur. Özelleştirme üç düzeyde yapılabilir: yaygın seçenekler için prop'lar, tema oluşturma için CSS özel özellikleri ve tam kontrol için CSS sınıf geçersiz kılmaları.

Temalar#

theme prop'u, widget'ın renk şemasını kontrol eder. Widget köküne tp--light veya tp--dark sınıfını uygular:

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

Her iki tema da arka plan bulanıklığı ve hafif saydamlık içeren cam efektli çubuk tasarımını kullanır.

CSS Özel Özellikleri#

Widget, tek tek sınıflara dokunmadan renkleri değiştirmek için geçersiz kılabileceğiniz CSS özel özelliklerini (değişkenlerini) sunar. Bunlar, .tp-widget köküne uygulanan tema sınıfı (.tp--light veya .tp--dark) tarafından tanımlanır:

Özel Özellikleri Geçersiz Kılma#

Vurgu rengini primaryColor prop'u aracılığıyla ayarlayın:

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

Diğer özel özellikleri CSS ile geçersiz kılın. Stil sayfası sırasından bağımsız olarak kuralınızın varsayılanları tanımlayan tema sınıfından daha yüksek önceliğe sahip olması için iki sınıflı bir seçici (.tp-widget.tp--light / .tp-widget.tp--dark) kullanın:

.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 Sınıfları#

Mevcut stillerinizle çakışmaları önlemek için tüm widget sınıfları tp- ile başlar.

Örnekler#

Props ile Özel Vurgu Rengi#

Widget'ı markanıza uyarlamanın en basit yolu:

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

CSS ile Özel Renkler#

Renkleri tamamen kontrol etmek için özel özellikleri geçersiz kılın. Vurgu renginin CSS'den değil, primaryColor prop'undan geldiğini unutmayın:

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

Özel Boyut#

Çubuk, düğme ve metin boyutlarını ayarlayarak widget'ı büyütün veya küçültün:

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

Metin Etiketlerini Gizleme#

Widget'taki tüm metinler .tp-meta içinde bulunur. Yalnızca dalga formunu ve düğmeleri bırakmak için bunu tamamen gizleyin:

.tp-meta {
  display: none;
}

Ya da tek tek bölümleri gizleyin:

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

Temaya Özgü Geçersiz Kılmalar#

Tema sınıfıyla belirli bir temayı hedefleyin:

/* 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 ile Kapsam Belirleme#

React bileşenini kullanırken, geçersiz kılmalarınızı belirli bir widget örneğiyle sınırlamak için bir className prop'u geçirin:

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

Ardından CSS'nizde bu sınıfı hedefleyin:

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

Bu sayede aynı sayfada farklı stillere sahip birden fazla widget örneği kullanabilirsiniz. Her örneğe primaryColor prop'u üzerinden kendi vurgu rengini verin (CSS, --tp-accent özelliğini geçersiz kılamaz -- bu özellik satır içi olarak ayarlanır).

Tamamen Özel Arayüz#

CSS geçersiz kılmaları yeterli değilse headless hook size tam kontrol sağlar. Tüm HTML'yi ve stillendirmeyi siz sağlarken, useThunderPhone ses oturumunu yönetir. Hook ayrıca dalga formları gibi sese tepki veren görselleştirmeler oluşturmak için audioLevelRef sağlar.

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