时间戳

首页 > 解决方案 > 将 Primefaces 的样式应用于普通 jsf 组件？

css - 将 Primefaces 的样式应用于普通 jsf 组件？

问题描述

我将 Primefaces 用于我的 JSF 应用程序。在一页中，我必须使用<h:inputFile>而不是<p:fileUpload>等效的。结果，它在没有 Primeface 样式的情况下呈现：

在此处输入图像描述

如何将 Primeface css 样式应用于<h:inputFile>? （例如让它看起来像一个 Primefaces 按钮）

标签： cssjsfprimefaces

解决方案

看看基本p:fileUpload是如何呈现的。复制组件的输出 HTML，您就快到了。

您会注意到实际input type="file"有一个属性tabindex="-1"，您需要将其添加到您的组件中。您应该使用 passthrough 属性来执行此操作。请参阅：自定义 HTML 标记属性不由 JSF 呈现。所以，添加这个命名空间：xmlns:a="http://java.sun.com/jsf/passthrough".

您需要注意的另一件事是加载 PrimeFaces 用于设置上传组件样式的样式表。为此，请添加：

<h:outputStylesheet name="components.css" library="primefaces"/>
<h:outputStylesheet name="fileupload/fileupload.css" library="primefaces"/>

请注意，components.css如果您在页面上使用其他 PrimeFaces 组件，则可以省略。

最后，您的上传组件将如下所示：

<span class="ui-fileupload-simple ui-widget">
    <span class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-left">
        <span class="ui-button-icon-left ui-icon ui-c ui-icon-plusthick"></span>
        <span class="ui-button-text ui-c">Choose</span>
        <h:inputFile a:tabindex="-1"/>
    </span>
</span>

请注意，您将缺少由其 JavaScript 添加到 PrimeFaces 组件的交互性！我的建议，只需使用p:fileUpload.

推荐阅读