Skip to content

Commit a162871

Browse files
nolimits4webnolimits4web
committed
Phenome: Vue & React Gauge demos
1 parent 1e7f9e3 commit a162871

6 files changed

Lines changed: 335 additions & 0 deletions

File tree

‎kitchen-sink/react/src/pages/gauge.jsx‎

Lines changed: 156 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,156 @@
1+
import React from 'react';
2+
import { Navbar, Page, BlockTitle, Block, Segmented, Button, Gauge, Row, Col } from 'framework7-react';
3+
4+
export default class extends React.Component {
5+
constructor() {
6+
super();
7+
8+
this.state = {
9+
gaugeValue: 0.5,
10+
};
11+
}
12+
13+
render() {
14+
return (
15+
<Page>
16+
<Navbar title="Gauge" backLink="Back"></Navbar>
17+
<Block strong>
18+
<p>Framework7 comes with Gauge component. It produces nice looking fully responsive SVG gauges.</p>
19+
</Block>
20+
<Block strong className="text-align-center">
21+
<Gauge
22+
type="circle"
23+
value={this.state.gaugeValue}
24+
size={250}
25+
borderColor="#2196f3"
26+
borderWidth={10}
27+
valueText={`${this.state.gaugeValue * 100}%`}
28+
valueFontSize={41}
29+
valueTextColor="#2196f3"
30+
labelText="amount of something"
31+
/>
32+
<Segmented tag="p" raised>
33+
<Button onClick={() => this.setState({ gaugeValue: 0 })}>0%</Button>
34+
<Button onClick={() => this.setState({ gaugeValue: 0.25 })}>25%</Button>
35+
<Button onClick={() => this.setState({ gaugeValue: 0.5 })}>50%</Button>
36+
<Button onClick={() => this.setState({ gaugeValue: 0.75 })}>75%</Button>
37+
<Button onClick={() => this.setState({ gaugeValue: 1 })}>100%</Button>
38+
</Segmented>
39+
</Block>
40+
41+
<BlockTitle>Circle Gauges</BlockTitle>
42+
<Block strong>
43+
<Row>
44+
<Col className="text-align-center">
45+
<Gauge
46+
type="circle"
47+
value={0.44}
48+
valueText="44%"
49+
valueTextColor="#ff9800"
50+
borderColor="#ff9800"
51+
/>
52+
</Col>
53+
<Col className="text-align-center">
54+
<Gauge
55+
type="circle"
56+
value={0.12}
57+
valueText="$120"
58+
valueTextColor="#4caf50"
59+
borderColor="#4caf50"
60+
labelText="of $1000 budget"
61+
labelTextColor="#f44336"
62+
labelFontWeight={700}
63+
/>
64+
</Col>
65+
</Row>
66+
</Block>
67+
<BlockTitle>Semicircle Gauges</BlockTitle>
68+
<Block strong>
69+
<Row>
70+
<Col className="text-align-center">
71+
<Gauge
72+
type="semicircle"
73+
value={0.3}
74+
valueText="30%"
75+
valueTextColor="#f44336"
76+
borderColor="#f44336"
77+
/>
78+
</Col>
79+
<Col className="text-align-center">
80+
<Gauge
81+
type="semicircle"
82+
value={0.5}
83+
valueText="30kg"
84+
valueTextColor="#e91e63"
85+
borderColor="#e91e63"
86+
labelText="of 60kg total"
87+
labelTextColor="#333"
88+
/>
89+
</Col>
90+
</Row>
91+
</Block>
92+
<BlockTitle>Customization</BlockTitle>
93+
<Block strong>
94+
<Row>
95+
<Col className="text-align-center">
96+
<Gauge
97+
type="circle"
98+
value={0.35}
99+
valueText="35%"
100+
valueTextColor="#4caf50"
101+
valueFontSize={51}
102+
valueFontWeight={700}
103+
borderWidth={20}
104+
borderColor="#4caf50"
105+
borderBgColor="#ffeb3b"
106+
bgColor="#ffeb3b"
107+
/>
108+
</Col>
109+
<Col className="text-align-center">
110+
<Gauge
111+
type="circle"
112+
value={0.67}
113+
valueText="$670"
114+
valueTextColor="#000"
115+
borderColor="#ff9800"
116+
labelText="of $1000 spent"
117+
labelTextColor="#4caf50"
118+
labelFontWeight={800}
119+
labelFontSize={12}
120+
borderWidth={30}
121+
/>
122+
</Col>
123+
</Row>
124+
<br />
125+
<Row>
126+
<Col className="text-align-center">
127+
<Gauge
128+
type="semicircle"
129+
value={0.5}
130+
valueText="50%"
131+
valueTextColor="#ffeb3b"
132+
valueFontSize={41}
133+
valueFontWeight={700}
134+
borderWidth={10}
135+
borderColor="#ffeb3b"
136+
borderBgColor="transparent"
137+
/>
138+
</Col>
139+
<Col className="text-align-center">
140+
<Gauge
141+
type="semicircle"
142+
value={0.77}
143+
borderColor="#ff9800"
144+
labelText="$770 spent so far"
145+
labelTextColor="#ff9800"
146+
labelFontWeight={800}
147+
labelFontSize={12}
148+
borderWidth={10}
149+
/>
150+
</Col>
151+
</Row>
152+
</Block>
153+
</Page>
154+
)
155+
}
156+
}

‎kitchen-sink/react/src/pages/home.jsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -82,6 +82,9 @@ export default () => (
8282
<ListItem link="/inputs/" title="Inputs">
8383
<Icon slot="media" icon="icon-f7" />
8484
</ListItem>
85+
<ListItem link="/gauge/" title="Gauge">
86+
<Icon slot="media" icon="icon-f7" />
87+
</ListItem>
8588
<ListItem link="/grid/" title="Grid / Layout Grid">
8689
<Icon slot="media" icon="icon-f7" />
8790
</ListItem>

‎kitchen-sink/react/src/routes.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ import Elevation from './pages/elevation.jsx';
2020
import Fab from './pages/fab.jsx';
2121
import FabMorph from './pages/fab-morph.jsx';
2222
import FormStorage from './pages/form-storage.jsx';
23+
import Gauge from './pages/gauge.jsx';
2324
import Grid from './pages/grid.jsx';
2425
import Icons from './pages/icons.jsx';
2526
import InfiniteScroll from './pages/infinite-scroll.jsx';
@@ -242,6 +243,10 @@ export default [
242243
path: '/form-storage/',
243244
component: FormStorage,
244245
},
246+
{
247+
path: '/gauge/',
248+
component: Gauge,
249+
},
245250
{
246251
path: '/grid/',
247252
component: Grid,

‎kitchen-sink/vue/src/pages/gauge.vue‎

Lines changed: 163 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,163 @@
1+
<template>
2+
<f7-page>
3+
<f7-navbar title="Gauge" back-link="Back"></f7-navbar>
4+
<f7-block strong>
5+
<p>Framework7 comes with Gauge component. It produces nice looking fully responsive SVG gauges.</p>
6+
</f7-block>
7+
<f7-block strong class="text-align-center">
8+
<f7-gauge
9+
type="circle"
10+
:value="gaugeValue"
11+
:size="250"
12+
borderColor="#2196f3"
13+
:borderWidth="10"
14+
:valueText="`${gaugeValue * 100}%`"
15+
:valueFontSize="41"
16+
valueTextColor="#2196f3"
17+
labelText="amount of something"
18+
/>
19+
<f7-segmented tag="p" raised>
20+
<f7-button @click="() => gaugeValue = 0">0%</f7-button>
21+
<f7-button @click="() => gaugeValue = 0.25">25%</f7-button>
22+
<f7-button @click="() => gaugeValue = 0.5">50%</f7-button>
23+
<f7-button @click="() => gaugeValue = 0.75">75%</f7-button>
24+
<f7-button @click="() => gaugeValue = 1">100%</f7-button>
25+
</f7-segmented>
26+
</f7-block>
27+
28+
<f7-block-title>Circle Gauges</f7-block-title>
29+
<f7-block strong>
30+
<f7-row>
31+
<f7-col class="text-align-center">
32+
<f7-gauge
33+
type="circle"
34+
:value="0.44"
35+
valueText="44%"
36+
valueTextColor="#ff9800"
37+
borderColor="#ff9800"
38+
/>
39+
</f7-col>
40+
<f7-col class="text-align-center">
41+
<f7-gauge
42+
type="circle"
43+
:value="0.12"
44+
valueText="$120"
45+
valueTextColor="#4caf50"
46+
borderColor="#4caf50"
47+
labelText="of $1000 budget"
48+
labelTextColor="#f44336"
49+
:labelFontWeight="700"
50+
/>
51+
</f7-col>
52+
</f7-row>
53+
</f7-block>
54+
<f7-block-title>Semicircle Gauges</f7-block-title>
55+
<f7-block strong>
56+
<f7-row>
57+
<f7-col class="text-align-center">
58+
<f7-gauge
59+
type="semicircle"
60+
:value="0.3"
61+
valueText="30%"
62+
valueTextColor="#f44336"
63+
borderColor="#f44336"
64+
/>
65+
</f7-col>
66+
<f7-col class="text-align-center">
67+
<f7-gauge
68+
type="semicircle"
69+
:value="0.5"
70+
valueText="30kg"
71+
valueTextColor="#e91e63"
72+
borderColor="#e91e63"
73+
labelText="of 60kg total"
74+
labelTextColor="#333"
75+
/>
76+
</f7-col>
77+
</f7-row>
78+
</f7-block>
79+
<f7-block-title>Customization</f7-block-title>
80+
<f7-block strong>
81+
<f7-row>
82+
<f7-col class="text-align-center">
83+
<f7-gauge
84+
type="circle"
85+
:value="0.35"
86+
valueText="35%"
87+
valueTextColor="#4caf50"
88+
:valueFontSize="51"
89+
:valueFontWeight="700"
90+
:borderWidth="20"
91+
borderColor="#4caf50"
92+
borderBgColor="#ffeb3b"
93+
bgColor="#ffeb3b"
94+
/>
95+
</f7-col>
96+
<f7-col class="text-align-center">
97+
<f7-gauge
98+
type="circle"
99+
:value="0.67"
100+
valueText="$670"
101+
valueTextColor="#000"
102+
borderColor="#ff9800"
103+
labelText="of $1000 spent"
104+
labelTextColor="#4caf50"
105+
:labelFontWeight="800"
106+
:labelFontSize="12"
107+
:borderWidth="30"
108+
/>
109+
</f7-col>
110+
</f7-row>
111+
<br />
112+
<f7-row>
113+
<f7-col class="text-align-center">
114+
<f7-gauge
115+
type="semicircle"
116+
:value="0.5"
117+
valueText="50%"
118+
valueTextColor="#ffeb3b"
119+
:valueFontSize="41"
120+
:valueFontWeight="700"
121+
:borderWidth="10"
122+
borderColor="#ffeb3b"
123+
borderBgColor="transparent"
124+
/>
125+
</f7-col>
126+
<f7-col class="text-align-center">
127+
<f7-gauge
128+
type="semicircle"
129+
:value="0.77"
130+
borderColor="#ff9800"
131+
labelText="$770 spent so far"
132+
labelTextColor="#ff9800"
133+
:labelFontWeight="800"
134+
:labelFontSize="12"
135+
:borderWidth="10"
136+
/>
137+
</f7-col>
138+
</f7-row>
139+
</f7-block>
140+
</f7-page>
141+
</template>
142+
<script>
143+
import { f7Page, f7Navbar, f7BlockTitle, f7Block, f7Row, f7Col, f7Segmented, f7Button, f7Gauge } from 'framework7-vue';
144+
145+
export default {
146+
components: {
147+
f7Page,
148+
f7Navbar,
149+
f7BlockTitle,
150+
f7Block,
151+
f7Row,
152+
f7Col,
153+
f7Segmented,
154+
f7Button,
155+
f7Gauge,
156+
},
157+
data() {
158+
return {
159+
gaugeValue: 0.5,
160+
};
161+
},
162+
};
163+
</script>

‎kitchen-sink/vue/src/pages/home.vue‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -79,6 +79,9 @@
7979
<f7-list-item link="/inputs/" title="Inputs">
8080
<f7-icon slot="media" icon="icon-f7"></f7-icon>
8181
</f7-list-item>
82+
<f7-list-item link="/gauge/" title="Gauge">
83+
<f7-icon slot="media" icon="icon-f7"></f7-icon>
84+
</f7-list-item>
8285
<f7-list-item link="/grid/" title="Grid / Layout Grid">
8386
<f7-icon slot="media" icon="icon-f7"></f7-icon>
8487
</f7-list-item>

‎kitchen-sink/vue/src/routes.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ import Elevation from './pages/elevation.vue';
2121
import Fab from './pages/fab.vue';
2222
import FabMorph from './pages/fab-morph.vue';
2323
import FormStorage from './pages/form-storage.vue';
24+
import Gauge from './pages/gauge.vue';
2425
import Grid from './pages/grid.vue';
2526
import Icons from './pages/icons.vue';
2627
import InfiniteScroll from './pages/infinite-scroll.vue';
@@ -244,6 +245,10 @@ export default [
244245
path: '/form-storage/',
245246
component: FormStorage,
246247
},
248+
{
249+
path: '/gauge/',
250+
component: Gauge,
251+
},
247252
{
248253
path: '/grid/',
249254
component: Grid,

0 commit comments

Comments
 (0)