സ്റ്റൈലിംഗ്

വിഡ്ജറ്റ് ഉൾനിർമ്മിത ലൈറ്റ്, ഡാർക്ക് തീമുകളുള്ള ഗ്ലാസ്മോർഫിക് ബാറായി റെൻഡർ ചെയ്യുന്നു. കസ്റ്റമൈസേഷൻ മൂന്ന് തലങ്ങളിൽ ലഭ്യമാണ്: പൊതുവായ ഓപ്ഷനുകൾക്കായുള്ള പ്രോപ്സ്, തീമിംഗിനായുള്ള CSS കസ്റ്റം പ്രോപ്പർട്ടികൾ, പൂർണ്ണ നിയന്ത്രണത്തിനായുള്ള CSS ക്ലാസ് ഓവർറൈഡുകൾ.

തീമുകൾ

theme പ്രോപ് വിഡ്ജറ്റിന്റെ കളർ സ്കീം നിയന്ത്രിക്കുന്നു. ഇത് വിഡ്ജറ്റ് റൂട്ടിൽ tp--light അല്ലെങ്കിൽ tp--dark ക്ലാസ് പ്രയോഗിക്കുന്നു:

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

രണ്ട് തീമുകളും ബാക്ക്ഡ്രോപ്പ് ബ്ലറും സൂക്ഷ്മമായ സുതാര്യതയും ഉള്ള ഗ്ലാസ്മോർഫിക് ബാർ ഡിസൈൻ ഉപയോഗിക്കുന്നു.

CSS കസ്റ്റം പ്രോപ്പർട്ടികൾ

വ്യക്തിഗത ക്ലാസുകൾ മാറ്റാതെ നിറങ്ങൾ മാറ്റുന്നതിനായി നിങ്ങൾക്ക് ഓവർറൈഡ് ചെയ്യാവുന്ന CSS കസ്റ്റം പ്രോപ്പർട്ടികൾ (വേരിയബിളുകൾ) വിജറ്റ് നൽകുന്നു. .tp-widget റൂട്ടിൽ പ്രയോഗിക്കുന്ന തീം ക്ലാസ് (.tp--light അല്ലെങ്കിൽ .tp--dark) ഉപയോഗിച്ചാണ് ഇവ നിർവചിച്ചിരിക്കുന്നത്:

കസ്റ്റം പ്രോപ്പർട്ടികൾ ഓവർറൈഡ് ചെയ്യുക

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- പ്രിഫിക്സ് നൽകിയിരിക്കുന്നു.

ഉദാഹരണങ്ങൾ

Props ഉപയോഗിച്ചുള്ള ഇഷ്ടാനുസൃത ആക്സെന്റ്

വിഡ്ജറ്റിന് ബ്രാൻഡിംഗ് നൽകാനുള്ള ഏറ്റവും ലളിതമായ മാർഗം:

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

CSS ഉപയോഗിച്ചുള്ള ഇഷ്ടാനുസൃത നിറങ്ങൾ

പൂർണ്ണ വർണ നിയന്ത്രണത്തിനായി കസ്റ്റം പ്രോപ്പർട്ടികൾ ഓവർറൈഡ് ചെയ്യുക. ആക്സെന്റ് CSS-ൽ നിന്നല്ല, primaryColor prop-ൽ നിന്നാണ് വരുന്നതെന്ന് ഓർക്കുക:

<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 prop നൽകുക:

<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 prop വഴി സ്വന്തം ആക്സെന്റ് നൽകുക (CSS-ന് --tp-accent ഓവർറൈഡ് ചെയ്യാനാകില്ല -- അത് ഇൻലൈൻ ആയി സജ്ജീകരിച്ചിരിക്കുന്നു).

പൂർണമായും ഇഷ്ടാനുസൃത UI

CSS ഓവർറൈഡുകൾ മതിയാകുന്നില്ലെങ്കിൽ, ഹെഡ്‌ലെസ് ഹുക്ക് നിങ്ങൾക്ക് പൂർണ്ണ നിയന്ത്രണം നൽകുന്നു. useThunderPhone വോയ്‌സ് സെഷൻ കൈകാര്യം ചെയ്യുമ്പോൾ, എല്ലാ HTML-ഉം സ്റ്റൈലിംഗും നിങ്ങൾ നൽകുന്നു. വേവ്ഫോമുകൾ പോലുള്ള ഓഡിയോ-റിയാക്ടീവ് ദൃശ്യവത്കരണങ്ങൾ നിർമ്മിക്കുന്നതിനായി ഹുക്ക് 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>
  )
}