تنزيل aphrodite jss - تنزيل رمز المصدر aphrodite jss

aphrodite jss

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

1.0.0

تنزيل

API تشبه APHRODITE على قمة JSS.

هذا المشروع هو دمج الأفكار الجيدة من Aphrodite و JSS. يوفر واجهة برمجة تطبيقات من أفروديت ولكنه يحدد الكثير من القيود والتحذيرات باستخدام JSS كمحرك عرض أسفل الغطاء.

أجزاء جيدة من أفروديت.

يشبه إلى حد كبير الأنماط المضمنة المعروفة من React ، إلا أنها تسمح باستخدام CSS بأكملها.
لا يتم إنشاء CSS حتى استدعاء وظيفة css() . يتم تحويل القواعد التي تم تمريرها فقط إلى سلسلة CSS وحقنها.
Theming ممكن دون أي صداع أو تكامل إطار.

الفوائد مقارنة مع أفروديت.

أكثر قوة تجريد من خلال JSS تحت غطاء محرك السيارة. أنت تستخدم كل المكونات الإضافية و JSON DSL. على سبيل المثال لا الحصر:
- الأطفال والأشقاء وأي أنواع أخرى من المحددات. (JSS-shated)
- الأنماط العالمية ، دون تسليم الأسماء التلقائية (JSS-Global).
عرض فوري على css() استدعاء استدعاء. يمنحك إمكانية الوصول إلى أنماط محسوبة مباشرة بعد العرض ، لا حاجة لاستخدام setTimeout() . كما أنه يتجنب عمليات إعادة التثبيت والإعادة ، والتي يمكن أن تسبب وميضات الأداء العام.
لا Auto "! مهم" الإدراج. يمكنك كتابة البرنامج المساعد لهذا رغم ذلك.

مثال

 import { StyleSheet , css } from 'aphrodite-jss'

const sheet = StyleSheet . create ( {
  button : {
    border : '1px solid' ,
    borderRadius : 5 ,
    fontSize : 'inherit' ,
    lineHeight : '2.3em' ,
    padding : '0 1em' ,
    boxShadow : 'inset 0 1px 0 rgba(255, 255, 255, 0.1)' ,
    textShadow : '0 -1px 0 rgba(0, 0, 0, 0.25)' ,
    backgroundRepeat : 'repeat-x' ,
    color : '#fff' ,
    fontWeight : 400 ,
    '& span' : {
      marginRight : 5 ,
      color : '#fff'
    }
  } ,
  primary : {
    borderColor : '#1177cd #0f6ab6 #0d5c9e' ,
    backgroundImage : 'linear-gradient(to bottom, #2591ed 0%, #1177cd 100%)' ,
    backgroundColor : '#1385e5' ,
    '&:hover' : {
      backgroundImage : 'linear-gradient(to bottom, #3c9def 0%, #1385e5 100%)'
    }
  }
} )

document . body . innerHTML = `
  <button class=" ${ css ( sheet . button , sheet . primary ) } ">
    <span>&#10004;</span>Primary
  </button>
`

API

إنشاء ورقة النمط.

StyleSheet.create(styles)

إنشاء وظيفة لا تقدم أي شيء ، فهو يسجل أنماطك فقط.

إرجاع كائن ، حيث تتوافق أسماء المفاتيح مع الأنماط الأصلية obejct.

حقن القواعد.

css(rule1, [rule2], [rule3], ...)

حقن قاعدة محددة مسبقا إلى DOM. يتم ذلك في المزامنة ، لذلك تتوفر قاعدة CSS على الفور.

إرجاع اسم الفصل.

تنسيق الأنماط.

يتم تعريف تنسيق الأنماط في JSS. يستخدم Aprodisiac JSS-Preset-Default ، وبالتالي فإن جميع الإعدادات المسبقة الافتراضية موجودة بالفعل.

تخصيص JSS.

aphroditeJss(jss, [options])

يمكنك تمرير مثيل JSS الخاص بك مع الإعداد المخصص الخاص بك.

إرجاع واجهة أفروديت.

 import aphroditeJss from 'aphrodite-jss'
import { create } from 'jss'

const { css , StyleSheet } = aphroditeJss ( create ( ) )

تقديم الخوادم.

هناك وظيفتان تحتاج إلى معرفته - toString() و reset() . نظرًا لأن Aphrodite-JSS لا يمكن أن تعرف أنك تقوم بتقديم استجابة جديدة ، فأنت بحاجة إلى الحصول على CSS ( toString() ) عند معالجة الطلب الأول وإعادة reset() لتنظيف الأنماط التي أنتجتها صفحتك الحالية.

 import { toString , reset } from 'aphrodite-jss'

function render ( ) {
  const app = renderApp ( )
  const css = toString ( )
  reset ( )

  return `
    <head>
      <style>
        ${ css }
      </style>
    <head>
    <body>
      ${ app }
    </body>
  `
}