Antwerp City Platform as a Service User Interface (ACPaas UI) is a component interface library for building user interfaces and responsive web apps. It's designed to provide developers with functionality and UI/UX patterns that matches the Antwerpen styleguide.
This library is part of ACPaaS UI.
| Name | Framework | Status |
|---|---|---|
| Schematics | ES5+ |  |
| Javascript | ES5+ |  |
| Angular | Angular 6+ |  |
| React | React 16+ |  |
Start a new Angular app.
npm install -g @angular/cli
ng new my-app --style=scss
cd my-app
npm install @acpaas-ui/ngx-componentsEdit styles.scss to import the branding look & feel.
@import url('https://cdn.antwerpen.be/core_branding_scss/3.0.1/main.min.css');Then start using the components in your pages. Look at the component documentation below to learn how to use each component.
You can also add a branding-compatible flexbox grid layout system:
@import url('https://cdn.antwerpen.be/core_flexboxgrid_scss/1.0.1/flexboxgrid.min.css');Note that you are free to use your own grid, as long as it meets our branding guidelines.
To learn more about using the branding look & feel, check the core branding guide. Note that the core branding contains the Antwerp logo and fonts, which are subject to a usage restriction. For use outside of apps for the city of Antwerp you can use acpaas branding instead.
Check out our live examples or visit the ACPaaS UI site.
This library contains the following components:
| Name | Description | URL |
|---|---|---|
| agenda | Calendar to display events | Documentation |
| analytics | Google Analytics integration | Documentation |
| avatar | User avatar icon | Documentation |
| calendar | Calendar to select dates | Documentation |
| code-snippet | Snippet of source code | Documentation |
| context | Set meta tags for SEO | Documentation |
| flyout | Reveal additional content | Documentation |
| forms | Assorted form fields | Documentation |
| layout | Assorted page layout components | Documentation |
| localstorage | Interface with localstorage | Documentation |
| logo | Logo icon | Documentation |
| map | Leaflet-based map | Documentation |
| notifications | Show user notifications | Documentation |
| pagination | Pagination control | Documentation |
| progress-bar | Progress bar control | Documentation |
| selectable-list | List control with selectable items | Documentation |
| table | Interactive table | Documentation |
| utils | Assorted helpers | Documentation |
For questions and support please ask a question on the #acpaas-ui slack channel. If you're not yet a member of our DigAnt Café slack community, you can easily join here.
If you stumble across a bug or missing feature, feel free to report an issue. Please fill out the issue template completely when opening an issue. This will help us get to your issue sooner.
Detailed changes for each release are documented in the changelog.
Your contributions are most welcome as pull requests, both code changes and documentation updates. However, to keep a high quality standard, please make sure to read the Contributing Guide before making a pull request.
Thank you to all the people who already contributed to ACPaaS UI!
Copyright (c) 2016-present, Digipolis