Skip to content

Commit 4a0cc04

Browse files
SisyphusZhengSisyphusZheng
authored
fix:readme and pic (#17)
* Update README.md * Update README.md * Update README.md * Update README.md * Update README.md * fix: build bugs and add CDN show case * fix: slove conflict * feat: Upgrade dependencies and resolve publishing issues Upgraded @stencil/sass to 3.0.12 - Resolved Yarn dependency conflict warnings, including version issues with postcss and glob - Addressed deprecated or outdated dependencies, such as cssnano and stable - Fixed npm package publishing failure by adjusting versioning and clearing cache - Ensured compatibility of tools and environment, including stencil-tailwind-plugin and Jest - Debugged and tested other dependency-related issues Note: Some issues were caused by npm registry delays, and the package was successfully re-published after adjustments. * change social board * fix:social board and readme * fix: pull problem * none * png and badge of readme * Update README_CN.md --------- Co-authored-by: 李嘉图·M·路 <146103794+Ricardo-M-Zheng@users.noreply.github.com>
1 parent 67ac42b commit 4a0cc04

7 files changed

Lines changed: 75 additions & 93 deletions

‎README.md‎

Lines changed: 73 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -2,21 +2,17 @@
22

33
![Air-Components Logo](./src/assets/air-components-board.png)
44

5-
[中文](https://github.com/SisyphusZheng/Components/blob/main/README_CN.md)
6-
5+
[中文](https://github.com/SisyphusZheng/Components/blob/main/README_CN.md)
76
[![npm version](https://img.shields.io/npm/v/air-components)](https://www.npmjs.com/package/air-components)
87
[![npm downloads](https://img.shields.io/npm/dm/air-components)](https://www.npmjs.com/package/air-components)
9-
[![GitHub license](https://img.shields.io/github/license/aircomponents/Components)](https://github.com/aircomponents/Components/blob/main/LICENSE)
10-
[![Build Status](https://img.shields.io/github/actions/workflow/status/aircomponents/Components/.github/workflows/publish.yml)](https://github.com/aircomponents/Components/actions)
11-
[![Contributors](https://img.shields.io/github/contributors/aircomponents/Components)](https://github.com/aircomponents/Components/graphs/contributors)
12-
[![Code Coverage](https://img.shields.io/codecov/c/github/aircomponents/Components)](https://codecov.io/gh/aircomponents/Components)
8+
[![GitHub license](https://img.shields.io/github/license/aircomponents/Components)](https://github.com/aircomponents/Components/blob/main/LICENSE)
139
[![Last Commit](https://img.shields.io/github/last-commit/aircomponents/Components)](https://github.com/aircomponents/Components/commits/main)
1410
[![Dependabot Status](https://img.shields.io/badge/dependencies-up%20to%20date-brightgreen)](https://github.com/aircomponents/Components/network/updates)
15-
---
1611

1712
## Project Highlights
1813

1914
- **Modular Architecture**: Focused on creating reusable and flexible components.
15+
2016
- **Modern Design Principles**: Emphasizes minimalist UI design with support for multiple themes and visual styles.
2117
- **Customizable Components**: Easily adapt component styles to meet project-specific requirements using standard CSS.
2218

@@ -30,11 +26,11 @@ Install Air-Components using npm:
3026
npm install @aircomponents/ui
3127
```
3228

33-
## Usage Example by CDN
29+
### CDN
3430

35-
``` html
31+
```html
3632
<title>Test AirComponents</title>
37-
<script type="module" src="https://unpkg.com/@aircomponents/ui@0.0.1/dist/aircomponents/aircomponents.esm.js"></script>
33+
<script type="module" src="https://unpkg.com/@aircomponents/ui@0.0.7/dist/aircomponents/aircomponents.esm.js"></script>
3834
</head>
3935
<body>
4036
<air-button size="medium" variant="solid" color="primary">Primary Button</air-button>
@@ -43,9 +39,74 @@ npm install @aircomponents/ui
4339
</html>
4440
```
4541

42+
```JS
43+
import '@aircomponents/ui';
44+
45+
document.body.innerHTML = `
46+
<air-button size="medium" variant="solid" color="primary">Primary Button</air-button>
47+
`;
48+
```
49+
50+
### React
51+
52+
```js
53+
import 'air-components';
54+
55+
function App() {
56+
return (
57+
<div>
58+
<air-button size="medium" variant="solid" color="primary">
59+
Primary Button
60+
</air-button>
61+
</div>
62+
);
63+
}
64+
65+
export default App;
66+
```
67+
68+
### Vue
69+
70+
#### Vue Config
71+
72+
```js
73+
module.exports = {
74+
chainWebpack: config => {
75+
config.module
76+
.rule('vue')
77+
.use('vue-loader')
78+
.loader('vue-loader')
79+
.tap(options => {
80+
options.compilerOptions = {
81+
isCustomElement: tag => tag.startsWith('air-'),
82+
};
83+
return options;
84+
});
85+
},
86+
};
87+
```
88+
89+
#### USE Vue
90+
91+
```js
92+
<template>
93+
<div>
94+
<air-button size="medium" variant="solid" color="primary">
95+
Primary Button
96+
</air-button>
97+
</div>
98+
</template>
99+
100+
<script>
101+
import 'air-components';
102+
export default {
103+
name: 'App',
104+
};
105+
</script>
106+
```
107+
46108
## Development Notes
47109

48110
### This project is in early development; features and components are actively being built
49111

50-
### Contributions and feedback are welcome. Visit our GitHub repository for more information
51-
112+
### Contributions and feedback are welcome. Visit our GitHub repository for more information

‎README_CN.md‎

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,8 @@
33
![Air-Components Logo](./src/assets/air-components-board.png)
44

55
[![npm version](https://img.shields.io/npm/v/air-components)](https://www.npmjs.com/package/air-components)
6-
[![npm downloads](https://img.shields.io/npm/dm/air-components)](https://www.npmjs.com/package/air-components)
7-
[![GitHub license](https://img.shields.io/github/license/aircomponents/Components)](https://github.com/aircomponents/Components/blob/main/LICENSE)
8-
[![Build Status](https://img.shields.io/github/actions/workflow/status/aircomponents/Components/.github/workflows/publish.yml)](https://github.com/aircomponents/Components/actions)
9-
[![Contributors](https://img.shields.io/github/contributors/aircomponents/Components)](https://github.com/aircomponents/Components/graphs/contributors)
10-
[![Code Coverage](https://img.shields.io/codecov/c/github/aircomponents/Components)](https://codecov.io/gh/aircomponents/Components)
11-
[![Last Commit](https://img.shields.io/github/last-commit/aircomponents/Components)](https://github.com/aircomponents/Components/commits/main)
12-
[![Dependabot Status](https://img.shields.io/badge/dependencies-up%20to%20date-brightgreen)](https://github.com/aircomponents/Components/network/updates)
6+
[![npm downloads](https://img.shields.io/npm/dm/air-components)](https://www.npmjs.com/package/air-components) [![GitHub license](https://img.shields.io/github/license/aircomponents/Components)](https://github.com/aircomponents/Components/blob/main/LICENSE) [![Last Commit](https://img.shields.io/github/last-commit/aircomponents/Components)](https://github.com/aircomponents/Components/commits/main) [![Dependabot Status](https://img.shields.io/badge/dependencies-up%20to%20date-brightgreen)](https://github.com/aircomponents/Components/network/updates)
7+
138
---
149

1510
## 项目亮点

‎src/assets/air-components-board.png‎

-20.9 KB
Loading

‎src/assets/air-components-board.png.copy‎

-48.1 KB
Binary file not shown.

‎src/assets/air-components-logo.svg‎

Lines changed: 0 additions & 43 deletions
This file was deleted.

‎src/assets/air-components-logo.svg.copy‎

Lines changed: 0 additions & 31 deletions
This file was deleted.

‎src/assets/example.png‎

-64.8 KB
Binary file not shown.

0 commit comments

Comments
 (0)