# Fundamental React
[![REUSE status](https://api.reuse.software/badge/github.com/SAP/fundamental-react)](https://api.reuse.software/info/github.com/SAP/fundamental-react)
[![npm version](https://badge.fury.io/js/fundamental-react.svg)](//www.npmjs.com/package/fundamental-react)
[![Minified Size](https://badgen.net/bundlephobia/min/fundamental-react)](https://bundlephobia.com/result?p=fundamental-react)
[![Minzipped Size](https://badgen.net/bundlephobia/minzip/fundamental-react)](https://bundlephobia.com/result?p=fundamental-react)
[![Build Status](https://travis-ci.org/SAP/fundamental-react.svg?branch=main)](https://travis-ci.org/SAP/fundamental-react)
[![Coverage Status](https://coveralls.io/repos/github/SAP/fundamental-react/badge.svg?branch=main)](https://coveralls.io/github/SAP/fundamental-react?branch=main)
[![Slack](https://img.shields.io/badge/slack-ui--fundamentals-blue.svg?logo=slack)](https://join.slack.com/t/ui-fundamentals/shared_invite/enQtNTIzOTU0Mzc2NTc5LWQzZWI5MWFhYjE5OTc4YzliN2JhOTc1ZjQxZTg1YjZiMWZiYzRkNjMwYzgyMmFkYmNhZDVjMWE5MDIzOWEzMmM)
<a href="https://www.netlify.com">
<img src="https://www.netlify.com/img/global/badges/netlify-light.svg" alt="Deploys by Netlify" />
</a>
## Description
The `fundamental-react` library is a set of [React](https://reactjs.org/) components built using [SAP Fundamental Styles](https://sap.github.io/fundamental-styles/).
The Fundamental Styles library is a design system and HTML/CSS component library used to build modern product user experiences with the SAP look and feel.
## API Reference
See [Component Documentation](https://sap.github.io/fundamental-react/) for examples and API details.
## Requirements
You will need to install [Node and Node Package Manager](https://www.npmjs.com/get-npm).
## Polyfills
Fundamental React requires a polyfill for:
- [Object.assign](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign)
- [Array.find](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find)
- [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise)
You will need to add your own polyfills. See [core-js](https://github.com/zloirock/core-js#commonjs-api) for instructions.
## Getting Started
For an existing react application, follow the steps below:
1. Install `fundamental-react`.
```javascript
npm install fundamental-react
```
1. All components are currently packaged together with their respective `css`, you will need to edit your webpack configuration to handle these files. See [css-loader](https://github.com/webpack-contrib/css-loader).
1. Import components as needed. See [Component Documentation](https://sap.github.io/fundamental-react/) for examples and API details.
```javascript
import { MessageStrip } from 'fundamental-react/lib/MessageStrip';
```
or
```javascript
import { MessageStrip } from 'fundamental-react';
```
> **NOTE:** Importing from specific component is recommended. Doing so will bring in only the component you are using instead of the whole library, which will reduce your bundle size significantly.
1. This project does not contain fonts and icons - they must be added to your project separately. Download [Font 72](https://experience.sap.com/fiori-design-web/downloads/#download-font-72) and [SAP icons](https://experience.sap.com/fiori-design-web/downloads/#sap-icon-font). After adding fonts and icons to your project, include the following in your css:
```css
@font-face {
font-family: "72";
src: url("path/to/fonts") format("woff"); /* Bold, Light, Regular available in woff and woff2 */
font-weight: normal;
font-style: normal;
};
@font-face {
font-family: "SAP-icons";
src: url("path/to/icons") format("woff"); /* available in woff, woff2 and ttf */
font-weight: normal;
font-style: normal;
}
```
Additionally, edit your webpack configuration to load font and icon fonts - see [file-loader](https://webpack.js.org/loaders/file-loader/).
All styles are based on `rem` units. Include the following in your CSS to ensure components are sized correctly:
```css
html {
font-size: 16px;
}
```
## Versioning
The `fundamental-react` library follows [Semantic Versioning](https://semver.org/). These components strictly adhere to the `[MAJOR].[MINOR].[PATCH]` numbering system (also known as `[BREAKING].[FEATURE].[FIX]`).
Merges to the `main` branch will be published as a prerelease. Prereleases will include an **rc** version (_e.g._ `[MAJOR].[MINOR].[PATCH]-rc.[RC]`).
The following circumstances will be considered a **BREAKING** change:
* A component’s existing API is altered (with the exception of additions)
* The existing underlying HTML markup of a component is altered
* An existing unit test is altered to account for either of the above
The following circumstances will NOT be considered a **BREAKING** change:
* Additions to a component’s API
* Non-visual HTML attribute changes/additions (such as `role`, `aria-*`, `data-*`)
* An existing unit test is altered to account for non-visual HTML attribute changes/additions (such as `role`, `aria-*`, `data-*`)
## CSS Modules
This library supports [css-modules](https://github.com/css-modules/css-modules). The motivation for this support is to be able to include multiple versions or instances of fundamental styles on the same page without collisions in styles. This can be useful if you have a page using fundamental-ngx alongside fundamental-react, for example.
One way to use fundamental-react with hashed class names is to pass the library code through css-loader in your webpack config
```js
// If you have an existing css rule
{
test: /.css$/,
exclude: [
/node_modules\/fundamental-styles/
],
use: [
'style-loader',
'css-loader'
]
},
// run css-loader with modules enabled for css files from fundamental-styles
{
test: /.css$/,
include: [
/node_modules\/fundamental-styles/
],
use: [
'style-loader',
{
loader: 'css-loader',
options: {
modules: {
localIdentName: '[local]-[sha1:hash:hex:6]'
}
}
}
]
},
```
It's important to include `[local]` in the localIdentName which keeps the class name in the hash. This is because some of the style rules in fundamental-styles reference the name of the class, like `[class*=level]`.
## Known Issues
Please see [Issues](https://github.com/SAP/fundamental-react/issues).
## Support
If you encounter an issue or want to request a feature, you can [create an issue](https://github.com/SAP/fundamental-react/issues/new).
## Contributing
If you want to contribute, please check the [Contribution Guidelines](https://github.com/SAP/fundamental-react/blob/main/.github/CONTRIBUTING.md). Also see our [Developer Guide to Getting Started](https://github.com/SAP/fundamental-react/wiki/Developer-Guide).
## Similar Projects
- [Angular implementation of SAP Fundamental Styles](https://github.com/SAP/fundamental-ngx)
- [Vue implementation of SAP Fundamental Styles](https://github.com/SAP/fundamental-vue)
## Tips for fundamental-react project developers
For the MAC M1 user, to Set up your local dev environment, you need to run the project under node x86.
没有合适的资源?快使用搜索试试~ 我知道了~
基础库样式中设计的可重用组件库的React实现___下载.zip
共499个文件
js:273个
png:67个
ts:63个
1.该资源内容由用户上传,如若侵权请联系客服进行举报
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
版权申诉
0 下载量 79 浏览量
2023-04-18
00:20:28
上传
评论
收藏 6.57MB ZIP 举报
温馨提示
基础库样式中设计的可重用组件库的React实现___下载.zip
资源推荐
资源详情
资源评论
收起资源包目录
基础库样式中设计的可重用组件库的React实现___下载.zip (499个子文件)
commit-msg 80B
Pagination.css 11KB
unnormalize.css 1KB
dep5 2KB
.editorconfig 226B
.eslintignore 85B
.eslintrc 5KB
.gitignore 417B
.gitignore 2B
manager-head.html 1KB
preview-head.html 1KB
favicon.ico 5KB
nature-2.jpg 582KB
nature.jpg 180KB
headshot-male.jpg 143KB
Calendar.js 35KB
Shellbar.js 32KB
DatePicker.test.js 29KB
DatePicker.js 28KB
ComboboxInput.js 27KB
Calendar.test.js 25KB
DatePicker.stories.js 23KB
Tree.stories.js 23KB
Time.test.js 21KB
ComboboxInput.test.js 20KB
ComboboxInput.stories.js 20KB
gridManager.js 19KB
Wizard.stories.js 17KB
LayoutPanel.stories.js 16KB
gridManager.test.js 15KB
Table.stories.js 15KB
Table.js 14KB
LayoutGrid.stories.js 14KB
SearchInput.test.js 14KB
Popover.stories.js 14KB
Popover.test.js 13KB
Wizard.js 13KB
Time.js 12KB
listOfIcons.js 12KB
Shellbar.stories.js 12KB
sort-imports.js 12KB
Select.test.js 12KB
MultiInput.js 12KB
Select.js 12KB
ObjectStatus.stories.js 12KB
_TimeItem.js 11KB
_Popper.js 11KB
_TreeNode.js 11KB
TimePicker.test.js 11KB
List.stories.js 11KB
MultiInput.test.js 10KB
Popover.js 10KB
_TimePickerItem.js 10KB
Tree.test.js 10KB
Dialog.js 10KB
SearchInput.js 10KB
SideNav.stories.js 10KB
Dialog.test.js 10KB
Pagination.js 10KB
Dialog.stories.js 9KB
Button.stories.js 9KB
Tree.js 9KB
TimePicker.js 9KB
FormTextArea.test.js 9KB
Checkbox.test.js 8KB
StepInput.js 8KB
_SideNavListItem.js 8KB
InputGroup.stories.js 7KB
Checkbox.js 7KB
Button.js 7KB
CustomPropTypes.test.js 7KB
CustomPropTypes.js 6KB
TabGroup.stories.js 6KB
Switch.js 6KB
StepInput.test.js 6KB
TimeItem.test.js 6KB
FormTextarea.js 6KB
MessageBox.js 6KB
MessageBox.stories.js 6KB
_MenuItem.js 6KB
InputGroup.test.js 5KB
MultiInput.stories.js 5KB
FormFieldset.stories.js 5KB
Shellbar.test.js 5KB
Avatar.stories.js 5KB
Pagination.test.js 5KB
SideNav.test.js 5KB
ActionBar.js 5KB
List.js 5KB
Table.test.js 5KB
InputGroup.js 4KB
MessageStrip.js 4KB
FormRadioGroup.stories.js 4KB
SearchInput.stories.js 4KB
ObjectStatus.js 4KB
MessageBox.test.js 4KB
FormInput.test.js 4KB
Calendar.stories.js 4KB
_FormValidationOverlay.test.js 4KB
_ListItem.js 4KB
共 499 条
- 1
- 2
- 3
- 4
- 5
资源评论
快撑死的鱼
- 粉丝: 1w+
- 资源: 9156
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功