Skip to content

Commit 1ef505f

Browse files
author
Pooya Parsa
committed
misc: update kitchen-sink examples to framework7-vue 2.0.0
1 parent 1c10e42 commit 1ef505f

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

75 files changed

+3665
-4225
lines changed

‎examples/kitchen-sink/pages/action-sheet.vue

Lines changed: 109 additions & 123 deletions
Original file line numberDiff line numberDiff line change
@@ -1,153 +1,139 @@
11
<template>
22
<f7-page>
33
<f7-navbar title="Action Sheet" back-link="Back"></f7-navbar>
4-
<f7-block class="row">
5-
<f7-col>
6-
<f7-button raised @click="openDemo1">One group</f7-button>
7-
</f7-col>
8-
<f7-col>
9-
<f7-button raised @click="openDemo2">Two groups</f7-button>
10-
</f7-col>
11-
</f7-block>
4+
<f7-block strong>
5+
<p class="row">
6+
<!-- One group, open by direct accessing instance .open() method -->
7+
<f7-button class="col" raised @click="$refs.actionsOneGroup.f7Actions.open()">One group</f7-button>
8+
<!-- Two groups, open by "actions-open" attribute -->
9+
<f7-button class="col" raised actions-open="#actions-two-groups">Two groups</f7-button>
10+
</p>
11+
<p>
12+
<!-- Actions Grid, open by changing actionGridOpened prop -->
13+
<f7-button raised @click="actionGridOpened = true">Action Grid</f7-button>
14+
</p>
15+
</f7-block>
1216

13-
<f7-block>
14-
<f7-button raised @click="openGrid">Action Grid</f7-button>
15-
</f7-block>
17+
<f7-block-title>Action Sheet To Popover</f7-block-title>
18+
<f7-block strong>
19+
<p>Action Sheet can be automatically converted to Popover (for tablets). This button will open Popover on tablets and Action Sheet on phones: <f7-button style="display:inline-block" class="button-to-popover" @click="openActionsPopover">Actions</f7-button></p>
20+
</f7-block>
21+
22+
<!-- One Group -->
23+
<f7-actions ref="actionsOneGroup">
24+
<f7-actions-group>
25+
<f7-actions-label>Do something</f7-actions-label>
26+
<f7-actions-button bold>Button 1</f7-actions-button>
27+
<f7-actions-button>Button 2</f7-actions-button>
28+
<f7-actions-button color="red">Cancel</f7-actions-button>
29+
</f7-actions-group>
30+
</f7-actions>
31+
32+
<!-- Two Groups -->
33+
<f7-actions id="actions-two-groups">
34+
<f7-actions-group>
35+
<f7-actions-label>Do something</f7-actions-label>
36+
<f7-actions-button bold>Button 1</f7-actions-button>
37+
<f7-actions-button>Button 2</f7-actions-button>
38+
</f7-actions-group>
39+
<f7-actions-group>
40+
<f7-actions-button color="red">Cancel</f7-actions-button>
41+
</f7-actions-group>
42+
</f7-actions>
43+
44+
<!-- Grid -->
45+
<f7-actions :grid="true" :opened="actionGridOpened" @actions:closed="actionGridOpened = false">
46+
<f7-actions-group>
47+
<f7-actions-button>
48+
<img slot="media" src="http://lorempixel.com/96/96/people/1" width="48"/>
49+
<span>Button 1</span>
50+
</f7-actions-button>
51+
<f7-actions-button>
52+
<img slot="media" src="http://lorempixel.com/96/96/people/2" width="48"/>
53+
<span>Button 2</span>
54+
</f7-actions-button>
55+
<f7-actions-button>
56+
<img slot="media" src="http://lorempixel.com/96/96/people/3" width="48"/>
57+
<span>Button 3</span>
58+
</f7-actions-button>
59+
</f7-actions-group>
60+
<f7-actions-group>
61+
<f7-actions-button>
62+
<img slot="media" src="http://lorempixel.com/96/96/fashion/4" width="48"/>
63+
<span>Button 4</span>
64+
</f7-actions-button>
65+
<f7-actions-button>
66+
<img slot="media" src="http://lorempixel.com/96/96/fashion/5" width="48"/>
67+
<span>Button 5</span>
68+
</f7-actions-button>
69+
<f7-actions-button>
70+
<img slot="media" src="http://lorempixel.com/96/96/fashion/6" width="48"/>
71+
<span>Button 6</span>
72+
</f7-actions-button>
73+
</f7-actions-group>
74+
</f7-actions>
1675

17-
<f7-block-title>Action Sheet To Popover</f7-block-title>
18-
<f7-block strong>
19-
<p>Action Sheet can be automatically converted to Popover (for tablets). This button will open Popover on tablets and Action Sheet on phones: <f7-button style="display:inline-block" class="button-to-popover" @click="openActionsPopover">Actions</f7-button></p>
20-
</f7-block>
2176
</f7-page>
2277
</template>
2378
<script>
24-
import { f7Navbar, f7Page, f7BlockTitle, f7Block, f7Col, f7Link, f7Button } from 'framework7-vue';
79+
import { f7Navbar, f7Page, f7BlockTitle, f7Block, f7Link, f7Button, f7Actions, f7ActionsGroup, f7ActionsLabel, f7ActionsButton } from 'framework7-vue';
2580
2681
export default {
2782
components: {
2883
f7Page,
2984
f7Navbar,
3085
f7BlockTitle,
3186
f7Block,
32-
f7Col,
3387
f7Link,
3488
f7Button,
89+
f7Actions,
90+
f7ActionsGroup,
91+
f7ActionsLabel,
92+
f7ActionsButton,
93+
},
94+
data() {
95+
return {
96+
actionGridOpened: false,
97+
};
3598
},
3699
methods: {
37-
openDemo1() {
38-
const self = this;
39-
self.actions1.open();
40-
},
41-
openDemo2() {
42-
const self = this;
43-
self.actions2.open();
44-
},
45-
openGrid() {
46-
const self = this;
47-
self.actionsGrid.open();
48-
},
49100
openActionsPopover() {
50101
const self = this;
102+
const app = self.$f7;
103+
if (!self.actionsToPopover) {
104+
self.actionsToPopover = app.actions.create({
105+
buttons: [
106+
{
107+
text: 'Do something',
108+
label: true,
109+
},
110+
{
111+
text: 'Button 1',
112+
bold: true,
113+
},
114+
{
115+
text: 'Button 2',
116+
},
117+
{
118+
text: 'Cancel',
119+
color: 'red',
120+
},
121+
],
122+
// Need to specify popover target
123+
targetEl: self.$el.querySelector('.button-to-popover'),
124+
});
125+
}
126+
127+
// Open
51128
self.actionsToPopover.open();
52129
},
53130
},
54131
on: {
55132
pageBeforeRemove() {
56133
const self = this;
57-
self.actions1.destroy();
58-
self.actions2.destroy();
59-
self.actionsGrid.destroy();
60-
self.actionsToPopover.destroy();
61-
},
62-
pageInit() {
63-
const self = this;
64-
65-
// 1 Group
66-
const buttons1 = [
67-
{
68-
text: 'Do something',
69-
label: true,
70-
},
71-
{
72-
text: 'Button 1',
73-
bold: true,
74-
},
75-
{
76-
text: 'Button 2',
77-
},
78-
{
79-
text: 'Cancel',
80-
color: 'red',
81-
},
82-
];
83-
84-
// 2 Groups
85-
const buttons2 = [
86-
// First Group
87-
[
88-
{
89-
text: 'Do something',
90-
label: true,
91-
},
92-
{
93-
text: 'Button 1',
94-
bold: true,
95-
},
96-
{
97-
text: 'Button 2',
98-
},
99-
],
100-
// Second Group
101-
[
102-
{
103-
text: 'Cancel',
104-
color: 'red',
105-
},
106-
],
107-
];
108-
109-
// Grid buttons with icons/images
110-
const gridButtons = [
111-
[
112-
{
113-
text: 'Button 1',
114-
icon: '<img src="http://lorempixel.com/96/96/people/1" width="48"/>',
115-
},
116-
{
117-
text: 'Button 2',
118-
icon: '<img src="http://lorempixel.com/96/96/people/2" width="48">',
119-
},
120-
{
121-
text: 'Button 3',
122-
icon: '<img src="http://lorempixel.com/96/96/people/3" width="48">',
123-
},
124-
],
125-
[
126-
{
127-
text: 'Button 1',
128-
icon: '<img src="http://lorempixel.com/96/96/fashion/4" width="48"/>',
129-
},
130-
{
131-
text: 'Button 2',
132-
icon: '<img src="http://lorempixel.com/96/96/fashion/5" width="48">',
133-
},
134-
{
135-
text: 'Button 3',
136-
icon: '<img src="http://lorempixel.com/96/96/fashion/6" width="48">',
137-
},
138-
],
139-
];
140-
141-
self.actions1 = self.$f7.actions.create({ buttons: buttons1 });
142-
self.actions2 = self.$f7.actions.create({ buttons: buttons2 });
143-
self.actionsGrid = self.$f7.actions.create({ buttons: gridButtons, grid: true });
144-
145-
// Actions To Popover
146-
self.actionsToPopover = self.$f7.actions.create({
147-
buttons: buttons1,
148-
// Need to specify popover target
149-
targetEl: self.$el.querySelector('.button-to-popover'),
150-
});
134+
if (self.actionsToPopover) {
135+
self.actionsToPopover.destroy();
136+
}
151137
},
152138
},
153139
};

0 commit comments

Comments
 (0)