ember resize text

Ember-Ressize-Text

Ember Addon yang memanfaatkan Ember-Text-Measurer untuk secara efisien mengubah ukuran font dari satu baris teks agar pas.

Instalasi

ember install ember-resize-text

Demo

Lihat halaman demo

Penggunaan

Karena versi 1.1.0 -ressize-text hadir sebagai mixin untuk digunakan dalam komponen Ember. Komponen masih disertakan untuk penggunaan yang mudah dan untuk mempertahankan kompatibilitas ke belakang.

Mixin

Cukup tambahkan mixin ke komponen dan ukuran font komponen akan disesuaikan secara otomatis.

 import ResizeText from 'ember-resize-text/mixins/resize-text';

export default Component.extend(ResizeText, {

  minSize: 12,
  maxSize: 18

});

Catatan : Mixin memanfaatkan this.element.innerText untuk mendapatkan teks untuk ditampilkan dan this.element.clientWidth (kecuali containerElement menentukan elemen yang berbeda) untuk menentukan lebar yang tersedia.

Komponen

Bungkus saja teks Anda dalam gaya blok komponen resize-text .

 {{#resize-text minSize=12 maxSize=20}}
  Please resize me!
{{/resize-text}}

Catatan : Anda dapat menyesuaikan komponen dengan mengesampingkan atribut seperti tagName atau kait standar.

Perhatikan tentang mengubah ukuran jendela

Addon ini secara otomatis mendaftarkan pendengar acara di acara mengubah ukuran Windows untuk memastikan teks masih cocok setelah jendela diubah ukurannya. Jika Anda ingin teks meningkatkan ukuran fontnya setiap kali jendela diubah ukurannya, pastikan untuk menambahkan gaya yang sesuai ke kelas CSS resize-text Add-On. Misalnya pertimbangkan markup ini:

 <nav>
  <span>first</span>
  {{#resize-text}}
    second
  {{/resize-text}}
</nav>

dan CSS berikut:

 nav {
  width: 100%;
  display: flex
}

.resize-text {
  flex-grow: 1; /* allow the resize-text elements to increase its size */
}

Ukuran font tidak akan ditingkatkan jika elemen dengan kelas resize-text tidak akan dapat meningkatkan lebarnya dalam ketergantungannya ke lebar orang tua. Ini tidak dibangun ke dalam addon karena ini tergantung pada konteks di mana addon digunakan.

Parameter

Paramter	jenis	keterangan
Minsize	nomor	Ukuran font minimum di PX
Maksimal	nomor	Ukuran font maksimum di PX
ContainerElement	elemen	Parameter ContainerElement memungkinkan untuk menentukan elemen DOM opsional yang properti clientWidth akan digunakan untuk menentukan ruang yang tersedia. Ini sangat berguna ketika elemen DOM yang harus diubah ukurannya bukan elemen blok. Misalnya teks tautan harus diubah ukurannya, tetapi tidak boleh menempati lebar penuh kecuali diperlukan.

Menyumbang

Berkontribusi

Lihat panduan yang berkontribusi untuk detailnya.

Lisensi