@stevendejong/storybook-stylesheet-toggle 0.0.1 → 0.0.2
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 +32 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,2 +1,33 @@
|
|
|
1
1
|
# Storybook Addon Stylesheet Toggle
|
|
2
|
-
|
|
2
|
+
|
|
3
|
+
The Storybook Stylesheet Toggle Plugin is a simple and convenient tool for changing stylesheets on the fly within your Storybook stories. It allows you to dynamically switch between different stylesheets using a dropdown menu accessed via a toolbar button.
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
## Usage
|
|
7
|
+
|
|
8
|
+
### Setting Stylesheets
|
|
9
|
+
|
|
10
|
+
You can specify the stylesheets you want to toggle in your story using the `stylesheetToggle` parameter. This parameter should be an object where each key represents a label for the stylesheet option, and the corresponding value is the path to the stylesheet file or a URL:
|
|
11
|
+
|
|
12
|
+
```typescript
|
|
13
|
+
import type { Preview } from "@storybook/react";
|
|
14
|
+
|
|
15
|
+
const preview: Preview = {
|
|
16
|
+
parameters: {
|
|
17
|
+
...
|
|
18
|
+
stylesheetToggle: {
|
|
19
|
+
"default": "main.css",
|
|
20
|
+
"custom-theme": "custom-theme.css",
|
|
21
|
+
"second-custom-theme": "https://second.com/custom-theme.css",
|
|
22
|
+
},
|
|
23
|
+
...
|
|
24
|
+
},
|
|
25
|
+
};
|
|
26
|
+
|
|
27
|
+
export default preview;
|
|
28
|
+
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
|
|
32
|
+
## Using the Toggle
|
|
33
|
+
Once you've configured your story, you'll see a toolbar button in Storybook that allows you to select and apply different stylesheets to your components during development.
|