ios-ui

v1.3.3

Published

2 years ago

ios ui style web component, based on Web Component technologies

Downloads

0High
0Medium
0Low

keepgo-studio

javascript typescript ios

Table of contents generated with markdown-toc

ios-ui

This package has several custom elements which are follow Web Component rules.

Todos

Adding width, height, acc attributes (O)
Implement endless style (O)
Implement scroll event (O)
Implement giving opportunity nameing for the event to user (O)
Implement keydown event (O)
Implement bouncing animation (O)
Deploy npm (O)
Support typescript (O)

installetion

npm

  $ npm i ios-ui

cdn

  <script src="https://unpkg.com/ios-ui/dist/bundle.js"></script>

  <!-- or -->

  <script src="https://unpkg.com/ios-ui/dist/bundle.min.js"></script>


  <!-- <script src="https://unpkg.com/iou-ui/dist/picker.js"> -->
  <!-- if you only want to get one ui component -->
  <!-- This file hasn't set yet. 😥 But it will support ASAP -->

Ui types

1. Picker

user parameters

width (default: '100%')
- width of the component
- example : width='100%'
height: (default: '100%')
- height of the component.
- example : height='100%'
num-list (default: [10])
- insert number many as you want.
- example : num-list="24,60,60"
title-list (default: [])
- example : title-list="시간,분,초"
picker-type-list (default: "end")
- define each picker's style ('end' | 'endless')
- example : picker-type-list="end,end,end"
  if you define style only one, then it will unify all pickers
```
  <ios-ui-picker
    num-list="24,60,60"  
    picker-type-list="end"
  ></ios-ui-picker>
```
flexible (default: false)
- if true, picker size will change if window resized
- example : flexible="true"
allow-key-event (default: false)
- if true, user can choose number by pressing keyboard
- example : allow-key-event="false"
event-name (default: setnumber)
- the component fire its result numbers by Element.dispatchEvent() and its event name is 'setnumber' as default.
  if you want to change it, insert to this parameter
- example : event-name='result'
sound-src (default: "https://unpkg.com/ios-ui/dist/bundle.js")
- if true, picker will make sound
- example: sound-src="/public/mp3/example.mp3""

caution

All parameters are should be a string since the custom component get these params by Element.getAttributes() function.

guide

In browser

<!DOCTYPE html>

<html>
  <style>
      body {
          background-color: rgb(255, 255, 255);
          overflow: hidden;
          width: 100vw;
          height: 100vh;
      }
  </style>
// ...

  <body>
    <ios-ui-picker num-list="24,60,60" picker-type-list="end"></ios-ui-picker>
    <script src="./dist/bundle.js"></script>

    <script>
        UI.Picker.config('picker')
    </script>
  </body>
</html>

In webpack(or other bundle tools) environment

import { Picker } from 'ios-ui';

// put this line somewhere in your codes
Picker.config('picker');

// and use it like using custom web component

  <div>
    <ios-ui-picker></ios-ui-picker>
  </div>

if you turn off flag in option, you can define component with only your tag name

Picker.config("web-picker", { flag: false });

<web-picker></web-picker>

examples

<ios-ui-picker
  width="600px"
  height="400px"
  num-list="10"
  title-list="hour"
  picker-type-list="end"
  flexible="true"
  allow-key-event="false"
></ios-ui-picker>

event-name example

<ios-ui-picker
  event-name="getnumber"
></ios-ui-picker>

  /**
   * @param {CustomEvent<Array<number>>} e
   */
  element.addEventListener('getnumber', ({detail}) => console.log(detail));
  // if num-list length is 3 -> [0, 0, 0]

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

ios-ui

Todos

installetion

npm

cdn

Ui types

1. Picker

user parameters

caution

guide

examples