Bølge section #3094
Bølge section #3094
Conversation
tuva-odegard
force-pushed
the
bølge-divider
branch
from
72c2754 to
cb5edd2
Compare
|
Azure Static Web Apps: Your stage site is ready! Visit it here: https://black-beach-0d62d0d03-3094.westeurope.2.azurestaticapps.net |
4 similar comments
|
Azure Static Web Apps: Your stage site is ready! Visit it here: https://black-beach-0d62d0d03-3094.westeurope.2.azurestaticapps.net |
|
Azure Static Web Apps: Your stage site is ready! Visit it here: https://black-beach-0d62d0d03-3094.westeurope.2.azurestaticapps.net |
|
Azure Static Web Apps: Your stage site is ready! Visit it here: https://black-beach-0d62d0d03-3094.westeurope.2.azurestaticapps.net |
|
Azure Static Web Apps: Your stage site is ready! Visit it here: https://black-beach-0d62d0d03-3094.westeurope.2.azurestaticapps.net |
tuva-odegard
force-pushed
the
bølge-divider
branch
from
c3c853b to
ea43c77
Compare
|
Azure Static Web Apps: Your stage site is ready! Visit it here: https://black-beach-0d62d0d03-3094.westeurope.2.azurestaticapps.net |
Vi foreslår en BølgeSection som kan brukes for å skille seksjoner fra hverandre i nettbanken.
Det er et alternativ til å ha en blå bølge øverst eller nederst på siden, fordi det skaper problemer i liquid glass.
Denne bølgen har flere like egenskaper som den eksisterende
Wave, men vi har valgt å ta den i en egen komponent for å skille på bruksområdet, og fordi det blir lettere for brukeren å ta i bruk en ny bølge som seksjonsdeler heller enn å rette på breaking changes.Farger
Vi tilbyr
WaveSectioni accent mode, background-subtle, surface-secondary og surface-tertiary. Navngivningen er litt kronglete, men det er for å påpeke forskjellen i fargene, egentlig er ikke de lyseblå og lilla fargene ment til å være bakgrunnsfarger, men vi synes de passer bra nok her. Det er ikke tiltenkt å bruke de tre siste fargene i accent mode, det blir ikke pent.Utseende
Utseende må tweakes litt på, vi avventer design fra Ragnhild eller Martin. Vi har brukt clip-path i stedet for SVG, det gjør det litt mindre buggy i firefox og generelt.
Det er brukt som en hel seksjon i stedet for at det kun er en divider for å unngå at det oppstår en pixellinje mellom seksjonen og divideren.
Top, Bunn, Begge
Fremover anbefaler vi helst å bruke
wavePosition="both"fordi bølgen ikke skal brukes i topp og bunn på grunn av accent mode. Unntakene er hvis man ikke bruker accent-mode (bg-accent), da kan det gå fint i topp og bunn. Dobbeltsjekk med Liquid glass.Pusher som PR så dere kan se på dokumentasjonen og komme med tilbakemelding, @martingaard @raglie-sb1 😄