色票包含一列縮圖影像,其左側和右側均可選有捲動按鈕。 只有當所有縮圖無法符合容器寬度時,捲動按鈕才會在案頭上顯示。 在行動裝置上,或是縮圖可符合容器寬度,則不會顯示捲動按鈕。
.s7zoomviewer .s7swatches
主要檢視器區域的CSS屬性
色票容器的外觀是由下列CSS類別選取器所控制:
.s7zoomviewer .s7zoomresetbutton
CSS屬性 |
說明 |
---|---|
width |
色票的寬度。 |
height |
色票的高度。 |
底部 |
相對於檢視器容器的垂直色票位移。 |
範例 — 將色票設定為460 x 100畫素。
.s7zoomviewer .s7swatches {
width: 460px;
height: 100px;
}
色票縮圖之間的間距由下列CSS類別選取器控制:
.s7zoomviewer .s7swatches .s7thumbcell
CSS屬性 |
說明 |
---|---|
margin |
每個縮圖周圍水平與垂直邊界的大小。 實際縮圖間距等於為設定的左右邊界總和 .s7thumbcell . |
範例
將間距設定為十畫素(垂直和水平)。
.s7zoomviewer .s7swatches .s7thumbcell {
margin: 5px;
}
使用下列CSS類別選取器可控制個別縮圖的外觀:
.s7zoomviewer .s7swatches .s7thumb
CSS屬性 |
說明 |
---|---|
width |
縮圖的寬度。 |
height |
縮圖的高度。 |
border |
縮圖的邊框。 |
縮圖支援 state
屬性選擇器,可將不同的外觀元素套用至不同的縮圖狀態。 尤其是, state="selected"
與目前顯示在主檢視中的影像縮圖相對應, state="default"
對應至其餘的縮圖,以及 state="over"
用於滑鼠游標暫留時。
範例 — 設定56 x 56畫素的縮圖,其預設邊框為淺灰色,選取邊框為深灰色。
.s7zoomviewer .s7swatches .s7thumb {
width: 56px;
height: 56px;
}
.s7zoomviewer .s7swatches .s7thumb[state="default"] {
border: 1px solid #dddddd;
}
.s7zoomviewer .s7swatches .s7thumb[state="selected"] {
border: 1px solid #666666;
}
左右捲動按鈕的外觀由下列CSS類別選取器控制:
.s7zoomviewer .s7swatches .s7scrollleftbutton
.s7zoomviewer .s7swatches .s7scrollrightbutton
無法使用CSS top、left、bottom和right屬性來定位捲動按鈕。 相反地,檢視器邏輯會自動調整位置。
CSS屬性 |
說明 |
---|---|
width |
捲動按鈕的寬度。 |
height |
捲動按鈕的高度。 |
background-image |
針對指定按鈕狀態顯示的影像。 |
background-position |
若使用CSS sprite,則定位在圖稿sprite內。 另請參閱 CSS精靈 . |
此按鈕支援 state
屬性選擇器,可將不同的外觀元素套用至不同的按鈕狀態: up
, down
, over
、和 disabled
.
按鈕工具提示可以本地化。 另請參閱 使用者介面元素的本地化.
範例 — 設定56 x 56畫素的捲動按鈕,每個狀態都有不同的圖稿。
.s7zoomviewer .s7swatches .s7scrollleftbutton {
background-size: auto;
width: 56px;
height: 56px;
}
.s7zoomviewer .s7swatches .s7scrollleftbutton[state="up"]{
background-image:url(images/v2/ScrollLeftButton_up.png);
}
.s7zoomviewer .s7swatches .s7scrollleftbutton[state="over"]{
background-image:url(images/v2/ScrollLeftButton_over.png);
}
.s7zoomviewer .s7swatches .s7scrollleftbutton[state="down"]{
background-image:url(images/v2/ScrollLeftButton_down.png);
}
.s7zoomviewer .s7swatches .s7scrollleftbutton[state="disabled"]{
background-image:url(images/v2/ScrollLeftButton_disabled.png);
}
.s7zoomviewer .s7swatches .s7scrollrightbutton {
background-size: auto;
width: 56px;
height: 56px;
}
.s7zoomviewer .s7swatches .s7scrollrightbutton[state="up"]{
background-image:url(images/v2/ScrollRightButton_up.png);
}
.s7zoomviewer .s7swatches .s7scrollrightbutton[state="over"]{
background-image:url(images/v2/ScrollRightButton_over.png);
}
.s7zoomviewer .s7swatches .s7scrollrightbutton[state="down"]{
background-image:url(images/v2/ScrollRightButton_down.png);
}
.s7zoomviewer .s7swatches .s7scrollrightbutton[state="disabled"]{
background-image:url(images/v2/ScrollRightButton_disabled.png);
}