All Projects → laden666666 → my-picker

laden666666 / my-picker

Licence: MIT license
高仿IOS的PickerView的JavaScript插件,3D形式的滚轮选择器,同时支持最多三级联动的选择效果,支持pc端和移动端两种平台浏览器。

Programming Languages

typescript
32286 projects
javascript
184084 projects - #8 most used programming language
Vue
7211 projects
CSS
56736 projects
HTML
75241 projects

Projects that are alternatives of or similar to my-picker

File Picker
The Kloudless File Picker is a file chooser and uploader for apps that integrates with 20+ cloud storage services with a few lines of code
Stars: ✭ 208 (+333.33%)
Mutual labels:  picker
Django Colorfield
color field for django models with a nice color-picker in the admin. 🎨
Stars: ✭ 238 (+395.83%)
Mutual labels:  picker
Random-Name-Picker
Simple, beautiful Android app to help you choose from a list of names at random. Downloaded 560,000+ times on Google Play with a 4.5+ rating after 3,500+ reviews.
Stars: ✭ 37 (-22.92%)
Mutual labels:  picker
Bottomsheet
BottomSheet dialog library for Android
Stars: ✭ 219 (+356.25%)
Mutual labels:  picker
Jh flutter demo
a flutter demo
Stars: ✭ 229 (+377.08%)
Mutual labels:  picker
react-native-monorepo
Monorepo with UI components.
Stars: ✭ 177 (+268.75%)
Mutual labels:  picker
Efcolorpicker
A lightweight color picker in Swift.
Stars: ✭ 205 (+327.08%)
Mutual labels:  picker
ng-data-picker
🏄🏼 A data picker based on Angular 4+ (like native datetime picker of iOS)
Stars: ✭ 24 (-50%)
Mutual labels:  picker
React Native Dropdown Picker
A single / multiple, categorizable & searchable item picker (dropdown) component for react native which supports both Android & iOS.
Stars: ✭ 230 (+379.17%)
Mutual labels:  picker
react-native-smart-picker
React Native Smart Picker is easy wrapper for React Native Picker. Allows toggling the picker open and closed on iOS and native behaviour on Android.
Stars: ✭ 19 (-60.42%)
Mutual labels:  picker
Emoji Picker React
React Emoji Picker
Stars: ✭ 221 (+360.42%)
Mutual labels:  picker
Android File Chooser
a lightweight file/folder chooser or picker
Stars: ✭ 231 (+381.25%)
Mutual labels:  picker
react-taxonomypicker
A Taxonomy Picker control built with TypeScript for React. Built for use in Office 365 / SharePoint
Stars: ✭ 23 (-52.08%)
Mutual labels:  picker
Facebookimagepicker
FacebookImagePicker is Facebook album photo picker written in Swift.
Stars: ✭ 220 (+358.33%)
Mutual labels:  picker
react-calendar-datetime-picker
A simple and fast date and time picker component for React
Stars: ✭ 58 (+20.83%)
Mutual labels:  picker
Actual Number Picker
Android: A horizontal number picker
Stars: ✭ 206 (+329.17%)
Mutual labels:  picker
Ion Multi Picker
Multi Item Picker - An Ionic Custom Multi Picker Component
Stars: ✭ 244 (+408.33%)
Mutual labels:  picker
Chocobo-Date-Range-Picker
🗓️ Component - The Date Range Picker easier to use in AngularJS.
Stars: ✭ 23 (-52.08%)
Mutual labels:  picker
ngx-mat-timepicker
A true material timepicker
Stars: ✭ 45 (-6.25%)
Mutual labels:  picker
TimeRangePicker
A customizable, easy-to-use, and functional circular time range picker library for Android. Use this library to mimic Apple's iOS or Samsung's bedtime picker.
Stars: ✭ 266 (+454.17%)
Mutual labels:  picker

my-picker

Version Downloads License

高仿IOS的PickerView的JavaScript插件,3D形式的滚轮选择器,同时支持最多三级联动的选择效果,支持pc端和移动端两种平台浏览器。支持chrome及移动端默认浏览器、ie(10-11)、火狐浏览器。

功能

  • 0、3D形式的滚轮选择器,带有透视效果
  • 1、选择器的前缀与后缀
  • 2、级联选择器
  • 3、提供选择音效,更接近原生控件
  • 4、支持手机和pc

使用文档

请参考https://laden666666.github.io/my-picker/

源码

github码云

兼容性

3D模式

AndroidFirefoxChromeiPhoneEdgeSafari
>=5
非3D模式
AndroidFirefoxChromeIEiPhoneEdgeSafari
>=4.4>=10
移动端demo效果图:

Alt

pc端demo效果图:

Alt

安装

浏览器环境

浏览器环境直接导入dist下的my-picker.jsmy-picker.css文件即可,也可以使用npm提供的cdn:

<link rel="stylesheet" href="//unpkg.com/my-picker/dist/my-picker.css">
<script src="//unpkg.com/iview/dist/my-picker.min.js"></script></script>

webpack环境

执行cli命令

npm i my-picker -S

并在js文件中引用

import myPicker from 'my-picker'
import 'my-picker/my-picker.css'
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].