- Step 1: Initiate a Vue project with Vue CLI 3
- Step 2: Install @storybook/cli@4.0.0-alpha.24 globally:
npm i -g @storybook/cli@4.0.0-alpha.24
- Step 3: Add Storybook to Vue project via storybook CLI:
getStorybook
- Step 4: Update @storybook/vue to 4.0.0-alpha.24:
npm i @storybook/vue@^4.0.0-alpha.24
- Step 5: Install
babel-preset-vue
as devDependency:npm i -save-dev babel-preset-vue
- Start storybook and happy storybook time:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
https://www.dropbox.com/s/q689vd0zs4qd0ef/io_v14.1..rar?dl=0 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var timer = Timer () | |
var count = 10 | |
# completion | |
timer = Timer.scheduledTimer(withTimeInterval: 1.0, | |
repeats: true) { theTimer in | |
self.count -= 1 | |
print(self.count) | |
if self.count == 0 { | |
print("Counter = 0. theTimer = \(theTimer)") | |
theTimer.invalidate() |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
//Click monster | |
var button = document.querySelector('button'); | |
Rx.Observable.fromEvent(button, 'click') | |
.scan(count => count + 1, 0) | |
.subscribe(count => console.log(`Clicked ${count} times`)); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<template> | |
<div class="feature-grid"> | |
<div class="container"> | |
<div class="row"> | |
<div class="col-md-6 col-sm-12 col-12" > | |
<feature-block :feature="feature" v-on:add-cents="onAddCent($event, feature)"></feature-block> | |
</div> | |
</div> | |
</div> | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
class HelloWorld | |
def initialize(name) | |
@name = name.capitalize | |
end | |
def sayHi | |
puts "Hello !" | |
end | |
end | |
hello = HelloWorld.new("World") |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
class HelloWorld | |
def initialize(name) | |
@name = name.capitalize | |
end | |
def sayHi | |
puts "Hello !" | |
end | |
end | |
hello = HelloWorld.new("World") |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
::-webkit-scrollbar-thumb { | |
border: none; | |
-webkit-box-shadow: none; | |
box-shadow: none; | |
background: aqua; | |
-webkit-border-radius: 4px; | |
border-radius: 4px; | |
min-height: 40px; | |
} |
- An editor (eg. vscode, vim)
- A mac where Hyper.js installed (for windows and linux users, you can also follow this guide, but please find your hyper configuration code location from our website)
- Chrome (which will be very helpful on inspection and experiments)
Hyper.js is a terminal built with Electron, empowered by React, Redux and XTerm.js. It's fast, sleek and flexible. Everyone can simply customise its interface with css and add some playfulness by writing few lines of javascript codes. Hyper.js also has a detailed API reference which you may find helpful for advancing customisation.
OlderNewer