Absolutely, our Syncfusion controls seamlessly integrate with the Storybook application. This means that you can incorporate the Syncfusion library into your Storybook application effortlessly. To assist you with this process, we recommend following the steps outlined below.
Step 1: Begin by creating a new Angular CLI application and include our simple button component. Refer to the documentation provided at the link below for detailed instructions.
Documentation:
Step 2: Navigate to your Angular project directory and execute the following shell command to add Storybook to your project.
npx sb init
You will notice that the stories and Storybook files have been successfully added to your project folder.
Step 3: Create a new “.ts” file within the “./src/stories/ej2button.stories.ts” directory, and populate it with the script snippets provided below.
import { Story, Meta } from '@storybook/angular/types-6-0';
import { ButtonComponent, Button } from '@syncfusion/ej2-angular-buttons';
export default {
title: 'Example/SyncfusionEJ2Button',
component: ButtonComponent,
argTypes: {
// backgroundColor: { control: 'color' },
},
} as Meta;
const Template: Story<ButtonComponent> = (args: ButtonComponent) => ({
component: ButtonComponent,
props: args,
});
export const Primary = Template.bind({});
Primary.args = {
cssClass: 'e-primary',
content: 'Button',
};
export const Secondary = Template.bind({});
Secondary.args = {
content: 'Button',
};
Step 4: Additionally, create a new “.html” file in the “./storybook/preview-head.html” directory, and insert the CDN link for styles as shown below.
<link href=https://cdn.syncfusion.com/ej2/material.css rel="stylesheet" type="text/css"/>
Step 5: Launch the Storybook application in a browser window by executing the command provided below.
npm run storybook
The Storybook application interface should now be visible in your browser window.
Output
To make things easier for you, we have included a sample Button component within the Storybook. Feel free to download and utilize this sample from the link below.
Sample: