GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-04-04 13:01:07 +08:00
Code Issues Packages Projects Releases Wiki Activity

Changed indenting a bit

Browse Source
This commit is contained in:
tvs 2017-11-03 15:25:09 +01:00
parent 7a6c205dd9
commit 7783362848
1 changed files with 52 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

110
examples/polymer-cli/src/stories/storybook-welcome-to-polymer.html
View File

@ -1,63 +1,57 @@
<link rel="import" href="../../node_modules/@polymer/polymer/polymer-element.html">
<dom-module id="storybook-welcome-to-polymer">
<template>
<style>
.main {
margin: 15px;
max-width: 600px;
line-height: 1.4;
font-family: "Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif;
}
.logo {
width: 200px;
}
.code {
font-size: 15px;
font-weight: 600;
padding: 2px 5px;
border: 1px solid #eae9e9;
border-radius: 4px;
background-color: #f3f2f2;
color: #3a3a3a;
}
.note {
opacity: 0.5;
}
</style>
<div class="main">
<h1>Welcome to Storybook for Polymer</h1>
<p>
This is a UI component dev environment for your polymer app.
</p>
<p>
We've added some basic stories inside the
<code class="code">src/stories</code>
directory.
<br />
A story is a single state of one or more UI components.
You can have as many stories as you want.
<br />
(Basically a story is like a visual test case.)
</p>
<p style="text-align:center"><img src="../logo.svg" class="logo" /></p>
<p class="note">
<b>NOTE:</b>
<br />
Have a look at the
<code class="code">.storybook/webpack.config.js</code>
to add webpack
loaders and plugins you are using in this project.
</p>
</div>
</template>
<script>
class StorybookWelcomeToPolymer extends Polymer.Element {
static get is() { return 'storybook-welcome-to-polymer'; }
<template>
<style>
.main {
margin: 15px;
max-width: 600px;
line-height: 1.4;
font-family: "Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif;
}
customElements.define(StorybookWelcomeToPolymer.is, StorybookWelcomeToPolymer);
</script>
.logo {
width: 200px;
}
.code {
font-size: 15px;
font-weight: 600;
padding: 2px 5px;
border: 1px solid #eae9e9;
border-radius: 4px;
background-color: #f3f2f2;
color: #3a3a3a;
}
.note {
opacity: 0.5;
}
</style>
<div class="main">
<h1>Welcome to Storybook for Polymer</h1>
<p>This is a UI component dev environment for your polymer app.</p>
<p>
We've added some basic stories inside the <code class="code">src/stories</code> directory.
<br />
A story is a single state of one or more UI components. You can have as many stories as you want.
<br />
(Basically a story is like a visual test case.)
</p>
<p style="text-align:center"><img src="../logo.svg" class="logo" /></p>
<p class="note">
<b>NOTE:</b>
<br />
Have a look at the
<code class="code">.storybook/webpack.config.js</code>
to add webpack loaders and plugins you are using in this project.
</p>
</div>
</template>
<script>
class StorybookWelcomeToPolymer extends Polymer.Element {
static get is() { return 'storybook-welcome-to-polymer'; }
}
customElements.define(StorybookWelcomeToPolymer.is, StorybookWelcomeToPolymer);
</script>
</dom-module>