https://github.com/leegeunhyeok/vue-ios
🍎 iOS Style components library for Vue.js (Holding..)
https://github.com/leegeunhyeok/vue-ios
Last synced: 24 days ago
JSON representation
🍎 iOS Style components library for Vue.js (Holding..)
- Host: GitHub
- URL: https://github.com/leegeunhyeok/vue-ios
- Owner: leegeunhyeok
- Created: 2019-06-12T09:37:23.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2022-12-30T10:29:46.000Z (over 2 years ago)
- Last Synced: 2025-03-14T21:38:23.101Z (about 2 months ago)
- Language: Vue
- Homepage: https://www.npmjs.com/package/vue-ios
- Size: 1.22 MB
- Stars: 8
- Watchers: 1
- Forks: 2
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
vue-ios
🍎 iOS Style components library for Vue.js
## :sparkles: Usage
```bash
npm install vue-ios
```
- Preview
```html
L
R
{{ textValue }}
Cancel
Ok
import {
iApp,
iAlert,
iButton,
iSearchField
} from 'vue-ios'
import Main from './Main.vue'
import Sub1 from './Sub1.vue'
import Sub2 from './Sub2.vue'
export default {
name: 'app',
components: {
iApp,
iAlert,
iButton,
iSearchField,
Main,
Sub1,
Sub2
},
data () {
return {
textValue: 'Hello, world!',
showAlert: false
}
},
methods: {
onAlert ($event) {
this.showAlert = $event
}
}
}
```
```html
Switch {{ switchValue ? 'On' : 'Off' }}
Click me
{{ count }}
{{ textValue || 'No text' }}
Vue.js
Vue.js
Vue.js
Vue.js
Vue.js
Vue.js
Vue.js
Vue.js
ID: {{ idValue }}
Password: {{ passwordValue }}
import {
iButton,
iLabel,
iSwitch,
iTable,
iTableItem,
iTextField,
iView
} from 'ios-vue'
export default {
name: 'app',
props: {
alert: {
type: Boolean
}
},
data () {
return {
appTitle: 'iOS Vue',
largeTitle: 'iOS Vue',
textValue: 'Hello, world!',
tableTitle: 'iTable',
switchValue: false,
idValue: '',
passwordValue: '',
count: 0
}
},
components: {
iButton,
iLabel,
iSwitch,
iTable,
iTableItem,
iTextField,
iView
},
watch: {
alert (newVal) {
this.switchValue = newVal
},
switchValue (newVal) {
this.$emit('onPushView', 'sub-' + (!newVal ? '1' : '2'))
this.$emit('onAlert', newVal)
}
},
created () {
this.switchValue = this.alert
}
}
```
```html
Switch {{ switchValue ? 'On' : 'Off' }}
This is sub1 view!!
import {
iLabel,
iSwitch,
iTable,
iTableItem,
iView
} from 'vue-ios'
export default {
name: 'sub-1', // sub-1, sub-2
data () {
return {
switchValue: false
}
},
components: {
iLabel,
iSwitch,
iTable,
iTableItem,
iView
}
}
```
## :pencil: TODO
- :sparkles: ~~iOS Style basic components~~ [ :heavy_check_mark: ]
- :full_moon_with_face: ~~iOS Light theme~~ [ :heavy_check_mark: ]
- :new_moon_with_face: iOS Dark theme [ :x: ]
- :couple: ~~iOS Split view~~ [ :heavy_check_mark: ]
- :arrow_heading_up: View routing [ :x: ]
- :zap: Improve performance!
- :christmas_tree: Like a real iOS style!
- :baby: Make easy to use!
- :sparkling_heart: More components and features!
## :construction_worker: Project setup
```
npm i
```
### Compiles and hot-reloads for development
```
npm run dev
```
### Compiles and minifies for production
```
npm run build
```