hyperapp styled components

hyperapp 스타일의 경보

styled-components 와 동등한 매우 작은 하이퍼 app.

설치하다

 npm install --save hyperapp-styled-components

용법

먼저 태그에서 html 파일에 이것을 추가하십시오. <style type="text/css" id="styles"></style> .

 import { h , app } from "hyperapp" ;
import styled from 'hyperapp-styled-components' ;

const Header = styled . h2 `
  color: #333;
` ;

const MyButton = styled . button `
  padding: 10px;
  border-radius: ${ 0 } px;
  background: #F1F1F1;

  &:hover {
    background: ${ props => props . color } ;
  }
` ;

const Wrapper = styled . div `
  width: 500px;
  border: 1px solid #aaa;

  @media (min-width: 400px) {
    width: 100%;
    background: #F1F1F1;
  }
` ;

app ( {
  init : 0 ,
  view : state => (
    < Wrapper >
      < Header > Welcome to Styled Hyperapp { state ? 'Yay!' : '' } </ Header >

      < MyButton onclick = { state => 1 } > Go </ MyButton >
    </ Wrapper >
  ) ,
  node : document . getElementById ( "app" )
} ) ; 

특징

• 슈퍼 작은 2.1kb gzipped
• 완전히 Dom 기반
• @media 지원합니다
• @keyframes 지원합니다 ( keyframes 메소드를 통해)
• 의사 CSS를 지원합니다 (IE &:hover )
• 상태는 원시적 방법을 통해 공급 될 수 있습니다 (예 : props => ... )
• 의존성 없음
• 템플릿 리터럴 및 실제 CSS를 사용합니다
• 모든 DOM 요소를 지원합니다
• 자동 CSS 클래스 주입/관리
• hyperapp 과 함께 작동합니다

에 대한

나는 styled-components 좋아하고 프로젝트에 동등한 하이퍼 app가 필요했습니다. 이것이 결과입니다. 의사가 지원되는 의사 및 미디어 쿼리와 거의 동일하게 작동합니다. 동적 소품은 원시 함수를 통해 공급 될 수 있습니다. 각각의 출력은 소품을 공급할 수있는 함수이며, 이는 자식 요소와 문자열을 공급할 수있는 다른 기능을 반환합니다.

Max Stoiber와 CSS 및 JS를 혼합하기위한 훌륭한 구성 요소 API를 제시 한 styled-components 팀에게 특별한 감사를드립니다.

소품 사용

 import styled from 'hyperapp-styled-components' ;

const Header = styled . h2 `
  color: # ${ props => props . status === 'success' ? '000' : '333' } ;
` ;

const View = ( ) => ( ) => (
  < div >
    < Header status = "success" > </ Header >
  </ div >
) ; 

키 프레임으로

 import styled , { keyframes } from 'hyperapp-styled-components' ;

const boxmove = keyframes `
  0%   {top: 0px;}
  25%  {top: 200px;}
  75%  {top: 50px}
  100% {top: 100px;}
` ;

const Box = styled . div `
  background-color: lightcoral;
  width: 100px;
  height: 100px;
  display: block;
  position :relative;
  animation: ${ boxmove } 5s infinite;
` ; 

중요한 문서

• changelog
• 행동 강령
• 특허

TODO

• 테스트
• 적용 범위
• 선적 서류 비치

특허

이 프로젝트는 MIT 라이센스, 저작권 (C) 2016 Nick Dodson에 따라 라이센스가 부여됩니다. 자세한 내용은 License.md를 참조하십시오.

 The MIT License

Copyright (c) 2016 Nick Dodson. nickdodson.com <[email protected]>

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.