@gulw/components

Mobile UI for Hyperapp

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
@gulw/components
700.8.174 years ago5 years agoMinified + gzip package size for @gulw/components in KB

Popular Searches

Readme

Framewrok7 Components With Hyperapp
Mobile UI for Hyperapp !NPM versionnpm-imagenpm-url !npm downloaddownload-imagedownload-url

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/components@0.7.26/dist/f7-components.js

Modularized

The following two ways used to load the only components you used, select one of the ways you like. 
```js
// .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.
```jsx
// import js and css modularly, parsed by babel-plugin-import
import { Picker } from '@gulw/components';
```
  • Manually import
```jsx
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 ```js 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) ```