@visns-studio/visns-components 5.4.16 → 5.4.17
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/package.json
CHANGED
|
@@ -81,7 +81,7 @@
|
|
|
81
81
|
"react-dom": "^17.0.0 || ^18.0.0"
|
|
82
82
|
},
|
|
83
83
|
"name": "@visns-studio/visns-components",
|
|
84
|
-
"version": "5.4.
|
|
84
|
+
"version": "5.4.17",
|
|
85
85
|
"description": "Various packages to assist in the development of our Custom Applications.",
|
|
86
86
|
"main": "src/index.js",
|
|
87
87
|
"files": [
|
|
@@ -1,70 +0,0 @@
|
|
|
1
|
-
# DataGrid Component
|
|
2
|
-
|
|
3
|
-
## Customizing Hover Color
|
|
4
|
-
|
|
5
|
-
The DataGrid component now supports customizable hover colors. This allows you to set different hover colors for different instances of the DataGrid.
|
|
6
|
-
|
|
7
|
-
### Method 1: Using the hoverColor Prop (Recommended)
|
|
8
|
-
|
|
9
|
-
The simplest way to set a custom hover color is to use the `hoverColor` prop directly:
|
|
10
|
-
|
|
11
|
-
```jsx
|
|
12
|
-
import DataGrid from './components/crm/DataGrid';
|
|
13
|
-
|
|
14
|
-
// In your component
|
|
15
|
-
<DataGrid
|
|
16
|
-
hoverColor="rgb(255, 240, 230)" // Custom hover color
|
|
17
|
-
// other props...
|
|
18
|
-
/>;
|
|
19
|
-
```
|
|
20
|
-
|
|
21
|
-
### Method 2: Using CSS Variables in Component Props
|
|
22
|
-
|
|
23
|
-
You can pass a custom style object to the DataGrid component with the `--hover-color` CSS variable:
|
|
24
|
-
|
|
25
|
-
```jsx
|
|
26
|
-
import DataGrid from './components/crm/DataGrid';
|
|
27
|
-
|
|
28
|
-
// Define custom styles with hover color
|
|
29
|
-
const customStyle = {
|
|
30
|
-
'--hover-color': 'rgb(255, 240, 230)', // Custom hover color
|
|
31
|
-
};
|
|
32
|
-
|
|
33
|
-
// In your component
|
|
34
|
-
<DataGrid
|
|
35
|
-
style={customStyle}
|
|
36
|
-
// other props...
|
|
37
|
-
/>;
|
|
38
|
-
```
|
|
39
|
-
|
|
40
|
-
### Method 3: Using CSS/SCSS
|
|
41
|
-
|
|
42
|
-
You can define the `--hover-color` CSS variable in your CSS or SCSS files:
|
|
43
|
-
|
|
44
|
-
```css
|
|
45
|
-
/* Global default hover color */
|
|
46
|
-
:root {
|
|
47
|
-
--hover-color: rgb(230, 240, 250);
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
/* For specific containers */
|
|
51
|
-
.special-grid-container {
|
|
52
|
-
--hover-color: rgb(255, 240, 230);
|
|
53
|
-
}
|
|
54
|
-
```
|
|
55
|
-
|
|
56
|
-
Then apply the class to your container:
|
|
57
|
-
|
|
58
|
-
```jsx
|
|
59
|
-
<div className="special-grid-container">
|
|
60
|
-
<DataGrid {...props} />
|
|
61
|
-
</div>
|
|
62
|
-
```
|
|
63
|
-
|
|
64
|
-
### Default Value
|
|
65
|
-
|
|
66
|
-
If no hover color is specified (via prop or CSS variable), the DataGrid will use a default light blue color (`rgb(230, 240, 250)`).
|
|
67
|
-
|
|
68
|
-
### Example
|
|
69
|
-
|
|
70
|
-
See the `src/examples/CustomHoverDataGrid.jsx` file for a complete example of how to implement custom hover colors using all three methods.
|