hyperapp styled components

HyperApp风格的组件

超级小型应用相当于styled-components 。

安装

 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 gzpipped
• 完全基于DOM
• 支持@media
• 支持@keyframes （通过keyframes方法）
• 支持伪CSS（IE &:hover ）
• 状态可以通过原始方法（即props => ... ）送入状态。
• 没有依赖性
• 使用模板文字和真实CSS
• 支持所有DOM元素
• 自动CSS课程注入/管理
• 使用hyperapp

关于

我喜欢styled-components ，并且需要一个与项目相当的项目。这是结果。它在支持的伪和媒体查询中几乎相同。动态道具可以通过原始功能供电。每个输出是一个函数，可以在其中馈入道具，然后返回可以进食子元素和字符串的另一个功能。

特别感谢Max Stoiber和styled-components Team，他提出了一个出色的组件API，用于混合CSS和JS。

道具的用法

 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
• 行为守则
• 执照

托多

• 测试
• 覆盖范围
• 文档

执照

该项目已获得MIT许可，版权（C）2016 Nick Dodson的许可。有关更多信息，请参见许可。

 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.