2014-06-30 101 views
5

的寬度使用聚合物紙的圖標按鈕指定圖標

<paper-icon-button icon='image:photo' fill="true"></paper-icon-button> 

我有正確的圖標,但不幸的是,這是小(約24像素)。

我試圖指定width:

paper-icon-button { 
    min-width: 50px; 
} 

但它不工作。 是否可以指定圖標的寬度?

謝謝。

回答

4

core-iconš本身是可調整大小的,這是我們使用SVG的原因之一(默認;另一個原因是上色的能力)。

但是*-icon-button沒有提供控制該尺寸的管道。

我創造了一些票發行:

https://github.com/Polymer/core-icon-button/issues/3

https://github.com/Polymer/paper-button/issues/9

+1

感謝您的幫助。我嘗試過,但最終轉向更「基本」的解決方案(一個簡單的圖像)。即使我對我的圖像沒有「有光澤」的觸摸效果,它仍然有效! – FrPolymer

+0

正確的答案可以在下面找到,應該被接受!聚合物提供mixin來改變按鈕樣式。 – Niklas

1

你可以嘗試以下解決方法:

paper-icon-button::shadow core-icon{ 
    -moz-transform: scale(2); 
    -webkit-transform: scale(2); 
    transform: scale(2); /* 48px */ 

    fill: rgb(255,255,255); 
} 
0

紙按鈕,紙圖標按鈕屬性min-width只接受新興市場作爲一種價值。

例如min-width: 1em;

1EM = 16px的

爲PX到EM轉換 - >click here

1
core-icon-button::shadow core-icon { 
    height: 48px; 
    width: 48px; 
} 
or 
paper-icon-button::shadow core-icon { 
    height: 48px; 
    width: 48px; 
} 

作品。

1

我用css屬性'zoom'來放大。適用於Chrome。尚未在Safari或Firefox上進行測試。

7

由於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"/> 
+1

你真的能夠得到這個工作嗎?設置這些屬性對我不起作用。例如,我將它們都設置爲100px,但圖標大小仍然是默認的24px – nickjm

+0

@nickjm絕對!否則,爲什麼我會發布它(如果你正在嘗試這個工作在「main」html文件中,那麼請確保樣式是用自定義樣式註釋的,即「