# @gulw/components

> Mobile UI for Hyperapp

Latest version **0.8.17** (published 2018-10-26) · ISC license · 0 weekly downloads

## Install

```sh
npm install @gulw/components
pnpm add @gulw/components
yarn add @gulw/components
bun add @gulw/components
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.8.17 |
| Published | 2018-10-26 |
| First published | 2018-07-02 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >= 4.0.0 |
| Dependencies | 2 |
| Unpacked size | 756.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 9 |
| Author | gulewei |
| Maintainers | gulewei |
| Keywords | hyperapp, ui, views, components, mobile, animation |

## Links

- npm: https://www.npmjs.com/package/@gulw/components
- Repository: https://github.com/venecy/f7c
- Homepage: https://github.com/venecy/f7c#readme
- Issues: https://github.com/venecy/f7c/issues
- npm.io page: https://npm.io/package/@gulw/components

## Dependencies (2)

- [classnames](https://npm.io/package/classnames.md) ^2.2.6
- [babel-runtime](https://npm.io/package/babel-runtime.md) ^6.26.0

## Alternatives

- [@progress/kendo-ooxml](https://npm.io/package/@progress/kendo-ooxml.md) — 152.1K weekly downloads
- [@progress/kendo-react-ripple](https://npm.io/package/@progress/kendo-react-ripple.md) — 8.0K weekly downloads
- [@progress/kendo-react-orgchart](https://npm.io/package/@progress/kendo-react-orgchart.md) — 4.3K weekly downloads
- [@praxisui/dynamic-fields](https://npm.io/package/@praxisui/dynamic-fields.md) — 2.4K weekly downloads
- [@mesalvo/react-ui](https://npm.io/package/@mesalvo/react-ui.md) — 1.7K weekly downloads

## Recent versions

- 0.8.17 (latest) — 2018-10-26
- 0.8.16 — 2018-10-18
- 0.8.15 — 2018-09-25
- 0.8.14 — 2018-09-25
- 0.8.13 — 2018-09-25
- 0.8.12 — 2018-09-21
- 0.8.11 — 2018-09-13
- 0.8.10 — 2018-09-12
- 0.8.9 — 2018-09-06
- 0.8.8 — 2018-09-04
- 0.8.7 — 2018-09-01
- 0.8.6 — 2018-08-30
- 0.8.5 — 2018-08-29
- 0.8.4 — 2018-08-29
- 0.8.3 — 2018-08-28
- … 33 more at https://npm.io/package/@gulw/components/versions

## README

# Framewrok7 Components With Hyperapp

Mobile UI for Hyperapp

[![NPM version][npm-image]][npm-url]
[![npm download][download-image]][download-url]

[npm-image]: https://img.shields.io/npm/v/@gulw/components.svg?style=flat-square
[npm-url]: https://www.npmjs.com/package/@gulw/components
[download-image]: https://img.shields.io/npm/dm//@gulw/components.svg?style=flat-square
[download-url]: https://www.npmjs.com/package/@gulw/components

## 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](https://github.com/venecy/f7c/blob/master/CHANGELOG.md) for more.


## Components

[Kitchen Sink](https://venecy.github.io/f7c/kitchen-sink/)

Docs are not ready yet, 
you can learn about `Components` and their `Apis` in *[typing files](https://github.com/venecy/f7c/tree/master/components)* 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.

- Use [babel-plugin-import](https://github.com/ant-design/babel-plugin-import)

   ```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](https://github.com/venecy/f7c/tree/master/kitchen-sink/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)

```

---
_Source: https://npm.io/package/@gulw/components · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._