تنزيل styled components - تنزيل رمز مصدر styled components

styled components

شفرة المصدر الأخرى

v6.1.13

تنزيل

البدائية البصرية لعمر المكون. استخدم أفضل أجزاء من ES6 و CSS لتطبيقاتك دون توتر؟

الترقية من V5؟ انظر دليل الهجرة.

باستخدام حرفيات القالب الموسومة (إضافة حديثة إلى JavaScript) وقوة CSS ، تتيح لك styled-components كتابة رمز CSS الفعلي لتصميم مكوناتك. كما أنه يزيل التعيين بين المكونات والأنماط-باستخدام المكونات كبنية تصميم منخفض المستوى لا يمكن أن يكون أسهل!

 const Button = styled . button `
  color: grey;
` ;

بدلاً من ذلك ، يمكنك استخدام كائنات النمط. يتيح ذلك تنفيذ سهولة من CSS من الأنماط المضمنة ، مع الاستمرار في دعم إمكانيات المكونات الأكثر تقدماً مثل محددات المكونات واستعلامات الوسائط.

 const Button = styled . button ( {
  color : 'grey' ,
} ) ;

أي ما يعادل:

 const Button = styled . button `
  color: grey;
` ;

تتوافق styled-components مع كل من React (بالنسبة للويب) وتفاعل الأصلي-مما يعني أنه الخيار الأمثل حتى بالنسبة للتطبيقات العالمية حقًا! انظر الوثائق حول React Native لمزيد من المعلومات.

بدعم من الوسط الأمامي. شكرا لك على جعل هذا ممكنا!

مستندات

راجع الوثائق في styled-components.com/docs للحصول على مزيد من المعلومات حول استخدام styled-components !

ارتباطات سريعة لبعض الصفحات الأكثر زيارة:

ابدء
مرجع API
هم
عرض جانب الخادم
أوضحت حرفيات النموذج الموسومة

مثال

 import React from 'react' ;

import styled from 'styled-components' ;

// Create a <Title> react component that renders an <h1> which is
// centered, palevioletred and sized at 1.5em
const Title = styled . h1 `
  font-size: 1.5em;
  text-align: center;
  color: palevioletred;
` ;

// Create a <Wrapper> react component that renders a <section> with
// some padding and a papayawhip background
const Wrapper = styled . section `
  padding: 4em;
  background: papayawhip;
` ;

function MyUI ( ) {
  return (
    // Use them like any other React component – except they're styled!
    < Wrapper >
      < Title > Hello World, this is my first styled component! < / Title >
    < / Wrapper >
  ) ;
}

هذا ما ستراه في متصفحك:

تبحث عن V5؟

الفرع main هو الإصدار الأكثر تداولًا من المكونات المصممة ، حاليًا V6. للتغييرات التي تستهدف V5 ، يرجى توجيه PRS الخاص بك في فرع legacy-v5 .

بنيت مع `styled-components`

يذهب الكثير من العمل الشاق إلى مكتبات المجتمع والمشاريع والأدلة. يسهل الكثير منهم البدء أو مساعدتك في مشروعك التالي! هناك أيضًا مجموعة كبيرة من التطبيقات والمواقع المثيرة للاهتمام التي أنشأها الأشخاص باستخدام المكونات المصممة.

تأكد من التوجه إلى المكونات الرائعة لرؤيتهم جميعًا! ويرجى المساهمة وإضافة عملك الخاص إلى القائمة حتى يتمكن الآخرون من العثور عليه.

المساهمة

إذا كنت ترغب في المساهمة في styled-components فيرجى الاطلاع على إرشاداتنا المساهمة والمجتمع ، فسيساعدك على إعدادها محليًا وشرح العملية بأكملها.

يرجى أيضًا ملاحظة أن جميع المستودعات بموجب مؤسسة styled-components تتبع مدونة قواعد سلوكنا ، وتأكد من مراجعتها ومتابعتها.

شارة

دع الجميع يعرفون أنك تستخدم المكونات المصممة →

 [ ![ style: styled-components ] ( https://img.shields.io/badge/style-%F0%9F%92%85%20styled--components-orange.svg?colorB=daa357&colorA=db748e )] ( https://github.com/styled-components/styled-components )

المساهمين

هذا المشروع موجود بفضل جميع الأشخاص الذين يساهمون. [يساهم].

مؤيدون

شكرا لجميع مؤيدينا! [كن مؤيدًا]

الرعاة

دعم هذا المشروع من خلال أن يصبح راعياً. سيظهر شعارك هنا مع رابط لموقع الويب الخاص بك. [كن راعياً]

رخصة

انظر الترخيص لمزيد من المعلومات.

شكر وتقدير

يعتمد هذا المشروع على سلسلة طويلة من العمل السابق من قبل الأشخاص الأذكياء في جميع أنحاء العالم. نود أن نشكر تشارلي سومرفيل ، نيك جراف ، سونيل باي ، مايكل تشان ، أندريه بوب ، جيد واتسون وأندريه سيتنيك الذين ساهموا في الأفكار أو الكود أو الإلهام.

شكر خاص لـ @Okonet للشعار الرائع.

يوسع

معلومات إضافية