Knappen Snurra åt vänster
Skapat för:
- Utvecklare
- Användare
Om du väljer den här knappen flyttas bilden till vänster i huvudvyn. Den här knappen visas inte på mobiltelefoner för att spara skärmutrymme. Knappen döljs också när en flerdimensionell rotationsuppsättning används. Du kan ändra storlek på, skalförändra och placera knappen med CSS.
CSS-egenskaper för rotationsknapparna
Knappen läggs till i en intern behållare som är DIV styrd med CSS-klassväljaren:
.s7mixedmediaviewer .s7spinbuttons
| CSS-egenskap | Beskrivning |
|---|---|
| övre | Placera från den övre kanten, inklusive utfyllnad. |
| höger | Placera från den högra kanten, inklusive utfyllnad. |
| kvar | Placera från den vänstra kanten, inklusive utfyllnad. |
| nederkant | Placera från den nedre kanten, inklusive utfyllnad. |
| width | Knappens bredd. |
| height | Knappens höjd. |
Utseendet på den här knappen inuti behållaren styrs med CSS-klassväljaren:
.s7mixedmediaviewer .s7spinbuttons .s7panleftbutton
| CSS-egenskap | Beskrivning |
|---|---|
| övre | Placera från den övre kanten, inklusive utfyllnad. |
| höger | Placera från den högra kanten, inklusive utfyllnad. |
| kvar | Placera från den vänstra kanten, inklusive utfyllnad. |
| nederkant | Placera från den nedre kanten, inklusive utfyllnad. |
| width | Knappens bredd. |
| height | Knappens höjd. |
| background-image | Bilden som visas för ett visst knappläge. |
| background-position |
Placera inuti en teckningssprite, om CSS-sprites används. Se CSS-fragment. |
NOTEstate som kan användas för att tillämpa olika skal på olika knapplägen.Knappens tips kan lokaliseras. Mer information finns i Lokalisering av användargränssnittselement.
Exempel - För att ställa in en knapp med rotation till vänster som är 28 x 28 pixlar och som är placerad på den vänstra kanten av behållaren. Slutligen visas olika bilder för de fyra olika knapplägena:
.s7mixedmediaviewer .s7spinbuttons .s7panleftbutton {
position:absolute;
left: 0px;
width:28px;
height:28px;
background-size:contain;
}
.s7mixedmediaviewer .s7spinbuttons .s7panleftbutton[state='up'] {
background-image:url(images/v2/SpinLeftButton_light_up.png);
}
.s7mixedmediaviewer .s7spinbuttons .s7panleftbutton[state='over'] {
background-image:url(images/v2/SpinLeftButton_light_over.png);
}
.s7mixedmediaviewer .s7spinbuttons .s7panleftbutton[state='down'] {
background-image:url(images/v2/SpinLeftButton_light_down.png);
}
.s7mixedmediaviewer .s7spinbuttons .s7panleftbutton[state='disabled'] {
background-image:url(images/v2/SpinLeftButton_light_disabled.png);
}