الفرق بين المراجعتين ل"ReactNative/slider"

من موسوعة حسوب
اذهب إلى التنقل اذهب إلى البحث
(رفع المحتوى)
سطر 1: سطر 1:
−
{{DISPLAYTITLE:Slider في React Native}}
+
<noinclude>{{DISPLAYTITLE:المكون Slider في ReactNative}}</noinclude>
−
<blockquote>'''مهملة:''' استخدم [https://github.com/react-native-community/react-native-slider @react-native-community/slider] بدلًا منها.</blockquote>
+
<blockquote>'''مهملة:''' يمكنك استخدام [https://github.com/react-native-community/react-native-slider <code>@react-native-community/slider</code>] كذلك.
 +
</blockquote>
 +
يُستخدم مكوّن شريط التمرير (Slider) لاختيار قيمةٍ من مجال قيم.
 +
__toc__
 +
== الخاصيات ==
  
−
يُستخدم المكوّن <code>Slider</code> لاختيار قيمة من مجال من القيم.
+
موروثة من خاصيات المكوّن [https://reactnative.dev/docs/view#props <code>View</code>].
  
−
== الخاصيّات (Props) ==
+
=== <code>style</code> ===
−
موروثة من خاصيّات المكوّن <code>[[ReactNative/view#.D8.A7.D9.84.D8.AE.D8.A7.D8.B5.D9.8A.D8.A7.D8.AA|View]]</code>.
+
 
 +
تُستخدم لتنسيق وتخطيط المكون <code>Slider</code>. ويمكن الاطلاع على <code>StyleSheet.js</code> و <code>ViewStylePropTypes.js</code> لمزيدٍ من المعلومات.
  
−
=== <code>style</code> ===
 
−
تُستخدم لتنسيق وتخطيط المكون <code>Slider</code>. ولمزيد من المعلومات يمكن الاطلاع على <code>StyleSheet.js</code> و <code>ViewStylePropTypes.js</code>.
 
 
{| class="wikitable"
 
{| class="wikitable"
−
!النوع
+
! النوع
−
!مطلوب
+
! مطلوب
 
|-
 
|-
−
|تنسيق (View.style)
+
| تنسيق (View.style)
−
|لا
+
| لا
 
|}
 
|}
  
 
=== <code>disabled</code> ===
 
=== <code>disabled</code> ===
−
إذا كانت قيمتها <code>true</code> فلن يستطيع المستخدم تحريك الزلاقة . قيمتها الافتراضية <code>false</code>.
+
 
 +
لن يستطيع المستخدم تحريك شريط التّمرير عندما تكون قيمتها true، وقيمتها الافتراضيّة هي false.
 +
 
 
{| class="wikitable"
 
{| class="wikitable"
−
!النوع
+
! النوع
−
!مطلوب
+
! مطلوب
 
|-
 
|-
−
|قيمة منطقية (bool)
+
| قيمة منطقية (bool)
−
|لا
+
| لا
 
|}
 
|}
  
 
=== <code>maximumValue</code> ===
 
=== <code>maximumValue</code> ===
−
تحدد القيمة الابتدائية العظمى للزلاقة. قيمتها الافتراضية <code>1</code>.
+
 
 +
تحدد أكبر قيمةٍ ابتدائيّةٍ لشريط التمرير، وقيمتها الافتراضية هي 1.
 +
 
 
{| class="wikitable"
 
{| class="wikitable"
−
!النوع
+
! النوع
−
!مطلوب
+
! مطلوب
 
|-
 
|-
−
|عدد (number)
+
| عدد (number)
−
|لا
+
| لا
 
|}
 
|}
  
 
=== <code>minimumTrackTintColor</code> ===
 
=== <code>minimumTrackTintColor</code> ===
−
تحدد اللون المستخدم لتعقّب الجهة اليسارية من الزلاقة, وتلغي عند تمكينها تدرّج اللون الأزرق الافتراضي على منصة iOS.  
+
 
 +
تحدد اللون المستخدم للمسار الموجود على يسار الزّرّ، وتتجاوز التدرج الأزرق الافتراضيّ على منصة iOS.  
 +
 
 
{| class="wikitable"
 
{| class="wikitable"
−
!النوع
+
! النوع
−
!مطلوب
+
! مطلوب
 
|-
 
|-
−
|لون ([[ReactNative/colors|color]])
+
| لون ([https://reactnative.dev/docs/colors <code>color</code>])
−
|لا
+
| لا
 
|}
 
|}
  
 
=== <code>minimumValue</code> ===
 
=== <code>minimumValue</code> ===
−
تحدد القيمة الابتدائية الصغرى للزلاقة. قيمتها الافتراضية <code>0</code>.
+
 
 +
تحدد أصغر قيمةٍ ابتدائيّةٍ لشريط التمرير، وقيمتها الافتراضية هي 0.
 +
 
 
{| class="wikitable"
 
{| class="wikitable"
−
!النوع
+
! النوع
−
!مطلوب
+
! مطلوب
 
|-
 
|-
−
|عدد (number)
+
| عدد (number)
−
|لا
+
| لا
 
|}
 
|}
  
 
=== <code>onSlidingComplete</code> ===
 
=== <code>onSlidingComplete</code> ===
−
رد نداء (callback) يُستدعَى عند تحرير المستخدم للزلاقة حتى لو لم تتغير قيمتها, حيث يُمرر له القيمة الحالية للزلاقة كمعامل .
+
 
 +
تٌستدعى عندما يفلت المستخدم شريط التمرير حتى لو لم تتغير قيمته، وتمرَّر القيمة الحالية لشريط التمرير كمعاملٍ للمعالج.
 +
 
 
{| class="wikitable"
 
{| class="wikitable"
−
!النوع
+
! النوع
−
!مطلوب
+
! مطلوب
 
|-
 
|-
−
|دالة (function)
+
| دالة (function)
−
|لا
+
| لا
 
|}
 
|}
  
 
=== <code>onValueChange</code> ===
 
=== <code>onValueChange</code> ===
−
رد نداء (callback) يُستدعَى باستمرار عند سحب المستخدم للزلاقة.
+
 
 +
تٌستدعى هذه الدالة باستمرار عند سحب المستخدم للشريط.
 +
 
 
{| class="wikitable"
 
{| class="wikitable"
−
!النوع
+
! النوع
−
!مطلوب
+
! مطلوب
 
|-
 
|-
−
|دالة (function)
+
| دالة (function)
−
|لا
+
| لا
 
|}
 
|}
  
 
=== <code>step</code> ===
 
=== <code>step</code> ===
−
تحدد قيمة خطوة الزلاقة, وتتراوح بين <code>0</code> و (<code>maximumValue</code> - <code>minimumValue</code>). قيمتها الافتراضية <code>0</code>.
+
 
 +
قيمة خطوة شريط التمرير، وتتراوح بين 0 و (maximumValue - minimumValue)، وقيمتها الافتراضيّة هي 0.
 +
 
 
{| class="wikitable"
 
{| class="wikitable"
−
!النوع
+
! النوع
−
!مطلوب
+
! مطلوب
 
|-
 
|-
−
|عدد (number)
+
| عدد (number)
−
|لا
+
| لا
 
|}
 
|}
  
 
=== <code>maximumTrackTintColor</code> ===
 
=== <code>maximumTrackTintColor</code> ===
−
تحدد اللون المستخدم لتعقّب الجهة اليمينية من الزلاقة, وتلغي عند تمكينها تدرج اللون الرمادي الافتراضي على منصة iOS.  
+
 
 +
تحدد اللون المستخدم للمسار الموجود على يمين الزّرّ، وتتجاوز التدرج الرماديّ الافتراضيّ على منصة iOS.  
 +
 
 
{| class="wikitable"
 
{| class="wikitable"
−
!النوع
+
! النوع
−
!مطلوب
+
! مطلوب
 
|-
 
|-
−
|لون ([[ReactNative/colors|color]])
+
| لون ([https://reactnative.dev/docs/colors <code>color</code>])
−
|لا
+
| لا
 
|}
 
|}
  
−
===<code>testID</code>===
+
=== <code>testID</code> ===
 +
 
 
تستخدم لوضع هذا العرض في اختبارات أتمتة واجهة المستخدم (UI automation tests).
 
تستخدم لوضع هذا العرض في اختبارات أتمتة واجهة المستخدم (UI automation tests).
 +
 
{| class="wikitable"
 
{| class="wikitable"
−
!النوع
+
! النوع
−
!مطلوب
+
! مطلوب
 
|-
 
|-
−
|سلسلة نصية (string)
+
| سلسلة نصية (string)
−
|لا
+
| لا
 
|}
 
|}
  
 
=== <code>value</code> ===
 
=== <code>value</code> ===
−
تحدد القيمة الابتدائية للزلاقة, وتتراوح بين <code>minimumValue</code> و <code>maximumValue</code>. قيمتها الافتراضية <code>0</code>.
 
  
−
'''ملاحظة:''' هذا المكون غير متحكم به لذا لا داعي لتحديث القيمة أثناء السحب.
+
تحدد القيمة الابتدائية لشريط التمرير، وتتراوح بين minimumValue و maximumValue -اللتان كانت قيمهما الافتراضيّة 0 و1 على التوالي- وقيمتها الافتراضيّة هي 0.
 +
 
 +
'''ملاحظة:''' هذا المكون غير متحكّم به لذا لا حاجة لتحديث القيمة أثناء السحب.
 +
 
 
{| class="wikitable"
 
{| class="wikitable"
−
!النوع
+
! النوع
−
!مطلوب
+
! مطلوب
 
|-
 
|-
−
|عدد (number)
+
| عدد (number)
−
|لا
+
| لا
 
|}
 
|}
  
−
===<code>thumbTintColor</code>===
+
=== <code>thumbTintColor</code> ===
−
اللون المستخدم لتلوين صور الإبهام الافتراضية على منصّة iOS, أو لون مفتاح التبديل الأمامي على منصة Android.  
+
 
 +
اللون المستخدم لتلوين قبضة شريط التمرير -التي سيتحرك بواسطتها- على منصّة iOS، أو لون مفتاح التبديل الأمامي على منصّة Android.  
 +
 
 
{| class="wikitable"
 
{| class="wikitable"
−
!النوع
+
! النوع
−
!مطلوب
+
! مطلوب
 
|-
 
|-
−
|لون ([[ReactNative/colors|color]])
+
| لون ([https://reactnative.dev/docs/colors <code>color</code>])
−
|لا
+
| لا
 
|}
 
|}
  
−
===<code>maximumTrackImage</code>===
+
=== <code>maximumTrackImage</code> ===
−
تحدد الصورة المستخدمة لتعقّب الجهة اليمينية للزلاقة, وتدعم فقط الصور ذات المصدر الثابت, حيث تتمدد البكسلات اليسارية من الصورة عند التعقّب.
+
 
 +
تحدد أكبر صورة مسارٍ، وتدعم الصّور الثابتة فقط، حيث يتمدد البكسل في أقصى يسار الصورة ليملأ المسار.
 +
 
 
{| class="wikitable"
 
{| class="wikitable"
−
!النوع
+
! النوع
−
!مطلوب
+
! مطلوب
−
!المنصة
+
! المنصة
 
|-
 
|-
−
|مصدر صورة (Image.propTypes.source)
+
| مصدر الصورة (Image.propTypes.source)
−
|لا
+
| لا
−
|iOS
+
| iOS
 
|}
 
|}
  
−
===<code>minimumTrackImage</code>===
+
=== <code>minimumTrackImage</code> ===
−
تحدد الصورة المستخدمة لتعقّب الجهة اليسارية للزلاقة, وتدعم فقط الصور ذات المصدر الثابت, حيث تتمدد البكسلات اليمينية من الصورة عند التعقّب.
+
 
 +
تحدد أصغر صورة مسارٍ، وتدعم الصور الثابتة فقط، حيث يتمدد البكسل في أقصى يمين الصورة ليملأ المسار.
 +
 
 
{| class="wikitable"
 
{| class="wikitable"
−
!النوع
+
! النوع
−
!مطلوب
+
! مطلوب
−
!المنصة
+
! المنصة
 
|-
 
|-
−
|مصدر صورة (Image.propTypes.source)
+
| مصدر الصورة (Image.propTypes.source)
−
|لا
+
| لا
−
|iOS
+
| iOS
 
|}
 
|}
  
−
===<code>thumbImage</code>===
+
=== <code>thumbImage</code> ===
−
تحدد صورة للإبهام, وتدعم فقط الصور ذات المصدر الثابت.
+
 
 +
تحدّد صورةً لقبضة شريط التّمرير، وتدعم الصّور الثّابتة فقط.
 +
 
 
{| class="wikitable"
 
{| class="wikitable"
−
!النوع
+
! النوع
−
!مطلوب
+
! مطلوب
−
!المنصة
+
! المنصة
 
|-
 
|-
−
|مصدر صورة (Image.propTypes.source)
+
| مصدر الصورة (Image.propTypes.source)
−
|لا
+
| لا
−
|iOS
+
| iOS
 
|}
 
|}
  
−
===<code>trackImage</code>===
+
=== <code>trackImage</code> ===
−
تحدد صورة وحيدة لتعقّب الزلاقة, وتدعم فقط الصور ذات المصدر الثابت, حيث تتمدد البكسلات في منتصف الصورة عند التعقّب.
+
 
 +
تحدّد صورةً وحيدةً للمسار، وتدعم الصور الثابتة فقط، حيث تتمدد البكسلات في منتصف الصورة لتملأ المسار.
 +
 
 
{| class="wikitable"
 
{| class="wikitable"
−
!النوع
+
! النوع
−
!مطلوب
+
! مطلوب
−
!المنصة
+
! المنصة
 
|-
 
|-
−
|مصدر صورة (Image.propTypes.source)
+
| مصدر الصورة (Image.propTypes.source)
−
|لا
+
| لا
−
|iOS
+
| iOS
 
|}
 
|}
  
 
== مصادر ==
 
== مصادر ==
  
−
* [https://reactnative.dev/docs/slider صفحة Slider في توثيق React Native الرسمي.]
+
* [https://facebook.github.io/react-native/docs/slider صفحة Slider في توثيق React Native الرسميّ]
−
[[تصنيف:ReactNative]]
+
[[التصنيف:ReactNative]]

مراجعة 09:12، 19 فبراير 2021

مهملة: يمكنك استخدام @react-native-community/slider كذلك.

يُستخدم مكوّن شريط التمرير (Slider) لاختيار قيمةٍ من مجال قيم.

الخاصيات

موروثة من خاصيات المكوّن View.

style

تُستخدم لتنسيق وتخطيط المكون Slider. ويمكن الاطلاع على StyleSheet.js و ViewStylePropTypes.js لمزيدٍ من المعلومات.

النوع مطلوب
تنسيق (View.style) لا

disabled

لن يستطيع المستخدم تحريك شريط التّمرير عندما تكون قيمتها true، وقيمتها الافتراضيّة هي false.

النوع مطلوب
قيمة منطقية (bool) لا

maximumValue

تحدد أكبر قيمةٍ ابتدائيّةٍ لشريط التمرير، وقيمتها الافتراضية هي 1.

النوع مطلوب
عدد (number) لا

minimumTrackTintColor

تحدد اللون المستخدم للمسار الموجود على يسار الزّرّ، وتتجاوز التدرج الأزرق الافتراضيّ على منصة iOS.

النوع مطلوب
لون (color) لا

minimumValue

تحدد أصغر قيمةٍ ابتدائيّةٍ لشريط التمرير، وقيمتها الافتراضية هي 0.

النوع مطلوب
عدد (number) لا

onSlidingComplete

تٌستدعى عندما يفلت المستخدم شريط التمرير حتى لو لم تتغير قيمته، وتمرَّر القيمة الحالية لشريط التمرير كمعاملٍ للمعالج.

النوع مطلوب
دالة (function) لا

onValueChange

تٌستدعى هذه الدالة باستمرار عند سحب المستخدم للشريط.

النوع مطلوب
دالة (function) لا

step

قيمة خطوة شريط التمرير، وتتراوح بين 0 و (maximumValue - minimumValue)، وقيمتها الافتراضيّة هي 0.

النوع مطلوب
عدد (number) لا

maximumTrackTintColor

تحدد اللون المستخدم للمسار الموجود على يمين الزّرّ، وتتجاوز التدرج الرماديّ الافتراضيّ على منصة iOS.

النوع مطلوب
لون (color) لا

testID

تستخدم لوضع هذا العرض في اختبارات أتمتة واجهة المستخدم (UI automation tests).

النوع مطلوب
سلسلة نصية (string) لا

value

تحدد القيمة الابتدائية لشريط التمرير، وتتراوح بين minimumValue و maximumValue -اللتان كانت قيمهما الافتراضيّة 0 و1 على التوالي- وقيمتها الافتراضيّة هي 0.

ملاحظة: هذا المكون غير متحكّم به لذا لا حاجة لتحديث القيمة أثناء السحب.

النوع مطلوب
عدد (number) لا

thumbTintColor

اللون المستخدم لتلوين قبضة شريط التمرير -التي سيتحرك بواسطتها- على منصّة iOS، أو لون مفتاح التبديل الأمامي على منصّة Android.

النوع مطلوب
لون (color) لا

maximumTrackImage

تحدد أكبر صورة مسارٍ، وتدعم الصّور الثابتة فقط، حيث يتمدد البكسل في أقصى يسار الصورة ليملأ المسار.

النوع مطلوب المنصة
مصدر الصورة (Image.propTypes.source) لا iOS

minimumTrackImage

تحدد أصغر صورة مسارٍ، وتدعم الصور الثابتة فقط، حيث يتمدد البكسل في أقصى يمين الصورة ليملأ المسار.

النوع مطلوب المنصة
مصدر الصورة (Image.propTypes.source) لا iOS

thumbImage

تحدّد صورةً لقبضة شريط التّمرير، وتدعم الصّور الثّابتة فقط.

النوع مطلوب المنصة
مصدر الصورة (Image.propTypes.source) لا iOS

trackImage

تحدّد صورةً وحيدةً للمسار، وتدعم الصور الثابتة فقط، حيث تتمدد البكسلات في منتصف الصورة لتملأ المسار.

النوع مطلوب المنصة
مصدر الصورة (Image.propTypes.source) لا iOS

مصادر

التصنيف:ReactNative

مجلوبة من "https://wiki.hsoub.com/index.php?title=ReactNative/slider&oldid=30291"