الفرق بين المراجعتين ل"ReactNative/slider"
جميل-بيلوني (نقاش | مساهمات) ط |
|||
(5 مراجعات متوسطة بواسطة 3 مستخدمين غير معروضة) | |||
سطر 1: | سطر 1: | ||
− | + | <noinclude>{{DISPLAYTITLE:المكون Slider في ReactNative}}</noinclude> | |
+ | <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> | + | === <code>disabled</code> === |
− | + | ||
+ | لن يستطيع المستخدم تحريك شريط التّمرير عندما تكون قيمتها <code>true</code>، وقيمتها الافتراضيّة هي <code>false</code>. | ||
+ | |||
{| class="wikitable" | {| class="wikitable" | ||
− | !النوع | + | ! النوع |
− | !مطلوب | + | ! مطلوب |
|- | |- | ||
− | | | + | | (bool) |
− | |لا | + | | لا |
|} | |} | ||
− | === <code> | + | === <code>maximumValue</code> === |
− | تحدد | + | |
+ | تحدد أكبر قيمةٍ ابتدائيّةٍ لشريط التمرير، وقيمتها الافتراضية هي <code>1</code>. | ||
+ | |||
{| class="wikitable" | {| class="wikitable" | ||
− | !النوع | + | ! النوع |
− | !مطلوب | + | ! مطلوب |
|- | |- | ||
− | |عدد (number) | + | | عدد (number) |
− | |لا | + | | لا |
|} | |} | ||
− | === <code> | + | === <code>minimumTrackTintColor</code> === |
− | تحدد اللون المستخدم | + | |
+ | تحدد اللون المستخدم للمسار الموجود على يسار الزّرّ، وتتجاوز التدرج الأزرق الافتراضيّ على منصة iOS. | ||
+ | |||
{| class="wikitable" | {| class="wikitable" | ||
− | !النوع | + | ! النوع |
− | !مطلوب | + | ! مطلوب |
|- | |- | ||
− | |لون ([ | + | | لون (<code>[[ReactNative/colors|color]]</code>) |
− | |لا | + | | لا |
|} | |} | ||
− | === <code> | + | === <code>minimumValue</code> === |
− | تحدد | + | |
+ | تحدد أصغر قيمةٍ ابتدائيّةٍ لشريط التمرير، وقيمتها الافتراضية هي <code>0</code>. | ||
+ | |||
{| class="wikitable" | {| class="wikitable" | ||
− | !النوع | + | ! النوع |
− | !مطلوب | + | ! مطلوب |
|- | |- | ||
− | |عدد (number) | + | | عدد (number) |
− | |لا | + | | لا |
|} | |} | ||
− | === <code> | + | === <code>onSlidingComplete</code> === |
− | تٌستدعى | + | |
+ | تٌستدعى عندما يفلت المستخدم شريط التمرير حتى لو لم تتغير قيمته، وتمرَّر القيمة الحالية لشريط التمرير كمعاملٍ للمعالج. | ||
+ | |||
{| class="wikitable" | {| class="wikitable" | ||
− | !النوع | + | ! النوع |
− | !مطلوب | + | ! مطلوب |
|- | |- | ||
− | |دالة (function) | + | | دالة (function) |
− | |لا | + | | لا |
|} | |} | ||
− | === <code> | + | === <code>onValueChange</code> === |
− | تٌستدعى هذه الدالة باستمرار عند سحب المستخدم | + | |
+ | تٌستدعى هذه الدالة باستمرار عند سحب المستخدم للشريط. | ||
+ | |||
{| class="wikitable" | {| class="wikitable" | ||
− | !النوع | + | ! النوع |
− | !مطلوب | + | ! مطلوب |
|- | |- | ||
− | |دالة (function) | + | | دالة (function) |
− | |لا | + | | لا |
|} | |} | ||
− | === <code> | + | === <code>step</code> === |
− | + | ||
+ | قيمة خطوة شريط التمرير، وتتراوح بين 0 و(maximumValue - minimumValue)، وقيمتها الافتراضيّة هي <code>0</code>. | ||
+ | |||
{| class="wikitable" | {| class="wikitable" | ||
− | !النوع | + | ! النوع |
− | !مطلوب | + | ! مطلوب |
|- | |- | ||
− | |عدد (number) | + | | عدد (number) |
− | |لا | + | | لا |
|} | |} | ||
− | === <code> | + | === <code>maximumTrackTintColor</code> === |
− | تحدد اللون المستخدم | + | |
+ | تحدد اللون المستخدم للمسار الموجود على يمين الزّرّ، وتتجاوز التدرج الرماديّ الافتراضيّ على منصة iOS. | ||
+ | |||
{| class="wikitable" | {| class="wikitable" | ||
− | !النوع | + | ! النوع |
− | !مطلوب | + | ! مطلوب |
|- | |- | ||
− | |لون ( | + | | لون (<code>color</code>) |
− | |لا | + | | لا |
|} | |} | ||
− | ===<code> | + | === <code>testID</code> === |
+ | |||
تستخدم لوضع هذا العرض في اختبارات أتمتة واجهة المستخدم (UI automation tests). | تستخدم لوضع هذا العرض في اختبارات أتمتة واجهة المستخدم (UI automation tests). | ||
+ | |||
{| class="wikitable" | {| class="wikitable" | ||
− | !النوع | + | ! النوع |
− | !مطلوب | + | ! مطلوب |
|- | |- | ||
− | |سلسلة نصية (string) | + | | سلسلة نصية (string) |
− | |لا | + | | لا |
|} | |} | ||
− | === <code> | + | === <code>value</code> === |
− | تحدد القيمة الابتدائية | + | |
− | '''ملاحظة:''' هذا المكون غير | + | تحدد القيمة الابتدائية لشريط التمرير، وتتراوح بين minimumValue وmaximumValue -اللتان كانت قيمهما الافتراضيّة <code>0</code> و<code>1</code> على التوالي- وقيمتها الافتراضيّة هي <code>0</code>. |
+ | |||
+ | '''ملاحظة:''' هذا المكون غير متحكّم به لذا لا حاجة لتحديث القيمة أثناء السحب. | ||
+ | |||
{| class="wikitable" | {| class="wikitable" | ||
− | !النوع | + | ! النوع |
− | !مطلوب | + | ! مطلوب |
|- | |- | ||
− | |عدد (number) | + | | عدد (number) |
− | |لا | + | | لا |
|} | |} | ||
− | ===<code> | + | === <code>thumbTintColor</code> === |
− | اللون المستخدم لتلوين | + | |
+ | اللون المستخدم لتلوين قبضة شريط التمرير -التي سيتحرك بواسطتها- على منصّة iOS، أو لون مفتاح التبديل الأمامي على منصّة Android. | ||
+ | |||
{| class="wikitable" | {| class="wikitable" | ||
− | !النوع | + | ! النوع |
− | !مطلوب | + | ! مطلوب |
|- | |- | ||
− | |لون ( | + | | لون (<code>color</code>) |
− | |لا | + | | لا |
|} | |} | ||
− | ===<code> | + | === <code>maximumTrackImage</code> === |
− | تحدد | + | |
+ | تحدد أكبر صورة مسارٍ، وتدعم الصّور الثابتة فقط، حيث يتمدد البكسل في أقصى يسار الصورة ليملأ المسار. | ||
+ | |||
{| class="wikitable" | {| class="wikitable" | ||
− | !النوع | + | ! النوع |
− | !مطلوب | + | ! مطلوب |
− | !المنصة | + | ! المنصة |
|- | |- | ||
− | | | + | | مصدر الصورة (Image.propTypes.source) |
− | |لا | + | | لا |
− | |iOS | + | | iOS |
|} | |} | ||
− | ===<code> | + | === <code>minimumTrackImage</code> === |
− | تحدد | + | |
+ | تحدد أصغر صورة مسارٍ، وتدعم الصور الثابتة فقط، حيث يتمدد البكسل في أقصى يمين الصورة ليملأ المسار. | ||
+ | |||
{| class="wikitable" | {| class="wikitable" | ||
− | !النوع | + | ! النوع |
− | !مطلوب | + | ! مطلوب |
− | !المنصة | + | ! المنصة |
|- | |- | ||
− | | | + | | مصدر الصورة (Image.propTypes.source) |
− | |لا | + | | لا |
− | |iOS | + | | iOS |
|} | |} | ||
− | ===<code> | + | === <code>thumbImage</code> === |
− | + | ||
+ | تحدّد صورةً لقبضة شريط التّمرير، وتدعم الصّور الثّابتة فقط. | ||
+ | |||
{| class="wikitable" | {| class="wikitable" | ||
− | !النوع | + | ! النوع |
− | !مطلوب | + | ! مطلوب |
− | !المنصة | + | ! المنصة |
|- | |- | ||
− | | | + | | مصدر الصورة (Image.propTypes.source) |
− | |لا | + | | لا |
− | |iOS | + | | iOS |
|} | |} | ||
− | ===<code> | + | === <code>trackImage</code> === |
− | + | ||
+ | تحدّد صورةً وحيدةً للمسار، وتدعم الصور الثابتة فقط، حيث تتمدد البكسلات في منتصف الصورة لتملأ المسار. | ||
+ | |||
{| class="wikitable" | {| class="wikitable" | ||
− | !النوع | + | ! النوع |
− | !مطلوب | + | ! مطلوب |
− | !المنصة | + | ! المنصة |
|- | |- | ||
− | | | + | | مصدر الصورة (Image.propTypes.source) |
− | |لا | + | | لا |
− | |iOS | + | | iOS |
|} | |} | ||
− | == | + | == مصادر == |
− | * [https:// | + | * [https://reactnative.dev/docs/slider صفحة Slider في توثيق React Native الرسميّ] |
+ | [[تصنيف: 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 |