电子邮件共享 | Adobe Experience Manager

Last update: Sat Jul 20 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

主题：

创建对象：

开发人员
用户

电子邮件共享工具由添加到“社交”共享面板的按钮以及激活工具时显示的模式对话框组成。按钮的位置完全由社交共享工具管理。

电子邮件共享按钮的外观可通过以下CSS类选择器来控制：

.s7ecatalogsearchviewer .s7emailshare

电子邮件共享工具的 CSS属性

宽度

按钮的宽度。

高度

按钮的高度。

背景图像

针对给定按钮状态显示的图像。

背景位置

如果使用CSS sprite，则定位在图稿sprite中。

另请参阅 CSS Sprite。

NOTE

此按钮支持state属性选择器，可用于将不同的外观应用于不同的按钮状态。

可以通过在社交共享面板的CSS类中设置display:none CSS属性来删除该按钮。

按钮工具提示可以本地化。有关详细信息，请参阅用户界面元素的本地化。

示例 — 设置一个28 x 28像素的电子邮件共享按钮，该按钮为四种不同的按钮状态分别显示不同的图像。

.s7ecatalogsearchviewer .s7emailshare {
 width:28px;
 height:28px;
}
.s7ecatalogsearchviewer .s7emailshare[state='up'] {
background-image:url(images/v2/EmailShare_dark_up.png);
}
.s7ecatalogsearchviewer .s7emailshare[state='over'] {
background-image:url(images/v2/EmailShare_dark_over.png);
}
.s7ecatalogsearchviewer .s7emailshare[state='down'] {
background-image:url(images/v2/EmailShare_dark_down.png);
}
.s7ecatalogsearchviewer .s7emailshare[state='disabled'] {
background-image:url(images/v2/EmailShare_dark_disabled.png);
}

使用以下CSS类选择器可控制对话框处于活动状态时覆盖网页的背景叠加：

.s7ecatalogsearchviewer .s7emaildialog .s7backoverlay

背面叠加的 CSS属性

不透明度

背景叠加不透明度。

背景色

背景叠加颜色。

示例 — 要将背景叠加设置为具有70%不透明度的灰色，请执行以下操作：

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

默认情况下，模式对话框会以桌面系统屏幕的中心位置显示，并在触控设备上显示整个网页区域。在所有情况下，对话框的位置和大小都由组件管理。该对话框可通过以下CSS类选择器进行控制：

.s7ecatalogsearchviewer .s7emaildialog .s7dialog

对话框的CSS属性

边框半径

对话框边框半径（如果对话框未占用整个浏览器窗口）；

背景色

对话框背景颜色；

宽度

应取消设置或设置为100%，在这种情况下，对话框会占用整个浏览器窗口（在触控设备上首选此模式）；

高度

应取消设置或设置为100%，在这种情况下，对话框会占用整个浏览器窗口（触摸设备首选此模式）。

示例 — 设置对话框以使用整个浏览器窗口并在触控设备上使用白色背景：

.s7ecatalogsearchviewer .s7touchinput .s7emaildialog .s7dialog {
 width:100%;
 height:100%;
background-color: #ffffff;
}

对话框标题由图标、标题文本和关闭按钮组成。标头容器由以下CSS类选择器控制

.s7ecatalogsearchviewer .s7emaildialog .s7dialogheader

对话框标头的 CSS属性

填充

标题内容的内部边距。

图标和标题文本将封装在一个额外的容器中，由控制

.s7ecatalogsearchviewer .s7emaildialog .s7dialogheader .s7dialogline

对话框行的CSS属性

填充

标题图标和标题的内边距。

标题图标由以下CSS类选择器控制：

.s7ecatalogsearchviewer .s7emaildialog .s7dialogheadericon

对话框标题图标的CSS属性

宽度

图标宽度。

高度

图标高度。

背景图像

图标图像。

背景位置

如果使用CSS sprite，则定位在图稿sprite中。

另请参阅 CSS Sprite。

标题标题由以下CSS类选择器控制：

.s7ecatalogsearchviewer .s7emaildialog .s7dialogheadertext

对话框标题文本的CSS属性

字体粗细

字体粗细。

字体大小

字体高度。

字体系列

字体系列。

填充

内部文本边距。

使用以下CSS类选择器控制“关闭”按钮：

.s7ecatalogsearchviewer .s7emaildialog .s7closebutton

关闭按钮的 CSS属性

前

相对于标题容器的垂直按钮位置。

右

相对于标题容器的水平按钮位置。

宽度

按钮宽度。

高度

按钮高度。

填充

按钮的内边距。

背景图像

每个状态的按钮图像。

背景位置

如果使用CSS sprite，则定位在图稿sprite中。

另请参阅 CSS Sprite。

NOTE

此按钮支持state属性选择器，可用于将不同的外观应用于不同的按钮状态。

可以本地化“关闭”按钮工具提示和对话框标题。有关详细信息，请参阅用户界面元素的本地化。

示例 — 要设置带内边距的对话框标题，请设置24 x 17像素图标和粗体16点标题。最后，一个28 x 28像素的“关闭”按钮定位了两个像素，分别位于对话框容器的上部和右侧：

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

对话框页脚包含取消和发送电子邮件按钮。使用以下CSS类选择器控制页脚容器：

.s7ecatalogsearchviewer .s7emaildialog .s7dialogfooter

对话框页脚的CSS属性

边框

可用于在视觉上分隔页脚和对话框其余部分的边框。

页脚有一个内部容器，用于保存两个按钮。可使用以下CSS类选择器来控制分类：

.s7ecatalogsearchviewer .s7emaildialog .s7dialogbuttoncontainer

对话框按钮容器的CSS属性

填充

页脚和按钮之间的内边距。

使用以下CSS类选择器可控制“取消”按钮：

.s7ecatalogsearchviewer .s7emaildialog .s7dialogcancelbutton

对话框取消按钮的 CSS属性

宽度

按钮宽度。

高度

按钮高度。

颜色

每个状态的按钮文本颜色。

背景色

每个状态的按钮背景颜色。

NOTE

此按钮支持state属性选择器，可用于将不同的外观应用于不同的按钮状态。

使用以下CSS类选择器控制发送电子邮件按钮：

.s7ecatalogsearchviewer .s7emaildialog .s7dialogactionbutton

对话框操作按钮的 CSS属性

宽度

按钮宽度。

高度

按钮高度。

颜色

每个状态的按钮文本颜色。

背景色

每个状态的按钮背景颜色。

NOTE

此按钮支持state属性选择器，可用于将不同的外观应用于不同的按钮状态。

此外，这两个按钮共享公用的CSS类，该类可以包含与其他对话框按钮相同的CSS设置：

.s7ecatalogsearchviewer .s7emaildialog .s7dialogfooter .s7button

按钮的 CSS属性

字体粗细

按钮字体粗细。

字体大小

按钮字体大小。

字体系列

按钮字体系列。

行高

按钮内的文本高度。影响垂直对齐。

盒阴影

投影。

右边距

右按钮边距。

可以本地化此按钮的工具提示。有关详细信息，请参阅用户界面元素的本地化。

示例 — 设置一个对话框页脚，其中具有64 x 34取消按钮和82 x 34发送电子邮件按钮，每个按钮状态的文本颜色和背景颜色不同：

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

主对话框区域位于页眉和页脚之间，右侧包含可滚动的对话框内容和滚动面板。在所有情况下，此区域的宽度均由组件管理，因此无法在CSS中设置此区域。主对话框区域由以下CSS类选择器控制：

.s7ecatalogsearchviewer .s7emaildialog .s7dialogviewarea

对话框查看区域的 CSS属性

高度

主对话框区域的高度。仅当对话框在桌面模式下工作时，才应指定它。当调整对话框的大小以占据整个浏览器窗口时，此选项不适用。

背景色

主对话框区域的背景颜色。

边距

外边距。

NOTE

主对话框区域支持可选的state属性选择器。在提交电子邮件表单且对话框显示确认消息时，它被设置为sendsuccess。只要确认消息较小，就可以使用此属性选择器来减小显示此类确认消息时的对话框高度。

示例 — 要将主对话框区域最初设置为高度300像素，在显示确认消息时设置为高度100像素，具有十像素边距，并使用白色背景：

.s7ecatalogsearchviewer .s7emaildialog .s7dialogviewarea {
 background-color:#ffffff;
 margin:10px;
 height:300px;
}
.s7ecatalogsearchviewer .s7emaildialog .s7dialogviewarea[state='sendsuccess'] {
 height:100px;
}

所有表单内容（如标签和输入字段）都驻留在由以下CSS类选择器控制的容器中：

.s7ecatalogsearchviewer .s7emaildialog .s7dialogbody

如果此容器的高度看起来比主对话框区域大，则组件会自动启用垂直滚动。

对话框正文的 CSS属性

填充

内边距。

示例 — 要将表单内容设置为具有十个像素的填充：

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

对话框表单是逐行填充的，其中每一行都带有表单内容的一部分（如标签和文本输入字段）。使用以下CSS类选择器控制单个表单行：

.s7ecatalogsearchviewer .s7emaildialog .s7dialogbody .s7dialogline

对话框行的 CSS属性

填充

内边距。

示例 — 设置对话框表单，使每行有十个像素填充：

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

对话框表单中的所有静态标签均由以下CSS类选择器控制：

.s7ecatalogsearchviewer .s7emaildialog .s7dialoglabel

此类不适合控制标签大小或位置，因为您可以将其应用于表单用户界面各个位置的文本。

对话框标签的 CSS属性。 

字体粗细

标签字体粗细。

字体大小

标签字体大小。

字体系列

标签字体系列。

颜色

标签文本颜色。

可以本地化对话框标签。有关详细信息，请参阅用户界面元素的本地化。

示例 — 要将所有标签设置为灰色、粗体、九像素字体：

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

所有显示在表单输入字段左侧的静态标签都受以下控制：

.s7ecatalogsearchviewer .s7emaildialog .s7dialoginputlabel

对话框输入标签的 CSS属性

宽度

静态标签的宽度。

文本对齐

水平文本对齐方式。

边距

静态标签边距。

填充

静态标签填充。

示例 — 要将输入字段标签设置为宽度为50像素，请右对齐，在右侧有10个像素的边距，并有10个像素的边距：

.s7ecatalogsearchviewer .s7emaildialog .s7dialoginputlabel {
    margin-right: 10px;
    padding: 10px;
    text-align: right;
    width: 50px;
}

每个表单输入字段都包装在容器中，以便您在输入字段周围应用自定义边框。可使用以下CSS类选择器来控制分类：

.s7ecatalogsearchviewer .s7emaildialog .s7dialoginputcontainer

对话框输入容器的 CSS属性

边框

输入字段容器周围的边框。

填充

内边距。

NOTE

输入字段容器支持可选的state属性选择器。当用户输入数据格式错误且内联验证失败时，它设置为verifyerror。此属性选择器可用于突出显示表单中错误的用户输入。

从对话框主体的左边缘到右边缘的标签展开的大多数输入字段（包括“发件人”字段和“消息”字段）均由以下CSS类选择器控制：

.s7ecatalogsearchviewer .s7emaildialog .s7dialoginputwide

对话框输入范围字段的 CSS属性

宽度

输入字段宽度。

“收件人”字段比较窄，因为它为右侧的删除电子邮件按钮分配了空间。可使用以下CSS类选择器来控制分类：

.s7ecatalogsearchviewer .s7emaildialog .s7dialoginputshort

对话框输入短字段的 CSS属性

宽度

输入字段宽度。

示例 — 将表单设置为在所有输入字段周围使用1像素灰色边框和9像素填充。对于验证失败的字段，使用相同的红色边框。最后，要有250像素宽的To字段，其余输入字段有300像素宽：

.s7ecatalogsearchviewer .s7emaildialog .s7dialoginputcontainer {
    border: 1px solid #CCCCCC;
    padding: 9px;
}
.s7ecatalogsearchviewer .s7emaildialog .s7dialoginputcontainer[state="verifyerror"] {
    border: 1px solid #FF0000;
}
.s7ecatalogsearchviewer .s7emaildialog .s7dialoginputshort {
    width: 250px;
}
.s7ecatalogsearchviewer .s7emaildialog .s7dialoginputwide {
    width: 300px;
}

电子邮件输入字段也可通过以下进行控制：

.s7ecatalogsearchviewer .s7emaildialog .s7dialogmessage

此类允许您为基础TEXTAREA元素设置特定属性。

对话框消息的CSS属性

高度

消息高度。

自动换行

文字环绕样式。

示例 — 将电子邮件设置为50像素高并使用break-word单词换行：

.s7ecatalogsearchviewer .s7emaildialog .s7dialogmessage {
    height: 50px;
    word-wrap: break-word;
}

“添加其他电子邮件地址”按钮允许用户在电子邮件表单中添加多个收件人。可使用以下CSS类选择器来控制分类：

.s7ecatalogsearchviewer .s7emaildialog .s7dialogaddemailbutton

对话框的CSS属性添加电子邮件地址按钮

高度

按钮高度。

颜色

每个状态的按钮文本颜色。

背景图像

每个状态的按钮图像。

背景位置

按钮图像在按钮区域中的位置。

字体粗细

按钮字体粗细。

字体大小

按钮字体大小。

字体系列

按钮字体系列。

行高

按钮内的文本高度。影响垂直对齐。

文本对齐

水平文本对齐方式。

填充

内边距。

NOTE

此按钮支持state属性选择器，可用于将不同的外观应用于不同的按钮状态。

按钮工具提示可以本地化。有关详细信息，请参阅用户界面元素的本地化。

示例 — 要将“Add Another Email Address”按钮设置为25像素高，请使用具有右对齐方式的12点粗体字体，并为每种状态使用不同的文本颜色和图像：

.s7ecatalogsearchviewer .s7emaildialog .s7dialogaddemailbutton {
 text-align:right;
 font-size:12pt;
 font-weight:bold;
 background-position:left center;
 line-height:25px;
 padding-left:30px;
 height:25px;
}
.s7ecatalogsearchviewer .s7emaildialog .s7dialogaddemailbutton[state='up'] {
 color:#666666;
 background-image:url(images/sdk/dlgaddplus_up.png);
}
.s7ecatalogsearchviewer .s7emaildialog .s7dialogaddemailbutton[state='down'] {
 color:#000000;
 background-image:url(images/sdk/dlgaddplus_over.png);
}
.s7ecatalogsearchviewer .s7emaildialog .s7dialogaddemailbutton[state='over'] {
 color:#000000;
 text-decoration:underline;
 background-image:url(images/sdk/dlgaddplus_over.png);
}
.s7ecatalogsearchviewer .s7emaildialog .s7dialogaddemailbutton[state='disabled'] {
 color:#666666;
 background-image:url(images/sdk/dlgaddplus_up.png);
}

删除按钮允许用户从电子邮件表单中删除额外的地址。可使用以下CSS类选择器来控制分类：

.s7ecatalogsearchviewer .s7emaildialog .s7dialogremoveemailbutton

对话框的CSS属性删除电子邮件按钮

宽度

按钮宽度。

高度

按钮高度。

背景图像

每个状态的按钮图像。

背景位置

如果使用CSS sprite，则定位在图稿sprite中。

另请参阅 CSS Sprite。

NOTE

此按钮支持state属性选择器，可用于将不同的外观应用于不同的按钮状态。

按钮工具提示可以本地化。有关详细信息，请参阅用户界面元素的本地化。

示例 — 要将“删除”按钮设置为25 x 25像素，并为每种状态使用不同的图像：

.s7ecatalogsearchviewer .s7emaildialog .s7dialogremoveemailbutton {
 width:25px;
 height:25px;
}
.s7ecatalogsearchviewer .s7emaildialog .s7dialogremoveemailbutton[state='up'] {
 background-image:url(images/sdk/dlgremove_up.png);
}
.s7ecatalogsearchviewer .s7emaildialog .s7dialogremoveemailbutton[state='over'] {
 background-image:url(images/sdk/dlgremove_over.png);
}
.s7ecatalogsearchviewer .s7emaildialog .s7dialogremoveemailbutton[state='down'] {
 background-image:url(images/sdk/dlgremove_over.png);
}
.s7ecatalogsearchviewer .s7emaildialog .s7dialogremoveemailbutton[state='disabled'] {
 background-image:url(images/sdk/dlgremove_up.png);
}

要共享的内容显示在对话框主体的底部，并包括缩略图、标题、源URL和描述。它将被包装到一个容器中，该容器由以下CSS类选择器控制：

.s7ecatalogsearchviewer .s7emaildialog .s7dialogbody .s7dialogcontent

对话框内容的 CSS属性

边框

容器边框。

填充

内边距。

示例 — 设置底部容器具有一个像素点状边框并且没有边距：

.s7ecatalogsearchviewer .s7emaildialog .s7dialogbody .s7dialogcontent {
    border: 1px dotted #A0A0A0;
    padding: 0;
}

使用以下CSS类选择器控制缩略图图像：

.s7ecatalogsearchviewer .s7emaildialog .s7dialogthumbnail

background-image属性由组件逻辑设置。

对话框缩略图图像的 CSS属性

宽度

缩略图宽度。

高度

缩略图高度。

垂直对齐

垂直对齐缩略图。

填充

内边距。

示例 — 将缩略图设置为90 x 60像素，并使用10个像素进行顶部对齐：

.s7ecatalogsearchviewer .s7emaildialog .s7dialogthumbnail {
    height: 60px;
    padding: 10px;
    vertical-align: top;
    width: 90px;
}

内容标题、源和描述进一步分组到内容缩略图右侧的面板中。可使用以下CSS类选择器来控制分类：

.s7ecatalogsearchviewer .s7emaildialog .s7dialoginfopanel

对话框信息面板的 CSS属性

宽度

面板宽度。

示例 — 将内容信息面板的宽度设置为300像素：

.s7ecatalogsearchviewer .s7emaildialog .s7dialoginfopanel {
    width: 300px;
}

使用以下CSS类选择器控制内容标题：

.s7ecatalogsearchviewer .s7emaildialog .s7dialogtitle

对话框标题的 CSS属性

边距

外边距。

字体粗细

字体粗细。

字体大小

字体大小。

字体系列

字体系列。

示例 — 要将内容标题设置为使用粗体字体并具有十像素边距，请执行以下操作：

.s7ecatalogsearchviewer .s7emaildialog .s7dialogtitle {
    font-weight: bold;
    margin: 10px;
}

使用以下CSS类选择器控制内容来源：

.s7ecatalogsearchviewer .s7emaildialog .s7dialogorigin

对话框内容源的 CSS属性

边距

外边距。

字体粗细

字体粗细。

字体大小

字体大小。

字体系列

字体系列。

示例 — 要将内容原点设置为具有十像素边距，请执行以下操作：

.s7ecatalogsearchviewer .s7emaildialog .s7dialogorigin {
    margin: 10px;
}

使用以下CSS类选择器控制内容描述：

.s7ecatalogsearchviewer .s7emaildialog .s7dialogdescription

对话框内容描述的CSS属性

边距

外边距。

字体粗细

字体粗细。

字体大小

字体大小。

字体系列

字体系列。

示例 — 将内容描述设置为具有十像素边距并使用九点字体：

.s7ecatalogsearchviewer .s7emaildialog .s7dialogdescription {
    font-size: 9pt;
    margin: 10px;
}

当用户输入不正确的输入数据且内联验证失败时，将在对话框主体的顶部显示一条消息。当对话框在提交表单时必须呈现错误或确认消息时，也会显示此消息。可使用以下CSS类选择器来控制分类：

.s7ecatalogsearchviewer .s7emaildialog .s7dialogerrormessage

对话框的CSS属性错误消息

背景图像

错误图标。缺省值为感叹号。

背景位置

错误图标在消息区域中的位置。

颜色

消息文本颜色。

字体粗细

字体粗细。

字体大小

字体大小。

字体系列

字体系列。

行高

消息中的文本高度。影响垂直对齐。

填充

内边距。

NOTE

此消息支持具有以下可能值的state属性选择器： verifyerror、senderror和sendsuccess。由于内联输入验证失败而显示消息时设置值verifyerror。当后端电子邮件服务报告错误时设置值senderror。成功发送电子邮件时设置值sendsuccess。这样，就可以根据对话框状态对消息设置不同的样式。

按钮工具提示可以本地化。

有关详细信息，请参阅用户界面元素的本地化。

示例 — 要设置消息以使用10点粗体字体，请在左侧使用25像素行高和20像素填充。最后，使用感叹号图标，如果出现错误，则使用红色文本；如果成功，则使用无图标和绿色文本：

.s7ecatalogsearchviewer .s7emaildialog .s7dialogerrormessage[state="verifyerror"] {
    background-image: url("images/sdk/dlgerrimg.png");
    color: #FF0000;
}
.s7ecatalogsearchviewer .s7emaildialog .s7dialogerrormessage[state="senderror"] {
    background-image: url("images/sdk/dlgerrimg.png");
    color: #FF0000;
}
.s7ecatalogsearchviewer .s7emaildialog .s7dialogerrormessage[state="sendsuccess"] {
    background-image: none;
    color: #00B200;
}
.s7ecatalogsearchviewer .s7emaildialog .s7dialogerrormessage {
    background-position: left center;
    font-size: 10pt;
    font-weight: bold;
    line-height: 25px;
    padding-left: 20px;
}

如果需要垂直滚动，则滚动条将在对话框右边缘附近的面板中呈现，该面板可通过以下CSS类选择器进行控制：

.s7ecatalogsearchviewer .s7emaildialog .s7dialogscrollpanel

对话框滚动面板的 CSS属性

宽度

滚动面板宽度。

示例 — 将滚动面板的宽度设置为44像素：

.s7ecatalogsearchviewer .s7emaildialog .s7dialogscrollpanel {
    width: 44px;
}

滚动条区域的外观可通过以下CSS类选择器来控制：

.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar

滚动条的 CSS属性

宽度

滚动条宽度。

前

垂直滚动条从滚动面板顶部偏移。

后

垂直滚动条从滚动面板底部偏移。

右

水平滚动条从滚动面板的右边缘偏移。

示例 — 设置一个宽度为28像素的滚动条，该滚动条在滚动面板的顶部、右侧和底部各有8个像素的边距：

.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar {
    bottom: 8px;
    right: 8px;
    top: 8px;
    width: 28px;
}

滚动条轨道是上下滚动按钮之间的区域。组件会自动设置轨道的位置和高度。使用以下CSS类选择器控制跟踪：

.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar .s7scrolltrack

滚动轨道的 CSS属性

宽度

轨道宽度。

背景色

轨道背景颜色。

示例 — 设置宽度为28像素且背景为灰色的滚动条轨道：

.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar .s7scrolltrack {
width:28px;
background-color: #B2B2B2;
}

滚动条缩略图在滚动轨道区域内垂直移动。其垂直位置完全由组件逻辑控制，但缩略图高度不会根据内容量动态变化。您可以使用以下CSS类选择器配置缩略图高度和其他方面：

.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar .s7scrollthumb

滚动条缩略图的 CSS属性

宽度

缩略图宽度。

高度

缩略图高度。

填充顶端

轨道顶部之间的垂直边距。

填充底部

轨道底部之间的垂直边距。

背景图像

为给定缩略图状态显示的图像。

背景位置

如果使用CSS sprite，则定位在图稿sprite中。

另请参阅 CSS Sprite。

NOTE

缩略图支持state属性选择器，该选择器可用于将不同的外观应用于不同的缩略图状态： up、down、over和disabled。

示例 — 设置滚动条缩览图，其大小为28 x 45像素，顶部和底部有10像素边距，并且每种状态具有不同的图稿：

.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar .s7scrollthumb {
    height: 45px;
    padding-bottom: 10px;
    padding-top: 10px;
    width: 28px;
}
.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar .s7scrollthumb[state="up"] {
 background-image:url("images/sdk/scrollbar_thumb_up.png");
}
.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar .s7scrollthumb[state="down"] {
 background-image:url("images/sdk/scrollbar_thumb_down.png");
}
.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar .s7scrollthumb[state="over"] {
 background-image:url("images/sdk/scrollbar_thumb_over.png");
}
.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar .s7scrollthumb[state="disabled"] {
 background-image:url("images/sdk/scrollbar_thumb_disabled.png");
}

顶部和底部滚动按钮的外观可通过以下CSS类选择器进行控制：

.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar .s7scrollupbutton

.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar .s7scrolldownbutton

无法使用CSS top、left、bottom和right属性定位滚动按钮。相反，查看器逻辑会自动定位它们。

顶部和底部滚动按钮的 CSS属性

宽度

按钮宽度。

高度

按钮高度。

背景图像

针对给定按钮状态显示的图像。

背景位置

如果使用CSS sprite，则定位在图稿sprite中。

另请参阅 CSS Sprite。

NOTE

这些按钮支持state属性选择器，可用于将不同的外观应用于不同的按钮状态： up、down、over和disabled。

按钮工具提示可以本地化。有关详细信息，请参阅用户界面元素的本地化。

示例 — 设置具有28 x 32像素且每种状态有不同图稿的滚动按钮：

.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar .s7scrollupbutton {
 width:28px;
 height:32px;
}
.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar .s7scrollupbutton[state='up'] {
background-image:url(images/sdk/scroll_up_up.png);
}
.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar .s7scrollupbutton[state='over'] {
 background-image:url(images/sdk/scroll_up_over.png);
}
.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar .s7scrollupbutton[state='down'] {
 background-image:url(images/sdk/scroll_up_down.png);
}
.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar .s7scrollupbutton[state='disabled'] {
 background-image:url(images/sdk/scroll_up_disabled.png);
}
.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar .s7scrolldownbutton {
 width:28px;
 height:32px;
}
.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar .s7scrolldownbutton[state='up'] {
 background-image:url(images/sdk/scroll_down_up.png);
}
.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar .s7scrolldownbutton[state='over'] {
 background-image:url(images/sdk/scroll_down_over.png);
}
.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar .s7scrolldownbutton[state='down'] {
 background-image:url(images/sdk/scroll_down_down.png);
}
.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar .s7scrolldownbutton[state='disabled'] {
 background-image:url(images/sdk/scroll_down_disabled.png);
}

recommendation-more-help

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

电子邮件共享 email-share