Backbase’in Angular modülleri, anlamsal tema dışa aktarımı ve açıkça tanımlanmış inceleme durumlarıyla markalı bir bankacılık inceleme akışı oluşturun. Web API’lerini, ayrı olarak belgelenmiş yerel boyutlarla karşılaştırın.
Yayımlanmış varsayılan düğme renklerini kullanan bağımsız, duyarlı HTML yorumu; uygulamaya özgü form ve düzen. Backbase Angular çalışma zamanı değildir. · Uygulama başvurusu
02
Backbase tasarım sistemi Tasarım Referansı
Backbase’in herkese açık en güncel belgeleri. Web kodu @backbase/ui-ang hedeflidir; yerel değerler açıkça ayrı tutulmuştur ve Angular CSS değişkenleri olarak değerlendirilmemelidir. Özel müşteri temaları varsayılanların yerine geçebilir.
Backbase tasarım sistemi Müşteri markalamasına sahip bir bankacılık sistemi
Tek tek düğmeleri değil, kullanıcı yolculuğunu temalandırın
Backbase Visualizer, desteklenen marka temel öğelerini sunar ve web, iOS ve Android için tema dışa aktarır. Müşteriler başlık ve gövde yazı tipi ailelerini değiştirebilir, markalamayı bileşen ve kullanıcı yolculuğu stillerine yansıtabilir.
Bu örnek, kurum içi bir hesaptan hesaba inceleme akışıdır. Hesap tanımlayıcıları ve tutarlar kurgusaldır. Görsel yapı, bir tıklamayla paranın aktarıldığı izlenimini vermek yerine düzenlenebilir taslak alanlarıyla son yerel incelemeyi özellikle birbirinden ayırır.
Backbase tasarım sistemi Müşteri temaları her platformda doğru şekilde uygulanmalıdır
Visualizer dışa aktarımı, yalnızca bir marka onaltılık renk kodundan ibaret değildir
Visualizer; web, iOS ve Android için ayrı çıktılar üretir. Web için dışa aktarılan varsayılan dizinde Sass tasarım belirteçleri, logos dizininde ise marka varlıkları bulunur. Bu web çıktısını yerel JSON boyutlarını Angular geçersiz kılmalarına kopyalamak yerine proje stil sayfası üzerinden uygulayın.
Web teması yönergeleri, hem küçük hem büyük boyutlarda açık ve koyu logolar gerektirir. Yazı tipi dosyaları ayrıca sağlanır ve @font-face aile adları, dışa aktarılan font-family yapılandırmasıyla eşleşmelidir. Böylece bankacılık akışındaki başlıklar, denetimler ve markalama aynı müşteri temasıyla uyumlu kalır.
İnceleme örneği, bilinçli olarak uygulamanın yönettiği bir taslakta sona erer: hedef veya tutar değiştirildiğinde önceki sonuç temizlenir. Bu davranış tema dışa aktarımından ayrıdır; ödeme gerçekleştirildiği veya bankaya özgü bir doğrulama politikası bulunduğu anlamına gelmez.
Backbase tasarım sistemi Dışa aktarılan anlamsal temayı izleyin
Platform değerlerini kendi bağlamlarında tutun
Referans tablosunda varsayılan düğme renkleri ile ayrı bir UIKit boyutları grubu yer alır. Yerel bir theme.height.button.md değeri, Angular uygulamasına kopyalanacak bir CSS değişkeni değildir. Web uygulamaları dışa aktarılan stilleri veya yüklenmiş SCSS'i kullanmalıdır.
Önizlemede belgelenen varsayılan birincil mavi ve ikincil renk tonu kullanılır. Genel panel iç boşluğu, özet görseli ve duyarlı iki sütunlu düzen uygulamaya özgü tercihlerdir ve resmî belirteçlerden açıkça ayrılmıştır.
Backbase tasarım sistemi Seçilen marka yazı tiplerini yükleyin
Aile adı, yazı tipi dosyasının yerini tutmaz
Web teması kılavuzuna göre yazı tipi dosyaları ayrıca sağlanmalıdır. @font-face ailesi, dışa aktarılan $font-family yapılandırmasıyla aynı olmalıdır. Belgelerdeki örnek yazı tipi, genel Backbase yazı tipi olarak zorunlu değildir.
Tema rem birimlerini kullanır ve en uygun kök boyutunun 16 px olduğunu, 32 px'e kadar desteği belgeler. İncelemenin tamamını büyütülmüş metin boyutlarında test edin. Bağımsız tarayıcı yorumumuz sistem yazı tiplerini kullanır ve müşteri yazı tipleri kullanılabiliyormuş izlenimi vermez.
Backbase tasarım sistemi Mod başlığını ve düğme çubuğunu oluşturun
Gerçek eylemleri bağlama uygun bir başlığa yerleştirin
ModeHeaderModule, isteğe bağlı ikinci satır ve kapatma denetimiyle bağlama uygun bir başlık sağlar. Örnekte showCloseButton false olarak ayarlanmıştır; çünkü bu örneğin kapatılabileceği harici bir rotası yoktur. Sıfırlama düğmesi, mode-header-utility-area yansıtma alanını kullanır.
ButtonModule, yerel bir düğmeyi bbButton aracılığıyla geliştirir. color değerini belgelenmiş bir role ayarlayın ve buttonSize için sm veya md kullanın. Dairesel düğme yalnızca simge içeren denetimler içindir; metinli inceleme eylemi için uygun değildir.
Tek yerel inceleme eylemi için primary kullanın.
Geri alınabilir sıfırlama eylemi için secondary kullanın.
Hesap adlarını ve tutarları süslü düğme etiketleri yerine açıklama listesinde gösterin.
Backbase tasarım sistemi Dar ekranlarda da okunabilir kalan bir özet
Okuma sırasını koruyun
Özgün çizimde, yön belirten bir yolla birbirine bağlanan iki hesap yüzeyi gösterilir. İkinci bir eyleme dönüşmeden transfer ilişkisini destekler. Küçük ekranlarda dekoratif hesap diyagramı gizlenirken hesap metinlerinin tamamı görünür kalır.
Düzenleyici, DOM sıralamasında inceleme çıktısından önce gelir. Yerel etiketler, alan hataları ve durum bölgesi klavye ve ekran okuyucu kullanıcılarının erişimine açıktır. Tutarı veya hedefi anlamak için yalnızca üzerine gelindiğinde görünen ayrıntılara ihtiyaç duyulmaz.
Backbase tasarım sistemi Yetkilendirilmiş Angular ortamını bağlayın
Stilleri ve modülleri birlikte yükleyin
Resmî web kurulumu, depoya erişim ve genel Backbase SCSS'inin ayrıca içe aktarılmasını gerektirir. Yalnızca ButtonModule'ü içe aktarmak görsel ortamın tamamını sağlamaz. Paket ve stiller yapılandırıldıktan sonra bağımsız örnek mevcut bir Angular uygulamasına eklenebilir.
Yetkilendirilmiş repo.backbase.com hesabınızı ve seçilen sürümün gerektirdiği Angular/Node eşleşmesini kullanın.
@backbase/ui-ang paketini yükleyin ve genel SCSS'ini angular.json içinde zaten yapılandırılmış stil sayfasına ekleyin.
Tüketen bileşene ButtonModule ile ModeHeaderModule'ü içe aktarın, ardından örneğin tamamını ekleyip sıfırlama/inceleme akışını doğrulayın.
Belgenin tamamını index.html olarak kaydedip tarayıcıda açın. Yayımlanmış varsayılan düğme renklerini kullanan bağımsız duyarlı HTML yorumu; uygulamaya özgü form ve düzen. Backbase Angular çalışma zamanı değildir.
html
<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Transfer review</title><style>*{box-sizing:border-box}body{margin:0;color:#172b4d;background:#f3f5fa;font:16px/1.5 system-ui}header{background:white;border-bottom:1px solid #dce2ee;padding:24px 5%;display:flex;justify-content:space-between;gap:20px;align-items:center}h1{font-size:28px;margin:0}small{color:#566781}button{border:0;border-radius:99px;background:#295eff;color:white;min-height:44px;padding:10px 24px;font:600 15px system-ui;cursor:pointer}button:hover{background:#2049c6}button:active{background:#152f80}.secondary{background:white;border:1px solid #295eff;color:#295eff}.secondary:hover{background:#dee2ff}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #152f80;outline-offset:3px}main{display:grid;grid-template-columns:1.15fr 1fr;gap:40px;padding:36px 5%}.panel{background:white;border:1px solid #dce2ee;border-radius:16px;padding:28px}h2{font-size:20px;margin:0 0 20px}label{display:block;font-weight:600;font-size:14px;margin:20px 0 8px}input,select{width:100%;min-height:48px;border:1px solid #8090aa;border-radius:8px;padding:10px 12px;color:inherit;font:16px system-ui;background:white}p{font-size:14px;color:#566781}.from{padding:16px;background:#f3f5fa;border-radius:8px;font-size:14px}.from strong{display:block;font-size:17px}.review{width:100%;margin-top:18px}#error{color:#bf2310;margin:8px 0;min-height:21px}#result{padding:18px;border-left:4px solid #295eff;background:#edf2ff;margin-top:22px}#result:empty{display:none}svg{width:100%;max-height:200px}aside{padding:20px 10px}aside h2{font-size:24px;margin-top:24px}footer{padding:0 5% 22px;font-size:11px;color:#566781}@media(max-width:650px){header{align-items:flex-start;padding:20px;flex-wrap:wrap}h1{font-size:25px}main{grid-template-columns:1fr;padding:20px;gap:0}.panel{padding:20px}aside{padding:24px 0}svg{display:none}}</style><header><div><small>Accounts / Internal transfer</small><h1>Review your transfer</h1></div><button class="secondary" id="reset">Reset draft</button></header><main><section class="panel"><h2>Transfer details</h2><div class="from">From<strong>Everyday account · 2048</strong>Fictional account</div><form novalidate><label for="destination">To account</label><select id="destination"><option>Travel savings · 9012</option><option>Emergency savings · 3046</option></select><label for="amount">Amount in USD</label><input id="amount" value="120.00" inputmode="decimal" aria-describedby="error" autocomplete="off"><div id="error" role="alert"></div><button class="review" type="submit">Review details</button></form><div id="result" role="status"></div></section><aside><svg viewBox="0 0 360 190" aria-hidden="true"><rect x="10" y="15" width="205" height="120" rx="16" fill="#295eff"/><path d="M35 48H80M35 72H145" stroke="white" stroke-width="8" opacity=".7"/><rect x="143" y="76" width="205" height="110" rx="16" fill="#dee2ff" stroke="#295eff"/><path d="M168 106H213M168 130H278" stroke="#295eff" stroke-width="8"/><circle cx="254" cy="40" r="24" fill="white" stroke="#295eff"/><path d="M244 40H264M256 32L264 40L256 48" fill="none" stroke="#295eff" stroke-width="3"/></svg><h2>A clear check before<br>the next step.</h2><p>Review the destination and amount together. Editing either detail clears the previous review.</p><p><strong>Local demonstration.</strong> No account connection, balance check or payment submission takes place.</p></aside></main><footer>Independent Backbase interpretation · default button palette · system font fallback</footer><script>const form=document.querySelector('form'),amount=document.querySelector('#amount'),destination=document.querySelector('#destination'),error=document.querySelector('#error'),result=document.querySelector('#result');function clear(){result.textContent='';error.textContent='';amount.removeAttribute('aria-invalid')}form.oninput=clear;form.onchange=clear;form.onsubmit=e=>{e.preventDefault();clear();const s=amount.value.trim();if(!/^\d+(\.\d{1,2})?$/.test(s)||Number(s)<=0||!Number.isFinite(Number(s))){error.textContent='Enter a positive amount with up to two decimal places.';amount.setAttribute('aria-invalid','true');amount.focus();return}result.textContent='Reviewed locally: '+new Intl.NumberFormat('en-US',{style:'currency',currency:'USD'}).format(Number(s))+' to '+destination.value+'. No transfer submitted.'};document.querySelector('#reset').onclick=()=>{form.reset();clear()};</script></html>
Tutar ve hedef kurgusaldır. Bu HTML formunun bankacılık bağlantısı yoktur; Angular ModeHeader ve bbButton örneği için yetkilendirilmiş Backbase paket erişimi gerekir.
Mod başlığı ve yerel inceleme eylemi
İki gerçek Backbase modülünü, yansıtılan sıfırlama eylemini ve açık yerel durumu kullanan bağımsız bir Angular bileşeni.
typescript
// transfer-review.component.ts — in an authorized Backbase Angular application
import { Component } from '@angular/core';
import { ButtonModule } from '@backbase/ui-ang/button';
import { ModeHeaderModule } from '@backbase/ui-ang/mode-header';
@Component({
selector: 'app-transfer-review',
standalone: true,
imports: [ButtonModule, ModeHeaderModule],
template: `
<bb-mode-header-ui title="Review transfer" secondaryTitle="Local demonstration"
[showCloseButton]="false">
<button bbButton color="secondary" mode-header-utility-area
(click)="reviewed = false">Reset review</button>
</bb-mode-header-ui>
<dl><dt>From</dt><dd>Everyday account · 2048</dd>
<dt>To</dt><dd>Travel savings · 9012</dd>
<dt>Amount</dt><dd>USD 120.00</dd></dl>
<p>No money is moved by this example.</p>
<div class="bb-button-bar">
<button bbButton class="bb-button-bar__button" [disabled]="reviewed"
(click)="reviewed = true">Mark as reviewed</button>
</div>
<p role="status">{{ reviewed ? 'Reviewed locally. No transfer submitted.' : 'Check the account details.' }}</p>
`
})
export class TransferReviewComponent { reviewed = false; }
Yalnızca herkese açık npm erişimi değil, yüklenmiş Backbase paketi ve genel SCSS gerekir.
button[bbButton] yönergeyi sağlar. ModeHeaderModule ise bb-mode-header-ui öğesini sağlar.
İnceleme işareti ödeme işlemi başlatmaz. Gerçek bir transfer akışında gönderim, onaylanmış ayrı bir uygulama işlemi olmalıdır.
04
Backbase tasarım sistemi Yapay Zekâ Aracısı Kurulumu
Uygulamaya Başlangıç Noktası
Lisanslı projenizin gerektirdiği sürüm uyumluluğunu kullanın. angular.json dosyasının genel stil sayfasını içerdiğinden emin olun. Eski Angular 17 / ui-ang 11 kurulumlarında belgelenmiş bir esbuild kısıtlaması vardır; ui-ang 12 ve üzeri sürümler esbuild'i destekler. Bu kılavuz kayıt defteri kimlik bilgilerini sağlamaz.
bash / scss
# First obtain authorized npm access to repo.backbase.com.
# The linked installation guide specifies Node 20.11.1 and Angular 18+.
npm install --save @backbase/ui-ang
// At the top of the Angular application global styles.scss:
@import "@backbase/ui-ang/scss/main";
Projeniz İçin Bir İstem
Ajan İstemi
Gerçek ButtonModule ve ModeHeaderModule içe aktarımlarını kullanarak Backbase Angular transfer incelemesi oluşturun. Yetkilendirilmiş paket stillerini ve müşteri temasını yükleyin. Platforma özgü belirteçleri ayrı tutun. Uygulama verilerini doğrulayın, düzenlemelerde eski inceleme sonucunu temizleyin ve yerel bir örneği asla gönderilmiş bir ödeme gibi sunmayın.
05
Backbase tasarım sistemi Kaynaklar ve Kapsam
Backbase paketine erişmek için yetkilendirilmiş bir depo hesabı gerekir. Tarayıcı önizlemesi bağımsız bir HTML yorumudur; Backbase Angular değildir. Mavi paleti yayımlanmış varsayılan düğme renklerini izler; panel boşlukları ve çizim uygulamaya özgü tercihlerdir. Aşağıdaki yerel boyutlar platformlarına göre etiketlenmiştir.
