Awesome

Antwerp UI - Angular Components

Introduction

Antwerp City Platform as a Service User Interface (Antwerp 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.

Ecosystem

This library is part of Antwerp UI.

Name	Framework	Status
Javascript	ES5+
Angular	Angular 15+
React	React 16+

Getting Started

Running the project locally

Use node version 18.x.x (v. 18.12.1 at time of writing)

npm i
npm run build:all
npm start

Troubleshooting

If Error: error:0308010C:digital envelope routines::unsupported -> export NODE_OPTIONS=--openssl-legacy-provider

Install Antwerp UI

npm i @acpaas-ui/ngx-utils
npm i @acpaas-ui/ngx-forms
// Other necessary libs for your app...

Edit styles.scss to import the branding look & feel.

@import url('https://cdn.antwerpen.be/core_branding_scss/6.6.6/main.min.css');

You can also modify index.html to reference the favicons for the city of Antwerp.

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/3.0.0/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 Digipolis branding instead.

Documentation

Check out our live examples or visit the Antwerp UI site.

This library contains the following components:

Name	Description	URL
ngx-avatar	User avatar icon	Documentation
ngx-calendar	Calendar to select dates	Documentation
ngx-code-snippet	Snippet of source code	Documentation
ngx-context	Set meta tags for SEO	Documentation
ngx-flyout	Reveal additional content	Documentation
ngx-forms	Assorted form fields	Documentation
ngx-layout	Assorted page layout components	Documentation
ngx-logo	Logo icon	Documentation
ngx-leaflet	Leaflet-based map	Documentation
ngx-pagination	Pagination control	Documentation
ngx-progress-bar	Progress bar control	Documentation
ngx-selectable-list	List control with selectable items	Documentation
ngx-table	Interactive table	Documentation
ngx-utils	Assorted helpers	Documentation
ngx-user-menu	User Menu providing login/logout	Documentation

Testing

Test automation

If you want to start automating your tests, you can have a look at our Test Automation Guide for some tips on how to use data-attributes to keep your tests stable and maintainable.

Cross Browser Testing

We are using Browserstack Live to make sure that our components work correctly on all major browsers and platforms.<br/> The people at Browserstack kindly offer an unlimited testing program, free of charge for open source projects so a big thanks to them!

Questions

For questions and support please ask a question on the #antwerp-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.

Changelog

Detailed changes for each release are documented in the changelog.

Contributing

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 Antwerp UI!

Support

Jasper Van Proeyen (jasper.vanproeyen@digipolis.be)

License

MIT