பாணியமைப்பு

விட்ஜெட், உள்ளமைக்கப்பட்ட ஒளி மற்றும் இருள் தீம்களுடன் கண்ணாடி போன்ற பட்டையாக ரெண்டர் செய்யப்படுகிறது. தனிப்பயனாக்கம் மூன்று நிலைகளில் கிடைக்கிறது: பொதுவான விருப்பங்களுக்கான props, தீமிங்கிற்கான CSS தனிப்பயன் பண்புகள், மற்றும் முழுக் கட்டுப்பாட்டிற்கான CSS கிளாஸ் மேலெழுதல்கள்.

தீம்கள்

theme prop விட்ஜெட்டின் வண்ணத் திட்டத்தைக் கட்டுப்படுத்துகிறது. இது விட்ஜெட் ரூட்டில் tp--light அல்லது tp--dark கிளாஸைப் பயன்படுத்துகிறது:

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

இரண்டு தீம்களும் பின்னணி மங்கலாக்கம் மற்றும் நுட்பமான வெளிப்படைத்தன்மையுடன் கண்ணாடி போன்ற பார் வடிவமைப்பைப் பயன்படுத்துகின்றன.

CSS தனிப்பயன் பண்புகள்

தனிப்பட்ட class-களை மாற்றாமல் நிறங்களை மாற்ற நீங்கள் மேலெழுதக்கூடிய CSS தனிப்பயன் பண்புகளை (மாறிகள்) widget வழங்குகிறது. அவை .tp-widget மூல உறுப்பில் பயன்படுத்தப்படும் theme class (.tp--light அல்லது .tp--dark) மூலம் வரையறுக்கப்படுகின்றன:

தனிப்பயன் பண்புகளை மேலெழுதுதல்

வலியுறுத்தல் நிறத்தை primaryColor prop மூலம் அமைக்கவும்:

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

மற்ற தனிப்பயன் பண்புகளை CSS மூலம் மேலெழுதவும். stylesheet வரிசையைப் பொருட்படுத்தாமல், இயல்புநிலைகளை வரையறுக்கும் theme class-ஐ உங்கள் விதி மீறுவதற்கு இரண்டு-class selector (.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 வகுப்புகள்

உங்கள் ஏற்கனவே உள்ள ஸ்டைல்களுடன் முரண்பாடுகளைத் தவிர்க்க அனைத்து widget வகுப்புகளுக்கும் 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 மேலெழுதல்கள் போதுமானதாக இல்லையெனில், ஹெட்லெஸ் ஹுக் உங்களுக்கு முழுமையான கட்டுப்பாட்டை வழங்குகிறது. அனைத்து HTML மற்றும் பாணியமைப்பையும் நீங்கள் வழங்குகிறீர்கள்; useThunderPhone குரல் அமர்வைக் கையாளுகிறது. அலைவடிவங்கள் போன்ற ஆடியோவுக்கு எதிர்வினையாற்றும் காட்சிப்படுத்தல்களை உருவாக்குவதற்கு ஹுக் 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>
  )
}