DocumentatieReferentiehandleiding voor Dynamic Media Viewers

Stalen swatches

Last update: Sat Nov 04 2023 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 stalen

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 de tussenruimte tussen miniatuurstalen

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

.s7flyoutviewer .s7swatches .s7thumbcell
CSS-eigenschap
Beschrijving
marge
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 miniatuurstalen

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
De miniatuur ondersteunt de state kenmerkenkiezer, die wordt gebruikt om verschillende skins toe te passen op verschillende miniatuurtoestanden. Met name: state="selected" komt overeen met de miniatuur voor de afbeelding die momenteel wordt weergegeven in de hoofdweergave, state="default" overeenkomt met de rest van de miniaturen, en state="over" wordt gebruikt bij 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 rechterschuifknoppen

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 met CSS te positioneren top, left, bottom, en right eigenschappen. 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.
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 wordt gebruikt om verschillende skins toe te passen op knopstatussen up, down, over, en disabled.

De knopinfo kan worden gelokaliseerd. Zie Lokalisatie van gebruikersinterface-elementen voor 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