@acpaas-ui/ngx-components 中文文档教程

发布于 4年前 浏览 17 项目主页 更新于 3年前

ACPaaS UI - Angular Components

 acpaas-ui-angular-buildngx-components-status

Introduction

安特卫普城市平台即服务用户界面 (ACPaas UI) 是一个组件界面库,用于构建用户界面和响应式网络应用程序。 它旨在为开发人员提供与 Antwerpen 风格指南相匹配的功能和 UI/UX 模式。

Ecosystem

该库是 ACPaaS UI 的一部分。

NameFrameworkStatus
SchematicsES5+acpaas-ui-schematics-github
JavascriptES5+acpaas-ui-js-github
AngularAngular 6+acpaas-ui-angular-github
ReactReact 16+acpaas-ui-react-github

Getting Started

Building packages

下面将构建 及其示例。

example=<packagename> npm run build:package

例如:

example=forms npm run build:package

启动一个新的 Angular 应用程序。

npm install -g @angular/cli
ng new my-app --style=scss
cd my-app
npm install @acpaas-ui/ngx-components

编辑 styles.scss 以导入品牌外观 & 感觉。

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

您还可以修改 index.html 以引用安特卫普市的网站图标

然后开始使用页面中的组件。 查看下面的组件文档以了解如何使用每个组件。

您还可以添加品牌兼容的 flexbox 网格布局系统

@import url('https://cdn.antwerpen.be/core_flexboxgrid_scss/1.0.1/flexboxgrid.min.css');

请注意,您可以自由使用自己的网格,只要因为它符合我们的品牌准则。

要了解有关使用品牌外观和品牌的更多信息 感觉,查看核心品牌指南。 请注意,核心品牌 包含安特卫普徽标和字体,它们受到使用限制。 要在安特卫普市的应用程序之外使用,您可以改用 acpaas 品牌

Documentation

查看我们的实例或访问 ACPaaS 用户界面网站

该库包含以下组件:

NameDescriptionURL
agendaCalendar to display eventsDocumentation
analyticsGoogle Analytics integrationDocumentation
avatarUser avatar iconDocumentation
calendarCalendar to select datesDocumentation
code-snippetSnippet of source codeDocumentation
contextSet meta tags for SEODocumentation
flyoutReveal additional contentDocumentation
formsAssorted form fieldsDocumentation
layoutAssorted page layout componentsDocumentation
localstorageInterface with localstorageDocumentation
logoLogo iconDocumentation
mapLeaflet-based mapDocumentation
notificationsShow user notificationsDocumentation
paginationPagination controlDocumentation
progress-barProgress bar controlDocumentation
selectable-listList control with selectable itemsDocumentation
tableInteractive tableDocumentation
utilsAssorted helpersDocumentation
user-menuUser Menu providing login/logoutDocumentation
navigation-menuGeneric navigation menuDocumentation

Testing

Test automation

如果您想开始自动化测试,可以查看我们的测试自动化指南,了解有关如何使用数据的一些提示-保持测试稳定和可维护的属性。

Cross Browser Testing

我们使用 Browserstack Live 来确保我们的组件在所有主要浏览器和平台上正常工作。
Browserstack 的人员友好地提供了一个无限的测试程序,对开源项目是免费的,非常感谢他们!

Browserstack logo

Questions

如需问题和支持,请在 #acpaas-ui slack 上提问频道。 如果您还不是我们 DigAnt Café slack 社区的成员,您可以轻松地在这里加入

如果您遇到错误或缺少功能,请随时报告问题。 请在打开问题时完整填写问题模板。 这将帮助我们更快地解决您的问题。

Changelog

变更日志 中记录了每个版本的详细更改。

Contributing

我们非常欢迎您的贡献作为拉取请求,包括代码更改和文档更新。 但是,为了保持高质量标准,请确保在提出拉取请求之前阅读贡献指南

感谢所有已经为 ACPaaS UI 做出贡献的人!

License

MIT

版权所有 (c) 2016 年至今,Digipolis

ACPaaS UI - Angular Components

acpaas-ui-angular-buildngx-components-status

Introduction

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.

Ecosystem

This library is part of ACPaaS UI.

NameFrameworkStatus
SchematicsES5+acpaas-ui-schematics-github
JavascriptES5+acpaas-ui-js-github
AngularAngular 6+acpaas-ui-angular-github
ReactReact 16+acpaas-ui-react-github

Getting Started

Building packages

The following will build <packagename> and its example.

example=<packagename> npm run build:package

For example:

example=forms npm run build:package

Start a new Angular app.

npm install -g @angular/cli
ng new my-app --style=scss
cd my-app
npm install @acpaas-ui/ngx-components

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

@import url('https://cdn.antwerpen.be/core_branding_scss/4.0.0/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/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.

Documentation

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

This library contains the following components:

NameDescriptionURL
agendaCalendar to display eventsDocumentation
analyticsGoogle Analytics integrationDocumentation
avatarUser avatar iconDocumentation
calendarCalendar to select datesDocumentation
code-snippetSnippet of source codeDocumentation
contextSet meta tags for SEODocumentation
flyoutReveal additional contentDocumentation
formsAssorted form fieldsDocumentation
layoutAssorted page layout componentsDocumentation
localstorageInterface with localstorageDocumentation
logoLogo iconDocumentation
mapLeaflet-based mapDocumentation
notificationsShow user notificationsDocumentation
paginationPagination controlDocumentation
progress-barProgress bar controlDocumentation
selectable-listList control with selectable itemsDocumentation
tableInteractive tableDocumentation
utilsAssorted helpersDocumentation
user-menuUser Menu providing login/logoutDocumentation
navigation-menuGeneric navigation menuDocumentation

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.
The people at Browserstack kindly offer an unlimited testing program, free of charge for open source projects so a big thanks to them!

Browserstack logo

Questions

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.

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

License

MIT

Copyright (c) 2016-present, Digipolis

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文