الفرق بين المراجعتين لصفحة: «ReactNative/slider»
لا ملخص تعديل |
رقية-بورية (نقاش | مساهمات) رفع المحتوى |
||
| سطر 1: | سطر 1: | ||
{{DISPLAYTITLE:Slider في | <noinclude>{{DISPLAYTITLE:المكون Slider في ReactNative}}</noinclude> | ||
<blockquote>'''مهملة:''' | <blockquote>'''مهملة:''' يمكنك استخدام [https://github.com/react-native-community/react-native-slider <code>@react-native-community/slider</code>] كذلك. | ||
</blockquote> | |||
يُستخدم مكوّن شريط التمرير (Slider) لاختيار قيمةٍ من مجال قيم. | |||
__toc__ | |||
== الخاصيات == | |||
موروثة من خاصيات المكوّن [https://reactnative.dev/docs/view#props <code>View</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> === | ||
لن يستطيع المستخدم تحريك شريط التّمرير عندما تكون قيمتها true، وقيمتها الافتراضيّة هي false. | |||
{| class="wikitable" | {| class="wikitable" | ||
!النوع | ! النوع | ||
!مطلوب | ! مطلوب | ||
|- | |- | ||
|قيمة منطقية (bool) | | قيمة منطقية (bool) | ||
|لا | | لا | ||
|} | |} | ||
=== <code>maximumValue</code> === | === <code>maximumValue</code> === | ||
تحدد | |||
تحدد أكبر قيمةٍ ابتدائيّةٍ لشريط التمرير، وقيمتها الافتراضية هي 1. | |||
{| class="wikitable" | {| class="wikitable" | ||
!النوع | ! النوع | ||
!مطلوب | ! مطلوب | ||
|- | |- | ||
|عدد (number) | | عدد (number) | ||
|لا | | لا | ||
|} | |} | ||
=== <code>minimumTrackTintColor</code> === | === <code>minimumTrackTintColor</code> === | ||
تحدد اللون المستخدم | |||
تحدد اللون المستخدم للمسار الموجود على يسار الزّرّ، وتتجاوز التدرج الأزرق الافتراضيّ على منصة iOS. | |||
{| class="wikitable" | {| class="wikitable" | ||
!النوع | ! النوع | ||
!مطلوب | ! مطلوب | ||
|- | |- | ||
|لون ([ | | لون ([https://reactnative.dev/docs/colors <code>color</code>]) | ||
|لا | | لا | ||
|} | |} | ||
=== <code>minimumValue</code> === | === <code>minimumValue</code> === | ||
تحدد | |||
تحدد أصغر قيمةٍ ابتدائيّةٍ لشريط التمرير، وقيمتها الافتراضية هي 0. | |||
{| class="wikitable" | {| class="wikitable" | ||
!النوع | ! النوع | ||
!مطلوب | ! مطلوب | ||
|- | |- | ||
|عدد (number) | | عدد (number) | ||
|لا | | لا | ||
|} | |} | ||
=== <code>onSlidingComplete</code> === | === <code>onSlidingComplete</code> === | ||
تٌستدعى عندما يفلت المستخدم شريط التمرير حتى لو لم تتغير قيمته، وتمرَّر القيمة الحالية لشريط التمرير كمعاملٍ للمعالج. | |||
{| class="wikitable" | {| class="wikitable" | ||
!النوع | ! النوع | ||
!مطلوب | ! مطلوب | ||
|- | |- | ||
|دالة (function) | | دالة (function) | ||
|لا | | لا | ||
|} | |} | ||
=== <code>onValueChange</code> === | === <code>onValueChange</code> === | ||
تٌستدعى هذه الدالة باستمرار عند سحب المستخدم للشريط. | |||
{| class="wikitable" | {| class="wikitable" | ||
!النوع | ! النوع | ||
!مطلوب | ! مطلوب | ||
|- | |- | ||
|دالة (function) | | دالة (function) | ||
|لا | | لا | ||
|} | |} | ||
=== <code>step</code> === | === <code>step</code> === | ||
قيمة خطوة شريط التمرير، وتتراوح بين 0 و (maximumValue - minimumValue)، وقيمتها الافتراضيّة هي 0. | |||
{| class="wikitable" | {| class="wikitable" | ||
!النوع | ! النوع | ||
!مطلوب | ! مطلوب | ||
|- | |- | ||
|عدد (number) | | عدد (number) | ||
|لا | | لا | ||
|} | |} | ||
=== <code>maximumTrackTintColor</code> === | === <code>maximumTrackTintColor</code> === | ||
تحدد اللون المستخدم | |||
تحدد اللون المستخدم للمسار الموجود على يمين الزّرّ، وتتجاوز التدرج الرماديّ الافتراضيّ على منصة iOS. | |||
{| class="wikitable" | {| class="wikitable" | ||
!النوع | ! النوع | ||
!مطلوب | ! مطلوب | ||
|- | |- | ||
|لون ([ | | لون ([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> === | ||
'''ملاحظة:''' هذا المكون غير | تحدد القيمة الابتدائية لشريط التمرير، وتتراوح بين minimumValue و maximumValue -اللتان كانت قيمهما الافتراضيّة 0 و1 على التوالي- وقيمتها الافتراضيّة هي 0. | ||
'''ملاحظة:''' هذا المكون غير متحكّم به لذا لا حاجة لتحديث القيمة أثناء السحب. | |||
{| class="wikitable" | {| class="wikitable" | ||
!النوع | ! النوع | ||
!مطلوب | ! مطلوب | ||
|- | |- | ||
|عدد (number) | | عدد (number) | ||
|لا | | لا | ||
|} | |} | ||
===<code>thumbTintColor</code>=== | === <code>thumbTintColor</code> === | ||
اللون المستخدم لتلوين | |||
اللون المستخدم لتلوين قبضة شريط التمرير -التي سيتحرك بواسطتها- على منصّة iOS، أو لون مفتاح التبديل الأمامي على منصّة Android. | |||
{| class="wikitable" | {| class="wikitable" | ||
!النوع | ! النوع | ||
!مطلوب | ! مطلوب | ||
|- | |- | ||
|لون ([ | | لون ([https://reactnative.dev/docs/colors <code>color</code>]) | ||
|لا | | لا | ||
|} | |} | ||
===<code>maximumTrackImage</code>=== | === <code>maximumTrackImage</code> === | ||
تحدد | |||
تحدد أكبر صورة مسارٍ، وتدعم الصّور الثابتة فقط، حيث يتمدد البكسل في أقصى يسار الصورة ليملأ المسار. | |||
{| class="wikitable" | {| class="wikitable" | ||
!النوع | ! النوع | ||
!مطلوب | ! مطلوب | ||
!المنصة | ! المنصة | ||
|- | |- | ||
|مصدر | | مصدر الصورة (Image.propTypes.source) | ||
|لا | | لا | ||
|iOS | | iOS | ||
|} | |} | ||
===<code>minimumTrackImage</code>=== | === <code>minimumTrackImage</code> === | ||
تحدد | |||
تحدد أصغر صورة مسارٍ، وتدعم الصور الثابتة فقط، حيث يتمدد البكسل في أقصى يمين الصورة ليملأ المسار. | |||
{| class="wikitable" | {| class="wikitable" | ||
!النوع | ! النوع | ||
!مطلوب | ! مطلوب | ||
!المنصة | ! المنصة | ||
|- | |- | ||
|مصدر | | مصدر الصورة (Image.propTypes.source) | ||
|لا | | لا | ||
|iOS | | iOS | ||
|} | |} | ||
===<code>thumbImage</code>=== | === <code>thumbImage</code> === | ||
تحدّد صورةً لقبضة شريط التّمرير، وتدعم الصّور الثّابتة فقط. | |||
{| class="wikitable" | {| class="wikitable" | ||
!النوع | ! النوع | ||
!مطلوب | ! مطلوب | ||
!المنصة | ! المنصة | ||
|- | |- | ||
|مصدر | | مصدر الصورة (Image.propTypes.source) | ||
|لا | | لا | ||
|iOS | | iOS | ||
|} | |} | ||
===<code>trackImage</code>=== | === <code>trackImage</code> === | ||
تحدّد صورةً وحيدةً للمسار، وتدعم الصور الثابتة فقط، حيث تتمدد البكسلات في منتصف الصورة لتملأ المسار. | |||
{| class="wikitable" | {| class="wikitable" | ||
!النوع | ! النوع | ||
!مطلوب | ! مطلوب | ||
!المنصة | ! المنصة | ||
|- | |- | ||
|مصدر | | مصدر الصورة (Image.propTypes.source) | ||
|لا | | لا | ||
|iOS | | iOS | ||
|} | |} | ||
== مصادر == | == مصادر == | ||
* [https:// | * [https://facebook.github.io/react-native/docs/slider صفحة Slider في توثيق React Native الرسميّ] | ||
[[ | [[التصنيف: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 |