الفرق بين المراجعتين لصفحة: «ReactNative/slider»
لا ملخص تعديل |
جميل-بيلوني (نقاش | مساهمات) طلا ملخص تعديل |
||
| (3 مراجعات متوسطة بواسطة مستخدمين اثنين آخرين غير معروضة) | |||
| سطر 1: | سطر 1: | ||
{{DISPLAYTITLE:Slider في | <noinclude>{{DISPLAYTITLE:المكون Slider في ReactNative}}</noinclude> | ||
<blockquote>''' | <blockquote>'''مهمل:''' اسخدم [https://reactnative.dev/docs/slider هذه الحزم من المجتمع] بدلًا منه. | ||
</blockquote> | |||
يُستخدم مكوّن شريط التمرير (Slider) لاختيار قيمةٍ من مجال قيم. | |||
__toc__ | |||
== الخاصيات == | |||
موروثة من خاصيات المكوّن <code>[[ReactNative/view|View]]</code>. | |||
== | === <code>style</code> === | ||
تُستخدم لتنسيق وتخطيط المكون <code>Slider</code>. ويمكن الاطلاع على <code>StyleSheet.js</code> و<code>ViewStylePropTypes.js</code> لمزيدٍ من المعلومات. | |||
{| class="wikitable" | {| class="wikitable" | ||
!النوع | ! النوع | ||
!مطلوب | ! مطلوب | ||
|- | |- | ||
|تنسيق (View.style) | | تنسيق ([[ReactNative/view style props|View.style]]) | ||
|لا | | لا | ||
|} | |} | ||
=== <code>disabled</code> === | === <code>disabled</code> === | ||
لن يستطيع المستخدم تحريك شريط التّمرير عندما تكون قيمتها <code>true</code>، وقيمتها الافتراضيّة هي <code>false</code>. | |||
{| class="wikitable" | {| class="wikitable" | ||
!النوع | ! النوع | ||
!مطلوب | ! مطلوب | ||
|- | |- | ||
| | | (bool) | ||
|لا | | لا | ||
|} | |} | ||
=== <code>maximumValue</code> === | === <code>maximumValue</code> === | ||
تحدد | |||
تحدد أكبر قيمةٍ ابتدائيّةٍ لشريط التمرير، وقيمتها الافتراضية هي <code>1</code>. | |||
{| class="wikitable" | {| class="wikitable" | ||
!النوع | ! النوع | ||
!مطلوب | ! مطلوب | ||
|- | |- | ||
|عدد (number) | | عدد (number) | ||
|لا | | لا | ||
|} | |} | ||
=== <code>minimumTrackTintColor</code> === | === <code>minimumTrackTintColor</code> === | ||
تحدد اللون المستخدم | |||
تحدد اللون المستخدم للمسار الموجود على يسار الزّرّ، وتتجاوز التدرج الأزرق الافتراضيّ على منصة iOS. | |||
{| class="wikitable" | {| class="wikitable" | ||
!النوع | ! النوع | ||
!مطلوب | ! مطلوب | ||
|- | |- | ||
|لون ([[ReactNative/colors|color]]) | | لون (<code>[[ReactNative/colors|color]]</code>) | ||
|لا | | لا | ||
|} | |} | ||
=== <code>minimumValue</code> === | === <code>minimumValue</code> === | ||
تحدد | |||
تحدد أصغر قيمةٍ ابتدائيّةٍ لشريط التمرير، وقيمتها الافتراضية هي <code>0</code>. | |||
{| 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)، وقيمتها الافتراضيّة هي <code>0</code>. | |||
{| class="wikitable" | {| class="wikitable" | ||
!النوع | ! النوع | ||
!مطلوب | ! مطلوب | ||
|- | |- | ||
|عدد (number) | | عدد (number) | ||
|لا | | لا | ||
|} | |} | ||
=== <code>maximumTrackTintColor</code> === | === <code>maximumTrackTintColor</code> === | ||
تحدد اللون المستخدم | |||
تحدد اللون المستخدم للمسار الموجود على يمين الزّرّ، وتتجاوز التدرج الرماديّ الافتراضيّ على منصة iOS. | |||
{| class="wikitable" | {| class="wikitable" | ||
!النوع | ! النوع | ||
!مطلوب | ! مطلوب | ||
|- | |- | ||
|لون ( | | لون (<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 -اللتان كانت قيمهما الافتراضيّة <code>0</code> و<code>1</code> على التوالي- وقيمتها الافتراضيّة هي <code>0</code>. | ||
'''ملاحظة:''' هذا المكون غير متحكّم به لذا لا حاجة لتحديث القيمة أثناء السحب. | |||
{| class="wikitable" | {| class="wikitable" | ||
!النوع | ! النوع | ||
!مطلوب | ! مطلوب | ||
|- | |- | ||
|عدد (number) | | عدد (number) | ||
|لا | | لا | ||
|} | |} | ||
===<code>thumbTintColor</code>=== | === <code>thumbTintColor</code> === | ||
اللون المستخدم لتلوين | |||
اللون المستخدم لتلوين قبضة شريط التمرير -التي سيتحرك بواسطتها- على منصّة iOS، أو لون مفتاح التبديل الأمامي على منصّة Android. | |||
{| class="wikitable" | {| class="wikitable" | ||
!النوع | ! النوع | ||
!مطلوب | ! مطلوب | ||
|- | |- | ||
|لون ( | | لون (<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://reactnative.dev/docs/slider صفحة Slider في توثيق React Native | * [https://reactnative.dev/docs/slider صفحة Slider في توثيق React Native الرسميّ] | ||
[[تصنيف:ReactNative]] | [[تصنيف: ReactNative]] | ||
[[تصنيف:React Native Component]] | |||
المراجعة الحالية بتاريخ 14:45، 9 أكتوبر 2021
مهمل: اسخدم هذه الحزم من المجتمع بدلًا منه.
يُستخدم مكوّن شريط التمرير (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 |