aphrodite jss 다운로드 -Aphrodite aphrodite jss 소스 코드 다운로드

aphrodite jss

기타 소스코드

1.0.0

다운로드

JSS 위에 아프로디테와 같은 API.

이 프로젝트는 Aphrodite와 JSS의 좋은 아이디어를 병합 한 것입니다. API의 API를 제공하지만 JSS를 후드 아래 렌더링 엔진으로 사용하여 많은 제한 사항과 경고를 수정합니다.

아프로디테에서 좋은 부분.

전체 CSS를 사용할 수있는 경우를 제외하고 React에서 알려진 인라인 스타일과 거의 비슷합니다.
css() 함수 호출까지 CSS는 생성되지 않습니다. 전달 된 규칙 만 CSS 문자열로 변환되어 주입됩니다.
두통이나 프레임 워크 통합없이 테마가 가능합니다.

아프로디테에 비해 혜택.

후드 아래 JSS를 통한 더 강력한 렌더링 추상화. 모든 플러그인과 JSON DSL을 사용하고 있습니다. 몇 가지 이름 :
- 어린이, 형제 자매 및 기타 종류의 셀렉터. (jss-nested)
- 자동 네임 스페이스가없는 글로벌 스타일 (JSS-Global).
css() 호출 호출에 즉시 렌더링됩니다. 렌더링 직후 컴퓨팅 스타일에 액세스 할 수 있으므로 setTimeout() 사용할 필요가 없습니다. 또한 추가 recalc 및 preaints를 피하기 때문에 플리커와 일반적인 성능 오버 헤드를 유발할 수 있습니다.
자동 "! 중요한"삽입. 그래도 플러그인을 쓸 수 있습니다.

예

 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>
  `
}