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

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

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

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

.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

{
transition: 1s;
}

CSS transitions

{
transition: 1s;
}

display: none;

Transition-behavior

{
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

.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