的寬度使用聚合物紙的圖標按鈕指定圖標
<paper-icon-button icon='image:photo' fill="true"></paper-icon-button>
我有正確的圖標,但不幸的是,這是小(約24像素)。
我試圖指定width:
paper-icon-button {
min-width: 50px;
}
但它不工作。 是否可以指定圖標的寬度?
謝謝。
的寬度使用聚合物紙的圖標按鈕指定圖標
<paper-icon-button icon='image:photo' fill="true"></paper-icon-button>
我有正確的圖標,但不幸的是,這是小(約24像素)。
我試圖指定width:
paper-icon-button {
min-width: 50px;
}
但它不工作。 是否可以指定圖標的寬度?
謝謝。
的core-icon
š本身是可調整大小的,這是我們使用SVG的原因之一(默認;另一個原因是上色的能力)。
但是*-icon-button
沒有提供控制該尺寸的管道。
我創造了一些票發行:
我們不能再使用默認的圖標?因爲iconset用於從特定圖像文件構建圖標。在我的情況下,我想使用默認圖標(圖片:照片)。 – FrPolymer
你可以嘗試以下解決方法:
paper-icon-button::shadow core-icon{
-moz-transform: scale(2);
-webkit-transform: scale(2);
transform: scale(2); /* 48px */
fill: rgb(255,255,255);
}
core-icon-button::shadow core-icon {
height: 48px;
width: 48px;
}
or
paper-icon-button::shadow core-icon {
height: 48px;
width: 48px;
}
作品。
我用css屬性'zoom'來放大。適用於Chrome。尚未在Safari或Firefox上進行測試。
由於Polymer 1.x CSS變量提供了一種實現所需效果的便捷方式。在paper-icon-button
情況下,結合iron-icon
它可以設置iron-icon
特定CSS variables:
.my-button {
--iron-icon-height: 24px;
--iron-icon-width: 24px;
}
...
<paper-icon-button icon="menu" class="my-button"/>
你真的能夠得到這個工作嗎?設置這些屬性對我不起作用。例如,我將它們都設置爲100px,但圖標大小仍然是默認的24px – nickjm
@nickjm絕對!否則,爲什麼我會發布它(如果你正在嘗試這個工作在「main」html文件中,那麼請確保樣式是用自定義樣式註釋的,即「
感謝您的幫助。我嘗試過,但最終轉向更「基本」的解決方案(一個簡單的圖像)。即使我對我的圖像沒有「有光澤」的觸摸效果,它仍然有效! – FrPolymer
正確的答案可以在下面找到,應該被接受!聚合物提供mixin來改變按鈕樣式。 – Niklas