hyperapp styled components

componentes de hyperapp

Un hiperapp súper pequeño equivalente de styled-components .

Instalar

 npm install --save hyperapp-styled-components

Uso

Primero agregue esto a su archivo HTML en la etiqueta: <style type="text/css" id="styles"></style> 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

• Súper pequeño 2.1kb gzipped
• Completamente basado en DOM
• Admite @media
• Admite @keyframes (a través del método keyframes )
• Admite pseudo CSS (es decir, &:hover )
• El estado puede ser alimentado a través de métodos primitivos (es decir, props => ... )
• Sin dependencias
• Utiliza literales de plantilla y CSS reales
• Admite todos los elementos DOM
• Inyección/gestión de clase Auto CSS
• Funciona con hyperapp

Acerca de

Me encantan styled-components y necesitaba un equivalente de HyperApp para un proyecto. Este es el resultado. Funciona casi lo mismo con las consultas de pseudo y medios compatibles. Los accesorios dinámicos pueden alimentarse a través de funciones primitivas; La salida de cada uno es una función en la que se pueden alimentar los accesorios, que luego devuelve otra función en la que se pueden alimentar elementos y cadenas infantiles.

Un agradecimiento especial a Max Stoiber y al equipo styled-components por crear una gran API de componentes para mezclar CSS y JS.

Uso con accesorios

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

Con fotogramas clave

 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

• Colegio de cambios
• Código de conducta
• Licencia

Hacer

• Pruebas
• Cobertura
• Documentación

Licencia

Este proyecto tiene licencia bajo la licencia MIT, Copyright (C) 2016 Nick Dodson. Para obtener más información, consulte Licencia. 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.