Kelompok font masukan kertas set polimer

Bagaimana cara mengatur jenis font yang berbeda untuk paper-input. Saat saya memeriksa elemen di chrome sepertinya mendapatkan gaya dari banyak kelas. Tidak yakin mana yang harus ditimpa, juga apa arti -0 di kelas.

masukkan deskripsi gambar di sini


fonts css polymer paper-elements polymer-1.0
person anivas    schedule 24.03.2016    source sumber

Jawaban (1)


arrow_upward
2
arrow_downward

dokumentasi gaya Paper Input didelegasikan ke dokumentasi penataan gaya Paper Input Container, namun tetap tidak memberikan cara untuk menimpa gaya font.

Untungnya, Anda dapat melihat font mana yang digunakan di paper-input -container.html kode sumber dan timpa Tipografi Desain Material global di paper-styles/typography.html, tapi menurut saya hal itu tidak dianjurkan, oleh karena itu mereka tidak menjadikannya sebagai gaya yang dapat disesuaikan.

Gaya yang sesuai untuk tangkapan layar yang Anda ambil adalah sebagai berikut:

paper-input-container.html:

  .input-content ::content input,
  .input-content ::content textarea,
  .input-content ::content iron-autogrow-textarea,
  .input-content ::content .paper-input-input {
    position: relative; /* to make a stacking context */
    outline: none;
    box-shadow: none;
    padding: 0;
    width: 100%;
    max-width: 100%;
    background: transparent;
    border: none;
    color: var(--paper-input-container-input-color, --primary-text-color);
    -webkit-appearance: none;
    text-align: inherit;
    @apply(--paper-font-subhead);
    @apply(--paper-input-container-input);
  }

paper-styles/typography.html:

--paper-font-common-base: {
  font-family: 'Roboto', 'Noto', sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* [...] */

--paper-font-subhead: {
  @apply(--paper-font-common-base);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
};

Bagaimanapun, awalan -0 hanyalah sebuah indeks. Jika Anda memiliki dua elemen polimer dengan jenis yang sama, elemen tersebut akan menempatkan awalan -0 pada elemen pertama dan awalan -1 pada elemen kedua. Saya tidak yakin, tapi saya rasa mereka telah diterjemahkan ke dalam pemilih CSS dengan menggunakan updateStyles, karena Anda dapat menyesuaikan masing-masing secara terpisah melalui JavaScript, sehingga membantu memberi ruang nama pada setiap elemen satu per satu saat menerjemahkan kata kunci :root dan ::content.

Jadi, jika Anda ingin menimpa elemen spesifik ini, saya akan meminta Anda untuk menggunakan awalan -0, jika tidak, gunakan kelas atau elemen yang lebih umum untuk memilih dengan benar secara umum.

person falsarella    schedule 24.03.2016
comment
Terima kasih atas detailnya. - person anivas; 25.03.2016