الفرق بين المراجعتين لصفحة: «ReactNative/colors»
لا ملخص تعديل |
Basema-bakleh (نقاش | مساهمات) |
||
| سطر 1: | سطر 1: | ||
<noinclude>{{DISPLAYTITLE:الألوان في React Native}}</noinclude> | <noinclude>{{DISPLAYTITLE:الألوان في React Native}}</noinclude> | ||
تُنسَّق المكونات في React Native [[ReactNative/style|باستخدام JavaScript]]. تتوافق خاصيات الألوان عادة مع [[CSS/color|كيفية عمل CSS على الويب.]] | تُنسَّق المكونات في React Native [[ReactNative/style|باستخدام JavaScript]]. تتوافق خاصيات الألوان عادة مع [[CSS/color|كيفية عمل CSS على الويب.]] | ||
== واجهات برمجة التطبيقات الملونة (Color APIs) == | |||
في React Native عدة واجهات برمجة تطبيقات ملونة صممت للسماح لك بالاستفادة الكاملة من تصميم نظامك الأساسي وتفضيلات المستخدم. | |||
* [https://reactnative.dev/docs/platformcolor PlatformColor]: يتيح لك الرجوع إلى نظام ألوان النظام الأساسي. | |||
* [https://reactnative.dev/docs/dynamiccolorios DynamicColorIOS]: خاص بنظام iOS يسمح لك بتحديد الألوان التي يجب استخدامها في الوضع الفاتح أو الداكن. | |||
==أحمر-أخضر-أزرق (Red-green-blue)== | ==أحمر-أخضر-أزرق (Red-green-blue)== | ||
يدعم React Native كلا من <code>rgb()</code> و<code>rgba()</code> بشكل الرموز السداسية العشرية (hexadecimal) والداليّة (functional): | يدعم React Native كلا من <code>rgb()</code> و<code>rgba()</code> بشكل الرموز السداسية العشرية (hexadecimal) والداليّة (functional): | ||
| سطر 6: | سطر 13: | ||
* <code>'#ff00ff'</code> (#rrggbb) | * <code>'#ff00ff'</code> (#rrggbb) | ||
* <code>'rgb(255, 0, 255)'</code> | * <code>'rgb(255, 0, 255)'</code> | ||
* <code>'rgba(255, | * <code>'rgba(255, 0, 255, 1.0)'</code> | ||
* <code>'#f0ff'</code> (#rgba) | * <code>'#f0ff'</code> (#rgba) | ||
* <code>'#ff00ff00'</code> (#rrggbbaa) | * <code>'#ff00ff00'</code> (#rrggbbaa) | ||
==تدرج اللون وصفاؤه وإضاءته (Hue-saturation-lightness)== | ==تدرج اللون وصفاؤه وإضاءته (Hue-saturation-lightness HSL)== | ||
تحديد اللون عبر <code>hsl()</code> و<code>hsla()</code> مدعوم بالطريقة الداليّة (functional): | تحديد اللون عبر <code>hsl()</code> و<code>hsla()</code> مدعوم بالطريقة الداليّة (functional): | ||
* <code>'hsl(360, 100%, 100%)'</code> | * <code>'hsl(360, 100%, 100%)'</code> | ||
* <code>'hsla(360, 100%, 100%, 1.0)'</code> | * <code>'hsla(360, 100%, 100%, 1.0)'</code> | ||
==الألوان | == أرقام الألوان (color ints) == | ||
تدعم React Native الألوان كقيم int (في نظام ألوان RGB): | |||
* <code>0xff00ff00</code> (0xrrggbbaa) | |||
لاحظ أن هذا قد يبدو مشابهًا لأرقام الألوان في Android لكن القيم في Android تخزن بنظام ألوان SRGB أي (0xaarrggbb) | |||
== الألوان المسماة (Named colors) == | |||
يمكنك كذلك استخدام أسماء الألوان كقِيَم في React Native. | |||
* < | ملاحظة: تدعم React Native أسماء الألوان بالأحرف الصغيرة فقط، ولا تدعم الأسماء ذات الأحرف الكبيرة. | ||
* < | |||
* < | ===<code>transparent</code>=== | ||
* < | هذا اختصارٌ لــ <code>rgba(0,0,0,0)</code> تمامًا كما في [https://www.w3.org/TR/css-color-3/#transparent CSS3] | ||
* < | ==الكلمات الأساسية للألوان== | ||
* < | . يتّبع إطار العمل React Native [http://www.w3.org/TR/css3-color/#svg-color مواصفة CSS3/SVG]: | ||
* < | |||
* < | * <ins class="color-box"></ins>aliceblue (`#f0f8ff`) | ||
* < | * <ins class="color-box"></ins>antiquewhite (`#faebd7`) | ||
* < | * <ins class="color-box"></ins>aqua (`#00ffff`) | ||
* < | * <ins class="color-box"></ins>aquamarine (`#7fffd4`) | ||
* < | * <ins class="color-box"></ins>azure (`#f0ffff`) | ||
* < | * <ins class="color-box"></ins>beige (`#f5f5dc`) | ||
* < | * <ins class="color-box"></ins>bisque (`#ffe4c4`) | ||
* < | * <ins class="color-box"></ins>black (`#000000`) | ||
* < | * <ins class="color-box"></ins>blanchedalmond (`#ffebcd`) | ||
* < | * <ins class="color-box"></ins>blue (`#0000ff`) | ||
* < | * <ins class="color-box"></ins>blueviolet (`#8a2be2`) | ||
* < | * <ins class="color-box"></ins>brown (`#a52a2a`) | ||
* < | * <ins class="color-box"></ins>burlywood (`#deb887`) | ||
* < | * <ins class="color-box"></ins>cadetblue (`#5f9ea0`) | ||
* < | * <ins class="color-box"></ins>chartreuse (`#7fff00`) | ||
* < | * <ins class="color-box"></ins>chocolate (`#d2691e`) | ||
* < | * <ins class="color-box"></ins>coral (`#ff7f50`) | ||
* < | * <ins class="color-box"></ins>cornflowerblue (`#6495ed`) | ||
* < | * <ins class="color-box"></ins>cornsilk (`#fff8dc`) | ||
* < | * <ins class="color-box"></ins>crimson (`#dc143c`) | ||
* < | * <ins class="color-box"></ins>cyan (`#00ffff`) | ||
* < | * <ins class="color-box"></ins>darkblue (`#00008b`) | ||
* < | * <ins class="color-box"></ins>darkcyan (`#008b8b`) | ||
* < | * <ins class="color-box"></ins>darkgoldenrod (`#b8860b`) | ||
* < | * <ins class="color-box"></ins>darkgray (`#a9a9a9`) | ||
* < | * <ins class="color-box"></ins>darkgreen (`#006400`) | ||
* < | * <ins class="color-box"></ins>darkgrey (`#a9a9a9`) | ||
* < | * <ins class="color-box"></ins>darkkhaki (`#bdb76b`) | ||
* < | * <ins class="color-box"></ins>darkmagenta (`#8b008b`) | ||
* < | * <ins class="color-box"></ins>darkolivegreen (`#556b2f`) | ||
* < | * <ins class="color-box"></ins>darkorange (`#ff8c00`) | ||
* < | * <ins class="color-box"></ins>darkorchid (`#9932cc`) | ||
* < | * <ins class="color-box"></ins>darkred (`#8b0000`) | ||
* < | * <ins class="color-box"></ins>darksalmon (`#e9967a`) | ||
* < | * <ins class="color-box"></ins>darkseagreen (`#8fbc8f`) | ||
* < | * <ins class="color-box"></ins>darkslateblue (`#483d8b`) | ||
* < | * <ins class="color-box"></ins>darkslategrey (`#2f4f4f`) | ||
* < | * <ins class="color-box"></ins>darkturquoise (`#00ced1`) | ||
* < | * <ins class="color-box"></ins>darkviolet (`#9400d3`) | ||
* < | * <ins class="color-box"></ins>deeppink (`#ff1493`) | ||
* < | * <ins class="color-box"></ins>deepskyblue (`#00bfff`) | ||
* < | * <ins class="color-box"></ins>dimgray (`#696969`) | ||
* < | * <ins class="color-box"></ins>dimgrey (`#696969`) | ||
* < | * <ins class="color-box"></ins>dodgerblue (`#1e90ff`) | ||
* < | * <ins class="color-box"></ins>firebrick (`#b22222`) | ||
* < | * <ins class="color-box"></ins>floralwhite (`#fffaf0`) | ||
* < | * <ins class="color-box"></ins>forestgreen (`#228b22`) | ||
* < | * <ins class="color-box"></ins>fuchsia (`#ff00ff`) | ||
* < | * <ins class="color-box"></ins>gainsboro (`#dcdcdc`) | ||
* < | * <ins class="color-box"></ins>ghostwhite (`#f8f8ff`) | ||
* < | * <ins class="color-box"></ins>gold (`#ffd700`) | ||
* < | * <ins class="color-box"></ins>goldenrod (`#daa520`) | ||
* < | * <ins class="color-box"></ins>gray (`#808080`) | ||
* < | * <ins class="color-box"></ins>green (`#008000`) | ||
* < | * <ins class="color-box"></ins>greenyellow (`#adff2f`) | ||
* < | * <ins class="color-box"></ins>grey (`#808080`) | ||
* < | * <ins class="color-box"></ins>honeydew (`#f0fff0`) | ||
* < | * <ins class="color-box"></ins>hotpink (`#ff69b4`) | ||
* < | * <ins class="color-box"></ins>indianred (`#cd5c5c`) | ||
* < | * <ins class="color-box"></ins>indigo (`#4b0082`) | ||
* < | * <ins class="color-box"></ins>ivory (`#fffff0`) | ||
* < | * <ins class="color-box"></ins>khaki (`#f0e68c`) | ||
* < | * <ins class="color-box"></ins>lavender (`#e6e6fa`) | ||
* < | * <ins class="color-box"></ins>lavenderblush (`#fff0f5`) | ||
* < | * <ins class="color-box"></ins>lawngreen (`#7cfc00`) | ||
* < | * <ins class="color-box"></ins>lemonchiffon (`#fffacd`) | ||
* < | * <ins class="color-box"></ins>lightblue (`#add8e6`) | ||
* < | * <ins class="color-box"></ins>lightcoral (`#f08080`) | ||
* < | * <ins class="color-box"></ins>lightcyan (`#e0ffff`) | ||
* < | * <ins class="color-box"></ins>lightgoldenrodyellow (`#fafad2`) | ||
* < | * <ins class="color-box"></ins>lightgray (`#d3d3d3`) | ||
* < | * <ins class="color-box"></ins>lightgreen (`#90ee90`) | ||
* < | * <ins class="color-box"></ins>lightgrey (`#d3d3d3`) | ||
* < | * <ins class="color-box"></ins>lightpink (`#ffb6c1`) | ||
* < | * <ins class="color-box"></ins>lightsalmon (`#ffa07a`) | ||
* < | * <ins class="color-box"></ins>lightseagreen (`#20b2aa`) | ||
* < | * <ins class="color-box"></ins>lightskyblue (`#87cefa`) | ||
* < | * <ins class="color-box"></ins>lightslategrey (`#778899`) | ||
* < | * <ins class="color-box"></ins>lightsteelblue (`#b0c4de`) | ||
* < | * <ins class="color-box"></ins>lightyellow (`#ffffe0`) | ||
* < | * <ins class="color-box"></ins>lime (`#00ff00`) | ||
* < | * <ins class="color-box"></ins>limegreen (`#32cd32`) | ||
* < | * <ins class="color-box"></ins>linen (`#faf0e6`) | ||
* < | * <ins class="color-box"></ins>magenta (`#ff00ff`) | ||
* < | * <ins class="color-box"></ins>maroon (`#800000`) | ||
* < | * <ins class="color-box"></ins>mediumaquamarine (`#66cdaa`) | ||
* < | * <ins class="color-box"></ins>mediumblue (`#0000cd`) | ||
* < | * <ins class="color-box"></ins>mediumorchid (`#ba55d3`) | ||
* < | * <ins class="color-box"></ins>mediumpurple (`#9370db`) | ||
* < | * <ins class="color-box"></ins>mediumseagreen (`#3cb371`) | ||
* < | * <ins class="color-box"></ins>mediumslateblue (`#7b68ee`) | ||
* < | * <ins class="color-box"></ins>mediumspringgreen (`#00fa9a`) | ||
* < | * <ins class="color-box"></ins>mediumturquoise (`#48d1cc`) | ||
* < | * <ins class="color-box"></ins>mediumvioletred (`#c71585`) | ||
* < | * <ins class="color-box"></ins>midnightblue (`#191970`) | ||
* < | * <ins class="color-box"></ins>mintcream (`#f5fffa`) | ||
* < | * <ins class="color-box"></ins>mistyrose (`#ffe4e1`) | ||
* < | * <ins class="color-box"></ins>moccasin (`#ffe4b5`) | ||
* < | * <ins class="color-box"></ins>navajowhite (`#ffdead`) | ||
* < | * <ins class="color-box"></ins>navy (`#000080`) | ||
* < | * <ins class="color-box"></ins>oldlace (`#fdf5e6`) | ||
* < | * <ins class="color-box"></ins>olive (`#808000`) | ||
* < | * <ins class="color-box"></ins>olivedrab (`#6b8e23`) | ||
* < | * <ins class="color-box"></ins>orange (`#ffa500`) | ||
* < | * <ins class="color-box"></ins>orangered (`#ff4500`) | ||
* < | * <ins class="color-box"></ins>orchid (`#da70d6`) | ||
* < | * <ins class="color-box"></ins>palegoldenrod (`#eee8aa`) | ||
* < | * <ins class="color-box"></ins>palegreen (`#98fb98`) | ||
* < | * <ins class="color-box"></ins>paleturquoise (`#afeeee`) | ||
* < | * <ins class="color-box"></ins>palevioletred (`#db7093`) | ||
* < | * <ins class="color-box"></ins>papayawhip (`#ffefd5`) | ||
* < | * <ins class="color-box"></ins>peachpuff (`#ffdab9`) | ||
* < | * <ins class="color-box"></ins>peru (`#cd853f`) | ||
* < | * <ins class="color-box"></ins>pink (`#ffc0cb`) | ||
* < | * <ins class="color-box"></ins>plum (`#dda0dd`) | ||
* < | * <ins class="color-box"></ins>powderblue (`#b0e0e6`) | ||
* < | * <ins class="color-box"></ins>purple (`#800080`) | ||
* < | * <ins class="color-box"></ins>rebeccapurple (`#663399`) | ||
* < | * <ins class="color-box"></ins>red (`#ff0000`) | ||
* < | * <ins class="color-box"></ins>rosybrown (`#bc8f8f`) | ||
* < | * <ins class="color-box"></ins>royalblue (`#4169e1`) | ||
* < | * <ins class="color-box"></ins>saddlebrown (`#8b4513`) | ||
* < | * <ins class="color-box"></ins>salmon (`#fa8072`) | ||
* < | * <ins class="color-box"></ins>sandybrown (`#f4a460`) | ||
* < | * <ins class="color-box"></ins>seagreen (`#2e8b57`) | ||
* < | * <ins class="color-box"></ins>seashell (`#fff5ee`) | ||
* < | * <ins class="color-box"></ins>sienna (`#a0522d`) | ||
* < | * <ins class="color-box"></ins>silver (`#c0c0c0`) | ||
* <ins class="color-box"></ins>skyblue (`#87ceeb`) | |||
* <ins class="color-box"></ins>slateblue (`#6a5acd`) | |||
* <ins class="color-box"></ins>slategray (`#708090`) | |||
* <ins class="color-box"></ins>snow (`#fffafa`) | |||
* <ins class="color-box"></ins>springgreen (`#00ff7f`) | |||
* <ins class="color-box"></ins>steelblue (`#4682b4`) | |||
* <ins class="color-box"></ins>tan (`#d2b48c`) | |||
* <ins class="color-box"></ins>teal (`#008080`) | |||
* <ins class="color-box"></ins>thistle (`#d8bfd8`) | |||
* <ins class="color-box"></ins>tomato (`#ff6347`) | |||
* <ins class="color-box"></ins>turquoise (`#40e0d0`) | |||
* <ins class="color-box"></ins>violet (`#ee82ee`) | |||
* <ins class="color-box"></ins>wheat (`#f5deb3`) | |||
* <ins class="color-box"></ins>white (`#ffffff`) | |||
* <ins class="color-box"></ins>whitesmoke (`#f5f5f5`) | |||
* <ins class="color-box"></ins>yellow (`#ffff00`) | |||
* <ins class="color-box"></ins>yellowgreen (`#9acd32`) | |||
== مصادر == | == مصادر == | ||
* [https://facebook.github.io/react-native/docs/colors صفحة Color Reference في توثيق React Native الرسمي.] | * [https://facebook.github.io/react-native/docs/colors صفحة Color Reference في توثيق React Native الرسمي.] | ||
[[تصنيف:ReactNative]] | [[تصنيف:ReactNative]] | ||
مراجعة 21:29، 25 مارس 2021
تُنسَّق المكونات في React Native باستخدام JavaScript. تتوافق خاصيات الألوان عادة مع كيفية عمل CSS على الويب.
واجهات برمجة التطبيقات الملونة (Color APIs)
في React Native عدة واجهات برمجة تطبيقات ملونة صممت للسماح لك بالاستفادة الكاملة من تصميم نظامك الأساسي وتفضيلات المستخدم.
- PlatformColor: يتيح لك الرجوع إلى نظام ألوان النظام الأساسي.
- DynamicColorIOS: خاص بنظام iOS يسمح لك بتحديد الألوان التي يجب استخدامها في الوضع الفاتح أو الداكن.
أحمر-أخضر-أزرق (Red-green-blue)
يدعم React Native كلا من rgb() وrgba() بشكل الرموز السداسية العشرية (hexadecimal) والداليّة (functional):
-
'#f0f'(#rgb) -
'#ff00ff'(#rrggbb) 'rgb(255, 0, 255)''rgba(255, 0, 255, 1.0)'-
'#f0ff'(#rgba) -
'#ff00ff00'(#rrggbbaa)
تدرج اللون وصفاؤه وإضاءته (Hue-saturation-lightness HSL)
تحديد اللون عبر hsl() وhsla() مدعوم بالطريقة الداليّة (functional):
-
'hsl(360, 100%, 100%)' -
'hsla(360, 100%, 100%, 1.0)'
أرقام الألوان (color ints)
تدعم React Native الألوان كقيم int (في نظام ألوان RGB):
0xff00ff00(0xrrggbbaa)
لاحظ أن هذا قد يبدو مشابهًا لأرقام الألوان في Android لكن القيم في Android تخزن بنظام ألوان SRGB أي (0xaarrggbb)
الألوان المسماة (Named colors)
يمكنك كذلك استخدام أسماء الألوان كقِيَم في React Native.
ملاحظة: تدعم React Native أسماء الألوان بالأحرف الصغيرة فقط، ولا تدعم الأسماء ذات الأحرف الكبيرة.
transparent
هذا اختصارٌ لــ rgba(0,0,0,0) تمامًا كما في CSS3
الكلمات الأساسية للألوان
. يتّبع إطار العمل React Native مواصفة CSS3/SVG:
- aliceblue (`#f0f8ff`)
- antiquewhite (`#faebd7`)
- aqua (`#00ffff`)
- aquamarine (`#7fffd4`)
- azure (`#f0ffff`)
- beige (`#f5f5dc`)
- bisque (`#ffe4c4`)
- black (`#000000`)
- blanchedalmond (`#ffebcd`)
- blue (`#0000ff`)
- blueviolet (`#8a2be2`)
- brown (`#a52a2a`)
- burlywood (`#deb887`)
- cadetblue (`#5f9ea0`)
- chartreuse (`#7fff00`)
- chocolate (`#d2691e`)
- coral (`#ff7f50`)
- cornflowerblue (`#6495ed`)
- cornsilk (`#fff8dc`)
- crimson (`#dc143c`)
- cyan (`#00ffff`)
- darkblue (`#00008b`)
- darkcyan (`#008b8b`)
- darkgoldenrod (`#b8860b`)
- darkgray (`#a9a9a9`)
- darkgreen (`#006400`)
- darkgrey (`#a9a9a9`)
- darkkhaki (`#bdb76b`)
- darkmagenta (`#8b008b`)
- darkolivegreen (`#556b2f`)
- darkorange (`#ff8c00`)
- darkorchid (`#9932cc`)
- darkred (`#8b0000`)
- darksalmon (`#e9967a`)
- darkseagreen (`#8fbc8f`)
- darkslateblue (`#483d8b`)
- darkslategrey (`#2f4f4f`)
- darkturquoise (`#00ced1`)
- darkviolet (`#9400d3`)
- deeppink (`#ff1493`)
- deepskyblue (`#00bfff`)
- dimgray (`#696969`)
- dimgrey (`#696969`)
- dodgerblue (`#1e90ff`)
- firebrick (`#b22222`)
- floralwhite (`#fffaf0`)
- forestgreen (`#228b22`)
- fuchsia (`#ff00ff`)
- gainsboro (`#dcdcdc`)
- ghostwhite (`#f8f8ff`)
- gold (`#ffd700`)
- goldenrod (`#daa520`)
- gray (`#808080`)
- green (`#008000`)
- greenyellow (`#adff2f`)
- grey (`#808080`)
- honeydew (`#f0fff0`)
- hotpink (`#ff69b4`)
- indianred (`#cd5c5c`)
- indigo (`#4b0082`)
- ivory (`#fffff0`)
- khaki (`#f0e68c`)
- lavender (`#e6e6fa`)
- lavenderblush (`#fff0f5`)
- lawngreen (`#7cfc00`)
- lemonchiffon (`#fffacd`)
- lightblue (`#add8e6`)
- lightcoral (`#f08080`)
- lightcyan (`#e0ffff`)
- lightgoldenrodyellow (`#fafad2`)
- lightgray (`#d3d3d3`)
- lightgreen (`#90ee90`)
- lightgrey (`#d3d3d3`)
- lightpink (`#ffb6c1`)
- lightsalmon (`#ffa07a`)
- lightseagreen (`#20b2aa`)
- lightskyblue (`#87cefa`)
- lightslategrey (`#778899`)
- lightsteelblue (`#b0c4de`)
- lightyellow (`#ffffe0`)
- lime (`#00ff00`)
- limegreen (`#32cd32`)
- linen (`#faf0e6`)
- magenta (`#ff00ff`)
- maroon (`#800000`)
- mediumaquamarine (`#66cdaa`)
- mediumblue (`#0000cd`)
- mediumorchid (`#ba55d3`)
- mediumpurple (`#9370db`)
- mediumseagreen (`#3cb371`)
- mediumslateblue (`#7b68ee`)
- mediumspringgreen (`#00fa9a`)
- mediumturquoise (`#48d1cc`)
- mediumvioletred (`#c71585`)
- midnightblue (`#191970`)
- mintcream (`#f5fffa`)
- mistyrose (`#ffe4e1`)
- moccasin (`#ffe4b5`)
- navajowhite (`#ffdead`)
- navy (`#000080`)
- oldlace (`#fdf5e6`)
- olive (`#808000`)
- olivedrab (`#6b8e23`)
- orange (`#ffa500`)
- orangered (`#ff4500`)
- orchid (`#da70d6`)
- palegoldenrod (`#eee8aa`)
- palegreen (`#98fb98`)
- paleturquoise (`#afeeee`)
- palevioletred (`#db7093`)
- papayawhip (`#ffefd5`)
- peachpuff (`#ffdab9`)
- peru (`#cd853f`)
- pink (`#ffc0cb`)
- plum (`#dda0dd`)
- powderblue (`#b0e0e6`)
- purple (`#800080`)
- rebeccapurple (`#663399`)
- red (`#ff0000`)
- rosybrown (`#bc8f8f`)
- royalblue (`#4169e1`)
- saddlebrown (`#8b4513`)
- salmon (`#fa8072`)
- sandybrown (`#f4a460`)
- seagreen (`#2e8b57`)
- seashell (`#fff5ee`)
- sienna (`#a0522d`)
- silver (`#c0c0c0`)
- skyblue (`#87ceeb`)
- slateblue (`#6a5acd`)
- slategray (`#708090`)
- snow (`#fffafa`)
- springgreen (`#00ff7f`)
- steelblue (`#4682b4`)
- tan (`#d2b48c`)
- teal (`#008080`)
- thistle (`#d8bfd8`)
- tomato (`#ff6347`)
- turquoise (`#40e0d0`)
- violet (`#ee82ee`)
- wheat (`#f5deb3`)
- white (`#ffffff`)
- whitesmoke (`#f5f5f5`)
- yellow (`#ffff00`)
- yellowgreen (`#9acd32`)