Sidvy
Skapat för:
- Utvecklare
- Användare
Huvudvyn består av katalogbilden. Den kan svepas för att komma till en annan sida eller zoomas.
CSS-egenskaper för huvudvisningsområdet
Visningsområdets utseende styrs av följande CSS-klassväljare:
.s7ecatalogviewer .s7pageview
| CSS-egenskap | Beskrivning |
|---|---|
| background-color | Huvudvyns bakgrundsfärg i hexadecimalt format. |
| markör | Markör som visas över huvudvyn. |
Exempel - för att göra huvudvyn genomskinlig.
.s7ecatalogviewer .s7pageview {
background-color: transparent;
}
På stationära datorer har komponenten stöd för attributväljaren cursortype som kan användas på klassen .s7pageview och styr typen av markör baserat på komponentens tillstånd och användaråtgärd. Följande cursortype-värden stöds:
| Värde | Beskrivning |
|---|---|
| standard | Visas när bilden inte kan zoomas på grund av en liten bildupplösning, komponentinställningar eller båda. |
| zoomin | Visas när bilden kan zoomas in. |
| reset | Visas när bilden har maximal zoomnivå och kan återställas till ursprungligt läge. |
| dra | Visas när användaren panorerar bilden som är i zoomläge. |
| bild | Visas när användaren utför en bildväxling genom vågrät dragning eller snärtning. |
Den sidavgränsare som visuellt skiljer de vänstra och högra sidorna i kataloguppslaget styrs med följande CSS-klassväljare:
.s7ecatalogviewer .s7pageview .s7pagedivider
| CSS-egenskap | Beskrivning |
|---|---|
| width | Bredden på sidavgränsaren. Ange 0 px för att dölja avgränsaren helt. |
| background-image | Bilden som du vill använda som sidavgränsare. |
Exempel - om du vill ha en 40 pixlar bred sidavgränsare med halvgenomskinlig bild.
.s7ecatalogviewer .s7pageview .s7pagedivider {
width:40px;
background-image:url(images/sdk/divider.png);
}
NOTEframetransition är inställd på turn eller auto (på skrivbordssystem) styrs siddelarens utseende med modifieraren pageturnstyle och CSS-klassen .s7pagedivider ignoreras.Det går att konfigurera visningen av anpassade musmarkörer över huvudvisningsområdet. Den här funktionen styrs med de ytterligare attributväljarna som används för CSS-klassen .s7ecatalogviewer .s7pageview:
Exempel - ha olika musmarkörer för varje typ av komponentläge.
.s7ecatalogviewer .s7pageview[cursortype="default"] {
cursor:auto;
}
.s7ecatalogviewer .s7pageview[cursortype="zoomin"] {
cursor:url(images/zoomin_cursor.cur), auto;
}
.s7ecatalogviewer .s7pageview[cursortype="reset"] {
cursor:url(images/zoomout_cursor.cur), auto;
}
.s7ecatalogviewer .s7pageview [cursortype="slide"] {
cursor:url(images/slide_cursor.cur), auto;
}
.s7ecatalogviewer .s7pageview[cursortype="drag"] {
cursor:url(images/drag_cursor.cur), auto;
}