hyperapp styled components

Componentes de estilo hiperapp

Um equivalente super minúsculo de hiperapp de styled-components .

Instalar

 npm install --save hyperapp-styled-components

Uso

Primeiro, adicione isso ao seu arquivo html na tag: <style type="text/css" id="styles"></style> do que ..

 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" )
} ) ; 

Características

• Super Tiny 2,1kb Gzipped
• Completamente baseado em DOM
• Suporta @media
• Suporta @keyframes (via método keyframes )
• Suporta pseudo CSS (ou &:hover )
• O estado pode ser alimentado através de métodos primitivos (ou seja, props => ... )
• Sem dependências
• Usa modelos literais e CSS reais
• Suporta todos os elementos DOM
• Injeção/gerenciamento de classe CSS automática
• Trabalha com hyperapp

Sobre

Adoro styled-components e precisava de um equivalente a HypeApp para um projeto. Este é o resultado. Funciona quase o mesmo com as consultas de pseudo e mídia suportadas. Adeços dinâmicos podem ser alimentados por meio de funções primitivas; A saída de cada um é uma função em que os adereços podem ser alimentados, que retorna outra função em que elementos e strings filhos podem ser alimentados.

Um agradecimento especial ao Max Stoiber e à equipe styled-components por criar uma ótima API de componente para misturar CSS e JS.

Uso com adereços

 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 >
) ; 

Com quadros -chave

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

Documentos importantes

• Changelog
• Código de Conduta
• Licença

Pendência

• Teste
• Cobertura
• Documentação

Licença

Este projeto está licenciado sob a licença do MIT, direitos autorais (c) 2016 Nick Dodson. Para mais informações, consulte 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.