@acpaas-ui/web-components 中文文档教程
ACPaaS UI - Web Components
Introduction
安特卫普城市平台即服务用户界面 (ACPaas UI) 是一个组件界面库，用于构建用户界面和响应式网络应用程序。 它旨在为开发人员提供与 Antwerpen 风格指南相匹配的功能和 UI/UX 模式。
Ecosystem
该库是 ACPaaS UI 的一部分。
Getting Started
Running the project locally
npm i
npm start
Use ACPaaS UI web components in your project
npm install @acpaas-ui/web-components
向下滚动以获取包含所有可用组件的列表。
要将这些 Web 组件集成到您选择的框架中，请按照此处说明的步骤操作。
为较旧的浏览器和不支持 Web 组件的浏览器使用 polyfill。 要使 ACPaaS UI 在这些浏览器中工作，您需要在加载 Web 组件之前包含以下脚本：
<script src="//polyfill.io/v3/polyfill.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.4.4/webcomponents-bundle.js"></script>
查看下面的组件文档以了解如何使用每个组件。
Components
该库包含以下组件：
| Name | Documentation |
|---|---|
| aui-cookie-consent | Documentation |
| aui-cookie-content-blocker | Documentation |
Styling
使用我们的品牌之一来遵守样式指南：
// Antwerp core branding
<link rel="stylesheet" href="https://cdn.antwerpen.be/core_branding_scss/5.0.2/main.min.css">
// Digipolis
// Note: this styling version for now only works with v1.x.x of the component
<link rel="stylesheet" href="https://cdn.antwerpen.be/digipolis_branding_scss/4.1.1/main.min.css">
// ACPaaS
// Note: this styling version for now only works with v1.x.x of the component
<link rel="stylesheet" href="https://cdn.antwerpen.be/acpaas_branding_scss/4.1.1/main.min.css">
如果需要，您可以添加品牌-compatible flexbox grid layout system：
<link rel="stylesheet" href="https://cdn.antwerpen.be/core_flexboxgrid_scss/2.0.0/flexboxgrid.min.css">
对于其他样式相关的东西，比如网站图标，查看 GitHub。
Changelog
变更日志 中记录了每个版本的详细更改。
Questions
如需问题和支持，请在 #acpaas-ui slack 频道 上提问。 如果您还不是我们 DigAnt Café slack 社区的成员，您可以轻松地在这里加入。
如果您遇到错误或缺少功能，请随时报告问题。
Contributing
错误报告和/或请求请求总是受欢迎的。 请阅读我们的贡献指南。
Support
Wim Vanhorenbeeck (wim.vanhorenbeeck@digipolis.be)
License
版权所有 ( c) 2020 数字城
ACPaaS UI - Web Components
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.
Getting Started
Running the project locally
npm i
npm start
Use ACPaaS UI web components in your project
npm install @acpaas-ui/web-components
Scroll down for a list with all available components.
To integrate these web components in your framework of choice, please follow the steps explained here.
Use polyfills for older browers and browsers that not support web components. To make ACPaaS UI work in these browsers, you need to include the following scripts before you load your web component:
<script src="//polyfill.io/v3/polyfill.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.4.4/webcomponents-bundle.js"></script>
Take a look at the component documentation below to learn how to use each component.
Components
This library contains the following components:
| Name | Documentation |
|---|---|
| aui-cookie-consent | Documentation |
| aui-cookie-content-blocker | Documentation |
Styling
Use one of our brandings to adhere to the styling guidelines:
// Antwerp core branding
<link rel="stylesheet" href="https://cdn.antwerpen.be/core_branding_scss/5.0.2/main.min.css">
// Digipolis
// Note: this styling version for now only works with v1.x.x of the component
<link rel="stylesheet" href="https://cdn.antwerpen.be/digipolis_branding_scss/4.1.1/main.min.css">
// ACPaaS
// Note: this styling version for now only works with v1.x.x of the component
<link rel="stylesheet" href="https://cdn.antwerpen.be/acpaas_branding_scss/4.1.1/main.min.css">
If needed, you can add a branding-compatible flexbox grid layout system:
<link rel="stylesheet" href="https://cdn.antwerpen.be/core_flexboxgrid_scss/2.0.0/flexboxgrid.min.css">
For other styling-related things, like e.g. favicons, check out GitHub.
Changelog
Detailed changes for each release are documented in the changelog.
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.
Contributing
Bug reports and or pull requests are always welcome. Please read our contribution guide.
Support
Wim Vanhorenbeeck (wim.vanhorenbeeck@digipolis.be)
License
Copyright (c) 2020 Digipolis
