Mobile UI for Hyperapp


600.8.173 years ago3 years agoMinified + gzip package size for @gulw/components in KB


Framewrok7 Components With Hyperapp

Mobile UI for Hyperapp

NPM version npm download


v0.8.17 - October 26, 2018

  • Dialog: support key perporty in ButtonOptions
  • Overlay: prevent scrolling on overlays

v0.8.16 - October 18, 2018

  • Dialog: support not button layout

v0.8.12 - September 21, 2018

  • Minor fixes, remove a few lines of duplicated code
  • PullToRefresh:
    • call e.preventDefault in touchmove event when use translate, to prevent some unexpected browser behavior.
    • remove transition classname when not needed

check Change Log for more.


Kitchen Sink

Docs are not ready yet, you can learn about Components and their Apis in typing files for now.


npm install --save @gulw/components

You can also access bundled file in unpkg, global name is F7Components



The following two ways used to load the only components you used, select one of the ways you like.

  • Use babel-plugin-import

    // .babelrc or babel-loader option
      "plugins": [
        ["import", { "libraryName": "@gulw/components", "style": "css" }] // `style: true` for less

    This allows you to import components without having to manually import the corresponding stylesheet. The babel plugin will automatically import stylesheets.

    // import js and css modularly, parsed by babel-plugin-import
    import { Picker } from '@gulw/components';
  • Manually import

    import Picker from '@gulw/components/lib/picker';  // for js
    import '@gulw/components/lib/picker/style/css';    // for css
    // import '@gulw/components/lib/picker/style';     // that will import less


See more example in demos

import { h, app } from 'hyperapp'
import { Page, Navbar, ContentBlock } from '@gulw/components'
// import css
import '@gulw/components/dist/f7-components.css'

const Main = () => {
  return (
        <Navbar center="My App" />
        <p>Example app</p>

app({}, {}, Main, document.body)

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.