@cfx-dev/ui-components 4.2.19 → 4.2.20
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +20 -7
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -5,35 +5,48 @@ Include design system, utils and reusable components.
|
|
|
5
5
|
```console
|
|
6
6
|
yarn add @cfx-dev/ui-components
|
|
7
7
|
```
|
|
8
|
+
|
|
8
9
|
or
|
|
9
10
|
```console
|
|
10
11
|
npm install @cfx-dev/ui-components
|
|
11
12
|
```
|
|
12
13
|
|
|
13
14
|
## Usage
|
|
14
|
-
|
|
15
|
-
```
|
|
16
|
-
|
|
15
|
+
Create file in your project `ui.scss`:
|
|
16
|
+
```scss
|
|
17
|
+
@forward "~@cfx-dev/ui-components/dist/styles-scss/_ui.scss";
|
|
17
18
|
```
|
|
19
|
+
|
|
20
|
+
In your root js file import style files:
|
|
18
21
|
```javascript
|
|
22
|
+
// includes all css variables required for components
|
|
23
|
+
// can be replaced by css option from @cfx-dev/ui-components/dist/assets/general/global.css
|
|
19
24
|
import '@cfx-dev/ui-components/dist/styles-scss/global.scss';
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
```javascript
|
|
25
|
+
// set of default themes or you can create your own the same way as in this file
|
|
26
|
+
// can be replaced by css option from @cfx-dev/ui-components/dist/assets/general/themes.css
|
|
23
27
|
import '@cfx-dev/ui-components/dist/styles-scss/themes.scss';
|
|
28
|
+
// you can import each component separatly or all in one file
|
|
29
|
+
import '@cfx-dev/ui-components/dist/assets/all_css.css';
|
|
24
30
|
```
|
|
31
|
+
|
|
25
32
|
Add theme class name to body or root element
|
|
26
33
|
```javascript
|
|
27
34
|
<body className="cfxui-theme-cfx">
|
|
28
35
|
```
|
|
36
|
+
|
|
29
37
|
For some components you will need to define this variables in your root stiles:
|
|
30
38
|
```css
|
|
31
39
|
html {
|
|
32
40
|
--width: 100vw;
|
|
33
41
|
--height: 100vh;
|
|
34
|
-
--quant: calc(1rem * 0.25);
|
|
42
|
+
--quant: calc(1rem * 0.25); /* main measurement unit */
|
|
35
43
|
}
|
|
36
44
|
```
|
|
37
45
|
|
|
46
|
+
If you are going with scss option you can use set of utils form _ui file. In your bundler config add this sass option to use ui utils in styles:
|
|
47
|
+
```javascript
|
|
48
|
+
additionalData: `@use "@/styles/ui" as ui;`,
|
|
49
|
+
```
|
|
50
|
+
|
|
38
51
|
## License
|
|
39
52
|
This project is licensed under the MIT License.
|