---
title: "பாணியமைப்பு"
description: "CSS மூலம் ThunderPhone குரல் விட்ஜெட்டின் தோற்றத்தை தனிப்பயனாக்குங்கள்"
---

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

<Note>
  இந்த ஸ்டைலிங் விருப்பங்கள் `ThunderPhoneWidget` React காம்பொனென்ட் மற்றும் `ThunderPhone.mount()` CDN முறையால் ரெண்டர் செய்யப்படும் முன்கட்டமைக்கப்பட்ட விட்ஜெட்டிற்குப் பொருந்தும். முற்றிலும் தனிப்பயன் UI தேவைப்பட்டால், அதற்குப் பதிலாக [ஹெட்லெஸ் ஹுக்](/ta/widget/headless-hook) ஐப் பயன்படுத்துங்கள்.
</Note>

---

## தீம்கள்

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

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

| தீம் | கிளாஸ் | விளக்கம் |
|-------|-------|-------------|
| `'light'` | `tp--light` | இருண்ட உரையுடன் ஒளிரும் பின்னணி. இயல்புநிலை. |
| `'dark'` | `tp--dark` | ஒளிரும் உரையுடன் இருண்ட பின்னணி. |

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

---

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

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

| பண்பு | இயல்புநிலை (ஒளிர்வு) | இயல்புநிலை (இருள்) | விளக்கம் |
|----------|-----------------|-----------------|-------------|
| `--tp-accent` | `#000` | `#fff` | வலியுறுத்தல் நிறம்: தொடக்கப் பொத்தான், அலைவடிவப் பட்டைகள், இணைக்கும் புள்ளி, இணைந்த நிலை உரை. `primaryColor` prop-இலிருந்து **வரி உட்புறமாக** அமைக்கப்படுகிறது. |
| `--tp-bg` | `rgba(255, 255, 255, 0.82)` | `rgba(15, 15, 15, 0.85)` | பட்டை பின்னணி (ஒளிபுகும் தன்மை கொண்டது; `--tp-glass` மூலம் மங்கலாக்கப்படுகிறது). |
| `--tp-surface` | `rgba(0, 0, 0, 0.04)` | `rgba(255, 255, 255, 0.07)` | ஒலியமைப்புப் பொத்தான் பின்னணி. |
| `--tp-surface-hover` | `rgba(0, 0, 0, 0.07)` | `rgba(255, 255, 255, 0.12)` | ஒலியமைப்புப் பொத்தானின் ஹோவர் பின்னணி. |
| `--tp-border` | `rgba(0, 0, 0, 0.08)` | `rgba(255, 255, 255, 0.1)` | பட்டை மற்றும் பொத்தான் ஓரங்கள். |
| `--tp-border-hover` | `rgba(0, 0, 0, 0.14)` | `rgba(255, 255, 255, 0.18)` | ஹோவரின்போது ஓர நிறம். |
| `--tp-text` | `rgba(0, 0, 0, 0.88)` | `rgba(255, 255, 255, 0.95)` | முதன்மை உரை (தலைப்பு, ஏஜென்ட் பெயர்). |
| `--tp-text-2` | `rgba(0, 0, 0, 0.5)` | `rgba(255, 255, 255, 0.55)` | இரண்டாம் நிலை உரை (துணைத்தலைப்பு, நிலை வரி, அழைப்பு நேரமானி). |
| `--tp-glass` | `blur(32px) saturate(180%)` | `blur(32px) saturate(180%)` | பட்டையில் கண்ணாடி விளைவை உருவாக்கும் `backdrop-filter`. |
| `--tp-shadow` | மூன்று-அடுக்கு நிழல் அடுக்கு அமைப்பு | மூன்று-அடுக்கு நிழல் அடுக்கு அமைப்பு | பட்டையின் `box-shadow` (வளையம் + அருகிலுள்ள + தொலைவிலுள்ள அடுக்குகள்). |
| `--tp-shadow-hover` | மூன்று-அடுக்கு நிழல் அடுக்கு அமைப்பு | மூன்று-அடுக்கு நிழல் அடுக்கு அமைப்பு | ஹோவர் உயர்வுக்காக அறிவிக்கப்பட்டது; தற்போது எந்த விதியாலும் பயன்படுத்தப்படவில்லை. |
| `--tp-glow` | `inset 0 1px 0 0 rgba(255,255,255,0.5)` | `inset 0 1px 0 0 rgba(255,255,255,0.06)` | பட்டை நிழலின் மீது அடுக்கப்படும் உள்புற மேல் சிறப்பம்சம். |
| `--tp-connected` | `#059669` | `#34d399` | இணைந்த நிலை குறியீட்டு நிறம் (நிலைப் புள்ளி). |
| `--tp-error` | `#dc2626` | `#fb7185` | பிழை நிலை உரை நிறம். |
| `--tp-end-bg` | `rgba(239, 68, 68, 0.08)` | `rgba(251, 113, 133, 0.12)` | அழைப்பை முடிக்கும் பொத்தான் பின்னணி. |
| `--tp-end-color` | `#ef4444` | `#fb7185` | அழைப்பை முடிக்கும் பொத்தான் ஐகான் நிறம். |
| `--tp-end-border` | `rgba(239, 68, 68, 0.12)` | `rgba(251, 113, 133, 0.15)` | அழைப்பை முடிக்கும் பொத்தான் ஓரம். |
| `--tp-end-hover` | `rgba(239, 68, 68, 0.14)` | `rgba(251, 113, 133, 0.2)` | அழைப்பை முடிக்கும் பொத்தானின் ஹோவர் பின்னணி. |
| `--tp-idle-opacity` | `0.4` | `0.3` | செயலற்ற நிலை மங்கலுக்காக அறிவிக்கப்பட்டது; தற்போது எந்த விதியாலும் பயன்படுத்தப்படவில்லை. |

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

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

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

<Warning>
  `--tp-accent`, `primaryColor` prop-இலிருந்து **வரி உட்புற பாணியாக** அமைக்கப்படுகிறது; எனவே `--tp-accent`-இன் stylesheet மேலெழுத்துகள் எந்த விளைவையும் ஏற்படுத்தாது. prop மூலம் வலியுறுத்தல் நிறத்தை மாற்றவும். மற்ற அனைத்து தனிப்பயன் பண்புகளையும் CSS-இல் மேலெழுதலாம்.
</Warning>

மற்ற தனிப்பயன் பண்புகளை CSS மூலம் மேலெழுதவும். stylesheet வரிசையைப் பொருட்படுத்தாமல், இயல்புநிலைகளை வரையறுக்கும் theme class-ஐ உங்கள் விதி மீறுவதற்கு இரண்டு-class selector (`.tp-widget.tp--light` / `.tp-widget.tp--dark`) பயன்படுத்தவும்:

```css
.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-` முன்னொட்டு சேர்க்கப்பட்டுள்ளது.

| வகுப்பு | உறுப்பு | விளக்கம் |
|-------|---------|-------------|
| `.tp-widget` | மூல ரேப்பர் | நிலையான-நிலை கொண்டெய்னர் (`position: fixed`, மூலை `position` prop மூலம் அமைக்கப்படும், `z-index: 9999`). தீம் வகுப்பு மற்றும் அடிப்படை எழுத்துரு அமைப்புகளைக் கொண்டிருக்கும்; தனிப்பட்ட காட்சி அலங்காரம் எதுவும் இல்லை. |
| `.tp--light` / `.tp--dark` | தீம் மாற்றிகள் | தீமுடன் சேர்த்து `.tp-widget`-இல் பயன்படுத்தப்படும்; அனைத்து `--tp-*` தனிப்பயன் பண்புகளையும் வரையறுக்கும். |
| `.tp-bar` | பட்டை | கண்ணாடித் தோற்றமுள்ள பில் வடிவம்: பின்னணி, பின்புல மங்கல், பார்டர், `99px` ஆரம், நிழல். அகலம் `300px`. |
| `.tp-meta` | உரைத் தொகுதி | அனைத்து உரைகளுக்குமான கொண்டெய்னர் -- செயலற்ற நிலையில் தலைப்பு மற்றும் துணைத்தலைப்பு, அழைப்பின்போது ஏஜென்ட் பெயர் மற்றும் நிலை. |
| `.tp-name` | முதன்மை லேபல் | செயலற்ற நிலையில் `title` prop-ஐயும், அழைப்பின்போது இணைக்கப்பட்ட ஏஜென்ட்டின் பெயரையும் (`title`-க்கு மாறாகப் பயன்படுத்தி) காட்டும். |
| `.tp-sub` | துணைத்தலைப்பு | செயலற்ற நிலையில் காட்டப்படும் "இப்போது கிடைக்கிறது" வரி. |
| `.tp-start` | செயலற்ற அழைப்பு பொத்தான் | வட்ட வடிவ உச்சரிப்பு தொடக்கப் பொத்தான் (42px). பின்னணியாக `--tp-accent`-ஐப் பயன்படுத்தும். |
| `.tp-dot` | இணைப்பு புள்ளி | இணைக்கும்போது பட்டையின் இடதுபுறத்தில் காட்டப்படும் துடிக்கும் உச்சரிப்பு புள்ளி. |
| `.tp-wave` / `.tp-wave--idle` | அலைவடிவம் | ஐந்து-பட்டை அலைவடிவம். `--idle` மெதுவான சுவாச அனிமேஷனைச் சேர்க்கும்; அழைப்பின்போது பட்டைகள் ஆடியோவுக்கு ஏற்ப செயல்படும். |
| `.tp-button` | அழைப்பின்போதான பொத்தான்கள் | அழைப்பின்போதான கட்டுப்பாடுகளுக்கான அடிப்படை ஸ்டைல் (42px, வட்டமான 12px). |
| `.tp-button-group` | பொத்தான் வரிசை | அழைப்பின்போது மியூட் மற்றும் முடிப்பு பொத்தான்களைச் சுற்றி அமைக்கும். |
| `.tp-button--start` | இணைப்பு பொத்தான் வகை | அழைப்பு தொடங்கும்போது காட்டப்படும் உச்சரிப்பு நிற வகை. |
| `.tp-button--mute` | மியூட் மாற்றி | அழைப்பின்போது மைக்கை மியூட்/மியூட் நீக்கும். `--tp-surface`-ஐப் பயன்படுத்தும். |
| `.tp-button--end` | அழைப்பு முடிப்பு பொத்தான் | அழைப்பை முடிக்கும். `--tp-end-*` வண்ணத் தொகுப்பைப் பயன்படுத்தும். |
| `.tp-button--loading` | ஏற்றுதல் மாற்றி | இணைக்கும்போது பொத்தானை மங்கச் செய்யும். |
| `.tp-icon` / `.tp-spin` | ஐகான்கள் | பொத்தான் ஐகான் அளவிடுதல்; `tp-spin` இணைக்கும் ஸ்பின்னரை அனிமேட் செய்யும். |
| `.tp-status` | அழைப்பின்போதான நிலைத் தொகுதி | இணைக்கும்/இணைக்கப்பட்ட/பிழை நிலைகளின்போது நிலை வரியைச் சுற்றி அமைக்கும். |
| `.tp-status__text` | நிலை வரி | இணைப்பு நிலை உரை (எ.கா., "இணைக்கப்படுகிறது...") அல்லது அழைப்பு டைமர். நிலைக்கேற்ப `.tp-status--connected` (உச்சரிப்பு நிறம்) அல்லது `.tp-status--error` (பிழை நிறம்) பெறும். |
| `.tp-status__name` | ஏஜென்ட்-பெயர் இடம் | நிலைத் தொகுதியின் ஒரு பகுதி, ஆனால் தற்போதைய பட்டை அமைப்பில் ரெண்டர் செய்யப்படாது -- ஏஜென்ட் பெயர் அதற்கு பதிலாக `.tp-name`-இல் தோன்றும். |
| `.tp-status__dot` | நிலைப் புள்ளி | துடிக்கும் இணைக்கப்பட்ட-நிலை புள்ளி ஸ்டைல் (`--tp-connected`-ஐப் பயன்படுத்தும்). |

---

## எடுத்துக்காட்டுகள்

### Props மூலம் தனிப்பயன் முக்கிய நிறம்

விட்ஜெட்டிற்கு பிராண்டிங் வழங்குவதற்கான எளிய வழி:

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

### CSS மூலம் தனிப்பயன் நிறங்கள்

முழுமையான நிறக் கட்டுப்பாட்டிற்கு தனிப்பயன் பண்புகளை மேலெழுதவும். முக்கிய நிறம் CSS-இலிருந்து அல்ல, `primaryColor` prop-இலிருந்து வருகிறது என்பதை நினைவில் கொள்ளவும்:

```tsx
<ThunderPhoneWidget
  publishableKey="pk_live_your_publishable_key"
  primaryColor="#059669"
/>
```

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

### தனிப்பயன் அளவு

பட்டை, பொத்தான் மற்றும் உரை பரிமாணங்களைச் சரிசெய்து விட்ஜெட்டை பெரிதாகவோ சிறியதாகவோ மாற்றவும்:

```css
/* 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`-இல் உள்ளன. அலைவடிவம் மற்றும் பொத்தான்களை மட்டும் வைத்திருக்க அதை முழுமையாக மறைக்கவும்:

```css
.tp-meta {
  display: none;
}
```

அல்லது தனிப்பட்ட பகுதிகளை மறைக்கவும்:

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

<Note>
  செயலற்ற லேபிள் `.tp-name`/`.tp-sub`-இல் உள்ளது, `.tp-status`-இல் இல்லை -- `.tp-status`-ஐ மட்டும் மறைத்தாலும், விட்ஜெட் செயலற்ற நிலையில் இருக்கும்போது தலைப்பு தொடர்ந்து காட்டப்படும்.
</Note>

### தீம்-குறிப்பிட்ட மேலெழுதல்கள்

தீம் வகுப்பைப் பயன்படுத்தி குறிப்பிட்ட தீமை இலக்காகக் கொள்ளவும்:

```css
/* 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-ஐ வழங்கவும்:

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

பின்னர் உங்கள் CSS-இல் அந்த வகுப்பை இலக்காகக் கொள்ளவும்:

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

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

<Tip>
  ஆடியோவுக்கு எதிர்வினையாற்றும் அனிமேஷன்கள், தனிப்பயன் லேஅவுட்கள் அல்லது ஏற்கனவே உள்ள கூறு நூலகத்துடன் ஒருங்கிணைப்பு தேவைப்படும்போது ஹெட்லெஸ் ஹுக் சரியான தேர்வாகும். விரைவான தீம் மாற்றங்களுக்கு CSS மேலெழுதல்களும் தனிப்பயன் பண்புகளும் சிறந்தவை.
</Tip>