Hello, Am Udhay (OO-dhy)
Trusted by:
# Create new Angular project
ng new storybook
.
.
.
# Add Storybook to the Angular project just created
npx -p @storybook/cli sb init --type angular
Okay, it's time to run Storybook and see how it looks!
npm run storybook
🎨
A story captures the rendered state of a UI component. Developers write multiple stories per component that describe all the “interesting” states a component can support.
For ex: Button with multiple states like Active, Disabled etc.,
🖼️
ng g c image
Let's create a simple Image component to play around different attributes of it in terms of Stories..
🖼️
import { Component, Input, OnInit } from '@angular/core';
@Component({
selector: 'app-image',
templateUrl: './image.component.html',
styleUrls: ['./image.component.css'],
})
export class ImageComponent implements OnInit {
@Input()
imgSrc: string = '<UPDATE IMAGE URL>'; //Make sure you add your image URL
@Input()
altTxt?: string = 'Pondicherry French Hotel';
@Input()
figCaptionTxt?: string =
'The French Quarter or White Town area in Pondicherry is filled with elegant colonial mansions in the midst of tree-lined boulevards, named on French streets beginning with "rue", numerous parks and charming cafés.';
@Input()
imgOpacity?: number = 1;
constructor() {}
ngOnInit(): void {}
}
image.component.ts
🖼️
<figure>
<img
[ngStyle]="{ opacity: imgOpacity }"
src="{{ imgSrc }}"
alt="{{ altTxt }}"
style="width: 100%;"
/>
<figcaption *ngIf="figCaptionTxt && figCaptionTxt.trim().length > 0">
{{ figCaptionTxt }}
</figcaption>
</figure>
image.component.html
figcaption {
background-color: #ddd;
color: #000;
font-style: italic;
padding: 5px;
text-align: center;
font-size: 18px;
}
image.component.css
🖼️
📚
#Create an Image Stories TypeScript file
cd src/stories
touch Image.stories.ts
Let's create multiple stories to render Image component with caption, without caption, with full opacity and with half opacity..
📚
import { moduleMetadata } from '@storybook/angular';
import { CommonModule } from '@angular/common';
// also exported from '@storybook/angular' if you can deal with breaking changes in 6.1
import { Story, Meta } from '@storybook/angular/types-6-0';
import { ImageComponent } from '../app/image/image.component';
export default {
title: 'Example/Image Component',
component: ImageComponent,
} as Meta;
const Template: Story<ImageComponent> = (args: ImageComponent) => ({
component: ImageComponent,
props: args,
});
export const NoImageCaption = Template.bind({});
NoImageCaption.args = {
figCaptionTxt: '',
};
export const WithImageCaption = Template.bind({});
WithImageCaption.args = {
figCaptionTxt: 'The French Quarter or White Town area in Pondicherry is filled with elegant colonial mansions in the midst of tree-lined boulevards, named on French streets beginning with "rue", numerous parks and charming cafés.'
};
export const WithZeroOpacity = Template.bind({});
WithZeroOpacity.args = {
imgOpacity: 1
};
export const WithHalfOpacity = Template.bind({});
WithHalfOpacity.args = {
imgOpacity: 0.5
};
🧱
Storybook addons enable advanced functionality and unlock new workflows. Contributed by core maintainers and the amazing developer community.
Essentials
🌎
Build static site and publish it to your favorite hosting service.
#Build storybook static site
npm run build-storybook
.
.
cd storybook-static
#To run locally
lite-server
.
.
#Deploy to GitHub Pages
npm run deploy-storybook
Code -
Demo -
Checkout my previous