Создайте фирменный сценарий проверки банковской операции с модулями Backbase для Angular, семантическим экспортом темы и явно заданными состояниями проверки. Сравните веб-API с отдельно описанными размерами для нативных платформ.
Адаптивная независимая интерпретация HTML со стандартными опубликованными цветами кнопок; форма и макет разработаны для приложения. Это не среда выполнения Backbase для Angular. · Справочник по реализации
02
Справочник по дизайн-системе дизайн-система Backbase
Общедоступная документация Backbase, последняя версия. В веб-коде используется @backbase/ui-ang; нативные значения указаны отдельно, их нельзя считать переменными Angular CSS. Пользовательские темы клиентов могут заменять значения по умолчанию.
Дизайн-система Backbase — банковская система с фирменным оформлением клиента
Оформляйте весь пользовательский путь, а не отдельные кнопки
Visualizer от Backbase предоставляет поддерживаемый набор базовых элементов фирменного стиля и экспортирует тему для веба, iOS и Android. Клиент может менять шрифты заголовков и основного текста, распространяя фирменное оформление на стили компонентов и пользовательских сценариев.
В этом примере показана проверка внутреннего перевода между счетами. Идентификаторы счетов и суммы вымышлены. Визуальная структура намеренно отделяет редактируемые поля черновика от итоговой локальной проверки, не создавая впечатления, будто нажатие кнопки переместило деньги.
Темы клиентов дизайн-система Backbase необходимо корректно применять на каждой платформе
Экспорт Visualizer — это не просто шестнадцатеричный код фирменного цвета
Visualizer формирует отдельные выходные файлы для веба, iOS и Android. Для веба экспортируемая папка по умолчанию содержит токены дизайна Sass, а папка logos — фирменные материалы. Подключайте веб-выходные файлы через таблицу стилей проекта, а не копируйте размеры из нативного JSON в переопределения Angular.
Инструкции по темизации веба требуют светлые и тёмные логотипы в двух вариантах размера — малом и большом. Файлы шрифтов предоставляются отдельно; их имена семейств в @font-face должны совпадать с экспортированной конфигурацией font-family. Так заголовки, элементы управления и фирменное оформление банковского сценария будут соответствовать одной теме клиента.
В этом демонстрационном примере намеренно показан только черновик, принадлежащий приложению: при изменении получателя или суммы предыдущий результат сбрасывается. Это поведение не связано с экспортом темы и не означает, что выполняется платёж или применяется политика проверки конкретного банка.
Дизайн-система Backbase Следуйте экспортированной семантической теме
Храните значения платформ отдельно
В справочной таблице указаны цвета кнопок по умолчанию и отдельная группа размеров UIKit. Нативное значение theme.height.button.md — не переменная CSS, которую нужно вставлять в приложение Angular. В веб-реализациях следует использовать экспортированные стили или установленный SCSS.
В предварительном просмотре используются документированные основной синий цвет и дополнительный оттенок по умолчанию. Общие внутренние отступы панели, иллюстрация сводки и адаптивное расположение в две колонки — решения приложения, явно отделённые от официальных токенов.
Согласно руководству по темизации веба, файлы шрифтов предоставляются отдельно. Семейство в @font-face должно соответствовать экспортированной конфигурации $font-family. Указанный в документации пример шрифта не является обязательным глобальным шрифтом Backbase.
В теме используются единицы rem; в документации оптимальным указано корневое значение 16 px, поддерживаются значения до 32 px. Проверьте весь сценарий просмотра при увеличенном размере текста. В нашей автономной версии для браузера используются системные шрифты, чтобы не создавать впечатление, будто шрифты клиента доступны.
Дизайн-система Backbase Составьте заголовок режима и панель кнопок
Добавьте настоящие действия в контекстный заголовок
ModeHeaderModule отображает контекстный заголовок с дополнительной строкой и кнопкой закрытия. В примере для showCloseButton задано значение false, поскольку у демонстрационного сценария нет внешнего маршрута, который можно закрыть. Кнопка сброса размещена в слоте проекции mode-header-utility-area.
ButtonModule дополняет стандартную кнопку с помощью bbButton. Укажите для color документированное значение и используйте buttonSize sm или md. Круглая кнопка предназначена для элемента управления только со значком; для текстового действия «Оставить отзыв» она не подходит.
Используйте primary для единственного локального действия просмотра.
Используйте secondary для отменяемого действия сброса.
Размещайте названия счетов и суммы в списке определений, а не на декоративных кнопках.
Дизайн-система Backbase Сводка, удобная для узкого экрана
Сохраните порядок чтения
На исходной иллюстрации показаны поверхности двух счетов, соединённые направляющей линией. Она помогает понять связь между переводами, не превращаясь во второе действие. На небольших экранах декоративная схема счетов скрывается, но весь текст о счетах остаётся видимым.
В DOM редактор расположен перед результатом просмотра. Нативные подписи, сообщения об ошибках полей и область статуса доступны пользователям клавиатуры и программ чтения с экрана. Чтобы понять сумму или получателя, не требуется наводить указатель.
Для официальной настройки веб-версии необходим доступ к репозиторию и отдельное подключение глобального SCSS Backbase. Одного импорта ButtonModule недостаточно для полного оформления интерфейса. Автономный пример можно подключить к существующему приложению Angular после настройки пакета и стилей.
Используйте авторизованную учётную запись repo.backbase.com и сочетание версий Angular и Node, требуемое выбранным выпуском.
Установите @backbase/ui-ang и добавьте глобальный SCSS в таблицу стилей, уже указанную в angular.json.
Импортируйте ButtonModule и ModeHeaderModule в компонент, который их использует, затем подключите пример целиком и проверьте цикл сброса и просмотра.
Сохраните весь документ как index.html и откройте его в браузере. Независимая адаптивная HTML-интерпретация с опубликованными цветами кнопок по умолчанию; формы и макет разработаны для приложения. Не является средой выполнения Backbase Angular.
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>
Сумма и получатель вымышлены. Эта форма HTML не подключена к банковской системе; для примера с Angular ModeHeader и bbButton требуется авторизованный доступ к пакетам Backbase.
Заголовок режима и локальное действие просмотра
Автономный компонент Angular, использующий два настоящих модуля Backbase, проекцию действия сброса и явное локальное состояние.
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; }
Флаг просмотра не запускает платёж. В реальном сценарии перевода отправка должна быть отдельной подтверждённой операцией приложения.
04
Дизайн-система Backbase Настройка агента
Отправная точка для реализации
Используйте совместимые версии, требуемые лицензированным проектом. Убедитесь, что в angular.json указана глобальная таблица стилей. Для старых конфигураций Angular 17 / ui-ang 11 документировано ограничение esbuild; ui-ang 12+ поддерживает esbuild. В этом руководстве не приводятся учётные данные для доступа к реестру.
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";
Запрос для вашего проекта
Промпт для AI-агента
Создайте форму проверки перевода в Backbase Angular, импортировав настоящие ButtonModule и ModeHeaderModule. Подключите авторизованные стили пакета и тему клиента. Не смешивайте токены разных платформ. Проверяйте данные приложения, сбрасывайте устаревший результат просмотра при изменении полей и не выдавайте локальный пример за отправленный платёж.
05
Дизайн-система Backbase Источники и область применения
Для доступа к пакетам Backbase требуется авторизованная учётная запись репозитория. Предварительный просмотр в браузере — независимая HTML-интерпретация, а не Backbase Angular. Синяя палитра соответствует опубликованным цветам кнопок по умолчанию; интервалы панели и иллюстрация выбраны для приложения. Размеры ниже приведены с указанием платформы.
