مرجع الأنماط

تسرد هذه الصفحة كل مفتاح من مفاتيح الخاصية style، والدالة في Styled التي تضبطه في Rust. تنسّق مكوّنات Rust العناصر بدوال مُنمَّطة بأنواعها تحمل أسماء أدوات Tailwind المساعدة (.p_4() و.rounded(px(12.0)) و.bg(color) من nsh_core::prelude)، وتُحوَّل إلى المفاتيح نفسها؛ أما TSX فيمرّر كائنات style (والفئات classes). يذكر عمود Rust اسم الدالة؛ ويمكن تمرير قيمة أو signal أو closure إلى معظمها، وتجعل .style_when(…) / .style_with(…) أيًّا منها مشروطًا. تأتي المفاتيح وأنواعها من التصريحات المولَّدة في .nsh/types/nsh/types.d.ts، لذا يتحقق محررك منها أثناء الكتابة. يعني مفتاح النمط خاصية CSS التي تحمل اسمه، وهو مطابق للفئة التي تضبطها: paddingLeft هو padding-left وpl-4 في CSS، وboxShadow هو box-shadow وshadow-md؛ وتأخذ بعض المفاتيح أسماء أبسط يكتبها مطوّرو التطبيقات (paddingHorizontal بدلًا من padding-inline، وmarginStart بدلًا من margin-inline-start، وnumberOfLines بدلًا من line-clamp). الأرقام تعني نقاطًا (points)، وميزات CSS متاحة أيضًا: grid والتدرجات وظلال الصناديق والمرشحات وأنماط المزج والمخططات الخارجية والتحويلات والانتقالات ورسوم keyframe المتحركة.

لمعرفة كيفية تطبيق الأنماط ودمجها مع الفئات ووراثة أنماط النص، راجع التنسيق. ولمعرفة صيغة الفئات، راجع مرجع Tailwind.

#الواجهات الخمس

تمتد كل واجهة من التي قبلها:

use nsh_core::prelude::*;

fn card() -> View {
    view().p_4().rounded(px(12.0)).bg(white()).shadow([BoxShadow {
        offset_y: px(4.0),
        blur: px(12.0),
        color: rgba(0x00000014).into(),
        ..BoxShadow::default()
    }])
}

fn title(label: &str) -> Text {
    text(label.to_string()).text_size(px(17.0)).font_weight(FontWeight::SEMIBOLD).text_color(rgb(0x111111))
}

card().child(title("Hello"))

import type { ViewStyle, TextStyle } from "nsh";
import { Text, View } from "nsh";

const card: ViewStyle = {
  padding: 16,
  borderRadius: 12,
  backgroundColor: "#fff",
  boxShadow: "0 4px 12px rgb(0 0 0 / 0.08)",
};

const title: TextStyle = { fontSize: 17, fontWeight: "600", color: "#111" };

<View style={card}>
  <Text style={title}>Hello</Text>
</View>;

يقبل style أيضًا مصفوفة؛ تُدمج عناصرها من اليسار إلى اليمين وتُتجاهل العناصر الزائفة (falsy)، فلا حاجة إلى النشر (spreading) في الأنماط الشرطية. في Rust تضيف .style_when(condition, …) أنماطًا ما دام الشرط متحققًا:

card().style_when(selected, |s| s.border_color(rgb(0x2563eb)).border(px(2.0)))

<View style={[card, selected() && { borderColor: "#2563eb", borderWidth: 2 }]} />

#كيف تُقرأ مفاتيح الأنماط

تتبع مفاتيح الأنماط CSS، لذا فإن النمط والفئة اللذين يسميان الخاصية نفسها يؤديان الوظيفة نفسها:

• اتجاه التخطيط. الـ view التي لا تضبط display تُرتّب أبناءها في عمود. display: "flex" يكون صفًّا ما لم يُضبط flexDirection، كما في CSS والفئة flex. flexShrink هو 0 ما لم يُضبط.
• الجوانب الفيزيائية والمنطقية. left وright وmarginLeft وpaddingRight وborderLeftWidth وborderTopLeftRadius وtextAlign: "left" تحتفظ بجانبها في التخطيطات من اليمين إلى اليسار. أما مفاتيح البداية والنهاية (marginStart وpaddingEnd وstart وend وborderStartWidth و…) والعائلة borderTopStartRadius وtextAlign: "start" | "end" فتتبع الاتجاه: بداية السطر (inline start) هي اليسار في التخطيطات من اليسار إلى اليمين، واليمين في التخطيطات من اليمين إلى اليسار.
• ألوان الحدود. الحد أو المخطط الخارجي الذي ضُبط عرضه ولم يُضبط لونه يُرسم بلون النص (currentColor في CSS).
• التحويلات. translate وrotate وscale خصائص مستقلة، ويقبل transform سلسلة دوال CSS أو قائمة خطوات يمكن أن تكون مقاديرها قيمًا متحركة. وتُركَّب بهذا الترتيب: translate ثم rotate ثم scale ثم transform.

#أنواع القيم

السلاسل ذات صيغة CSS (boxShadow وtextShadow وbackgroundImage وfilter وgridTemplateColumns و…) تقبل أطوالًا بوحدة px وبأرقام مجردة (كلاهما نقاط)، أو pt (4/3 نقطة، كما في CSS)، أو rem (16 نقطة).

#LayoutStyle

يُحسب التخطيط في Rust (flexbox وCSS grid). الـ view التي لا تضبط display هي حاوية flex تتراص أبناؤها في عمود؛ ويجعلها display: "flex" صفًّا ما لم يُضبط flexDirection، كما في CSS. القيم الافتراضية للعناصر هي flexShrink: 0 وalignContent: "flex-start" (في grid: "normal" في CSS) وalignItems: "stretch"، ولا يوجد حد أدنى تلقائي للحجم. راجع التخطيط.

#العرض والموضع

#Flexbox

#Grid

اضبط display: "grid" لتخطيط الأبناء في شبكة CSS. قوائم المسارات تستخدم صيغة CSS.

view()
    .grid()
    .grid_template_columns("repeat(3, 1fr)")
    .gap_2()
    .child(view().col_span(2).h(px(60.0)).bg(rgb(0xc7d2fe)))
    .child(view().h(px(60.0)).bg(rgb(0xa5b4fc)))

<View style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 8 }}>
  <View style={{ gridColumn: "span 2", height: 60, backgroundColor: "#c7d2fe" }} />
  <View style={{ height: 60, backgroundColor: "#a5b4fc" }} />
</View>

#الحجم

#الهامش الخارجي

تقبل الهوامش "auto" (يمتص المساحة الحرة، كما في flexbox) والقيم السالبة. وتقبل المفاتيح الفيزيائية (كلها عدا marginStart / marginEnd) أيضًا EnvValue: marginBottom: "env(keyboard-inset-height)" (في Rust .mb_keyboard() و.mt_safe_area() و…).

#الحشو

تقبل المفاتيح الفيزيائية (كلها عدا paddingStart / paddingEnd) أيضًا EnvValue: paddingTop: "env(safe-area-inset-top)" وpaddingBottom: "calc(env(safe-area-inset-bottom) + 16px)" (في Rust .pt_safe_area() و.pb_safe_area_plus(px(16.0)) و.pb_keyboard() و…). أدنى قيمة للحشو 0.

#ViewStyle

كل ما ترسمه الـ view. وتنطبق أيضًا جميع مفاتيح LayoutStyle.

#الخلفية

view().h(px(120.0)).rounded(px(16.0)).bg_linear(deg(135.0)).gradient_from(rgb(0x6366f1)).gradient_to(rgb(0xec4899))

<View style={{ height: 120, borderRadius: 16, backgroundImage: "linear-gradient(135deg, #6366f1, #ec4899)" }} />

#الحدود

الجانب الذي ضُبط عرضه ولم يضبط أي شيء لونه يُرسم بلون النص، وهو currentColor في CSS: { borderWidth: 1, color: "#2563eb" } يرسم حداً أزرق. وتأخذ المحيطات (outlines) لون النص بالطريقة نفسها.

#الزوايا

#المحيط (Outline)

يُرسم المحيط خارج الحد ولا يشغل مساحة في التخطيط.

#الظلال

يُلقي العنصر ظلالاً باستخدام boxShadow من CSS: طبقات متعددة، وظلال ذات انتشار (spread) وظلال داخلية (inset). تحرّكها الانتقالات (transitionProperty: "boxShadow").

view().p_4().rounded(px(12.0)).bg(white()).shadow([
    BoxShadow { offset_y: px(1.0), blur: px(2.0), color: rgba(0x0000000f).into(), ..BoxShadow::default() },
    BoxShadow { offset_y: px(8.0), blur: px(24.0), spread: px(-4.0), color: rgba(0x0000001f).into(), ..BoxShadow::default() },
])

<View style={{ padding: 16, borderRadius: 12, backgroundColor: "#fff",
  boxShadow: "0 1px 2px rgb(0 0 0 / 0.06), 0 8px 24px -4px rgb(0 0 0 / 0.12)" }} />

#الشفافية والظهور والتجاوز

#التحويلات

التحويلات هي تحويلات CSS: الخصائص translate وrotate وscale والخاصية transform، وتُركَّب بهذا الترتيب. كل منها خاصية مستقلة، لذا فإن scale في نمط ما يستبدل scale-* في صنف (class) ويُبقي rotate-* الخاص به، وإن transform في نمط ما يستبدل دوال التحويل في صنف (rotate-x-*, skew-*).

TransformStep هي كائن بمفتاح واحد، وتُطبَّق بترتيب القائمة:

view().perspective(px(600.0)).child(view().rotate_y(deg(20.0)).scale(0.95))

<View style={{ transform: "perspective(600px) rotateY(20deg) scale(0.95)" }} />

تقود القيمة المتحركة الخصائص translate وrotate وscale مباشرة، وكذلك خطوات قائمة transform:

const x = createAnimatedValue(0);
const angle = createAnimatedValue(0);

<View style={{ translate: [x, 0], rotate: angle }} />
<View style={{ transform: [{ perspective: 800 }, { rotateY: angle }] }} />

#المرشحات والمزج

#الانتقالات

عندما تتغير خاصية لها انتقال (من نمط جديد أو صنف أو متغير مثل active:)، تحرّكها المنصة أصلياً. لا يُنفَّذ أي JS أثناء الحركة.

view()
    .on_press(move || open.update(|o| *o = !*o))
    .h(move || px(if open.get() { 160.0 } else { 56.0 }))
    .opacity(move || if open.get() { 1.0 } else { 0.8 })
    .transition()
    .duration(200.0)

<View
  onPress={() => open.set(!open())}
  style={{ height: open() ? 160 : 56, opacity: open() ? 1 : 0.8,
    transitionProperty: "opacity, transform", transitionDuration: 200 }}
/>

#الحركات بالإطارات المفتاحية

حركات إطارات مفتاحية مدمجة، تعمل أصلياً (animate-* في Tailwind).

للحركات التي تقودها القيم أو الإيماءات أو النوابض، استخدم واجهة الحركة في nsh بدلاً من ذلك.

#المؤشر والتحديد

#طلاء SVG

خصائص الطلاء في CSS لأشكال SVG، يقبلها أي عنصر وترثها العناصر داخله، كما في المتصفح. وهي تطلي ما ترسمه مكونات Rust على اللوحات (canvases).

#TextStyle

تُطبَّق أنماط النص على <Text> و<Input>. وهي أيضاً موروثة، كما في CSS: خصائص النص المضبوطة على عنصر تنتقل إلى النصوص والحقول داخله، وترث امتدادات <Text> المتداخلة من نصها الأب. وتنطبق أيضاً كل مفاتيح ViewStyle. راجع النص.

#الخط

#التباعد والمحاذاة

#الأسطر والفائض

#الزخرفة

#النص البديل والمؤشر والتحديد

placeholderColor وcaretColor تنتميان إلى InputStyle، وهو نمط <Input>؛ أما selectionColor فتنتمي إلى TextStyle، لأن النصوص القابلة للتحديد تأخذه أيضًا.

#ظل النص

text("Title").text_shadow([TextShadow {
    offset_y: px(1.0),
    radius: px(2.0),
    color: rgba(0x0000004d).into(),
    ..TextShadow::default()
}])

<Text style={{ textShadow: "0 1px 2px rgb(0 0 0 / 0.3)" }}>Title</Text>

#ImageStyle

جميع مفاتيح ViewStyle، بالإضافة إلى:

objectFit ينطبق على <Video> أيضًا؛ راجع image وvideo.

#خصائص تبدو كأنماط

ظل Material في Android هو خاصية خاصة بالمنصة، تُضبط بجانب النمط:

#ذو صلة

• Styling: style وclass والوراثة وأسبقية التطبيق.
• Tailwind reference: كل الأدوات المساعدة والمتغيرات المدعومة.
• Layout: flexbox وgrid عمليًا.
• view وtext وimage: العناصر التي تنطبق عليها هذه الأنماط.

width وheight وflexBasis تقبل أيضًا "min-content" و"max-content" و"fit-content"، ويحسبها Taffy.