Under 2024 har vi lanserat ett nytt sätt att arbeta med knappar i Snowfire. Alla standardblock har uppdaterats till version 2. Om du har skapat egna block kommer här en guide för hur du kan migrera dina block till att använda button 2.0
Nyheter i button 2.0
Knappen har en standardinställning som kan definieras under 'Utseende'
Stöd för gradients
Stöd för kantlinjer, vilket gör det möjligt att ha "ghost"-utseende med transparent bakgrund och enbart en kantlinje i färg
Olika storlekar på knappens yta
Marginal mellan innehåll och knapp
Ställ in olika avrundningar
Välj position på knappen (vänsterställd/centrerad/högerställd)
Stöd för SVG-ikoner/emojis
Migrera
Steg 1 (HTML)
Börja med att hitta HTML-koden för knappen, som bör se ut så här:
<sf-link id=":3" description="Button" class="hero-button"></sf-link>
Lägg till purpose="button"
<sf-link id=":3" description="Button" class="hero-button" purpose="button"></sf-link>
Steg 2 (CSS)
Identifiera var du har din wrapper för knappen. I mitt fall heter blocket hero vilket gör att min wrappoer heter hero-button-wrapper
I princip all kod inuti ska bytas ut till följande:
.hero-button-wrapper {
display: $show-button;
justify-content: $button-justify-content;
a.hero-button {
@include button();
}
.hero-button a:hover {
color: $button-color-hover;
background: $button-background-hover;
border-color: $button-border-color-hover;
}
}Glöm inte att byta namn från hero-button till det din knapp heter när du kopierar koden.
Steg 3 (Properties)
Ersätt hela button-blocket
Med följande kod:
<button name="button" version="2" />
Steg 4 (Properties)
Ersätt block mot flex här:
<switch variable="$showButton" on="block" off="none" kind="button" default="true"/>
Så det blir
<switch variable="$showButton" on="flex" off="none" kind="button" default="true"/>
Steg 5 (Properties)
Radera följande rad för ev. avrundad knapp
<switch variable="$roundedButton" on="100px" off="0" kind="button-rounded" default="true" />
Sen är det bara att ladda om och använda alla nya funktioner på knappen 🎉