Bileşen kataloğu
Otuz altı blok, her birinin ne işe yaradığı ve hangi sayfada açıklandığı.
Bir asistan mesajı, sıralı bir blok dizisidir. Her blok bir type, 1 ila 300 karakter uzunluğunda zorunlu bir fallback_text ve tiplendirilmiş props taşır.
Katalog otuz altı tip içerir. Bunlardan otuz beşini model render_ui aracı üzerinden üretebilir; confirm_card bir istisnadır, bir halüsinasyonun kullanıcının neyi onayladığını yanlış aktaramaması için aksiyon manifestonuzdan sunucularımız sentezler.
Her iki SDK da otuz altısının tamamını yerel olarak render eder. Her bloğun sayfası onu ilk çizen sürümü belirtir ve bir bloğu bildirmeyen bir derlemeye bu blok asla sunulmaz.
Her blok
SDK'nın çizdiği her blok tek bir sayfada. Yönetim panelinin başlangıç paletlerinden bir tema seçin. Kendine ait düzenleri olan bir blok (ürünler, sipariş takipçisi), referans sayfasını açan adının altında bu düzenleri barındırır.
Yanıtla
Yalnızca yanıt vermesi gereken bloklar.
Order 1042 left the Rotterdam depot this morning and is out for delivery. The courier gives a 14:00 to 18:00 window.
- Size 43 in stockReady to ship from Rotterdam today.
- Free deliveryAt your door on Thursday, no minimum.
- 30-day returnsEven after a run or two.
curl -H 'X-Rendel-Key: rd_pk_test_…' \
https://api.rendel.ai/healthSeçin
Kullanıcının tek bir kelime bile yazmadan üzerinde aksiyon alabileceği seçenekler.
Aksiyon al
Kullanıcının kesinleştirdiği yer: yazılan girdi ve sunucularımızın oluşturduğu onay.
Bildir
Sayılar, para tutarları ve durum; bir bakışta okunacak şekilde yerleştirilmiştir.
- Ordered22 Aug, 09:14
- Packed in Rotterdam23 Aug, 17:02
- Out for delivery26 Aug, 07:40
- Delivered
Bir bakışta
| Bileşen | Ne işe yarar |
|---|---|
text | Düz metin ve akış halinde gelen tek blok. |
info_card | İkon, başlık, gövde ve isteğe bağlı bir aksiyon. |
media_gallery | Bir görsel ızgarası veya karusel. |
article_card | Kaynağı belirtilmiş şekilde getirilen bir pasaj. |
status_banner | Bir başarı, bilgi, uyarı veya hata bildirimi. |
section | Bir yanıt sayfasında, kendisinden sonraki bloklar için bir başlık. |
key_points | Her biri bir ikon, bir başlık ve bir satırdan oluşan birkaç madde: bir seçimin arkasındaki nedenler. |
tags | Bir şeyi bir bakışta niteleyen birkaç kelime. |
disclosure | Başlıkların altına katlanmış ikincil detaylar: SSS, koşullar, teknik notlar. |
place_card | Kullanıcının gidebileceği bir yer: şu an açık mı, ne kadar uzaklıkta ve yol tarifi. |
map | Harita üzerindeki yerler: yakındaki mağazalar, bir rota, kuryenin nerede olduğu. |
pass | Son kullanıcının gösterdiği bir şey: bilet, biniş kartı, teslim alma kodu, kupon. |
code | Kod, bir komut veya log satırları; sabit aralıklı yazı tipi ve kopyalama butonu ile. |
quick_replies | En fazla altı öneri çipi. Her dokunma bir yanıt gönderir. |
item_list | Küçük resim ve sağ kenar değeri içeren dokunulabilir satırlar. |
product_cards | Tek bir ürün kartı veya bunlardan oluşan bir şerit. |
datetime_slots | Güne göre gruplanmış, dokunulabilir müsaitlikler. |
variant_picker | Beden, renk veya kapasite gibi özelliklerle ayrışan bir kümeden tek bir seçim. |
choice | Kullanıcının dokunarak yanıtladığı bir soru: tek bir seçim veya birden fazla. |
comparison | Aynı satırlarda, yan yana okunan iki ila dört öge. |
form | Tipli alanlar ve tek bir gönderim, form gönderimi olarak döndürülür. |
booking_card | Bir rezervasyon özeti: ne, ne zaman, nerede, referans numarası. |
actions | Ekrandaki ögeyle ilgili ne yapılacağına dair bir veya iki buton. |
screens | Kaydettiğiniz rotalar üzerinden yanıttan açılacak uygulama ekranlarınız. |
contact | Listelediğiniz kanallarla şirketinizdeki bir kişiye nasıl ulaşılacağı. |
rating | Uygulamanızın bir şeyin nasıl gittiğine dair kendi sorusu, tek bir dokunuşla yanıtlanır. |
checklist | Kullanıcının kendi işaretlediği adımlar. |
confirm_card | Yazma veya yıkıcı bir aksiyon için sunucunun oluşturduğu onay. |
stat_group | İsteğe bağlı değişimlerle en fazla altı KPI. |
chart | Çizgi, alan, çubuk, yatay çubuk, yığılmış çubuk veya halka; en fazla üç seri. |
table | Altı adede kadar sütun ve yirmi satır; ilk sütun sabittir. |
order_tracker | Tamamlanan, mevcut ve beklemede durumlarını içeren bir adım zaman çizelgesi. |
receipt | Kalemler, ara toplam, vergi ve toplam. |
key_value | Etiket ve değer satırları: tek bir şeye dair olgular. |
progress | Oranın asıl yanıt olduğu durumlarda bir limite karşı değer. |
timeline | Zaman sırasına göre planlanmış maddeler: bir ajanda, bir seyahat programı, bir takvim. |
Actions
Etkileşimli proplar kapalı bir birleşim (closed union) taşır ve SDK bunun dışındaki hiçbir şeyi yürütmez. Her SDK yürüttüğü türleri bildirir ve başka bir tür taşıyan bir blok, hiçbir şey yapmayan bir buton yerine kendi fallback_text değeri olarak çizilir.
| Tür | Ne yapar | İtibaren |
|---|---|---|
reply | Metnini kullanıcı yazmış gibi gönderir. | tüm derlemeler |
open_url | Uygulama içi tarayıcıda açılır veya tanımladığınızda RendelConfig.onOpenUrl callback'inize iletilir. Yalnızca https. external: true ile işletim sisteminin harita uygulamasında açılır. Buna yalnızca Apple Maps ve Google Maps bağlantıları için izin verilir (maps.apple.com, maps.google.com, google.com/maps); başka bir harici bağlantı taşıyan blok fallback_text olarak çizilir. | tüm derlemeler |
navigate | registerRoute ile kaydettiğiniz bir rota üzerinden uygulamanızın bir ekranını açar ve Rendel'i bir baloncuk haline küçültür. Bkz. screens. | Flutter 0.38 · Web 0.15 |
call | Numara girilmiş şekilde arama ekranını açar; aramayı başlatmak kullanıcıya kalmıştır. | Flutter 0.40 · Web 0.17 |
copy | Bir değeri panoya kopyalar. | Flutter 0.40 · Web 0.17 |
add_to_calendar | Cihazın kendi etkinlik düzenleyicisini doldurulmuş olarak açar; kullanıcı etkinliği kaydeder. | Flutter 0.40 · Web 0.17 |
confirm / cancel | Yalnızca confirm_card üzerinde geçerlidir, model çıktısında asla yer almaz. | |
app_action | Blok proplarında geçerli değildir: uygulamanızın bir aksiyonu yalnızca, sunucunun bir yazma işleminin önüne bir onay koyabildiği araç arayüzü üzerinden çalışır. |
Bir navigate aksiyonunun rotasını ve parametrelerini, bir call aksiyonunun numarasını, kopyalanan bir değeri ve bir takvim etkinliğinin saatlerini blok ayrılmadan önce sunucu kontrol eder: her birinin uygulamanızdan gelmesi gerekir — kaydettiğiniz bir rota, sohbette aksiyonlarınızdan birinin döndürdüğü bir alan veya (kopyalama için) aynı bloğun gösterdiği bir değer. Başarısız olan bir blok, kendi fallback_text değeri olarak çizilir. Aynı kural, kullanıcının dış dünyada işlem yaptığı durumları da kapsar. Bir place_card bileşeninin adresi, telefonu ve koordinatları, bir map bileşeninin pinleri ve bir pass bileşeninin kodu ile cüzdan bağlantıları aksiyonlarınızın sonuçlarından gelmelidir. Bir contact bloğundaki her kanal, yönetim panelinizin İletişim kanallarından biri olmalıdır (Settings → Handoff & files → Contact channels).
Sürüm güvenliği
SDK her istekte çizebileceği bileşenleri ve yürütebileceği aksiyon türlerini bildirir. Sunucu modele yalnızca bu kesişimi sunar: bir derlemeye bildirmediği bir bileşen asla gönderilmez ve derlemenin yürütemeyeceği bir dokunma türü taşıyan blok, fallback_text olarak çizilir. Sunucunun tanımadığı bir bileşen adı reddedilmek yerine yok sayılır; böylece daha eski bir sunucuyla konuşan daha yeni bir SDK yalnızca o bloğu kaybeder, başka hiçbir şeyi değil. Bilinmeyen tipler kendi fallback_text değerlerini render eder.
1.0 öncesinde bir prop yerinde değişebilir ve değişiklik günlüğü her seferini Breaking olarak işaretler: plan_comparison Flutter 0.36.0 / Web 0.13.0 sürümünde katalogdan kaldırıldı ve slot ile seçenek actionları 0.37.0 / 0.14.0 sürümünde yerini kimliğe göre seçime bıraktı. Mevcut bir proptaki yeni bir değer (bir grafik türü, bir form alanı türü) daha eski bir derlemeye yine de ulaşır ve bu derleme en yakın yedeğini çizer; bu nedenle onu çizen sürüm için bloğun sayfasını kontrol edin. El sıkışma, bileşen başına bir sürümü zaten kabul eder ("form@2"; yalın bir ad sürüm 1'dir). Henüz hiçbir bloğun sürüm 2'si yoktur; sonraki kırıcı değişiklikler derleme bazında bu şekilde sınırlandırılacaktır.
Bir renderer'ı değiştirme
Yalnızca Flutter; web SDK kataloğu olduğu gibi çizer.
ComponentRegistry.register(type, builder), bir katalog tipi için kullanılan widget'ı değiştirir; böylece product_cards bileşenini kendi kartınızla çizebilir ve geri kalanını olduğu gibi bırakabilirsiniz. İlk Rendel.open çağrısından önce kaydedin.
ComponentRegistry.register('product_cards', (context, block, dispatch) {
return MyProductRail(props: block.props, onTap: dispatch.onAction);
});Kullanıcıdan seçim yapmasını isteyen bir bloğun alternatifi, onAction yerine dispatch.onSelect (variant_picker, datetime_slots) veya dispatch.onChoose (choice) çağırır; bir form dispatch.onSubmitForm ve bir derecelendirme ise dispatch.onRate çağırır.
SDK, yerleşik bileşenlerin oluşturulduğu temel yapı taşlarını (RendelPressable, RendelActionButton, RendelChip, RendelControlShell, RendelOverline, RendelSwap, RendelPulse) dışa aktarır; böylece yerine geçen bileşen, standart Material gibi olmak yerine kataloğun geri kalanı gibi basılır, kapsar ve nefes alır.
El sıkışma yalnızca katalog tiplerini bildirir; bu nedenle katalogda yer almayan bir tipi kaydetmek modele yeni bir bileşen sunmaz. Ana uygulama tanımlı bileşen tipleri sonraki bir sürümde sunulacaktır.
Önizlemeler hakkında
Bu sayfalardaki blok görselleri ekran görüntüsü değil, yeniden render edilmiş halleridir. Renderer'ın kendi ölçeklerinden oluşturulmuşlardır: Theming altında belgelenen RendelTypeScale, RendelSpaceScale ve RendelRadiusScale varsayılanları, bir değer göstergesi için bir alan ve bir soru için bir kenarlık ve yalnızca etkileşime geçebileceğiniz unsurlarda vurgu rengi.
Karşılaştığınızda bir widget'ı tanıyabilirsiniz, ancak bunlar tarayıcıda çizilir ve gerçek bir cihazdaki gerçek halini size gösteremez.
Bunun için Neon Kicks örnek uygulamasındaki bileşen galerisini çalıştırın: her bloğu gerçekçi örnek verilerle gerçek kayıt defteri üzerinden render eder ve açık ile koyu token haritaları arasında bir geçiş düğmesine sahiptir.
cd sdk/flutter/rendel/example && flutter run