DocumentatieNaslaggids voor dynamische mediasviewers

Stalen swatches

Last update: Fri Aug 15 2025 00:00:00 GMT+0000 (Coordinated Universal Time)
  • Onderwerpen:

Gemaakt voor:

  • Ontwikkelaar
  • Gebruiker

Stalen bestaan uit een rij miniatuurafbeeldingen met optionele schuifknoppen aan de linker- en rechterzijde.

Schuifknoppen zijn alleen zichtbaar op het bureaublad als alle miniaturen niet in de breedte van de container passen. Op mobiele apparaten, of als de duimnagels in de containerbreedte kunnen passen, worden de rolknopen niet getoond.

CSS eigenschappen van de monsters

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

.s7flyoutviewer .s7swatches
CSS-eigenschap
Beschrijving
width
De breedte van de stalen.
height
De hoogte van de stalen.
bottom
De verticale verschuiving van stalen ten opzichte van de viewercontainer.

Voorbeeld - Stalen instellen op 460 x 100 pixels:

.s7flyoutviewer .s7swatches {
 width: 460px;
 height: 100px;
}

CSS eigenschappen van het duimnagelmonster uit elkaar plaatsen

De ruimte tussen staalminiaturen wordt bepaald door de CSS-klassenkiezer:

.s7flyoutviewer .s7swatches .s7thumbcell
CSS-eigenschap
Beschrijving
margin
De grootte van de horizontale en verticale marge rond elke miniatuur. De werkelijke miniatuurafstand is gelijk aan de som van de linker- en rechtermarge die is ingesteld voor .s7thumbcell .

Voorbeeld - als u een afstand van tien pixels wilt instellen, zowel verticaal als horizontaal:

.s7flyoutviewer .s7swatches .s7thumbcell {
 margin: 5px;
}

CSS eigenschappen van de duimnagelstalen

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

.s7flyoutviewer .s7swatches .s7thumb
CSS-eigenschap
Beschrijving
width
De breedte van de miniatuurstalen.
height
De hoogte van de miniatuurstalen.
border
De rand van de miniatuurstalen.
NOTE
Miniatuur ondersteunt de kenmerkenkiezer state , die wordt gebruikt om verschillende skins toe te passen op verschillende miniatuurtoestanden. Met name state="selected" komt overeen met de miniatuur van de afbeelding die momenteel wordt weergegeven in de hoofdweergave, state="default" komt overeen met de rest van de miniaturen en state="over" wordt gebruikt bij de muisaanwijzer.

Voorbeeld - als u miniaturen wilt instellen die 56 x 56 pixels zijn, een lichtgrijze standaardrand en een donkergrijze geselecteerde rand wilt hebben:

.s7flyoutviewer .s7swatches .s7thumb {
 width: 56px;
 height: 56px;
}
.s7flyoutviewer .s7swatches .s7thumb[state="default"] {
 border: 1px solid #dddddd;
}
.s7flyoutviewer .s7swatches .s7thumb[state="selected"] {
 border: 1px solid #666666;
}

CSS eigenschappen van de linker en juiste rolknopen

De weergave van linker- en rechterschuifknoppen wordt bepaald door de volgende CSS-klassenkiezers:

.s7flyoutviewer .s7swatches .s7scrollleftbutton
.s7flyoutviewer .s7swatches .s7scrollrightbutton

Het is niet mogelijk om schuifknoppen te positioneren met de CSS-eigenschappen top , left , bottom en right . In plaats daarvan worden ze automatisch door de viewerlogica geplaatst.

CSS-eigenschap
Beschrijving
width
De breedte van de schuifknop.
height
De hoogte van de schuifknop.
background-image
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 kenmerkenkiezer state , die wordt gebruikt om verschillende skins toe te passen op knopstatussen up , down , over en disabled .

De knopinfo kan worden gelokaliseerd. Zie Localisatie van gebruikersinterfaceelementenvoor meer informatie.

Voorbeeld - voor het instellen van schuifknoppen met een grootte van 56 x 56 pixels en voor elke status een andere illustratie:

.s7flyoutviewer .s7swatches .s7scrollleftbutton {
 background-size: auto;
 width: 56px;
 height: 56px;
}
.s7flyoutviewer .s7swatches .s7scrollleftbutton[state="up"]{
background-image:url(images/v2/ScrollLeftButton_up.png);
}
.s7flyoutviewer .s7swatches .s7scrollleftbutton[state="over"]{
 background-image:url(images/v2/ScrollLeftButton_over.png);
}
.s7flyoutviewer .s7swatches .s7scrollleftbutton[state="down"]{
 background-image:url(images/v2/ScrollLeftButton_down.png);
}
.s7flyoutviewer .s7swatches .s7scrollleftbutton[state="disabled"]{
 background-image:url(images/v2/ScrollLeftButton_disabled.png);
}
.s7flyoutviewer .s7swatches .s7scrollrightbutton {
 background-size: auto;
 width: 56px;
 height: 56px;
}
.s7flyoutviewer .s7swatches .s7scrollrightbutton[state="up"]{
background-image:url(images/v2/ScrollRightButton_up.png);
}
.s7flyoutviewer .s7swatches .s7scrollrightbutton[state="over"]{
 background-image:url(images/v2/ScrollRightButton_over.png);
}
.s7flyoutviewer .s7swatches .s7scrollrightbutton[state="down"]{
 background-image:url(images/v2/ScrollRightButton_down.png);
}
.s7flyoutviewer .s7swatches .s7scrollrightbutton[state="disabled"]{
 background-image:url(images/v2/ScrollRightButton_disabled.png);
}
recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8