ios-ui v1.3.3
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-uicdn
<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="μκ°,λΆ,μ΄"
- example :
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]