列印 print

Last update: Mon Jul 22 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

主題：

建立對象：

開發人員
使用者

列印工具包含新增至控制列的按鈕，以及啟動工具時顯示的模型對話方塊。

使用下列CSS類別選取器來控制列印按鈕的外觀：

.s7ecatalogsearchviewer .s7print

列印按鈕的 CSS屬性

上邊界

從控制列頂端的位移。

左邊界

左邊下一個按鈕的距離，若此按鈕為列中的第一個按鈕，則為控制列左側的距離。

寬度

按鈕的寬度。

高度

按鈕的高度。

背景影像

針對指定按鈕狀態顯示的影像。

背景位置

若使用CSS拼寫，則定位在圖稿sprite內。

另請參閱 CSS Sprite。

NOTE

此按鈕支援state屬性選取器，可用來將不同的外觀元素套用至不同的按鈕狀態。

按鈕工具提示可以本地化。如需詳細資訊，請參閱使用者介面元素的本地化。

範例 — 設定28 x 28畫素的列印按鈕，並針對四種不同的按鈕狀態分別顯示不同的影像。

.s7ecatalogsearchviewer .s7print {
margin-top: 4px;
margin-left: 10px;
 width:28px;
 height:28px;
}
.s7ecatalogsearchviewer .s7print[state='up'] {
background-image:url(images/v2/Print_dark_up.png);
}
.s7ecatalogsearchviewer .s7print[state='over'] {
background-image:url(images/v2/Print_dark_over.png);
}
.s7ecatalogsearchviewer .s7print[state='down'] {
background-image:url(images/v2/Print_dark_down.png);
}
.s7ecatalogsearchviewer .s7print[state='disabled'] {
background-image:url(images/v2/Print_dark_disabled.png);
}

使用下列CSS類別選取器來控制對話方塊啟動時覆蓋網頁的背景覆蓋：

.s7ecatalogsearchviewer .s7printdialog .s7backoverlay

背面覆蓋的 CSS屬性

不透明度

背景覆蓋不透明度。

背景色彩

背景覆蓋顏色。

範例 — 若要將背景覆蓋設定為具有70%不透明度的灰色：

.s7ecatalogsearchviewer .s7printdialog .s7backoverlay {
 opacity:0.7;
 background-color:#222222;
}

依預設，模型對話方塊會以中央顯示在案頭系統的畫面中。對話方塊的位置和大小由元件管理。此對話方塊是使用下列CSS類別選取器來控制：

.s7ecatalogsearchviewer .s7kprintdialog .s7dialog

對話方塊的 CSS屬性

邊框半徑

對話方塊邊框半徑。

背景色彩

對話方塊背景顏色；

範例 — 若要設定具有灰色背景的對話方塊：

.s7ecatalogsearchviewer .s7printdialog .s7dialog {
background-color: #dddddd;
}

對話方塊標題由圖示、標題文字和關閉按鈕組成。標題容器由下列CSS類別選取器控制：

.s7ecatalogsearchviewer .s7printdialog .s7dialogheader

對話方塊標頭的 CSS屬性

內距

標頭內容的內部內距。

圖示和標題文字會包裝進額外的容器中（由下列專案控制）：

.s7ecatalogsearchviewer .s7printdialog .s7dialogheader .s7dialogline

對話方塊行的 CSS屬性

內距

頁首圖示和標題的內部內距。

標頭圖示由下列CSS類別選取器控制：

.s7ecatalogsearchviewer .s7printdialog .s7dialogheadericon

對話方塊標頭圖示的CSS屬性

寬度

圖示寬度。

高度

圖示高度。

背景影像

圖示影像。

背景位置

若使用CSS拼寫，則定位在圖稿sprite內。

另請參閱 CSS Sprite。

標題標題由下列CSS類別選取器控制：

.s7ecatalogsearchviewer .s7printdialog .s7dialogheadertext

對話方塊標頭文字的CSS屬性

字型粗細

字型粗細。

字型大小

字型高度。

字型系列

字型系列。

內距

內部文字內距。

使用下列CSS類別選取器來控制「關閉」按鈕：

.s7ecatalogsearchviewer .s7printdialog .s7closebutton

關閉按鈕的 CSS屬性

前

相對於頁首容器的垂直按鈕位置。

右

相對於頁首容器的水準按鈕位置。

寬度

按鈕寬度。

高度

按鈕高度。

內距

按鈕的內部內距。

背景影像

每個狀態的按鈕影像。

背景位置

若使用CSS拼寫，則定位在圖稿sprite內。

另請參閱 CSS Sprite。

NOTE

此按鈕支援state屬性選取器，可用來將不同的外觀元素套用至不同的按鈕狀態。

「關閉」按鈕工具提示和對話方塊標題可以本地化。如需詳細資訊，請參閱使用者介面元素的本地化。

範例 — 若要設定包含填補的對話方塊標題，請以22 x 22畫素圖示及粗體16點標題來設定。最後，28 x 28畫素的「關閉」按鈕會從上方放置兩個畫素，從對話方塊容器的右側放置兩個畫素：

.s7ecatalogsearchviewer .s7printdialog .s7dialogheader {
 padding: 10px;
}
.s7ecatalogsearchviewer .s7printdialog .s7dialogheader .s7dialogline {
 padding: 10px 10px 2px;
}
.s7ecatalogsearchviewer .s7printdialog .s7dialogheadericon {
    background-image: url("images/sdk/dlgprint_cap.png");
    height: 22px;
    width: 22px;
}
.s7ecatalogsearchviewer .s7printdialog .s7dialogheadertext {
    font-size: 16pt;
    font-weight: bold;
    padding-left: 16px;
}
.s7ecatalogsearchviewer .s7printdialog .s7closebutton {
 top:2px;
 right:2px;
 padding:8px;
 width:28px;
 height:28px;
}
.s7ecatalogsearchviewer .s7printdialog .s7closebutton[state='up'] {
 background-image:url(images/sdk/close_up.png);
}
.s7ecatalogsearchviewer .s7printdialog .s7closebutton[state='over'] {
 background-image:url(images/sdk/close_over.png);
}
.s7ecatalogsearchviewer .s7printdialog .s7closebutton[state='down'] {
 background-image:url(images/sdk/close_down.png);
}
.s7ecatalogsearchviewer .s7printdialog .s7closebutton[state='disabled'] {
 background-image:url(images/sdk/close_disabled.png);
}

對話方塊頁尾包含「取消」和「傳送至列印」按鈕。頁尾容器由下列CSS類別選取器控制：

.s7ecatalogsearchviewer .s7printdialog .s7dialogfooter

對話方塊頁尾的 CSS屬性

邊框

可用來視覺化區分頁尾與對話方塊其餘部分的框線。

頁尾有一個內部容器，可保留兩個按鈕。若要控制CSS類別，請使用下列CSS類別選取器：

.s7ecatalogsearchviewer .s7printdialog .s7dialogbuttoncontainer

對話方塊按鈕容器的CSS屬性

內距

頁尾與按鈕之間的內邊距。

使用下列CSS類別選取器來控制「取消」按鈕：

.s7ecatalogsearchviewer .s7printdialog .s7dialogcancelbutton

對話方塊取消按鈕的 CSS屬性

寬度

按鈕寬度。

高度

按鈕高度。

色彩

每個狀態的按鈕文字顏色。

背景色彩

每個狀態的按鈕背景顏色。

NOTE

此按鈕支援state屬性選取器，可用來將不同的外觀元素套用至不同的按鈕狀態。

「傳送至列印」按鈕由下列CSS類別選取器控制：

.s7ecatalogsearchviewer .s7printdialog .s7dialogactionbutton

對話方塊動作按鈕的CSS屬性

寬度

按鈕寬度。

高度

按鈕高度。

色彩

每個狀態的按鈕文字顏色。

背景色彩

每個狀態的按鈕背景顏色。

NOTE

此按鈕支援state屬性選取器，可用來將不同的外觀元素套用至不同的按鈕狀態。

此外，這兩個按鈕共用共用的CSS類別可包含與其他對話方塊按鈕相同的CSS設定：

.s7ecatalogsearchviewer .s7printdialog .s7dialogfooter .s7button

按鈕的 CSS屬性

字型粗細

按鈕字型粗細。

字型大小

按鈕字型大小。

字型系列

按鈕字型系列。

行高

按鈕內的文字高度。影響垂直對齊。

方塊陰影

陰影。

右邊界

右側按鈕邊界。

按鈕工具提示可本地化。如需詳細資訊，請參閱使用者介面元素的本地化。

範例 — 若要設定具有64 x 34取消按鈕和96 x 34傳送至列印按鈕的對話方塊頁尾，每個按鈕狀態的文字顏色和背景顏色會不同：

.s7ecatalogsearchviewer .s7printdialog .s7dialogfooter {
    border-top: 1px solid #909090;
}
.s7ecatalogsearchviewer .s7printdialog .s7dialogbuttoncontainer {
    padding-bottom: 6px;
    padding-top: 10px;
}
.s7ecatalogsearchviewer .s7printdialog .s7dialogfooter .s7button {
    box-shadow: 1px 1px 1px #999999;
    color: #FFFFFF;
    font-size: 9pt;
    font-weight: bold;
    line-height: 34px;
    margin-right: 10px;
}
.s7ecatalogsearchviewer .s7printdialog .s7dialogcancelbutton {
 width:64px;
 height:34px;
}
.s7ecatalogsearchviewer .s7printdialog .s7dialogcancelbutton[state='up'] {
 background-color:#666666;
 color:#dddddd;
}
.s7ecatalogsearchviewer .s7printdialog .s7dialogcancelbutton[state='down'] {
 background-color:#555555;
 color:#ffffff;
}
.s7ecatalogsearchviewer .s7printdialog .s7dialogcancelbutton[state='over'] {
 background-color:#555555;
 color:#ffffff;
}
.s7ecatalogsearchviewer .s7printdialog .s7dialogcancelbutton[state='disabled'] {
 background-color:#b2b2b2;
 color:#dddddd;
}
.s7ecatalogsearchviewer .s7printdialog .s7dialogactionbutton {
 width:96px;
 height:34px;
}
.s7ecatalogsearchviewer .s7printdialog .s7dialogactionbutton[state='up'] {
 background-color:#333333;
 color:#dddddd;
}
.s7ecatalogsearchviewer .s7printdialog .s7dialogactionbutton[state='down'] {
 background-color:#222222;
 color:#cccccc;
}
.s7ecatalogsearchviewer .s7printdialog .s7dialogactionbutton[state='over'] {
 background-color:#222222;
 color:#cccccc;
}
.s7ecatalogsearchviewer .s7printdialog .s7dialogactionbutton[state='disabled'] {
 background-color:#b2b2b2;
 color:#dddddd;
}

主要對話方塊區域位於頁首和頁尾之間，其中包含對話方塊內容。在任何情況下，元件都會管理此區域的寬度，無法在CSS中進行設定。主要對話方塊區域可透過下列CSS類別選取器控制：

.s7ecatalogsearchviewer .s7printdialog .s7dialogviewarea

對話方塊檢視區域的 CSS屬性

高度

主要對話方塊區域的高度。

背景色彩

主要對話方塊區域的背景顏色。

利潤

外部邊界。

範例 — 若要設定主要對話方塊區域以自動計算高度、有10個畫素邊界，並使用白色背景：

.s7ecatalogsearchviewer .s7printdialog .s7dialogviewarea {
 background-color:#ffffff;
 margin:10px;
 height:auto;
}

所有表單內容（例如標籤和輸入欄位）都位於由以下CSS類別選取器控制的容器內：

.s7ecatalogsearchviewer .s7printdialog .s7dialogbody

對話方塊主體的 CSS屬性

內距

內邊距。

範例 — 若要將表單內容設定為有十個畫素的內距：

.s7ecatalogsearchviewer .s7printdialog .s7dialogbody {
    padding: 10px;
}

對話方塊表單是逐行填入，其中每一行都包含部分表單內容（如標籤和文字輸入欄位）。單一表單行由下列CSS類別選取器控制：

.s7ecatalogsearchviewer .s7emaildialog .s7dialogbody .s7dialogline

對話方塊行的 CSS屬性

內距

內線邊距。

範例 — 若要設定對話方塊表單，讓每行有10個畫素邊距：

.s7ecatalogsearchviewer .s7emaildialog .s7dialogbody .s7dialogline {
    padding: 10px;
}

對話方塊內容的大小由下列CSS類別選取器控制：

 .s7ecatalogsearchviewer .s7printdialog .s7dialoginputwide

對話方塊輸入寬度的 CSS屬性

寬度

區塊寬度。

內距

內線邊距。

範例 — 將內容區塊設定為寬度430畫素，並在底部有10畫素邊框間距：

.s7ecatalogsearchviewer .s7printdialog .s7dialoginputwide {
    padding-bottom: 10px;
    width: 430px;
}

對話方塊表單中的所有靜態標籤都是使用下列CSS類別選取器來控制：

.s7ecatalogsearchviewer .s7printdialog .s7dialoglabel

此類別不適合控制標籤大小或位置，因為您可以在表單使用者介面的不同位置將其套用至文字。

對話方塊標籤的 CSS屬性。 

字型粗細

標簽字型粗細。

字型大小

標簽字型大小。

字型系列

標簽字型系列。

色彩

標籤文字顏色。

對話方塊標籤可以本地化。如需詳細資訊，請參閱使用者介面元素的本地化。

範例 — 將所有標籤設定為灰色、粗體、九畫素字型：

.s7ecatalogsearchviewer .s7printdialog .s7dialoglabel {
    color: #666666;
    font-size: 9pt;
    font-weight: bold;
}

輸入控制項會包裝到容器中，並使用下列CSS類別選取器來控制：

.s7ecatalogsearchviewer .s7printdialog .s7dialoginputcontainer

對話方塊輸入容器的 CSS屬性

左內距

內邊距。

範例 — 從對話方塊的左邊緣設定30畫素內距。

.s7ecatalogsearchviewer .s7printdialog .s7dialoginputcontainer {
    padding-left: 30px;
}

選項按鈕及其註解文字是由下列CSS類別選取器所控制：

.s7ecatalogsearchviewer .s7printdialog .s7dialogoption

對話方塊選項的CSS屬性

寬度

帶有標題的選項按鈕的總寬度。

色彩

註解文字色彩。

選項按鈕與其標題之間的間距由下列CSS類別選取器控制：

.s7ecatalogsearchviewer .s7printdialog .s7dialogoptioninput

對話方塊選項輸入的 CSS屬性

右邊界

選項按鈕與其標題之間的間距。

選擇列印範圍的數值選擇器由以下CSS類別選擇器控制

.s7ecatalogsearchviewer .s7printdialog .s7dialogrange

對話方塊的CSS屬性列印範圍

寬度

數值選擇器的寬度。

利潤

數值選擇器周圍的間距。

範例 — 將所有選項按鈕設定為150畫素寬（含黑色文字）、10畫素間距，以及42畫素寬數值選擇器：

.s7ecatalogsearchviewer .s7printdialog .s7dialogoption {
    color: #000000;
    width: 150px;
}
.s7ecatalogsearchviewer .s7printdialog .s7dialogoption input {
    margin-right: 10px;
}
.s7ecatalogsearchviewer .s7printdialog .s7dialogrange {
    margin-left: 10px;
    margin-right: 10px;
    width: 42px;
}

頁面範圍選取範圍與列印版面區段之間的水準分隔線由下列CSS類別選取器控制：

 .s7ecatalogsearchviewer
.s7printdialog .s7horizontaldivider

水準分隔線的 CSS屬性

邊框

分隔線周圍的邊框。

內距

內邊距。

寬度

分隔線寬度。

利潤

外部邊界

範例 — 設定430畫素寬的灰階分隔線，其兩側有10畫素的垂直邊框間距，頂端有10畫素邊界：

.s7ecatalogsearchviewer .s7printdialog .s7horizontaldivider {
    border-top: 1px solid #aaaaaa;
    margin-top: 10px;
    padding-bottom: 10px;
    padding-top: 10px;
    width: 430px;
}

recommendation-more-help

b7426f53-aad9-4c00-83fc-664f30f681e8