mirror of
https://github.com/storybookjs/storybook.git
synced 2025-04-03 05:04:51 +08:00
52 lines
1.3 KiB
JavaScript
52 lines
1.3 KiB
JavaScript
import React from 'react';
|
|
|
|
export default {
|
|
title: 'Addons/Cssresources',
|
|
};
|
|
|
|
export const PrimaryLargeButton = () => (
|
|
<button type="button" className="btn btn-lg btn-primary">
|
|
Primary Large Button
|
|
</button>
|
|
);
|
|
PrimaryLargeButton.storyName = 'Primary Large Button';
|
|
|
|
PrimaryLargeButton.parameters = {
|
|
cssresources: [
|
|
{
|
|
id: `bootstrap v4.1.3`,
|
|
code: `<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"></link>`,
|
|
picked: true,
|
|
},
|
|
{
|
|
id: `bootstrap v3.3.5`,
|
|
code: `<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"></link>`,
|
|
picked: false,
|
|
},
|
|
],
|
|
options: {
|
|
selectedPanel: 'storybook/cssresources/panel',
|
|
},
|
|
};
|
|
|
|
export const CameraIcon = () => <i className="fa fa-camera-retro"> Camera Icon</i>;
|
|
CameraIcon.storyName = 'Camera Icon';
|
|
|
|
CameraIcon.parameters = {
|
|
cssresources: [
|
|
{
|
|
id: `fontawesome`,
|
|
code: `<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"></link>`,
|
|
picked: true,
|
|
},
|
|
{
|
|
id: `whitetheme`,
|
|
code: `<style>.fa { color: #fff }</style>`,
|
|
picked: false,
|
|
},
|
|
],
|
|
options: {
|
|
selectedPanel: 'storybook/cssresources/panel',
|
|
},
|
|
};
|