縮圖是由縮圖影像的格點所組成,其右側具有可選的卷軸,以允許垂直捲動。
按一下主控制列中的縮圖按鈕即可切換縮圖。 縮圖作用中時,會以模式模式模式顯示,並覆蓋在檢視器使用者介面的上方。 檢視器邏輯會自動將縮圖容器大小調整至整個檢視器區域。
縮圖容器的外觀是由下列CSS類別選取器所控制:
.s7ecatalogviewer .s7thumbnailgridview
CSS屬性 |
說明 |
---|---|
頂部 |
縮圖容器從檢視器頂端的垂直位移。 |
頂端邊界 |
上邊界。 |
左邊界 |
左邊界。 |
右邊界 |
右邊界。 |
下方邊界 |
下方邊界。 |
background-color |
縮圖區域的背景顏色。 |
範例 — 將縮圖設定為距上側32畫素位移、左右側5畫素邊界、下側8畫素邊界,使用 0xDDDDDD
背景。
.s7ecatalogviewer .s7thumbnailgridview {
top: 32px;
margin-left: 5px;
margin-right: 5px;
margin-bottom: 8px;
background-color: rgb(221, 221, 221);
}
縮圖之間的間距是由下列CSS類別選取器所控制:
.s7ecatalogviewer .s7thumbnailgridview .s7thumbcell
CSS屬性 |
說明 |
---|---|
margin |
每個縮圖周圍水平與垂直邊界的大小。 實際水準縮圖間距等於為設定的左右邊界總和 .s7thumbcell . 垂直縮圖間距等於上下邊界的總和。 |
範例 — 在垂直和水平設定10畫素空間。
.s7ecatalogviewer .s7thumbnailgridview .s7thumbcell {
margin: 5px;
}
使用下列CSS類別選取器來控制個別縮圖的外觀:
.s7ecatalogviewer .s7thumbnailgridview .s7thumb
CSS屬性 |
說明 |
---|---|
width |
縮圖的寬度。 |
height |
縮圖的高度。 |
border |
縮圖的邊框。 |
background-color |
縮圖的背景顏色。 |
在觸控裝置上,當旋轉至直向模式時,檢視器可能會將縮圖調整為已設定縮圖的一半,以防它決定將目錄分割為個別頁面。
縮圖支援 state
屬性選取器,可將不同的外觀元素套用至不同的縮圖狀態。 尤其是, state="selected"
與目前顯示在主檢視中的影像縮圖相對應, state="default"
對應至其餘的縮圖,以及 state="over"
用於滑鼠懸停時。
範例 — 設定120 x 85畫素、白色背景、淺灰色標準邊框和深灰色選取邊框的縮圖。
.s7ecatalogviewer .s7thumbnailgridview .s7thumb {
width:120px;
height:85px;
background-color: rgb(255, 255, 255);
border: solid 1px #999999;
}
.s7ecatalogviewer .s7thumbnailgridview .s7thumb[state="selected"]{
border: solid 2px #666666;
}
縮圖示籤的外觀是由下列CSS類別選取器所控制:
.s7ecatalogviewer .s7thumbnailgridview .s7label
CSS屬性 |
說明 |
---|---|
font-family |
字型名稱。 |
font-size |
字型大小. |
範例 — 設定標籤以使用14畫素Helvetica®字型。
.s7ecatalogviewer .s7thumbnailgridview .s7label {
font-family: Helvetica,sans-serif;
font-size: 12px;
}
如果縮圖數目超過垂直方向所能容納的量,縮圖會在右側呈現垂直卷軸。 卷軸區域的外觀是由下列CSS類別選取器所控制:
.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar
CSS屬性 |
說明 |
---|---|
width |
卷軸的寬度。 |
頂部 |
垂直卷軸從縮圖區域頂端位移。 |
底部 |
垂直卷軸從縮圖區域底部位移。 |
右側 |
水準卷軸會從縮圖區域的右邊緣位移。 |
範例 — 設定寬度為28畫素的卷軸,且縮圖區域上下左右各有8畫素邊界。
.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar {
top:8px;
bottom:8px;
right:8px;
width:28px;
}
卷軸軌跡是上下捲動按鈕之間的區域。 元件會自動設定軌跡的位置和高度。 使用下列CSS類別選取器來控制追蹤:
.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrolltrack
CSS屬性 |
說明 |
---|---|
width |
卷軸軌跡的寬度。 |
background-color |
卷軸軌跡的背景顏色。 |
範例 — 設定28畫素寬的卷軸軌跡,並具有半透明的灰色背景。
.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrolltrack {
width:28px;
background-color:rgba(102, 102, 102, 0.5);
}
卷軸縮圖在捲動軌跡區域內垂直移動。 其垂直位置完全由元件邏輯控制,但縮圖高度不會隨著內容量而動態變更。 您可以使用以下CSS類別選取器來控制縮圖高度和其他方面:
.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrollthumb
CSS屬性 |
說明 |
---|---|
width |
卷軸縮圖的寬度。 |
height |
卷軸縮圖的高度。 |
上內邊距 |
卷軸軌跡頂端之間的垂直邊框間距。 |
下內邊距 |
卷軸軌跡底部之間的垂直邊框間距。 |
background-image |
針對指定縮圖狀態顯示的影像。 |
background-position |
若使用CSS拼寫,則定位在圖稿sprite內。 另請參閱 CSS精靈 . |
縮圖支援 state
屬性選取器,可將不同的外觀元素套用至縮圖狀態 up
, down
, over
、和 disabled
.
範例 — 設定28 x 45畫素的卷軸縮圖,其頂端和底部有10個畫素邊界,且每個狀態都有不同的圖稿。
.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrollthumb {
width:28px;
background-repeat:no-repeat;
background-position:center;
height:45px;
padding-top:10px;
padding-bottom:10px;
}
.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrollthumb[state='up'] {
background-image:url(images/v2/ThumbnailScrollThumb_dark_up.png);
}
.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrollthumb[state='down'] {
background-image:url(images/v2/ThumbnailScrollThumb_dark_down.png);
}
.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrollthumb[state='over'] {
background-image:url(images/v2/ThumbnailScrollThumb_dark_over.png);
}
.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrollthumb[state='disabled'] {
background-image:url(images/v2/ThumbnailScrollThumb_dark_up.png);
}
上下捲動按鈕的外觀是由下列CSS類別選取器所控制:
.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrollupbutton
.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrolldownbutton
無法使用CSS來定位捲動按鈕 top
, left
, bottom
、和 right
屬性。 相反地,檢視器邏輯會自動調整位置。
CSS屬性 |
說明 |
---|---|
width |
按鈕的寬度。 |
height |
按鈕的高度。 |
background-image |
針對指定縮圖狀態顯示的影像。 |
background-position |
若使用CSS拼寫,則定位在圖稿sprite內。 另請參閱 CSS精靈 . |
這些按鈕支援 state
屬性選取器,可將不同的外觀元素套用至不同的按鈕狀態 up
, down
, over
、和 disabled
.
按鈕工具提示可以本地化。 另請參閱 使用者介面元素的本地化 以取得詳細資訊。
範例 — 設定28 x 32畫素的捲動按鈕,每個狀態都有不同的圖稿。
.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrollupbutton {
width:28px;
height:32px;
}
.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrollupbutton[state='up'] {
background-image:url(images/v2/ThumbnailScrollUpButton_dark_up.png);
}
.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrollupbutton[state='over'] {
background-image:url(images/v2/ThumbnailScrollUpButton_dark_over.png);
}
.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrollupbutton[state='down'] {
background-image:url(images/v2/ThumbnailScrollUpButton_dark_down.png);
}
.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrollupbutton[state='disabled'] {
background-image:url(images/v2/ThumbnailScrollUpButton_dark_up.png);
}
.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrolldownbutton {
width:28px;
height:32px;
}
.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrolldownbutton[state='up'] {
background-image:url(images/v2/ThumbnailScrollDownButton_dark_up.png);
}
.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrolldownbutton[state='over'] {
background-image:url(images/v2/ThumbnailScrollDownButton_dark_over.png);
}
.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrolldownbutton[state='down'] {
background-image:url(images/v2/ThumbnailScrollDownButton_dark_down.png);
}
.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrolldownbutton[state='disabled'] {
background-image:url(images/v2/ThumbnailScrollDownButton_dark_up.png);
}