Navbar
.container
Setter en container rundt objektet
eks
<div class= " container " ></div>
Farger
Setter på background eller color
eks
<div class= " teal " ></div>
Legg til .bg for background-color og .text-color for color
.teal
.red
.pink
.indigo
.blue
.cyan
.green
.orange
.amber
.black
Text
text-aleign:center
eks
<div class= " center " ></div>
Div element
.inline (display: inline-block), .block (display: block), .center-block (d:block, margin:auto)
eks
<div class= " center-block " ></div>
Knapper
Legg til knapper
eks
<button class="btn small filled">Knapp</button>
<button class="btn flat teal">Knapp</button>
<button class="btn large outline amber">Knapp</button>
Nav
Legger til en navbar. Skal være øverst utenfor div
Legg til .nav-fixed for å gjøre den fixed til toppen
eks
<div class="nav fixed-nav blue">
<h1 class="white-text center no-padding">Navbar</h1>
</div>
<div class="nav-space"></div>
Navbar
Søyle diagramm
<div class="graf-parent">
<div class="graf teal white-text" style="width: 10%;">10</div>
<div class="graf teal white-text" style="width: 90%;">90</div>
<div class="graf teal white-text" style="width: 40%;">40</div>
</div>
<div class="graf-parent standing" style="height: 300px">
<div class="graf teal white-text" style="height: 10%;">10</div>
<div class="graf teal white-text" style="height: 90%;">90</div>
<div class="graf teal white-text" style="height: 40%;">40</div>
</div>
Class Søyle diagramm
<div class="graf-parent" id="graf1">
<div class="graf teal white-text" data-value="1">10</div>
<div class="graf teal white-text" data-value="9">90</div>
<div class="graf teal white-text" data-value="4">40</div>
</div>
<div class="graf-parent standing" id="graf2" style="height: 300px">
<div class="graf teal white-text" data-value="10">10</div>
<div class="graf teal white-text" data-value="90">90</div>
<div class="graf teal white-text" data-value="40">40</div>
</div>
const gph1 = new Graph(parentDiv, options={})
Options
- Transition: sets transition (1s default)
- Animation: if it should animate (true default)
- Delay: autoplay after given millisec (null default)
Methods
- graf.play(): plays the animation
- graf.add(value, classes=[], text=''): add one to the graf
parent,
value: of
the
child, classes: classes to the graf, text: innerHTML
- graf.max/graf.oldMax: get the max of the graf elements
Collection
<ul class="collection">
<li class="collection-item">Alvin</li>
<li class="collection-item">Alvin</li>
<li class="collection-item">Alvin</li>
<li class="collection-item">Alvin</li>
</ul>
Error
<script>
const options = {}
const err = new ErrorBar(options)
err.show('The text', 'error') //red
err.show('The text', 'success') //green
</script>
Options
- parent: HTMLelement, parent of the errorbar (default: document.body)
- showTime: millliseconds, how long should the errorbar stay open (default:
4000)
- transition: ex. 1s, how long should the trasition take (default: 1s)
Methods
- err.show(text, color): Displays the error message
- err.close(): Closes the error message
- err.text: get or set the text of the error
Modal
Åpner en boks
<div class="modal" id="modal1">
<div class="modal-content left">
Some Text
</div>
<div class="modal-footer">
<a href="#" class="btn flat teal text-color">Disagree</a>
<a href="#" class="btn flat red text-color">Agree</a>
</div>
</div>
Må kjøre initModal()
Card
Creates a card element
<div class="card">
<div class="card-img">
<img src="static/nice-france.jpg" alt="">
</div>
<div class="card-content">
<h2 class="cetner">France</h2>
<div class="flex1">
<p>Something</p>
<p>Something more</p>
</div>
</div>
</div>
Card-holder
Element that holdes card
<div class="card">
<div class="card-img">
<img src="static/nice-france.jpg" alt="">
</div>
<div class="card-content">
<h2 class="cetner">France</h2>
<div class="flex1">
<p>Something</p>
<p>Something more</p>
</div>
</div>
</div>
Card functions
Add to the card-holder
<script>
addNewCard(parent, array, options = {})
</script>
Array
- img: src, adds a img to the card
- html: html, innerHTML of the card-content
- index: number, Sets the data-index of the card element
Options
- click: function, function to run on click
Slideshow
Er en slideshow
<div class="slideshow" id="slideshow1">
<div class="roller">
<div class="slide cover"
data-img="static/nice-france.jpg">
<h1 class="center white-text f-4rem">Dette er Frankrike</h1>
</div>
<div class="slide cover" data-img="http://img.gfx.no/615/615789/bilde1.jpg">
</div>
<div class="slide cover"
data-img="https://www.guru-utvikling.no/wp-content/uploads/2017/05/Bilde-til-sak-om-bilder-750x365.jpg">
</div>
<div class="slide cover"
data-img="https://www.gettyimages.ie/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg">
</div>
<div class="slide cover"
data-img="https://cdn-files.cloud/wp-content/blogs.dir/93/files/2017/07/Strand-bildetips.jpg">
</div>
</div>
</div>
<script>
const slideshow1 = document.querySelector('#slideshow1')
const ssh = new slideshow(slideshow1, {
transition: '0.5s',
speed: 3000
})
</script>
Options
- speed: number (millliseconds), time between each slide (default: 2000)
- transition: ex. 1s, how long should the trasition take (default: 1s)
- arrow: boolean, if there should be arrow or not (default: true)
Methods
- ssh.numSlides: gets the number of slides
- ssh.nextArrow(): displays the next slide
- ssh.previousArrow(): displays the previous slide
