30 lines
1.3 KiB
YAML
30 lines
1.3 KiB
YAML
name: Bootstrap
|
|
purpose: Provide Bootstrap 5 styles, icons, JavaScript APIs, and reactive theme configuration.
|
|
|
|
provided:
|
|
css: 'Bootstrap.js injects Bootstrap 5 CSS and Bootstrap Icons; do not add another Bootstrap stylesheet or runtime.'
|
|
bootstrap: 'Native Bootstrap API: Alert, Button, Carousel, Collapse, Dropdown, Modal, Offcanvas, Popover, ScrollSpy, Tab, Toast, Tooltip.'
|
|
Bootstrap: 'apigo helper API for theme configuration.'
|
|
|
|
config:
|
|
colors: 'Bootstrap.config({ primary: "#6f42c1", success: "#198754" }) patches CSS variables and related component colors.'
|
|
dark_mode: 'Bootstrap.config({ darkMode: true }) sets data-bs-theme.'
|
|
bind_dark_mode: 'Bootstrap.config({ bindDarkMode: [LocalStorage, "darkMode"] }) reacts to a state key.'
|
|
|
|
rules:
|
|
- ui.js loads Bootstrap before utilities and components.
|
|
- Use Bootstrap classes and Icons directly in component markup.
|
|
- Do not load a second Bootstrap CSS file or runtime.
|
|
|
|
examples:
|
|
theme: |
|
|
<script>
|
|
Bootstrap.config({ primary: '#6f42c1' })
|
|
Bootstrap.config({ bindDarkMode: [LocalStorage, 'darkMode'] })
|
|
</script>
|
|
native_api: |
|
|
<button $onclick="bootstrap.Modal.getOrCreateInstance(document.querySelector('#settings')).show()">Settings</button>
|
|
|
|
tests:
|
|
- https://apigo.cc/web/bootstrap/raw/branch/main/test/bootstrap.spec.js
|