Popover

Interaktive elementer i HTML

Slideshow afbrudt… for 15%

Ingen tilmelding krævet.

Klik for at afsløre koden.

Afslør kode

Kode: TEMA4

Popover & Accordion

Interaktive elementer i HTML

Slideshow afbrudt… for 15%

Ingen tilmelding krævet.

Klik for at afsløre koden.

Afslør kode

Kode: TEMA4

⨉

Popover

Indhold ovenpå indhold

https://developer.mozilla.org/en-US/docs/Web/API/Popover_API/Using​

overlay, popup, popover, dialog osv.

popover

backdrop (baggrundslag)

popover

non-modal

modal

vs.

non-modal

modal

vs.

popover

<dialog>

Popover

I sin enkleste form laver du en popover ved at tilføje attributten popover til det element, som skal vise selve popover-indholdet.


Du skal også give elementet et id, så det kan kobles sammen med det element, der åbner popoveren.

Popover

<button popovertarget="popup">Open popup</button>

<div popover id="popup">
  <h2>I'm a popup</h2>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing.</p>
</div>

Popover

<button popovertarget="popup">Open popup</button>

<div popover id="popup">
  <h2>I'm a popup</h2>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing.</p>
</div>

-attributter

popover
popovertarget
id

Popover

popovertarget

peger på id’et af den popover, der skal styres

id

bruges til at identificere popoveren og forbinde den med en kontrol

popover

markerer elementet som en popover

-attributter

popover
popovertarget
id

øvelse

Lav popup

Giv nyheden popover-attributten, og lad knappen pege på den via popovertarget og nyhedens id.

popover

id

popovertarget

Lad den forblive åben

Selectors

<button popovertarget="popup">Open popup</button>

<div popover id="popup">
  <h2>I'm a popup</h2>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing.</p>
</div>
popover

Selectors

<button popovertarget="popup">Open popup</button>

<div popover id="popup">
  <h2>I'm a popup</h2>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing.</p>
</div>
popover

Selectors

::backdrop

pseudoelement, der repræsenterer det visuelle lag bag en popover

:popover-open

popover-elementet i åben tilstand

[popover]

popover-elementet

[       ]
:popover-open
::backdrop
popover

attribut-selector

display-egenskab

Ændr ikke display direkte — brug :popover-open til at style, når popover'en er synlig.

[popover] { /* eller #min-popover */
  display: grid;
}
[popover]:popover-open {
  display: grid;
}

🚫

✅

max-width/-height

Sørg for, at din popover passer til skærmen ved at begrænse bredde og højde.

[popover] {
  max-height: 90vh;
  max-width: 50ch;
  width: 90vw;
}

Integrer popovers i dit projekt

"Breaking news"-sektion

Opgaven

CSS transitions

Glidende overgange

https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/transition​

https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Transitions/Using

CSS transitions

CSS transitions

.circle {
  /*...*/
  transition: 300ms;
}

CSS transitions

.circle {
  /*...*/
  transition: all 300ms ease;
}

CSS transitions

.circle {
  /*...*/
  transition-duration: 300ms;
  transition-behavior: normal;
  transition-timing-function: ease;
  transition-delay: 0s;
  transition-property: all;
}

CSS transitions

0s

1s

{
transition: 1s;
}

CSS transitions

0s

1s

{
transition: 1s;
}

display: none;

Transition-behavior

0s

1s

{
transition: 1s allow-discrete;
}

display: none;

venter 1 sekund

@starting-style

Når et element vises for første gang – eller går fra display: none; til synligt – starter CSS-transitions ikke automatisk.

 

Browseren har nemlig ingen tidligere stil at animere fra.

@starting-style

@starting-style løser det ved at give elementet nogle startværdier, som browseren kan animere fra, når det dukker op.

@starting-style

0s

1s

.wrapper:hover .circle {
  scale: 4;
  display: block;
}
@starting-style {
  .wrapper:hover .circle {
    scale: 1;
  }
}

display: block;

Popover transition

<button popovertarget="popup">Open popup</button>

<div popover id="popup">
  <h2>I'm a popup</h2>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing.</p>
</div>
@starting-style {
  ...
}
transition-behavior: allow-discrete;
:popover-open {
  ...
}

Popover transition

@starting-style {
  ...
}
transition-behavior: allow-discrete;
[popover] {
  opacity: 0;
  rotate: 360deg;
  transition: .5s allow-discrete;
}

:popover-open {
  opacity: 1;
  rotate: none;
}

Popover transition

@starting-style {
  ...
}
transition-behavior: allow-discrete;
[popover] {
  opacity: 0;
  rotate: 360deg;
  transition: .5s allow-discrete;
}

:popover-open {
  opacity: 1;
  rotate: none;
}

Popover transition

@starting-style {
  opacity: 0;
  rotate: -360deg;
}
transition-behavior: allow-discrete;
[popover] {
  opacity: 0;
  rotate: 360deg;
  transition: .5s allow-discrete;
}

:popover-open {
  opacity: 1;
  rotate: none;

  
  
  
    
  
}

Lukket

Før åben

Åben

Popover transition

Lukket

Før åben

Åben

Popover transition

Eksempel

Slides til Accordion

https://slides.com/dannievinther/details-accordion

Popover

By Dannie Vinther

Popover

HTML: Popover & Details/Summary

  • 113

More from Dannie Vinther