Table of contents generated with markdown-toc
https://keepgo-studio.github.io/ios-ui/
This package has several custom elements which are follow Web Component rules.
$ npm i ios-ui <script src="https://unpkg.com/ios-ui/dist/bundle.js"></script>
<!-- or -->
<script src="https://unpkg.com/ios-ui/dist/bundle.min.js"></script>
electron app, Ios-clock, example snapshot
-
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""
- All parameters are should be a string since the custom component get these params by Element.getAttributes() function.
- In browser
<!DOCTYPE html>
<html>
<script src="https://unpkg.com/ios-ui/dist/bundle.min.js"></script>
<style>
body {
background-color: rgb(0, 0, 0);
overflow: hidden;
width: 100vw;
height: 100vh;
}
</style>
// ...
<body>
<ios-ui-picker num-list="24,60,60" picker-type-list="end"></ios-ui-picker>
<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
UI.Picker.config("web-picker", { flag: false });<web-picker></web-picker><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]