Question

Vaadin 7.6.2

CSS 会允许我将上传按钮的颜色更改为以下之一：危险，主要或< strong>友好以便我可以像使用Button一样使用setStyleName()吗？

价： https://vaadin.com/docs/-/part/framework/components/components-button.html

本文档不讨论错误或修复： https://vaadin.com/docs/-/part/framework/components/components-upload.html

但确实说：

上传按钮与常规Button组件具有相同的结构和样式。

所以，我猜这个“按钮”中没有包含的SCSS或CSS是遗漏，疏忽或错误。

Answer 1

通过在源中找到“危险”，“主要”和“友好”来解决它，然后将它们复制出来，将它们粘贴到mytheme.scss然后将样式名称更改为 @AndreSchild 在以下答案中描述：

Vaadin Upload Component Upload Button, changing it's Style?

以下是更新后的CSS（粘贴到mytheme.scss）并使用setStyleName，就像使用常规按钮组件一样：

    .v-upload-primary .v-button {
            height: 37px;
            padding: 0 16px;
            color: #ecf2f8;
            font-weight: 400;       
            border-radius: 4px;
            border: 1px solid #1362b1;
            border-top-color: #156ab3;
            border-bottom-color: #1156a8;
            background-color: #197de1;
            background-image: -webkit-linear-gradient(top, #1b87e3 2%, #166ed5 98%);
            background-image: linear-gradient(to bottom,#1b87e3 2%, #166ed5 98%);
            -webkit-box-shadow: inset 0 1px 0 #4d98e6, inset 0 -1px 0 #166bca, 0 2px 3px rgba(0, 0, 0, 0.05);
            box-shadow: inset 0 1px 0 #4d98e6, inset 0 -1px 0 #166bca, 0 2px 3px rgba(0, 0, 0, 0.05);
            text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.05);
            padding: 0 19px;
            font-weight: bold;
            min-width: 81px;
     }

    .v-upload-primary .v-button:after {
            border: inherit;
            top: -1px;
            right: -1px;
            bottom: -1px;
            left: -1px;
    }

    .v-upload-primary .v-button:hover:after {
            background-color: rgba(90, 163, 237, 0.1);
    }

    .v-upload-primary .v-button:focus:after {
            border: inherit;
            -webkit-box-shadow: 0 0 0 2px rgba(25, 125, 225, 0.5);
            box-shadow: 0 0 0 2px rgba(25, 125, 225, 0.5);
    }

    .v-upload-primary .v-button:active:after {
            background-color: rgba(2, 62, 122, 0.2);
    }

    .v-ie8 .v-upload-primary .v-button {
            min-width: 43px;
    }

    .v-upload-friendly .v-button  {
            height: 37px;
            padding: 0 16px;
            color: #eaf4e9;
            font-weight: 400;
            border-radius: 4px;
            border: 1px solid #227719;
            border-top-color: #257d1a;
            border-bottom-color: #1e6b15;
            background-color: #2c9720;
            background-image: -webkit-linear-gradient(top, #2f9f22 2%, #26881b 98%);
            background-image: linear-gradient(to bottom,#2f9f22 2%, #26881b 98%);
            -webkit-box-shadow: inset 0 1px 0 #46b33a, inset 0 -1px 0 #26811b, 0 2px 3px rgba(0, 0, 0, 0.05);
            box-shadow: inset 0 1px 0 #46b33a, inset 0 -1px 0 #26811b, 0 2px 3px rgba(0, 0, 0, 0.05);
            text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.05);
    }

    .v-upload-friendly .v-button:after {
            border: inherit;
            top: -1px;
            right: -1px;
            bottom: -1px;
            left: -1px;
    }

    .v-upload-friendly .v-button:hover:after {
            background-color: rgba(65, 211, 48, 0.1);
    }

    .v-upload-friendly .v-button:focus:after {
            border: inherit;
            -webkit-box-shadow: 0 0 0 2px rgba(25, 125, 225, 0.5);
            box-shadow: 0 0 0 2px rgba(25, 125, 225, 0.5);
    }

    .v-upload-friendly .v-button:active:after {
            background-color: rgba(14, 86, 6, 0.2);
    }

    .v-upload-danger .v-button {
            height: 37px;
            padding: 0 16px;
            color: #f9f0ef;
            font-weight: 400;
            border-radius: 4px;
            border: 1px solid #bb382e;
            border-top-color: #bc3c31;
            border-bottom-color: #b13028;
            background-color: #ed473b;
            background-image: -webkit-linear-gradient(top, #ee4c3f 2%, #e13e33 98%);
            background-image: linear-gradient(to bottom,#ee4c3f 2%, #e13e33 98%);
            -webkit-box-shadow: inset 0 1px 0 #ef786f, inset 0 -1px 0 #da3c31, 0 2px 3px rgba(0, 0, 0, 0.05);
            box-shadow: inset 0 1px 0 #ef786f, inset 0 -1px 0 #da3c31, 0 2px 3px rgba(0, 0, 0, 0.05);
            text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.05);
    }

    .v-upload-danger .v-button:after {
            border: inherit;
            top: -1px;
            right: -1px;
            bottom: -1px;
            left: -1px;
    }

    .v-upload-danger .v-button:hover:after {
            background-color: rgba(243, 137, 129, 0.1);
    }

    .v-upload-danger .v-button:focus:after {
            border: inherit;
            -webkit-box-shadow: 0 0 0 2px rgba(25, 125, 225, 0.5);
            box-shadow: 0 0 0 2px rgba(25, 125, 225, 0.5);
    }

    .v-upload-danger .v-button:active:after {
            background-color: rgba(146, 12, 2, 0.2);
    }

Answer 2

另一种解决方案是使用css隐藏组件内的上传按钮。然后在上传组件旁边的代码中添加一个标准的Vaadin按钮。只需在按钮的点击监听器内拨打upload.submit()即可。

现在可以轻松地将这些标准样式名称应用于该按钮。

Vaadin上传按钮，CSS改变颜色（与Button相同的样式）？

2 个答案: