  <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

electron app, Ios-clock, example snapshot

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]

Keywords

javascript

typescript

ios

FAQs

What is ios-ui?

Is ios-ui well maintained?

Package last updated on 14 Mar 2023

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

ios-ui

ios-ui

Todos

installetion

npm

cdn