Linkerkant draaien, knop spin-left-button

Als u deze knop selecteert, wordt de afbeelding in de hoofdweergave links gecentreerd. Deze knop wordt niet weergegeven op mobiele telefoons om de schermruimte op te slaan. De knop is ook verborgen wanneer een multidimensionale centrifugeset wordt gebruikt. U kunt de grootte, de huid, en de positie van de knoop gebruikend CSS.

CSS-eigenschappen van de centrifugeknoppen

De knop wordt toegevoegd aan een interne container die wordt beheerd met de CSS-klassenkiezer:

.s7mixedmediaviewer .s7spinbuttons
CSS-eigenschap
Beschrijving
top
Positie vanaf de bovenrand, inclusief opvulling.
right
Positie vanaf de rechterrand, inclusief opvulling.
left
Positie vanaf de linkerrand, inclusief opvulling.
bottom
Positie vanaf de onderrand, inclusief opvulling.
width
Breedte van de knop.
height
Hoogte van de knop.

De weergave van deze knop in de container wordt bepaald door de CSS-klassenkiezer:

.s7mixedmediaviewer .s7spinbuttons .s7panleftbutton
CSS-eigenschap
Beschrijving
top
Positie vanaf de bovenrand, inclusief opvulling.
right
Positie vanaf de rechterrand, inclusief opvulling.
left
Positie vanaf de linkerrand, inclusief opvulling.
bottom
Positie vanaf de onderrand, inclusief opvulling.
width
Breedte van de knop.
height
Hoogte van de knop.
achtergrondafbeelding
De afbeelding die voor een bepaalde knopstatus wordt weergegeven.
background-position

Positie binnen illustratie-sprite, als CSS-sprites worden gebruikt.

Zie CSS-sprites.

NOTE
Deze knop ondersteunt de state kenmerkenkiezer, die kan worden gebruikt om verschillende skins toe te passen op verschillende knoptoestanden.

De knopinfo kan worden gelokaliseerd. Zie Lokalisatie van gebruikersinterface-elementen voor meer informatie .

Voorbeeld - Een linksom draaien-knop van 28 x 28 pixels instellen die op de linkerrand van de binnencontainer wordt geplaatst. En tenslotte, toont een verschillend beeld voor elk van de vier verschillende knoopstaten:

.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);
}
recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8