الفرق بين المراجعتين لصفحة: «ReactNative/slider»
رقية-بورية (نقاش | مساهمات) رفع المحتوى |
رقية-بورية (نقاش | مساهمات) لا ملخص تعديل |
||
| سطر 1: | سطر 1: | ||
<noinclude>{{DISPLAYTITLE:المكون Slider في ReactNative}}</noinclude> | <noinclude>{{DISPLAYTITLE:المكون Slider في ReactNative}}</noinclude> | ||
<blockquote>'''مهملة:''' يمكنك استخدام [https://github.com/react-native-community/react-native-slider <code> | <blockquote>'''مهملة:''' يمكنك استخدام [https://github.com/react-native-community/react-native-slider <code>react-native-slider</code>] كذلك. | ||
</blockquote> | </blockquote> | ||
يُستخدم مكوّن شريط التمرير (Slider) لاختيار قيمةٍ من مجال قيم. | يُستخدم مكوّن شريط التمرير (Slider) لاختيار قيمةٍ من مجال قيم. | ||
| سطر 6: | سطر 6: | ||
== الخاصيات == | == الخاصيات == | ||
موروثة من خاصيات المكوّن [ | موروثة من خاصيات المكوّن <code>[[ReactNative/view|View]]</code>. | ||
=== <code>style</code> === | === <code>style</code> === | ||
تُستخدم لتنسيق وتخطيط المكون <code>Slider</code>. ويمكن الاطلاع على <code>StyleSheet.js</code> و <code>ViewStylePropTypes.js</code> لمزيدٍ من المعلومات. | تُستخدم لتنسيق وتخطيط المكون <code>Slider</code>. ويمكن الاطلاع على <code>StyleSheet.js</code> و<code>ViewStylePropTypes.js</code> لمزيدٍ من المعلومات. | ||
{| class="wikitable" | {| class="wikitable" | ||
| سطر 16: | سطر 16: | ||
! مطلوب | ! مطلوب | ||
|- | |- | ||
| تنسيق (View.style) | | تنسيق ([[ReactNative/view style props|View.style]]) | ||
| لا | | لا | ||
|} | |} | ||
| سطر 22: | سطر 22: | ||
=== <code>disabled</code> === | === <code>disabled</code> === | ||
لن يستطيع المستخدم تحريك شريط التّمرير عندما تكون قيمتها | لن يستطيع المستخدم تحريك شريط التّمرير عندما تكون قيمتها <code>true</code>، وقيمتها الافتراضيّة هي <code>false</code>. | ||
{| class="wikitable" | {| class="wikitable" | ||
| سطر 28: | سطر 28: | ||
! مطلوب | ! مطلوب | ||
|- | |- | ||
| | | (bool) | ||
| لا | | لا | ||
|} | |} | ||
| سطر 34: | سطر 34: | ||
=== <code>maximumValue</code> === | === <code>maximumValue</code> === | ||
تحدد أكبر قيمةٍ ابتدائيّةٍ لشريط التمرير، وقيمتها الافتراضية هي 1. | تحدد أكبر قيمةٍ ابتدائيّةٍ لشريط التمرير، وقيمتها الافتراضية هي <code>1</code>. | ||
{| class="wikitable" | {| class="wikitable" | ||
| سطر 52: | سطر 52: | ||
! مطلوب | ! مطلوب | ||
|- | |- | ||
| لون ([ | | لون (<code>[[ReactNative/colors|color]]</code>) | ||
| لا | | لا | ||
|} | |} | ||
| سطر 58: | سطر 58: | ||
=== <code>minimumValue</code> === | === <code>minimumValue</code> === | ||
تحدد أصغر قيمةٍ ابتدائيّةٍ لشريط التمرير، وقيمتها الافتراضية هي 0. | تحدد أصغر قيمةٍ ابتدائيّةٍ لشريط التمرير، وقيمتها الافتراضية هي <code>0</code>. | ||
{| class="wikitable" | {| class="wikitable" | ||
| سطر 94: | سطر 94: | ||
=== <code>step</code> === | === <code>step</code> === | ||
قيمة خطوة شريط التمرير، وتتراوح بين 0 و (maximumValue - minimumValue)، وقيمتها الافتراضيّة هي 0. | قيمة خطوة شريط التمرير، وتتراوح بين <code>0</code> و(<code>maximumValue - minimumValue</code>)، وقيمتها الافتراضيّة هي <code>0</code>. | ||
{| class="wikitable" | {| class="wikitable" | ||
| سطر 112: | سطر 112: | ||
! مطلوب | ! مطلوب | ||
|- | |- | ||
| لون ( | | لون (<code>color</code>) | ||
| لا | | لا | ||
|} | |} | ||
| سطر 130: | سطر 130: | ||
=== <code>value</code> === | === <code>value</code> === | ||
تحدد القيمة الابتدائية لشريط التمرير، وتتراوح بين minimumValue | تحدد القيمة الابتدائية لشريط التمرير، وتتراوح بين minimumValue وmaximumValue -اللتان كانت قيمهما الافتراضيّة <code>0</code> و<code>1</code> على التوالي- وقيمتها الافتراضيّة هي <code>0</code>. | ||
'''ملاحظة:''' هذا المكون غير متحكّم به لذا لا حاجة لتحديث القيمة أثناء السحب. | '''ملاحظة:''' هذا المكون غير متحكّم به لذا لا حاجة لتحديث القيمة أثناء السحب. | ||
| سطر 150: | سطر 150: | ||
! مطلوب | ! مطلوب | ||
|- | |- | ||
| لون ( | | لون (<code>color</code>) | ||
| لا | | لا | ||
|} | |} | ||
| سطر 213: | سطر 213: | ||
* [https://facebook.github.io/react-native/docs/slider صفحة Slider في توثيق React Native الرسميّ] | * [https://facebook.github.io/react-native/docs/slider صفحة Slider في توثيق React Native الرسميّ] | ||
[[ | [[تصنيف: ReactNative]] | ||
مراجعة 09:21، 19 فبراير 2021
مهملة: يمكنك استخدام
react-native-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 |