font picker react font picker react Download - تنزيل رمز المصدر

font picker react

تحميل الخط

v3.5.2

تنزيل

منتقي الخط للتفاعل

منتقي خط بسيط وقابل للتخصيص يتيح للمستخدمين معاينة واختيار واستخدام خطوط Google على موقع الويب الخاص بك.

إعداد بسيط
لا تبعيات
تنزيل الخط التلقائي وتوليد محددات CSS المطلوبة
معاينات الخطوط الفعالة (يتم تنزيل الخطوط الكاملة فقط عند الاختيار)

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

هذا هو مكون React لمكتبة Pont Picker .

التوقيت الخطية

ابدء

لتكون قادرًا على الوصول إلى واجهة برمجة التطبيقات ، ستحتاج إلى إنشاء مفتاح API Fonts Google.

1. الإعداد

قم بتثبيت حزمة font-picker-react باستخدام NPM:

npm install font-picker-react

2. عرض منتقي الخط

أضف مكون FontPicker إلى رمز React الخاص بك:

 import React , { Component } from "react" ;
import FontPicker from "font-picker-react" ;

export default class ExampleComponent extends Component {
	constructor ( props ) {
		super ( props ) ;
		this . state = {
			activeFontFamily : "Open Sans" ,
		} ;
	}

	render ( ) {
		return (
			< div >
				< FontPicker
					apiKey = "YOUR_API_KEY"
					activeFontFamily = { this . state . activeFontFamily }
					onChange = { ( nextFont ) =>
						this . setState ( {
							activeFontFamily : nextFont . family ,
						} )
					}
				/>
				< p className = "apply-font" > The font will be applied to this text. </ p >
			</ div >
		) ;
	}
}

3. تطبيق الخط المحدد

أضف الفصل "apply-font" إلى جميع عناصر JSX التي تريد تطبيق الخط المحدد على.

عندما يختار المستخدم خطًا ، سيتم تنزيله تلقائيًا وتطبيقه على جميع العناصر مع فئة "apply-font" .

الدعائم

يمكن تمرير الدعائم التالية إلى مكون FontPicker :

apiKey (مطلوب) : مفتاح Google API
activeFontFamily : الخط الذي يجب تحديده في منتقي الخط وتطبيقه على النص. يجب تخزينها في حالة المكون وتحديثها باستخدام onChange
onChange : وظيفة يتم تنفيذها عندما يغير المستخدم الخط النشط. يجب أن تحديث هذه الوظيفة activeFontFamily في حالة المكون
pickerId : إذا كان لديك متعددة من ملتقي الخطوط على موقعك ، فأنت بحاجة إلى منحهم معرفات فريدة من نوعها يجب توفيرها كدعم وإلحاق بأسماء فئة .apply-font . مثال: إذا كان pickerId="main" ، استخدم className="apply-font-main"
families : إذا ظهرت خطوط محددة فقط في القائمة ، حدد أسمائها في صفيف. الافتراضي: جميع عائلات الخطوط
categories : مجموعة من فئات الخطوط لتضمينها في القائمة. القيم المحتملة: "sans-serif", "serif", "display", "handwriting", "monospace" . الافتراضي: جميع الفئات
scripts : مجموعة من البرامج النصية التي يجب أن تتضمنها الخطوط والتي سيتم تنزيلها على اختيار الخط. الافتراضي: ["latin"] . مثال: ["latin", "greek", "hebrew"] (انظر كل القيم الممكنة)
variants : مجموعة من المتغيرات التي يجب أن تتضمن الخطوط والتي سيتم تنزيلها على اختيار الخط. الافتراضي: ["regular"] . مثال: ["regular", "italic", "700", "700italic"] (انظر جميع القيم الممكنة)
filter : الوظيفة التي يجب تقييمها إلى true ليتم تضمين خط في القائمة. الافتراضي: font => true . مثال: إذا font => font.family.toLowerCase().startsWith("m") ، فإن الخطوط التي تبدأ أسماؤها بـ "M" في القائمة
limit : الحد الأقصى لعدد الخطوط التي يجب عرضها في القائمة (سيتم حذف الخطوط الأقل شعبية). الافتراضي: 50
sort : سمة الفرز لقائمة الخط. القيم المحتملة: "alphabet", "popularity" . الافتراضي: "alphabet"