Knop Eerste pagina first-page-button

Als u op deze knop klikt of erop tikt, komt de gebruiker op de eerste pagina in de catalogus te staan. Deze knop wordt weergegeven in de hoofdbesturingsbalk op desktopsystemen en tablets. op mobiele telefoons wordt het toegevoegd aan een secundaire besturingsbalk. U kunt deze knop vergroten, verkleinen, verkleinen en plaatsen met CSS.

CSS-eigenschappen van het hoofdviewergebied

De vormgeving van de knop wordt bepaald door de volgende CSS-klassenkiezer:

.s7ecatalogsearchviewer .s7firstpagebutton .s7panleftbutton

CSS-eigenschap
Beschrijving
top
Plaats vanaf de bovenrand van de hoofdbesturingsbalk (op desktopsystemen en tablets) of de secundaire besturingsbalk (op mobiele telefoons), inclusief opvulling.
right
Positie vanaf de rechterrand van de hoofdbesturingsbalk (op desktopsystemen en tablets) of de secundaire besturingsbalk (op mobiele telefoons), inclusief opvulling.
left
Positie vanaf de linkerrand van de hoofdbesturingsbalk (op desktopsystemen en tablets) of de secundaire besturingsbalk (op mobiele telefoons), inclusief opvulling.
bottom
Plaats vanaf de onderrand van de hoofdbesturingsbalk (op desktopsystemen en tablets) of de secundaire besturingsbalk (op mobiele telefoons), 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 ook 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 - Aan opstelling een eerste paginaknoop die 28 x 28 pixel is, en geplaatst 4 pixel van de bodem en 220 pixel van de linkerrand van de belangrijkste controlebar. En tenslotte, toont een verschillend beeld voor elk van de vier verschillende knoopstaten.

.s7ecatalogsearchviewer .s7firstpagebutton .s7panleftbutton {
bottom:4px;
left:220px;
width:32px;
height:32px;
}
.s7ecatalogsearchviewer .s7firstpagebutton .s7panleftbutton [state='up'] {
background-image:url(images/v2/FirstPageButton_dark_up.png);
}
.s7ecatalogsearchviewer .s7firstpagebutton .s7panleftbutton [state='over'] {
background-image:url(images/v2/FirstPageButton_dark_over.png);
}
.s7ecatalogsearchviewer .s7firstpagebutton .s7panleftbutton [state='down'] {
background-image:url(images/v2/FirstPageButton_dark_down.png);
}
.s7ecatalogsearchviewer .s7firstpagebutton .s7panleftbutton [state='disabled'] {
background-image:url(images/v2/FirstPageButton_dark_disabled.png);
}
recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8