turkey map react تنزيل - turkey map react تنزيل كود المصدر

turkey map react

شفرة المصدر الأخرى

v1.2.2

تنزيل

خريطة تركيا التفاعلية مكون التفاعل

خريطة خارج الصندوق لمدينة تركيا.

العرض المباشر : https://turkey-map-react-demo.netlify.app/

تثبيت

 npm install turkey - map - react

أو

 yarn add turkey - map - react

الاستخدام

الاستيراد (ES6)

 import TurkeyMap from 'turkey-map-react' ;

الاستخدام الأساسي مع الإعدادات الافتراضية

 < TurkeyMap / >

التعامل مع الأحداث

عند النقر على المثال:

 < TurkeyMap onClick = { ( { plateNumber , name } ) => console . log ( plateNumber + " - " + name + " is just clicked!" ) } / >

على سبيل المثال بالماوس:

 < TurkeyMap 
    hoverable = { true }
    onHover = { ( { plateNumber , name } ) => console . log ( "Cursor is over on " + plateNumber + " - " + name + "!" ) } 
/ >

تغليف مكونات المدينة

 const renderCity = ( cityComponent , cityData ) => ( 
  < Tooltip title = { cityData . name } key = { cityData . id } > 
      { cityComponent } 
  < / Tooltip >
) ;

< TurkeyMap cityWrapper = { renderCity } / >

يستخدم هذا بشكل عام لـ Antd style Tooltip .

المعلمة " child " هي DOM للمدينة.

البيانات المخصصة

 < TurkeyMap data = { this . state . apiData } / >

إذا كانت هناك حاجة إلى عرض مسارات SVG مخصصة و/أو بيانات تعريف المدينة، فيمكن توفيرها من خلال خاصية البيانات .

يجب أن تكون خاصية البيانات بالنوع التالي:

 CityType [ ]

بعبارة أخرى :

 { id : string , plateNumber : number , name : string , path : string } [ ]

واجهة برمجة التطبيقات

أنواع

يكتب	وصف
نوع المدينة	{ المعرف : سلسلة ، رقم اللوحة : الرقم ، الاسم : سلسلة ، المسار : سلسلة }
ViewBoxType	{ أعلى : رقم ، يسار : رقم ، عرض : رقم ، ارتفاع : رقم }
CustomStyleType	{ لون الخمول : سلسلة ، تحويم اللون : سلسلة }

الدعائم

ملكية	وصف	يكتب	تقصير	منذ
viewBox	معلومات الموقع والأبعاد لتخطيط الخريطة (svg).	ViewBoxType	{ أعلى : 0 ، يسار : 80 ، عرض : 1050 ، ارتفاع : 585 }	1.0.0
مرئي	يحدد رؤية المكون	منطقية	حقيقي	1.0.0
قابل للتحويم	تفعيل توفر حدث onHover	منطقية	حقيقي	1.0.0
showTooltip	يعرض تلميح الأدوات الافتراضي إذا تم ضبطه على "صحيح".	منطقية	خطأ شنيع	1.1.0
tooltipText	يضبط النص المخصص على تلميح الأدوات الافتراضي	خيط	اسم المدينة	1.1.0
customStyle	تصميم المكون.	نوع النمط المخصص []	{ لون الخمول : #444 ، لون التحويم : #dc3522 }	1.0.0
بيانات	يسمح بتوفير مسارات SVG وبيانات تعريفية مخصصة.	نوع المدينة []	البيانات المضمنة	1.0.0
cityWrapper	يتم تغليف City DOMs بواسطة المكون المقدم.	( cityComponent : JSX.Element , city : CityType ) => JSX.Element	مدينة غير ملفوفة	1.0.0
onHover	حدث عندما تحوم مدينة على الخريطة.	( المدينة : CityType ) => باطل	-	1.0.0
عند النقر	حدث عند النقر على مدينة على الخريطة	( المدينة : CityType ) => باطل	-	1.0.0

التصميم

يمكن الكتابة فوق ألوان المدينة باستخدام خاصية customStyle .

مثال:

 < TurkeyMap customStyle = { { idleColor : "#444" , hoverColor : "#dc3522" } } / >

يمكن تصميم تلميح الأدوات الافتراضي من خلال معرفات html المحددة مسبقًا.

#svg-turkiye-haritasi-container-tooltip هو معرّف تلميح الأداة DOM. في حين أن #svg-turkiye-haritasi-container هو معرّف الحاوية (الأصل) DOM.

مثال:

 # svg-turkiye-haritasi-container > # svg-turkiye-haritasi-container-tooltip {
  background-color : rgba ( 54 , 0 , 99 , 0.479 );
}

الترخيص

تم إصدار هذا المشروع بموجب ترخيص MIT.

الإصدار

تم تعريف نظام الإصدار كما هو موضح في نمط " MajorVersion.minorVersion.bugfixVersion "

مستوى	وصف
الإصدار الرئيسي	يشير هذا إلى أن الإصدار يقدم تغييرات جذرية ربما لا تكون متوافقة مع الإصدارات السابقة.
com.minorVersion	يشير هذا إلى أن الإصدار يقدم تغييرات صغيرة متوافقة مع الإصدارات السابقة مع ملاءمة دقيقة للاستخدامات الحالية.
bugfixVersion	وهذا يدل على أن الإصدار يحل بعض المشاكل التي ظهرت في الإصدارات الرئيسية أو الثانوية الحالية.