Sorry
6 |Requested content not found.
7 |Framework7 - is a free and open source HTML mobile framework to develop hybrid mobile apps or web apps with iOS or Android (Material) native look and feel. It is also an indispensable prototyping apps tool to show working app prototype as soon as possible in case you need to. Framework7 is created by Vladimir Kharlampidi (iDangero.us).
7 |The main approach of the Framework7 is to give you an opportunity to create iOS and Android (Material) apps with HTML, CSS and JavaScript easily and clear. Framework7 is full of freedom. It doesn't limit your imagination or offer ways of any solutions somehow. Framework7 gives you freedom!
8 |Framework7 is not compatible with all platforms. It is focused only on iOS and Android (Material) to bring the best experience and simplicity.
9 |Framework7 is definitely for you if you decide to build iOS and Android hybrid app (PhoneGap) or web app that looks like and feels as great native iOS or Android (Material) apps.
10 |11 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean elementum id neque nec commodo. Sed vel justo at turpis laoreet pellentesque quis sed lorem. Integer semper arcu nibh, non mollis arcu tempor vel. Sed pharetra tortor vitae est rhoncus, vel congue dui sollicitudin. Donec eu arcu dignissim felis viverra blandit suscipit eget ipsum. 12 |
13 |30 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean elementum id neque nec commodo. Sed vel justo at turpis laoreet pellentesque quis sed lorem. Integer semper arcu nibh, non mollis arcu tempor vel. Sed pharetra tortor vitae est rhoncus, vel congue dui sollicitudin. Donec eu arcu dignissim felis viverra blandit suscipit eget ipsum. 31 |
32 |43 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean elementum id neque nec commodo. Sed vel justo at turpis laoreet pellentesque quis sed lorem. Integer semper arcu nibh, non mollis arcu tempor vel. Sed pharetra tortor vitae est rhoncus, vel congue dui sollicitudin. Donec eu arcu dignissim felis viverra blandit suscipit eget ipsum. 44 |
45 |62 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean elementum id neque nec commodo. Sed vel justo at turpis laoreet pellentesque quis sed lorem. Integer semper arcu nibh, non mollis arcu tempor vel. Sed pharetra tortor vitae est rhoncus, vel congue dui sollicitudin. Donec eu arcu dignissim felis viverra blandit suscipit eget ipsum. 63 |
64 |
6 |
7 |
12 |
13 |
Action Sheet can be automatically converted to Popover (for tablets). This button will open Popover on tablets and Action Sheet on phones:
49 | Button 1
50 | 
53 | Button 2
54 | 
57 | Button 3
58 | 
63 | Button 4
64 | 
67 | Button 5
68 | 
71 | Button 6
72 | Appbar is the main app bar with actions on top of the whole app. It is designed to be used in desktop apps with Aurora theme.
6 |
7 |
8 |
9 |
14 |
15 |
16 |
17 | No events for this day
18 |
19 |
20 |
21 | Calendar is a touch optimized component that provides an easy way to handle dates.
7 |Calendar could be used as inline component or as overlay. Overlay Calendar will be automatically converted to Popover on tablets (iPad).
8 |
36 | 
39 | 
42 |
53 |
58 | This paragraph is outside of content block. Not cool, but useful for any custom elements with custom styling.
5 | 6 |Here comes paragraph within content block. Donec et nulla auctor massa pharetra adipiscing ut sit amet sem. Suspendisse molestie velit vitae mattis tincidunt. Ut sit amet quam mollis, vulputate turpis vel, sagittis felis.
8 |Here comes another text block with additional "block-strong" class. Praesent nec imperdiet diam. Maecenas vel lectus porttitor, consectetur magna nec, viverra sem. Aliquam sed risus dolor. Morbi tincidunt ut libero id sodales. Integer blandit varius nisi quis consectetur.
12 |Donec et nulla auctor massa pharetra adipiscing ut sit amet sem. Suspendisse molestie velit vitae mattis tincidunt. Ut sit amet quam mollis, vulputate turpis vel, sagittis felis.
17 |Donec et nulla auctor massa pharetra adipiscing ut sit amet sem. Suspendisse molestie velit vitae mattis tincidunt. Ut sit amet quam mollis, vulputate turpis vel, sagittis felis.
22 |Donec et nulla auctor massa pharetra adipiscing ut sit amet sem. Suspendisse molestie velit vitae mattis tincidunt. Ut sit amet quam mollis, vulputate turpis vel, sagittis felis.
27 |Donec et nulla auctor massa pharetra adipiscing ut sit amet sem. Suspendisse molestie velit vitae mattis tincidunt. Ut sit amet quam mollis, vulputate turpis vel, sagittis felis.
32 |Here comes paragraph within content block. Donec et nulla auctor massa pharetra adipiscing ut sit amet sem. Suspendisse molestie velit vitae mattis tincidunt. Ut sit amet quam mollis, vulputate turpis vel, sagittis felis.
38 |Here comes paragraph within content block. Donec et nulla auctor massa pharetra adipiscing ut sit amet sem. Suspendisse molestie velit vitae mattis tincidunt. Ut sit amet quam mollis, vulputate turpis vel, sagittis felis.
44 |Here comes paragraph within content block. Donec et nulla auctor massa pharetra adipiscing ut sit amet sem. Suspendisse molestie velit vitae mattis tincidunt. Ut sit amet quam mollis, vulputate turpis vel, sagittis felis.
50 |Here comes paragraph within content block. Donec et nulla auctor massa pharetra adipiscing ut sit amet sem. Suspendisse molestie velit vitae mattis tincidunt. Ut sit amet quam mollis, vulputate turpis vel, sagittis felis.
56 |Donec et nulla auctor massa pharetra adipiscing ut sit amet sem. Suspendisse molestie velit vitae mattis tincidunt. Ut sit amet quam mollis, vulputate turpis vel, sagittis felis.
62 |Donec et nulla auctor massa pharetra adipiscing ut sit amet sem. Suspendisse molestie velit vitae mattis tincidunt. Ut sit amet quam mollis, vulputate turpis vel, sagittis felis.
67 |Shadows provide important visual cues about objects' depth and directional movement. They are the only visual cue indicating the amount of separation between surfaces. An object’s elevation determines the appearance of its shadow. The elevation values are mapped out in a "z-space" and range from 1 to 24.
6 |Elevation can be added to any element by adding elevation-0, elevation-1, ..., elevation-24 classes.
To add different elevation only on hover (desktop), you can use elevation-hover-0, elevation-hover-1, ..., elevation-hover-24 classes.
To specify elevation only when item pressed, you can use elevation-pressed-0, elevation-pressed-1, ..., elevation-pressed-24 classes.
1
14 | 2
17 | 3
20 | 4
25 | 5
28 | 6
31 | 7
36 | 8
39 | 9
42 | 10
47 | 11
50 | 12
53 | 13
58 | 14
61 | 15
64 | 16
69 | 17
72 | 18
75 | 19
80 | 20
83 | 21
86 | 22
91 | 23
94 | 24
97 | 6 + hover-24 + pressed-12
102 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia, quo rem beatae, delectus eligendi est saepe molestias perferendis suscipit, commodi labore ipsa non quasi eum magnam neque ducimus! Quasi, numquam.
39 |Maiores culpa, itaque! Eaque natus ab cum ipsam numquam blanditiis a, quia, molestiae aut laudantium recusandae ipsa. Ad iste ex asperiores ipsa, mollitia perferendis consectetur quam eaque, voluptate laboriosam unde.
40 |Sed odit quis aperiam temporibus vitae necessitatibus, laboriosam, exercitationem dolores odio sapiente provident. Accusantium id, itaque aliquam libero ipsum eos fugiat distinctio laboriosam exercitationem sequi facere quas quidem magnam reprehenderit.
41 |Pariatur corporis illo, amet doloremque. Ab veritatis sunt nisi consectetur error modi, nam illo et nostrum quia aliquam ipsam vitae facere voluptates atque similique odit mollitia, rerum placeat nobis est.
42 |Et impedit soluta minus a autem adipisci cupiditate eius dignissimos nihil officia dolore voluptatibus aperiam reprehenderit esse facilis labore qui, officiis consectetur. Ipsa obcaecati aspernatur odio assumenda veniam, ipsum alias.
43 |Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa ipsa debitis sed nihil eaque dolore cum iste quibusdam, accusamus doloribus, tempora quia quos voluptatibus corporis officia at quas dolorem earum!
46 |Quod soluta eos inventore magnam suscipit enim at hic in maiores temporibus pariatur tempora minima blanditiis vero autem est perspiciatis totam dolorum, itaque repellat? Nobis necessitatibus aut odit aliquam adipisci.
47 |Tenetur delectus perspiciatis ex numquam, unde corrupti velit! Quam aperiam, animi fuga veritatis consectetur, voluptatibus atque consequuntur dignissimos itaque, sint impedit cum cumque at. Adipisci sint, iusto blanditiis ullam? Vel?
48 |Dignissimos velit officia quibusdam! Eveniet beatae, aut, omnis temporibus consequatur expedita eaque aliquid quos accusamus fugiat id iusto autem obcaecati repellat fugit cupiditate suscipit natus quas doloribus? Temporibus necessitatibus, libero.
49 |Architecto quisquam ipsa fugit facere, repudiandae asperiores vitae obcaecati possimus, labore excepturi reprehenderit consectetur perferendis, ullam quidem hic, repellat fugiat eaque fuga. Consectetur in eveniet, deleniti recusandae omnis eum quas?
50 |Quos nulla consequatur quo, officia quaerat. Nulla voluptatum, assumenda quibusdam, placeat cum aut illo deleniti dolores commodi odio ipsam, recusandae est pariatur veniam repudiandae blanditiis. Voluptas unde deleniti quisquam, nobis?
51 |Atque qui quaerat quasi officia molestiae, molestias totam incidunt reprehenderit laboriosam facilis veritatis, non iusto! Dolore ipsam obcaecati voluptates minima maxime minus qui mollitia facere. Nostrum esse recusandae voluptatibus eligendi.
52 |
5 |
8 |
102 | With forms storage it is easy to store and parse form data, especially on Ajax loaded pages. All you need to make it work is to add "form-store-data" class to your <form> and Framework7 will store form data with every input change. And the most awesome part is that when you load this page again Framework7 will parse this data and fill all form fields automatically!
6 |Just try to fill the form below and then go to any other page, or even you may close this site, and when you return here form fields will have kept your data.
7 |Columns within a row are automatically set to have equal width. Otherwise you can define your column with pourcentage of screen you want.
6 |Grid cells have different size on Phone/Tablet
113 |Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Framework7 comes with ready to use Login Screen layout. It could be used inside of page or inside of popup (Embedded) or as a standalone overlay:
6 |Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Detail Page {{$f7route.params.id}}
6 |Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque congue turpis et risus fringilla condimentum. Aliquam vestibulum est tempor, sagittis massa nec, dictum massa. Phasellus non viverra dui, eget aliquam sem. Donec eleifend dolor id arcu ultrices, vel ultrices dolor fringilla. Phasellus feugiat consectetur libero, eget luctus felis rhoncus at. Duis scelerisque ligula sit amet purus congue pulvinar. Proin a risus id nibh fermentum auctor. Vestibulum at sem a risus mollis iaculis. In vestibulum malesuada arcu id consectetur.
7 |Master-Detail pattern oftenly used on wide enough screens and tablets, and consists of two views. Master - is an area in the UI where you have a list of something. Detail - is the area that shows the relevant information of a selection in the master.
6 |To see Master Detail view make sure the window width is larger than 800px.
7 |When collapsed (on narrow screen) navigation between such pages will behave as usual routing.
8 |Navigation to/from Master-Detail view happens without transition.
9 |Navbar is a fixed (with Fixed and Through layout types) area at the top of a screen that contains Page title and navigation elements.
10 |Navbar has 3 main parts: Left, Title and Right. Each part may contain any HTML content.
11 |Framework7 comes with simple Notifications component that allows you to show some useful messages to user and request basic actions.
6 |This is a left side panel. You can close it by clicking outsite or on this link:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse faucibus mauris leo, eu bibendum neque congue non. Ut leo mauris, eleifend eu commodo a, egestas ac urna. Maecenas in lacus faucibus, viverra ipsum pulvinar, molestie arcu. Etiam lacinia venenatis dignissim. Suspendisse non nisl semper tellus malesuada suscipit eu et eros. Nulla eu enim quis quam elementum vulputate. Mauris ornare consequat nunc viverra pellentesque. Aenean semper eu massa sit amet aliquam. Integer et neque sed libero mollis elementum at vitae ligula. Vestibulum pharetra sed libero sed porttitor. Suspendisse a faucibus lectus.
21 |Duis ut mauris sollicitudin, venenatis nisi sed, luctus ligula. Phasellus blandit nisl ut lorem semper pharetra. Nullam tortor nibh, suscipit in consequat vel, feugiat sed quam. Nam risus libero, auctor vel tristique ac, malesuada ut ante. Sed molestie, est in eleifend sagittis, leo tortor ullamcorper erat, at vulputate eros sapien nec libero. Mauris dapibus laoreet nibh quis bibendum. Fusce dolor sem, suscipit in iaculis id, pharetra at urna. Pellentesque tempor congue massa quis faucibus. Vestibulum nunc eros, convallis blandit dui sit amet, gravida adipiscing libero.
22 |This is a right side panel. You can close it by clicking outsite or on this link:
Framework7 comes with 2 panels (on left and on right), both are optional. They have two different layouts/effects - cover above the content (like left panel here) and reveal (like right panel). You can put absolutely anything inside: data lists, forms, custom content, and even other isolated app view (like in right panel now) with its own dynamic navbar. Checkout panels:
6 |Photo Browser is a standalone and highly configurable component that allows to open window with photo viewer and navigation elements with the following features:
6 |-
7 |
- Swiper between photos 8 |
- Multi-gestures support for zooming 9 |
- Toggle zoom by double tap on photo 10 |
- Single click on photo to toggle Exposition mode 11 |
Photo Browser could be opened in a three ways - as a Standalone component (Popup modification), in Popup, and as separate Page:
15 |Photo Browser suppots 2 default themes - default Light (like in previous examples) and Dark theme. Here is a Dark theme examples:
32 |Mauris fermentum neque et luctus venenatis. Vivamus a sem rhoncus, ornare tellus eu, euismod mauris. In porta turpis at semper convallis. Duis adipiscing leo eu nulla lacinia, quis rhoncus metus condimentum. Etiam nec malesuada nibh. Maecenas quis lacinia nisl, vel posuere dolor. Vestibulum condimentum, nisl ac vulputate egestas, neque enim dignissim elit, rhoncus volutpat magna enim a est. Aenean sit amet ligula neque. Cras suscipit rutrum enim. Nam a odio facilisis, elementum tellus non,
In hac habitasse platea dictumst. Etiam varius, ante vel ornare facilisis, velit massa rutrum dolor, ac porta magna magna lacinia nunc. Curabitur
Duis et ultricies nibh. Sed facilisis turpis urna, ac imperdiet erat venenatis eu. Proin sit amet faucibus tortor, et varius sem. Etiam vitae lacinia neque. Aliquam nisi purus, interdum in arcu sed, ultrices rutrum arcu. Nulla mi turpis, consectetur vel enim quis, facilisis viverra dui. Aliquam quis convallis tortor, quis semper ligula. Morbi ullamcorper
How about an activity indicator? Framework 7 has a nice one. The F7 Preloader is made with SVG and animated with CSS so it can be easily resized.
6 |With app.preloader.show() you can show small overlay with preloader indicator.
48 |49 | Open Small Indicator 50 |
51 |With app.dialog.preloader() you can show dialog modal with preloader indicator.
52 |53 | Open Dialog Preloader 54 |
55 |With app.dialog.preloader('My text...') you can show dialog preloader modal with custom title.
56 |57 | Open Dialog Preloader 58 |
59 |Just pull page down to let the magic happen.
Note that pull-to-refresh feature is optimised for touch and native scrolling so it may not work on desktop browser.
Lorem
In addition to pages, Framework7 router allows to load modal components:
6 |This Popup was loaded using route link as standalone component
11 |Lorem ipsum dolor sit f7amet, consectetur adipiscing elit. Suspendisse faucibus mauris f7leo, eu bibendum neque congue non. Ut leo f7mauris, eleifend eu commodo f7a, egestas ac urna. Maecenas in lacus f7faucibus, viverra ipsum f7pulvinar, molestie arcu. Etiam lacinia venenatis dignissim. Suspendisse non nisl semper tellus malesuada suscipit eu et eros. Nulla eu enim quis quam elementum vulputate. Mauris ornare consequat nunc viverra pellentesque. Aenean semper eu massa sit amet aliquam. Integer et neque sed libero mollis elementum at vitae ligula. Vestibulum pharetra sed libero sed porttitor. Suspendisse a faucibus lectus.
12 |Duis ut mauris f7sollicitudin, venenatis nisi f7sed, luctus ligula. Phasellus blandit nisl ut lorem semper pharetra. Nullam tortor f7nibh, suscipit in consequat f7vel, feugiat sed quam. Nam risus f7libero, auctor vel tristique f7ac, malesuada ut ante. Sed f7molestie, est in eleifend f7sagittis, leo tortor ullamcorper f7erat, at vulputate eros sapien nec libero. Mauris dapibus laoreet nibh quis bibendum. Fusce dolor f7sem, suscipit in iaculis f7id, pharetra at urna. Pellentesque tempor congue massa quis faucibus. Vestibulum nunc f7eros, convallis blandit dui sit f7amet, gravida adipiscing libero.
13 |Just click "Toggle" button on navigation bar to enable/disable sorting
11 |
57 | 
65 | 
73 | Framework7 automatically detects if your app in full screen mode, and automatically shows statusbar overlay if app is in full screen mode (or hides statusbar if app is not in full screen mode). Its visibility can be forced using app parameters or using API:
6 |It also possible to use Subnavbar to display page title and keep navbar only for actions.
8 |Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde, consequatur quia amet voluptate vero quasi, veniam, quisquam dolorum magni sint enim, harum expedita excepturi quas iure magnam minus voluptatem quaerat!
11 |Dolore laboriosam error magnam velit expedita recusandae, dolor asperiores unde, sint, veritatis illum ipsum? Nulla ratione nobis, ullam debitis. Inventore sapiente rem dolore eum ipsa totam perspiciatis cupiditate, amet maiores!
12 |Ratione quod minus ipsum maxime cum voluptate molestiae adipisci placeat ut illo, alias nobis perferendis magni odio sunt, porro, totam praesentium possimus! Autem inventore ut provident animi quae, impedit id!
13 |Aperiam ea ab harum. Quis dolorem cupiditate, incidunt mollitia ducimus voluptatem commodi! Odio quasi amet hic nesciunt, quibusdam, est vero repellat sapiente perferendis, optio laboriosam in culpa veniam alias ad.
14 |A fuga corporis harum velit maiores, quaerat accusantium cum aspernatur consequuntur dolor vel fugit omnis est dolorum delectus debitis aperiam distinctio eveniet vero nihil voluptatum culpa. Accusamus aliquid facere tenetur?
15 |Subnavbar is useful when you need to put any additional elements into Navbar, like Tab Links or Search Bar. It also remains visible when Navbar hidden.
14 |
5 |
6 |
18 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
5 |
17 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
5 |
16 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
5 |
19 |
6 |
7 |
18 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
5 |
6 |
13 |
7 |
8 |
9 |
10 |
11 |
12 |
5 |
16 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
17 |
38 |
18 |
21 |
24 |
27 |
30 |
33 |
36 |
37 |
5 |
6 |
19 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
5 |
29 |
6 | ![]()
7 |
8 |
9 | ![]()
10 |
11 |
12 | ![]()
13 |
14 |
15 | ![]()
16 |
17 |
18 | ![]()
19 |
20 |
21 | ![]()
22 |
23 |
24 |
25 |
26 |
27 |
28 | 
7 |
8 | 
10 |
11 | 
13 |
14 | 
16 |
17 | 
19 |
20 | 
22 |
23 |
5 |
6 |
19 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
6 |
7 |
20 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
22 |
23 |
36 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
38 |
39 |
52 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
54 |
55 |
68 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 |
64 |
65 |
66 |
67 |
70 |
71 |
79 |
72 |
73 |
74 |
75 |
76 |
77 |
78 |
81 |
82 |
95 |
83 |
84 |
85 |
86 |
87 |
88 |
89 |
90 |
91 |
92 |
93 |
94 |
5 |
6 |
22 |
7 |
8 |
18 |
19 |
20 |
21 |
5 |
6 |
19 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
5 |
6 |
19 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
5 |
6 |
7 |
8 |
9 |
33 |
10 |
17 |
24 |
31 |
32 |
5 |
6 |
7 |
20 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
5 |
6 |
19 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
5 |
6 |
19 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
5 |
29 |
6 |
25 |
26 |
27 |
28 |
7 | 
8 |
9 |
10 | 
11 |
12 |
13 | 
14 |
15 |
16 | 
17 |
18 |
19 | 
20 |
21 |
22 | 
23 |
24 |
5 |
11 | 6 | Framework7 comes with powerful and most modern touch slider ever - 7 | Swiper Slider 8 | with super flexible configuration and lot, lot of features. Just check the following demos: 9 |
10 |
12 |
69 | -
13 |
- 14 | Swiper Horizontal 15 | 16 |
- 17 | Swiper Vertical 18 | 19 |
- 20 | Space Between Slides 21 | 22 |
- 23 | Multiple Per Page 24 | 25 |
- 26 | Nested Swipers 27 | 28 |
- 29 | Infinite Loop Mode 30 | 31 |
- 32 | 3D Cube Effect 33 | 34 |
- 35 | 3D Coverflow Effect 36 | 37 |
- 38 | 3D Flip Effect 39 | 40 |
- 41 | Fade Effect 42 | 43 |
- 44 | With Scrollbar 45 | 46 |
- 47 | Thumbs Gallery 48 | 49 |
- 50 | Custom Controls 51 | 52 |
- 53 | Parallax 54 | 55 |
- 56 | Lazy Loading 57 | 58 |
- 59 | Progress Pagination 60 | 61 |
- 62 | Fraction Pagination 63 | 64 |
- 65 | Zoom 66 | 67 |
Tab {{tab}} content
26 |Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque corrupti, quos asperiores unde aspernatur illum odio, eveniet. Fugiat magnam perspiciatis ex dignissimos, rerum modi ea nesciunt praesentium iusto optio rem?
27 |Illo debitis et recusandae, ipsum nisi nostrum vero delectus quasi. Quasi, consequatur! Corrupti, explicabo maxime incidunt fugit sint dicta saepe officiis sed expedita, minima porro! Ipsa dolores quia, delectus labore!
28 |At similique minima placeat magni molestias sunt deleniti repudiandae voluptatibus magnam quam esse reprehenderit dolor enim qui sed alias, laboriosam quaerat laborum iure repellat praesentium pariatur dolorum possimus veniam! Consectetur.
29 |Sunt, sed, magnam! Qui, suscipit. Beatae cum ullam necessitatibus eligendi, culpa rem excepturi consequatur quidem totam eum voluptates nihil, enim pariatur incidunt corporis sed facere magni earum tenetur rerum ea.
30 |Veniam nulla quis molestias voluptatem inventore consectetur iusto voluptatibus perferendis quisquam, cupiditate voluptates, tenetur vero magnam nisi animi praesentium atque adipisci optio quod aliquid vel delectus ad? Dicta deleniti, recusandae.
31 |
5 |
106 |
6 |
30 | 21 DEC
7 |
8 |
29 |
9 |
14 | 12:56
10 | Title 1
11 | Subtitle 1
12 | Lorem ipsum dolor sit amet, consectetur adipisicing elit
13 |
15 |
20 | 13:15
16 | Title 2
17 | Subtitle 2
18 | Lorem ipsum dolor sit amet, consectetur adipisicing elit
19 |
21 |
24 | 14:45
22 | Do something
23 |
25 |
28 | 16:11
26 | Do something else
27 |
31 |
34 | 22 DEC
32 | Plain text goes here
33 |
35 |
47 |
59 | 23 DEC
36 |
37 |
46 |
38 |
42 | Card
39 | Card Content
40 |
41 |
43 |
45 | Another Card Content
44 |
60 |
76 | 25 DEC
61 |
62 |
75 | 11:11
63 | Task 1
64 | 12:33
65 | Task 2
66 | 13:24
67 | Task 3
68 | 14:55
69 | Task 4
70 | 15:15
71 | Task 5
72 | 16:54
73 | Task 6
74 |
77 |
105 | 26 DEC
78 |
79 |
104 |
80 |
83 | 11:11
81 | Task 1
82 |
84 |
87 | 12:33
85 | Task 2
86 |
88 |
91 | 13:24
89 | Task 3
90 |
92 |
95 | 14:55
93 | Task 4
94 |
96 |
99 | 15:15
97 | Task 5
98 |
100 |
103 | 16:54
101 | Task 6
102 | Toolbar supports both top and bottom positions. Click the following button to change its position.
17 |
18 |
Tooltips display informative text when users hover over, or tap an target element.
12 |Tooltip can be positioned around any element with any HTML content inside.
13 |Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lacinia augue urna, in tincidunt augue hendrerit ut. In nulla massa, facilisis non consectetur a, tempus semper ex. Proin eget volutpat nisl. Integer lacinia maximus nunc molestie viverra.
Vestibulum
Praesent tempus enim id lectus porta, at rutrum purus imperdiet. Donec eget sem vulputate, scelerisque diam nec, consequat turpis. Ut vel convallis felis. Integer
For simple cases when you don't need a lot of control over the Tooltip, it can be set on buttons and links automatically with tooltip prop:
Virtual List allows to render lists with huge amount of elements without loss of performance. And it is fully compatible with all Framework7 list components such as Search Bar, Infinite Scroll, Pull To Refresh, Swipeouts (swipe-to-delete) and Sortable.
15 |Here is the example of virtual list with 10 000 items:
16 |-
27 |
3 | Tab 1
4 |
5 |
6 |
--------------------------------------------------------------------------------
/examples/routable-tabs/components/tab2.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 | Tab 2
4 |
5 |
6 |
--------------------------------------------------------------------------------
/examples/routable-tabs/components/tab3.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 | Tab 3
4 |
5 |
6 |
--------------------------------------------------------------------------------
/examples/routable-tabs/nuxt.config.js:
--------------------------------------------------------------------------------
1 | const { resolve } = require('path')
2 |
3 | module.exports = {
4 | rootDir: resolve(__dirname, '../..'),
5 | srcDir: __dirname,
6 | modules: ['@@/lib/module'],
7 | build: {
8 | extractCSS: true
9 | },
10 |
11 | framework7: {
12 | routes: {
13 | index: {
14 | tabs: [
15 | { path: '', id: 'tab1' },
16 | { path: '/tab2', id: 'tab2' },
17 | { path: '/tab3', id: 'tab3' }
18 | ]
19 | }
20 | }
21 | }
22 | }
23 |
--------------------------------------------------------------------------------
/examples/routable-tabs/pages/index.vue:
--------------------------------------------------------------------------------
1 |
2 | Year: {{ year }}
7 |Id: {{ id }}
8 |User: {{ name }}
7 |7 | Nuxt.js - is a framework for creating Universal Vue.js Applications. 8 | Our goal is to create a framework flexible enough that you can use it as a main project base or in addition to your current project based on Node.js. 9 | Nuxt.js presets all the configuration needed to make your development of a Vue.js Application more enjoyable. 10 |
11 |12 | Framework7 - is a free and open source HTML mobile framework to develop hybrid mobile apps or web apps with iOS or Android (Material) native look and feel. It is also an indispensable prototyping apps tool to show working app prototype as soon as possible in case you need to. Framework7 is created by Vladimir Kharlampidi (iDangero.us). 13 |
14 |15 | The main approach of the Framework7 is to give you an opportunity to create iOS and Android (Material) apps with HTML, CSS and JavaScript easily and clear. Framework7 is full of freedom. It doesn't limit your imagination or offer ways of any solutions somehow. Framework7 gives you freedom! 16 |
17 |18 | Framework7 is not compatible with all platforms. It is focused only on iOS and Android (Material) to bring the best experience and simplicity. 19 |
20 |21 | Nuxt7 is a Nuxt.js module which adds everything is needed to make a complete and fast PWA app using Framework7. 22 |
23 |Sorry
6 |Requested content not found.
7 |