1.0.14 • Published 6 months ago
storybook-addon-responsive-columns v1.0.14
Storybook Addon Responsive Columns
A responsive, grid-based columns overlay. Define your grids using either global or local parameters, and tweak your grid properties using Columns
controls panel.
View an interactive demo.
Installation
yarn add -D storybook-addon-responsive-columns
within .storybook/main.js:
module.exports = {
addons: ['storybook-addon-responsive-columns'],
};
Usage
storybook-addon-responsive-columns
comes with some defaults to get you started.
Property | Default | Type |
---|---|---|
active | false | boolean |
gridColor | tomato | string |
opacity | 30 | number |
breakpoints | see here | object[] |
If you'd like to use custom parameters, you can do so globally using the columns
key in ./storybook/preview.js
:
export const parameters = {
columns: {
active: true,
gridColor: "salmon",
opacity: 30,
breakpoints: [
{
breakpoint: 0,
columns: 4,
gap: 8,
},
{
breakpoint: 768,
columns: 8,
gap: 16,
},
{
breakpoint: 1024,
columns: 12,
gap: 16,
maxWidth: 1224,
gutter: 24,
},
],
},
};
or locally by adding columns
to the parameters
key in your story's metadata:
export default {
parameters: {
columns: {
...
},
},
};
2.0.1-canary.5.700ccd4.0
6 months ago
2.0.1-canary.5.a432cdb.0
6 months ago
1.0.14
2 years ago
1.0.13
2 years ago
1.0.12
2 years ago
1.0.11
2 years ago
1.0.10
2 years ago
1.0.9
2 years ago
1.0.9-canary.5752ea0.0
2 years ago
1.0.8
2 years ago
1.0.7
2 years ago
1.0.6
2 years ago
1.0.6-canary.3.dc8ca71.0
2 years ago
1.0.5
2 years ago
1.0.4
2 years ago
1.0.3
2 years ago
1.0.2
2 years ago
1.0.1
2 years ago
1.0.0
2 years ago