Paste’in tema ve düğme kurallarını, doğrulanmış boşluk ölçeğini kullanarak bir bildirim taslağı oluşturun. Düzenleme, gözden geçirme ve mesajı gerçekten gönderme aşamalarını net biçimde ayırt edin.
Üst kaynak Paste ölçekleri ve düğme durum kurallarının çevrimdışı HTML yorumu; yerel çalışma zamanı veya mesajlaşma hizmeti değildir. · Uygulama başvurusu
02
Twilio Paste Tasarım Sistemi Tasarım Referansı
Twilio'nun twilio-labs deposundaki doğrulanmış üst kaynak. Aşağıdaki değerlerde YAML belirteç adları ile JavaScript tarzı adlar birbirinden ayrılmıştır. Bu referans, bağımsız Paste DSys çatallanmasını Twilio belgeleri olarak sunmaz.
Twilio Paste Tasarım Sistemi Belge çatallanmasını ana sistemle karıştırmadan, üst kaynağın sistemini kullanın
Twilio kaynağı ve bağımsız devamı
Paste, twilio-labs deposunda yayımlanır. Doğrulama sırasında eski paste.twilio.design belge rotaları bu depoya yönlendirildi. Ayrı olarak barındırılan Paste DSys sitesi, kendisini Twilio ile bağlantısı olmayan bağımsız bir çatallanma olarak tanımlar. Bu nedenle bu kılavuz, belirteç değerlerini ve bileşen davranışlarını üst kaynak dosyalarına dayandırır.
Bildirim oluşturucu; düzenlenebilir içerik, inceleme onayı, hazırlanmış bir anlık görüntü ve gönderim öncesindeki net sınır gibi statik düğme galerilerinde gösterilemeyen çeşitli durumları ortaya çıkardığı için yararlı bir örnektir. Bu önizleme hiçbir Twilio API hizmetini çağırmaz.
Twilio Paste Tasarım Sistemi Bir sonek seçmeden önce boşluk ölçeğini okuyun
Belirteç numaraları piksel değerleri değil, adlardır
space30 yarım rem, space70 ise bir buçuk rem'dir. 30 ve 70 sonekleri ölçekteki konumları belirtir; 30px ve 70px anlamına gelmez. Kök boyut 16px olduğunda oluşturucu, etiket ile alan arasında 8px, bir denetimin içinde 12px ve bölgeler arasında 24px kullanabilir.
YAML kaynağında tirelerle ayrılmış adlar kullanılır. Referans tablosunda Paste kullanıcılarının kullandığı JavaScript biçimindeki adlar gösterilir ve çözümlenmiş değerler yanlarında verilir. rem tabanlı bir değer kök yazı tipi boyutuna göre ölçeklenir; piksel karşılığı koşulsuz bir tarayıcı ölçümü olarak değerlendirilmemelidir.
Twilio Paste Tasarım Sistemi Yazı tipi boyutlarını ayrı satır yüksekliği belirteçleriyle eşleştirin
Ölçek, sayısal değerlerin aynı olmasını gerektirmez
Yazı tipi boyutu ve satır yüksekliği takma adları birbirinden ayrıdır. fontSize30 varsayılan kök boyutunda 14px, lineHeight30 ise 20px değerindedir. fontSize70, 32px satır yüksekliği seçeneğiyle birlikte 24px değerindedir. Bu eşleştirmeler, her bölümü büyük bir pazarlama başlığına dönüştürmeden etiketlerin ve çok satırlı içeriğin okunabilir olmasını sağlar.
Gömülü örnekte sistem sans-serif yazı tipi yığını ve uygulama tarafından sağlanan bir telefon illüstrasyonu kullanılır. Bu seçimlerin yalnızca örnek niteliğinde olduğu açıkça belirtilmiştir. Tescilli bir yazı tipi dosyası yeniden dağıtılmaz ve telefon çerçevesinin boyutları Paste belirteçleri olarak sunulmaz.
Twilio Paste Tasarım Sistemi Anlamsal metin rolleri kontrast kısıtlarını içerir
Soluk metin, devre dışı metinle aynı şey değildir
Üst kaynak renk eşleşmelerini rollerle birlikte kaydeder. Ana metin, ikincil metin, hata ve başarı mesajları için amaçlanan ön plan rolleri farklıdır. Soluk metin rolüne, etkin denetimlerde kullanılmaması gerektiğine dair bir uyarı eklenmiştir. Soluk bir karakter sayacı için mevcut en açık gri tonu gelişigüzel kullanmayın.
Örnekte mavi, eylemi belirtirken mesajı koyu nötr metin taşır. Hazırlanan taslak, kullanıcı bir düğmeye bastı diye yeşile dönmez; durumu yerel bir anlık görüntünün oluşturulduğunu açıklar. Örnek değerler bağlantı verilen palete bağlıdır; diğer tema varyantları farklı değerlere çözümlenebilir.
Twilio Paste Tasarım Sistemi Tema seçimi açık bir durum değişikliğidir
Sağlayıcı varyantları ve uygulama yüzeyleri
Theme; bir Provider ve Consumer'ın yanı sıra adlandırılmış tema nesneleri ile yardımcı araçları dışa aktarır. Geçerli varyant sabitleri default, dark, twilio, twilio-dark, sendgrid ve evergreen değerlerini içerir. Örnek, özellikle yalnızca default ve dark arasında geçiş yapar.
Sağlayıcı değiştiğinde uygulamaya ait yerel denetimlere uygun bir yüzey stili uygulanmalıdır. Sağlayıcı, Paste bileşenlerine tema uygulayabilir; ancak harici her bileşeni kendiliğinden yeniden biçimlendirmez. Sağlanan kod çevreleyen ön plan ve arka plan renklerini açıkça ayarlar ve metin alanının uygulamaya ait olduğunu belirtir.
Twilio Paste tasarım sistemi Basılı durumunu yalnızca desteklenen bir düğme ailesinde kullanın
Eylem, gezinme ve bekleyen işlemlerin kuralları farklıdır
Button uygulaması belirli prop birleşimlerini doğrular. Tema geçişinde secondary ve pressed kullanılır. Form eyleminde type="submit" ayarlanır; çünkü bileşenin varsayılan türü button'dır. Bağlantı biçimindeki bir düğme href gerektirir ve devre dışı ya da yükleniyor durumundaki bir eylem olarak ele alınamaz.
Taslağı hazırlamak için primary, bağımsız tema geçişi için secondary kullanın.
Gezinmeyi bağlantı olarak tutun; karşılık gelen bağlantı biçimi olmadan düğmeye href eklemeyin.
loading değerini yalnızca gerçekten bekleyen bir işlem için kullanın; bu değer hem busy hem de disabled davranışını değiştirir.
Pozitif tabIndex değerlerinden kaçının; uygulama desteklenen değerleri 0 ve -1 ile sınırlar.
Twilio Paste Tasarım Sistemi Düzenlenebilir metni incelenmiş anlık görüntüden ayırın
Gerçeğe uygun bir akış
Canlı önizleme, geçerli metin alanı değerini izler. Hazırlanan kopya ayrı olarak saklanır ve yalnızca doğrulamadan sonra değişir. Yeniden düzenleme, daha önce hazırlanmış anlık görüntüyü sessizce değiştirmemelidir. İnceleme onay kutusu yerel bir etkileşim örneğidir; alıcı onayının veya yasal uygunluğun kanıtı değildir.
İçeriği etiketli metin alanına yazın.
Geçerli mesajı inceleyin ve yerel inceleme onay kutusunu işaretleyin.
Herhangi bir mesajlaşma hizmetini çağırmadan anlık görüntü hazırlayın.
Yeniden düzenleyin ve yeni bir anlık görüntü hazırlamadan önce taslağı hazırlanmış kopyayla karşılaştırın.
Twilio Paste Tasarım Sistemi Geri bildirimi telefon maketini yorumlamaya gerek kalmadan anlaşılır kılın
Etiketler ve metin geri bildirimi illüstrasyonun dışında kalır
Metin alanının görünür bir etiketi vardır ve sayaç ile hata açıklamalarına bağlantı verir. Sayaç Unicode kod noktalarına göre tanımlanmıştır; SMS segmentlerini, kodlamayı veya maliyeti ölçtüğünü iddia etmez. Hazırlanan sonuç da örnek cihazın dışında, sıradan metin olarak görünür.
Doğrulama, boş mesajı veya eksik inceleme onayını belirtmelidir. Durum bölgesi, mesajın teslim edildiği izlenimini vermeden yerel sonucu duyurur. Dar görünüm alanı dâhil tüm yerel denetimlerde ve düğmelerde klavye odağı görünür kalır.
Twilio Paste Tasarım Sistemi Paketi çevrimdışı yorumlamadan ayrı olarak doğrulayın
Sağlanan örneğin gösterdikleri
Kurulum, gerçek Paste Theme ve Button paketlerini içe aktarır ve eksiksiz bir React bileşimi sunar. Yerel form denetimlerinin uygulamaya ait olduğu belirtilir; doğrulanmamış bir bileşene atfedilmez API. Gömülü sürüm, harici CDN'ye bağımlı olmayan çevrimdışı bir HTML yorumudur.
Bir hizmette kullanmadan önce eş bağımlılıkları çözümleyin, yerel örneği derleyin ve gönderim için gerçek bir arka uç sınırı ekleyin. Başarılı bir yerel önizleme testi, düzenleyici davranışını doğrular; üretim ortamında mesajlaşma entegrasyonunu veya Twilio üzerinden teslimat iddiasını doğrulamaz.
Belgenin tamamını index.html olarak kaydedip tarayıcıda açın. Üst kaynak Paste ölçeklerinin ve düğme durumu kurallarının çevrimdışı HTML yorumu; yerel çalışma zamanı veya mesajlaşma hizmeti değildir.
html
<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Paste notification draft studio</title><style>
*{box-sizing:border-box}body{margin:0;background:#f4f4f6;color:#121c2d;font:14px/20px Arial,sans-serif}header{background:#121c2d;color:white;padding:20px 32px;display:flex;justify-content:space-between;gap:16px}.brand{font-weight:700;letter-spacing:.02em}header small{color:#cacdd8}main{max-width:1000px;padding:32px;margin:auto}h1{font-size:28px;line-height:40px;margin:0 0 8px}h2{font-size:18px;line-height:28px;margin:0 0 16px}.intro{color:#606b85;margin:0 0 32px}.layout{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:32px}form{background:white;border:1px solid #e1e3ea;border-radius:8px;padding:24px}label{display:block;font-weight:600}textarea{width:100%;font:16px/24px Arial,sans-serif;border:1px solid #8891aa;border-radius:4px;padding:12px;margin-top:8px;resize:vertical;min-height:150px}textarea:focus,button:focus-visible,input:focus-visible{outline:3px solid #0263e0;outline-offset:3px}.count{color:#606b85;font-size:12px;line-height:20px}.review{display:flex;align-items:start;gap:8px;margin-top:24px}.review label{font-weight:400}.review input{width:16px;height:16px;accent-color:#0263e0}button{font:600 14px/20px Arial,sans-serif;cursor:pointer;border:1px solid #0263e0;border-radius:4px;padding:10px 16px;background:#0263e0;color:white}button:hover{background:#043cb5}button.secondary{background:white;color:#0263e0}.error{color:#ad1111;min-height:20px}aside{text-align:center}.phone{margin:auto;background:white;border:8px solid #121c2d;border-radius:32px;min-height:400px;padding:24px 12px;box-shadow:0 12px 32px #121c2d14}.notch{width:72px;height:5px;background:#121c2d;border-radius:8px;margin:0 auto 24px}.sender{font-size:12px;color:#606b85;padding-bottom:16px;border-bottom:1px solid #e1e3ea}.bubble{background:#ebf4ff;border-radius:12px;padding:12px;margin-top:24px;text-align:left;white-space:pre-wrap;overflow-wrap:anywhere;min-height:70px}.caption{font-size:12px;color:#606b85}.prepared{padding:24px;background:#fff;border:1px solid #e1e3ea;border-radius:8px;margin-top:24px}.prepared p{white-space:pre-wrap;overflow-wrap:anywhere}.status{color:#606b85;font-size:12px}.foot{font-size:12px;color:#606b85;margin-top:24px}@media(max-width:650px){header{padding:16px}main{padding:24px 16px}.layout{grid-template-columns:1fr}.phone{max-width:250px;min-height:300px}form{padding:20px}.intro{margin-bottom:24px}}
</style><header><span class="brand">Paste / Message studio</span><small>Local preview</small></header><main><h1>Notification draft</h1><p class="intro">Write the message. Review the copy. Keep a prepared version.</p><div class="layout"><div><form id="composer" novalidate><h2>Compose your message</h2><label for="message">Message</label><textarea id="message" aria-describedby="count error">Your appointment is confirmed for Thursday at 10:00.</textarea><p id="count" class="count"></p><div class="review"><input id="reviewed" type="checkbox"><label for="reviewed">I reviewed this draft</label></div><p id="error" class="error" role="alert"></p><button>Prepare local draft</button></form><section class="prepared"><h2>Prepared copy</h2><p id="snapshot">No draft prepared yet.</p><p class="status" id="status" role="status">Nothing has been sent.</p></section></div><aside><div class="phone" aria-label="Illustrative phone preview"><div class="notch"></div><div class="sender">Sample service · Preview</div><div class="bubble" id="bubble"></div></div><p class="caption">Live preview of the editable message</p></aside></div><p class="foot">HTML interpretation of upstream Paste · Counts Unicode code points, not SMS segments · No messaging connection</p></main><script>
const $=id=>document.getElementById(id);function update(){$('bubble').textContent=$('message').value||'Your message will appear here.';$('count').textContent=Array.from($('message').value).length+' Unicode code points. Not an SMS segment estimate.'}$('message').oninput=()=>{update();$('reviewed').checked=false};$('composer').onsubmit=e=>{e.preventDefault();$('error').textContent='';$('message').removeAttribute('aria-invalid');if(!$('message').value.trim()){$('error').textContent='Write a message before preparing a draft.';$('message').setAttribute('aria-invalid','true');$('message').focus();return}if(!$('reviewed').checked){$('error').textContent='Confirm that you reviewed the message.';$('reviewed').focus();return}$('snapshot').textContent=$('message').value.trim();$('status').textContent='Draft prepared locally. Nothing was sent.'};update();
</script></html>
Telefon panelinde taslak anlık görüntüsü gösterilir. SMS gönderilmez; yerel Paste Theme ve Button davranışları için ayrı React örneğine bakın.
Gerçek Paste teması ve düğme durumunu kullanan yerel bir taslak
Theme.Provider, bestecinin tamamını sarar. Secondary pressed durumu önizleme temasını değiştirir; birincil gönderim düğmesi, uygulama doğrulamasından sonra anlık görüntü hazırlar. Etiketler, metin alanı ve onay kutusu açıkça uygulamanın yerel denetimleri olarak belirtilmiştir.
jsx
// npm install @twilio-paste/button @twilio-paste/theme react react-dom
import React, {useState} from 'react';
import {createRoot} from 'react-dom/client';
import {Theme} from '@twilio-paste/theme';
import {Button} from '@twilio-paste/button';
// Native textarea and labels are application-owned; this is not Paste TextArea.
function Composer() {
const [message,setMessage] = useState('Your appointment is confirmed for Thursday at 10:00.');
const [snapshot,setSnapshot] = useState('');
const [error,setError] = useState('');
const [confirmed,setConfirmed] = useState(false);
const [mode,setMode] = useState('default');
const length = Array.from(message).length;
const background = mode === 'dark' ? '#121c2d' : '#ffffff';
const foreground = mode === 'dark' ? '#ffffff' : '#121c2d';
function prepare(event) {
event.preventDefault();
if (!message.trim()) return setError('Write a message before preparing a draft.');
if (!confirmed) return setError('Confirm that you reviewed the message.');
setError(''); setSnapshot(message.trim());
}
return <Theme.Provider theme={mode}>
<main style={{padding:24,background,color:foreground,maxWidth:760,margin:'auto'}}>
<h1>Notification draft</h1>
<Button variant="secondary" pressed={mode==='dark'} onClick={() => setMode(mode==='dark'?'default':'dark')}>Dark preview</Button>
<form onSubmit={prepare}>
<label htmlFor="message" style={{display:'block',marginTop:24}}>Message</label>
<textarea id="message" rows={5} value={message} onChange={e=>{setMessage(e.target.value);setConfirmed(false);}}
aria-describedby="count error" aria-invalid={!!error}
style={{width:'100%',padding:12,margin:'8px 0',font:'inherit',borderRadius:4}} />
<p id="count">{length} Unicode code points. This is not an SMS segment estimate.</p>
<label><input type="checkbox" checked={confirmed} onChange={e=>setConfirmed(e.target.checked)} /> I reviewed this draft</label>
<p id="error" role="alert">{error}</p>
<Button variant="primary" type="submit">Prepare local draft</Button>
</form>
<section aria-label="Prepared draft" style={{marginTop:24}}>
<h2>Prepared copy</h2>
<p style={{whiteSpace:'pre-wrap'}}>{snapshot || 'No draft prepared yet.'}</p>
<p role="status">{snapshot ? 'Draft prepared locally. Nothing was sent.' : ''}</p>
</section>
</main>
</Theme.Provider>;
}
createRoot(document.getElementById('root')).render(<Composer />);
Paste Theme.Provider ve Button kullanarak bir bildirim taslağı düzenleyicisi oluşturun. İkincil basılı durum geçişi anlambilimini, rem aralıklarını, kaynağa dayalı metin rollerini ve ayrı taslak/anlık görüntü durumlarını koruyun. SMS segment sayısı veya teslimat sonucu uydurmayın.
05
Twilio Paste Tasarım Sistemi Kaynaklar ve Kapsam
Üst kaynak Paste'e bağımsız bir OpenDesign referansı. Paste DSys ayrı ve bağlantısız bir çataldır. Bu örnekte hiçbir mesaj gönderilmez.
