Fundamental Library for Angular 使用教程

最新推荐文章于 2024-10-20 21:53:43 发布

秋阔奎Evelyn

最新推荐文章于 2024-10-20 21:53:43 发布

阅读量1k

点赞数 8

本文链接：https://blog.csdn.net/gitblog_00275/article/details/142540177

版权

Fundamental Library for Angular 使用教程

fundamental-ngx Fundamental Library for Angular is SAP Design System Angular component library 项目地址: https://gitcode.com/gh_mirrors/fu/fundamental-ngx

1. 项目介绍

1.1 项目概述

Fundamental Library for Angular 是一个由 SAP 设计系统提供的 Angular 组件库，旨在帮助开发者构建具有 SAP 外观和感觉的现代化产品用户体验。该项目包含两个主要的 npm 包：

@fundamental-ngx/core: 提供了 Fundamental Library Styles 的基础 Angular 实现，为开发者提供了丰富的组件库，用于构建 Angular 应用程序。
@fundamental-ngx/platform: 在核心库的基础上，提供了更高层次的抽象和额外的功能，以满足应用程序的需求，并隐藏了大部分内部实现细节，从而提高开发效率。

1.2 项目目标

提供一套符合 SAP 设计标准的 Angular 组件库。
支持 Angular 15 及以上版本。
提供灵活的组件定制选项。
促进开发者社区的贡献和反馈。

2. 项目快速启动

2.1 环境准备

在开始之前，请确保你已经安装了以下工具：

Node.js (建议版本 14 及以上)
Yarn (通过 corepack enable 启用)

2.2 安装步骤

克隆项目仓库：

git clone https://github.com/SAP/fundamental-ngx.git

进入项目目录：
```
cd fundamental-ngx
```
安装依赖：
```
yarn install
```
启动开发服务器：
```
yarn start
```

2.3 示例代码

以下是一个简单的示例，展示如何在你的 Angular 项目中使用 Fundamental Library for Angular 的按钮组件：

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <fd-button label="Click Me"></fd-button>
  `,
})
export class AppComponent {}