ember resize text

نص EMBER

Ember Addon الذي يستخدم Ember-Text-Meestorer لتغيير حجم خط خط واحد من النص بكفاءة لجعله مناسبًا.

تثبيت

ember install ember-resize-text

العرض التوضيحي

تحقق من الصفحة التجريبية

الاستخدام

منذ الإصدار 1.1.0 يأتي نص EMBER-RESISES كصاحب مختلط لاستخدامه في مكونات EMBER. لا يزال يتم تضمين المكون لسهولة الاستخدام وللحفاظ على التوافق للخلف.

Mixin

فقط أضف mixin إلى مكون وسيتم ضبط حجم خط المكونات تلقائيًا.

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

export default Component.extend(ResizeText, {

  minSize: 12,
  maxSize: 18

});

ملاحظة : يستخدم Mixin this.element.innerText للحصول على النص لعرضه و this.element.clientWidth (ما لم يحدد containerElement عنصرًا مختلفًا) لتحديد العرض المتاح.

عنصر

فقط لف النص الخاص بك ضمن نمط كتلة مكون resize-text .

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

ملاحظة : يمكنك تخصيص المكون عن طريق تجاوز السمات مثل tagName أو Hooks القياسية.

لاحظ على تغيير حجم النافذة

يقوم هذا الملحق بتسجيل مستمعي الأحداث تلقائيًا على حدث تغيير حجم Windows للتأكد من أن النص لا يزال يناسب بعد تغيير حجم النافذة. إذا كنت تريد أن يزيد النص من حجم خطه كلما تم تغيير حجم النافذة ، فتأكد من إضافة التصميم المناسب إلى فئة CSS resize-text . على سبيل المثال ، ضع في اعتبارك هذا الترميز:

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

و CSS التالية:

 nav {
  width: 100%;
  display: flex
}

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

لن يتم زيادة حجم الخط إذا لم يتمكن العنصر الذي يحتوي على فئة resize-text من زيادة عرضه في الاعتماد على عرض الوالد. هذا غير مدمج في الملحق لأن هذا يعتمد على السياق الذي يتم فيه استخدام الملحق.

حدود

بارامتر	يكتب	وصف
minsize	رقم	الحد الأدنى لحجم الخط في PX
MaxSize	رقم	الحد الأقصى لحجم الخط في PX
الحاوية	عنصر	تسمح معلمة الحاوية بتحديد عنصر DOM اختياري الذي سيتم استخدام خاصية clientWidth لتحديد المساحة المتاحة. هذا مفيد بشكل خاص عندما يكون عنصر DOM الذي يجب أن يتم تغييره ليس عنصرًا كتلة. على سبيل المثال ، يجب تغيير حجم نص الرابط ، ولكن لا ينبغي أن يشغل العرض الكامل ما لم يلزم ذلك.

يساهم

المساهمة

انظر دليل المساهمة للحصول على التفاصيل.

رخصة