ดาวน์โหลด aphrodite jss - aphrodite jss Source Source Download Download

aphrodite jss

ซอร์สโค้ดอื่น ๆ

1.0.0

ดาวน์โหลด

API เหมือน Aphrodite ที่อยู่ด้านบนของ JSS

โครงการนี้เป็นการรวมความคิดที่ดีจาก Aphrodite และ JSS มันมี API ของ Aphrodite แต่แก้ไขข้อ จำกัด และคำเตือนมากมายโดยใช้ JSS เป็นเครื่องมือแสดงผลภายใต้ประทุน

ชิ้นส่วนที่ดีจาก Aphrodite

สวยเหมือนสไตล์อินไลน์ที่รู้จักจาก React ยกเว้นจะช่วยให้ใช้ CS ทั้งหมดได้
ไม่มีการสร้าง CSS จนกว่าจะมีการเรียกใช้ฟังก์ชัน css() เฉพาะกฎที่ผ่านจะถูกแปลงเป็นสตริง CSS และฉีด
ธีมเป็นไปได้โดยไม่ต้องปวดหัวหรือการรวมกรอบ

ประโยชน์เมื่อเทียบกับ Aphrodite

การแสดงผลที่มีประสิทธิภาพมากขึ้นเป็นนามธรรมผ่าน JSS ภายใต้ประทุน คุณใช้ปลั๊กอินทั้งหมดและ JSON DSL เพื่อตั้งชื่อไม่กี่:
- เด็กพี่น้องและตัวเลือกประเภทอื่น ๆ (jss-lested)
- รูปแบบระดับโลกโดยไม่ต้องมีการกำหนดเวลาอัตโนมัติ (JSS-Global)
แสดงผลทันทีเมื่อการเรียกใช้การเรียกใช้ css() มันช่วยให้คุณสามารถเข้าถึงสไตล์ที่คำนวณได้ทันทีหลังจากเรนเดอร์ไม่จำเป็นต้องใช้ setTimeout() นอกจากนี้ยังหลีกเลี่ยง recalcs และ repaints เพิ่มเติมซึ่งอาจทำให้เกิดการสั่นไหวและค่าใช้จ่ายทั่วไป
ไม่มีการแทรกอัตโนมัติ "! สำคัญ" คุณสามารถเขียนปลั๊กอินสำหรับสิ่งนี้ได้

ตัวอย่าง

 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 ของคุณเองด้วยการตั้งค่าที่กำหนดเอง

ส่งคืนอินเทอร์เฟซของ Aphrodite

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

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

การเรนเดอร์เซิร์ฟเวอร์

มี 2 ฟังก์ชั่นที่คุณต้องรู้ - 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>
  `
}