@blueprintui/grid 1.10.5 → 1.10.6
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 +80 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,3 +1,83 @@
|
|
|
1
1
|
# BlueprintUI Grid
|
|
2
2
|
|
|
3
|
+
Accelerate your development with a flexible UI datagrid that works everywhere.
|
|
4
|
+
|
|
5
|
+
|
|
3
6
|
[](https://badge.fury.io/js/@blueprintui%2Fgrid)
|
|
7
|
+
|
|
8
|
+
- [Documentation](https://blueprintui.dev/docs/grid)
|
|
9
|
+
- [JavaScript CDN](https://stackblitz.com/edit/blueprintui-grid-cdn)
|
|
10
|
+
|
|
11
|
+
## Installation
|
|
12
|
+
|
|
13
|
+
To use the datagrid install the following,
|
|
14
|
+
|
|
15
|
+
```shell
|
|
16
|
+
npm install @blueprintui/grid @blueprintui/themes
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
Optional packages for layout and typography utilities are also available.
|
|
20
|
+
|
|
21
|
+
```shell
|
|
22
|
+
npm install @blueprintui/layout @blueprintui/typography
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
## CSS
|
|
26
|
+
|
|
27
|
+
To use components the base theme CSS file must be loaded into the page. This can be done via a CSS import or HTML link.
|
|
28
|
+
|
|
29
|
+
```css
|
|
30
|
+
@import '@blueprintui/themes/index.min.css';
|
|
31
|
+
@import '@blueprintui/themes/modern/index.min.css';
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
or
|
|
35
|
+
|
|
36
|
+
```html
|
|
37
|
+
<link rel="stylesheet" href="@blueprintui/themes/index.min.css">
|
|
38
|
+
<link rel="stylesheet" href="@blueprintui/themes/modern/index.min.css">
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
## CDN
|
|
42
|
+
|
|
43
|
+
Blueprint UI Components can be used via CDNs for fast and easy prototyping.
|
|
44
|
+
|
|
45
|
+
```html
|
|
46
|
+
<link rel="stylesheet" href="https://unpkg.com/@blueprintui/themes/index.min.css">
|
|
47
|
+
<link rel="stylesheet" href="https://unpkg.com/@@blueprintui/themes/modern/index.min.css">
|
|
48
|
+
|
|
49
|
+
<script type="module">
|
|
50
|
+
import 'https://cdn.jsdelivr.net/npm/@blueprintui/grid/include/core.js/+esm';
|
|
51
|
+
</script>
|
|
52
|
+
```
|
|
53
|
+
|
|
54
|
+
## Using a Component
|
|
55
|
+
|
|
56
|
+
Once the theme CSS is loaded the grid can be imported via JavaScript imports.
|
|
57
|
+
|
|
58
|
+
```javascript
|
|
59
|
+
import '@blueprintui/grid/include/core.js';
|
|
60
|
+
import '@blueprintui/grid/include/keynav.js';
|
|
61
|
+
```
|
|
62
|
+
|
|
63
|
+
```html
|
|
64
|
+
<body bp-theme="modern">
|
|
65
|
+
|
|
66
|
+
<bp-grid>
|
|
67
|
+
<bp-grid-header>
|
|
68
|
+
<bp-grid-column>Column</bp-grid-column>
|
|
69
|
+
<bp-grid-column>Column</bp-grid-column>
|
|
70
|
+
<bp-grid-column>Column</bp-grid-column>
|
|
71
|
+
<bp-grid-column>Column</bp-grid-column>
|
|
72
|
+
</bp-grid-header>
|
|
73
|
+
|
|
74
|
+
<bp-grid-row>
|
|
75
|
+
<bp-grid-cell>Cell</bp-grid-cell>
|
|
76
|
+
<bp-grid-cell>Cell</bp-grid-cell>
|
|
77
|
+
<bp-grid-cell>Cell</bp-grid-cell>
|
|
78
|
+
<bp-grid-cell>Cell</bp-grid-cell>
|
|
79
|
+
</bp-grid-row>
|
|
80
|
+
</bp-grid>
|
|
81
|
+
|
|
82
|
+
</body>
|
|
83
|
+
```
|