Framewrok7 Components With Hyperapp

Mobile UI for Hyperapp

Updating

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.

Components

Kitchen Sink

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

Install

npm install --save @gulw/components

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

https://unpkg.com/@gulw/[email protected]/dist/f7-components.js

Modularized

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

Example

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 (
    <Page
      navbar={
        <Navbar center="My App" />
      }
    >
      <ContentBlock>
        <p>Example app</p>
      </ContentBlock>
    </Page>
  )
}

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