ButtonGroup-konsept #4504
ButtonGroup-konsept #4504
Conversation
|
✅ Forhåndsvisning: https://jokul.fremtind.no/preview/4503-button-group/ Forhåndsvisningen blir tilgjengelig innen et par minutter. Den fjernes automatisk når pull requesten lukkes. |
| @use "../../../core/jkl"; | ||
|
|
||
| .jkl-button-group { | ||
| container: --button-group / inline-size; |
There was a problem hiding this comment.
Min første reaksjon her var er dette en CSS variabel?
Mulig det er min feil fordi jeg ikke har sett så mye på syntaxen til container-queries enda men jeg tror jeg ville foretrukket å droppe -- prefix for container-name.
There was a problem hiding this comment.
Hehe, ser absolutt hvor reaksjonen kommer fra! Dette er en dashed-ident, som for så vidt er det samme som brukes til å navngi custom variabler. Det er i ferd med å bli standard for å navngi egendefinerte verdier i CSS.
container-name støtter også "vanlig" custom-ident, så vi kan fint kjøre uten -- her! Tenkte bare jeg skulle være litt foran kurven 😅 For eksempel støtter anchor() API-et for plassering kun dashed-ident, så man må nok bli vant til det før eller senere uansett.
| // La knappene ta full bredde hvis de er i en smal ButtonGroup | ||
| @container --button-group (max-width: 350px) { | ||
| width: 100%; | ||
| } |
There was a problem hiding this comment.
Dette vil utvilsomt se bedre ut i CookieConsent. Jeg var faktisk litt på gjerdet på om jeg skulle bruke jkl.screen-from i stedet for jkl.from-medium-device fordi jeg syns knapper i full bredde øverst i "small device" kategorien vår blir litt vel brede.
There was a problem hiding this comment.
Kanskje 350px her kunne kommet fra en CSS-variabel med en default slik at konsumenten av komponenten kan overstyre om de har veldig lange knappetekster.
@container --button-group (max-width: var(--jkl-button-group-breakpoint, 350px)) {
width: 100%;
}Eller noe slikt, gitt at det er lov å bruke variabler der da.
There was a problem hiding this comment.
En variabel er nok en god idé for en ordentlig implementasjon av dette, ja!
Edit: Det funker visst ikke med custom variables i media- og container queries.
En tenkt implementasjon av
ButtonGroupfra issue #4503 .