Framework7 components built with Vue.js.
<html>
<head>
<link rel="stylesheet" href="https://npmcdn.com/framework7/dist/css/framework7.ios.min.css">
</head>
<body>
<f7-views>
<f7-view>
<f7-pages>
<f7-page>
<f7-page-content>Hello F7.</f7-page-content>
</f7-page>
</f7-pages>
</f7-view>
</f7-views>
<!-- including scripts before "</body>" -->
<script src="https://npmcdn.com/vue/dist/vue.min.js"></script>
<script src="https://npmcdn.com/vue-framework7/f7.js"></script>
<script>
new Vue({
el: 'body',
replace: false
})
</script>
</body>
</html>Install vue-framework7:
npm i vue-framework7
Then:
import 'framework7/dist/css/framework7.ios.min.css'
import Vue from 'vue'
import F7 from 'vue-framework7'
Vue.use(F7)- Layout types
- Navbar (Demo)
- Dynamic Navbar
- Sub Navbar (Demo)
- Toolbar (Demo)
- Tab Bar (Demo)
- Hide Bars On Scroll
- Search Bar (Demo)
- Status Bar overlay
- Side Panels (Demo)
- Content Block (Demo)
- Layout Grid (Demo)
- Modal (Demo)
- Popup (Demo)
- Popover
- Action Sheet (Demo)
- Login Screen (Demo)
- Picker Modal (Demo)
- Preloader Indicator (Demo)
- Progress Bar (Demo)
- List View (Demo)
- Contacts List
- Media List View
- Swipeout
- Sortable List
- Virtual List
- Accordion / Collapsible
- Cards
- Chips
- Buttons (Demo)
- Floating Action Button
- Form Elements (Demo)
- Checkboxes and Radios (Demo)
- Smart Select
- Disabled Elements (Demo)
-
Form Data -
Form Storage -
Ajax Form Submit - Tabs
- Swiper Slider
- Photo Browser
- Autocomplete
- Picker
- Calendar / Datepicker
- Pull to Refresh
- Infinite Scroll
- Messages
- Message Bar
- Notifications
- Lazy Load
MIT