الفرق بين المراجعتين لصفحة: «ReactNative/view style props»

من موسوعة حسوب
→ التعديل السابقالتعديل اللاحق ←
مرئينص الويكي
لا ملخص تعديل
ط مراجعة
سطر 1: سطر 1:
<noinclude>{{DISPLAYTITLE:View Style Props في React Native}}</noinclude>
<noinclude>{{DISPLAYTITLE:خاصيات تنيسق العرض (View Style Props) في React Native}}</noinclude>
فيما يلي مثال عن View Style Props في React Native
فيما يلي مثال عن خاصيات تنسيق العرض (View Style Props) في React Native.
__toc__
__toc__


سطر 50: سطر 50:
</syntaxhighlight>
</syntaxhighlight>


== الخاصيّات (Props) ==
== الخاصيات (Props) ==


=== <code>borderRightColor</code> ===
=== <code>borderRightColor</code> ===
سطر 57: سطر 57:
!مطلوب
!مطلوب
|-
|-
|([https://reactnative.dev/docs/colors لون])
|([[ReactNative/colors|لون]])
|لا
|لا
|}
|}
سطر 66: سطر 66:
!مطلوب
!مطلوب
|-
|-
|قيمة اسمية
|<code>‎‏‪enum('visible','hidden')</code>
‎‏‪enum('visible','hidden')
|لا
|لا
|}
|}
سطر 76: سطر 75:
!مطلوب
!مطلوب
|-
|-
|([https://reactnative.dev/docs/colors لون])
|([[ReactNative/colors|لون]])
|لا
|لا
|}
|}
سطر 85: سطر 84:
!مطلوب
!مطلوب
|-
|-
|رقم
|عدد (number)
(number)
|لا
|لا
|}
|}
سطر 95: سطر 93:
!مطلوب
!مطلوب
|-
|-
|رقم
|عدد (number)
(number)
|لا
|لا
|}
|}
سطر 105: سطر 102:
!مطلوب
!مطلوب
|-
|-
|رقم
|عدد (number)
(number)
|لا
|لا
|}
|}
سطر 115: سطر 111:
!مطلوب
!مطلوب
|-
|-
|رقم
|عدد (number)
(number)
|لا
|لا
|}
|}
سطر 125: سطر 120:
!مطلوب
!مطلوب
|-
|-
|رقم
|عدد (number)
(number)
|لا
|لا
|}
|}
سطر 135: سطر 129:
!مطلوب
!مطلوب
|-
|-
|([https://reactnative.dev/docs/colors لون])
|([[ReactNative/colors|لون]])
|لا
|لا
|}
|}
سطر 144: سطر 138:
!مطلوب
!مطلوب
|-
|-
|([https://reactnative.dev/docs/colors لون])
|([[ReactNative/colors|لون]])
|لا
|لا
|}
|}
سطر 153: سطر 147:
!مطلوب
!مطلوب
|-
|-
|([https://reactnative.dev/docs/colors لون])
|([[ReactNative/colors|لون]])
|لا
|لا
|}
|}
سطر 162: سطر 156:
!مطلوب
!مطلوب
|-
|-
|رقم
|عدد (number)
(number)
|لا
|لا
|}
|}


=== <code>borderRadious</code> ===
=== <code>borderRadious</code> ===
إذا لم تكن الحافة المدورة ظاهرةً فجرِّب تطبيق <code>'overflow: 'hidden</code>.
إذا لم تكن الحافة المدورة (rounded border) ظاهرةً فجرِّب تطبيق <code>'overflow: 'hidden</code>.
{| class="wikitable"
{| class="wikitable"
!النوع
!النوع
!مطلوب
!مطلوب
|-
|-
|رقم
|عدد (number)
(number)
|لا
|لا
|}
|}
سطر 183: سطر 175:
!مطلوب
!مطلوب
|-
|-
|([https://reactnative.dev/docs/colors لون])
|([[ReactNative/colors|لون]])
|لا
|لا
|}
|}
سطر 192: سطر 184:
!مطلوب
!مطلوب
|-
|-
|رقم
|عدد (number)
(number)
|لا
|لا
|}
|}
سطر 202: سطر 193:
!مطلوب
!مطلوب
|-
|-
|([https://reactnative.dev/docs/colors لون])
|([[ReactNative/colors|لون]])
|لا
|لا
|}
|}
سطر 211: سطر 202:
!مطلوب
!مطلوب
|-
|-
|قيمة اسمية
|<code>‪enum('solid','dotted','dashed')</code>
‪enum('solid','dotted','dashed')
|لا
|لا
|}
|}
سطر 221: سطر 211:
!مطلوب
!مطلوب
|-
|-
|([https://reactnative.dev/docs/colors لون])
|([[ReactNative/colors|لون]])
|لا
|لا
|}
|}
سطر 230: سطر 220:
!مطلوب
!مطلوب
|-
|-
|رقم
|عدد (number)
(number)
|لا
|لا
|}
|}
سطر 240: سطر 229:
!مطلوب
!مطلوب
|-
|-
|رقم
|عدد (number)
(number)
|لا
|لا
|}
|}
سطر 250: سطر 238:
!مطلوب
!مطلوب
|-
|-
|رقم
|عدد (number)
(number)
|لا
|لا
|}
|}
سطر 260: سطر 247:
!مطلوب
!مطلوب
|-
|-
|رقم
|عدد (number)
(number)
|لا
|لا
|}
|}
سطر 270: سطر 256:
!مطلوب
!مطلوب
|-
|-
|رقم
|عدد (number)
(number)
|لا
|لا
|}
|}
سطر 280: سطر 265:
!مطلوب
!مطلوب
|-
|-
|رقم
|عدد (number)
(number)
|لا
|لا
|}
|}


=== <code>elevation</code> ===
=== <code>elevation</code> ===
مدعومة على منصة Android فقط، وتُستخدم لإعداد ارتفاع العَرض عن طريق الواجهة البرمجية  [[material/shadows-clipping#Elevation|elevation API]]. وتقوم هذه بإضافة ظل ساقط للعنصر، وتؤثّر على z-order العرض المتداخل. وتعمل هذه الخاصيّة فقط على منصة ‬‎‏‪‫‫Android 5.0+، وليس لها تأثيرٌ في الإصدارات السابقة.
مدعومة على منصة Android فقط، وتُستخدم لإعداد ارتفاع العَرض عن طريق الواجهة البرمجية  [https://developer.android.com/training/material/shadows-clipping.html#Elevation elevation API]. وتقوم هذه بإضافة ظل ساقط للعنصر، وتؤثّر على ترتيب المحور z أي z-order للعروض المتراكبة. وتعمل هذه الخاصيّة فقط على الإصدار 5.0 وما بعده من منصة ‬‎‏‪‫‫Android، وليس لها تأثيرٌ في الإصدارات السابقة.
{| class="wikitable"
{| class="wikitable"
!النوع
!النوع
سطر 292: سطر 276:
!المنصة
!المنصة
|-
|-
|رقم
|عدد (number)
(number)
|لا
|لا
|Android
|Android

مراجعة 09:23، 12 يناير 2021

فيما يلي مثال عن خاصيات تنسيق العرض (View Style Props) في React Native.

مثال

import React from "react";
import { View, StyleSheet } from "react-native";
​
const ViewStyleProps = () => {
    return (
      <View style={styles.container}>
        <View style={styles.top} />
        <View style={styles.middle} />
        <View style={styles.bottom} />
      </View>
    );
}
​
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "space-between",
    backgroundColor: "#fff",
    padding: 20,
    margin: 10,
  },
  top: {
    flex: 0.3,
    backgroundColor: "grey",
    borderWidth: 5,
    borderTopLeftRadius: 20,
    borderTopRightRadius: 20,
  },
  middle: {
    flex: 0.3,
    backgroundColor: "beige",
    borderWidth: 5,
  },
  bottom: {
    flex: 0.3,
    backgroundColor: "pink",
    borderWidth: 5,
    borderBottomLeftRadius: 20,
    borderBottomRightRadius: 20,
  },
});
​
export default ViewStyleProps;

الخاصيات (Props)

borderRightColor

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

backfaceVisibility

النوع مطلوب
‎‏‪enum('visible','hidden') لا

borderBottomColor

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

borderBottomEndRadius

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

borderBottomLeftRadius

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

borderBottomRightRadius

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

borderBottomStartRadius

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

borderBottomWidth

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

borderColor

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

borderEndColor

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

borderLeftColor

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

borderLeftWidth

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

borderRadious

إذا لم تكن الحافة المدورة (rounded border) ظاهرةً فجرِّب تطبيق 'overflow: 'hidden.

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

backgroundColor

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

borderRightWidth

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

borderStartColor

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

borderStyle

النوع مطلوب
‪enum('solid','dotted','dashed') لا

borderTopColor

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

borderTopEndRadius

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

borderTopLeftRadius

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

borderTopRightRadius

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

borderTopStartRadius

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

borderTopWidth

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

opacity

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

elevation

مدعومة على منصة Android فقط، وتُستخدم لإعداد ارتفاع العَرض عن طريق الواجهة البرمجية elevation API. وتقوم هذه بإضافة ظل ساقط للعنصر، وتؤثّر على ترتيب المحور z أي z-order للعروض المتراكبة. وتعمل هذه الخاصيّة فقط على الإصدار 5.0 وما بعده من منصة ‬‎‏‪‫‫Android، وليس لها تأثيرٌ في الإصدارات السابقة.

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

مصادر

مجلوبة من «https://wiki.hsoub.com/index.php?title=ReactNative/view_style_props&oldid=30107»