Hoofdstalen main-swatches
Hoofdstalen bestaan uit een rij miniatuurafbeeldingen met optionele schuifknoppen aan de linker- en rechterkant. 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.
De vormgeving van de stalencontainer wordt beheerd met de CSS-klassenkiezer:
.s7mixedmediaviewer .s7swatches
CSS-eigenschappen van de stalen
Voorbeeld - voor het instellen van stalen met een hoogte van 100 pixels.
.s7mixedmediviewer .s7swatches {
height: 100px;
}
De afstand tussen de staalminiaturen wordt geregeld met de volgende CSS-klassenkiezer:
.s7mixedmediaviewer .s7swatches .s7thumbcell
Voorbeeld
U stelt de tussenruimte in op tien pixels, zowel verticaal als horizontaal.
.s7mixedmediaviewer .s7swatches .s7thumbcell {
margin: 5px;
}
De weergave van de afzonderlijke miniatuur wordt bepaald door de volgende CSS-klassenkiezer:
.s7mixedmediaviewer .s7swatches .s7thumb
state
kenmerkenkiezer, die kan worden 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, hebt u een lichtgrijze standaardrand en een donkergrijze geselecteerde rand.
.s7mixedmediaviewer .s7swatches .s7thumb {
width: 56px;
height: 56px;
}
.s7mixedmediaviewer .s7swatches .s7thumb[state="default"] {
border: 1px solid #dddddd;
}
.s7mixedviewer .s7swatches .s7thumb[state="selected"] {
border: 1px solid #666666;
}
Het type element wordt weergegeven als een pictogram dat boven op de miniatuurafbeelding wordt geplaatst en wordt bestuurd met de volgende CSS-klassenkiezer:
.s7mixedmediaviewer .s7swatches .s7thumb .s7thumboverlay
De bedekking ondersteunt de type
kenmerkkiezer met de volgende mogelijke waarden: image
(voor afzonderlijke afbeeldingen), swatchset
(voor stalensets), spinset
(voor centrifuges), en video
(voor afzonderlijke video's of adaptieve videosets).
Voorbeeld - voor het instellen van pictogramoverlays voor centrifuges, stalensets en video's:
.s7mixedmediaviewer .s7swatches .s7thumb .s7thumboverlay[type="swatchset"] {
background-image: url(images/v2/ThumbOverlaySwatchSet.png);
}
.s7mixedmediaviewer .s7swatches .s7thumb .s7thumboverlay[type="spinset"] {
background-image: url(images/v2/ThumbOverlaySpinSet.png);
}
.s7mixedmediaviewer .s7swatches .s7thumb .s7thumboverlay[type="video"] {
background-image: url(images/v2/ThumbOverlayVideo.png);
}
De vormgeving van de linker- en rechterschuifknoppen wordt bepaald door de volgende CSS-klassekiezers:
.s7mixedmediaviewer .s7swatches .s7scrollleftbutton
.s7mixedmediaviewer .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.
Positie binnen illustratie-sprite, als CSS-sprites worden gebruikt.
Zie CSS-sprites.
state
kenmerkenkiezer, die kan worden gebruikt om verschillende skins toe te passen op verschillende knoptoestanden: 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 met een andere illustratie.
.s7mixedmediaviewer .s7swatches .s7scrollleftbutton {
background-size: auto;
width: 56px;
height: 56px;
}
.s7mixedmediaviewer .s7swatches .s7scrollleftbutton[state="up"]{
background-image:url(images/v2/ScrollLeftButton_up.png);
}
.s7mixedmediaviewer .s7swatches .s7scrollleftbutton[state="over"]{
background-image:url(images/v2/ScrollLeftButton_over.png);
}
.s7mixedmediaviewer .s7swatches .s7scrollleftbutton[state="down"]{
background-image:url(images/v2/ScrollLeftButton_down.png);
}
.s7mixedmediaviewer .s7swatches .s7scrollleftbutton[state="disabled"]{
background-image:url(images/v2/ScrollLeftButton_disabled.png);
}
.s7mixedmediaviewer .s7swatches .s7scrollrightbutton {
background-size: auto;
width: 56px;
height: 56px;
}
.s7mixedmediaviewer .s7swatches .s7scrollrightbutton[state="up"]{
background-image:url(images/v2/ScrollRightButton_up.png);
}
.s7mixedmediaviewer .s7swatches .s7scrollrightbutton[state="over"]{
background-image:url(images/v2/ScrollRightButton_over.png);
}
.s7mixedmediaviewer .s7swatches .s7scrollrightbutton[state="down"]{
background-image:url(images/v2/ScrollRightButton_down.png);
}
.s7mixedmediaviewer .s7swatches .s7scrollrightbutton[state="disabled"]{
background-image:url(images/v2/ScrollRightButton_disabled.png);
}