Skip to content

Commit

Permalink
feat(range): m3 styles
Browse files Browse the repository at this point in the history
  • Loading branch information
@nolimits4web
nolimits4web committed Sep 29, 2022
1 parent 8abf7df commit 6bb3df2
Show file tree
Hide file tree
Showing 5 changed files with 124 additions and 213 deletions.
154 changes: 35 additions & 119 deletions kitchen-sink/core/pages/range.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,16 +17,16 @@
<div class="list simple-list">
<ul>
<li>
<div class="item-cell width-auto flex-shrink-0">
<div>
<i class="icon f7-icons if-not-md" style="width: 28px">speaker_fill</i>
<i class="icon material-icons md-only" style="width: 24px">volume_mute</i>
</div>
<div class="item-cell flex-shrink-3">
<div style="width: 100%; margin: 0 16px">
<div class="range-slider range-slider-init">
<input type="range" min="0" max="100" step="1" value="10" />
</div>
</div>
<div class="item-cell width-auto flex-shrink-0">
<div>
<i class="icon f7-icons if-not-md" style="width: 28px">speaker_3_fill</i>
<i class="icon material-icons md-only" style="width: 24px">volume_up</i>
</div>
Expand All @@ -37,16 +37,16 @@
<div class="list simple-list">
<ul>
<li>
<div class="item-cell width-auto flex-shrink-0">
<div>
<i class="icon f7-icons if-not-md" style="width: 28px">sun_min</i>
<i class="icon material-icons md-only" style="width: 24px">brightness_low</i>
</div>
<div class="item-cell flex-shrink-3">
<div style="width: 100%; margin: 0 16px">
<div class="range-slider range-slider-init color-orange" data-label="true">
<input type="range" min="0" max="100" step="1" value="50" />
</div>
</div>
<div class="item-cell width-auto flex-shrink-0">
<div>
<i class="icon f7-icons if-not-md" style="width: 28px">sun_max_fill</i>
<i class="icon material-icons md-only" style="width: 24px">brightness_high</i>
</div>
Expand All @@ -59,24 +59,16 @@
<div class="list simple-list">
<ul>
<li class="item-row">
<div class="item-cell width-auto flex-shrink-0">
<div>
<i class="icon f7-icons if-not-md" style="width: 28px">money_dollar_circle</i>
<i class="icon material-icons md-only" style="width: 24px">attach_money</i>
</div>
<div class="item-cell item-cell-shrink-3">
<div
class="range-slider range-slider-init color-green"
@range:change="onPriceChange"
data-label="true"
data-dual="true"
data-min="0"
data-max="500"
data-step="1"
data-value-left="200"
data-value-right="400"
></div>
<div style="width: 100%; margin: 0 16px">
<div class="range-slider range-slider-init color-green" @range:change="onPriceChange" data-label="true"
data-dual="true" data-min="0" data-max="500" data-step="1" data-value-left="200" data-value-right="400">
</div>
</div>
<div class="item-cell width-auto flex-shrink-0">
<div>
<i class="icon f7-icons if-not-md" style="width: 28px">money_dollar_circle_fill</i>
<i class="icon material-icons md-only" style="width: 24px">monetization_on</i>
</div>
Expand All @@ -85,111 +77,35 @@
</div>
<div class="block-title">With Scale</div>
<div class="block block-strong">
<div
class="range-slider range-slider-init"
data-min="0"
data-max="100"
data-label="true"
data-step="5"
data-value="25"
data-scale="true"
data-scale-steps="5"
data-scale-sub-steps="4"
></div>
<div class="range-slider range-slider-init" data-min="0" data-max="100" data-label="true" data-step="5"
data-value="25" data-scale="true" data-scale-steps="5" data-scale-sub-steps="4"></div>
</div>
<div class="block-title">Vertical</div>
<div class="block block-strong display-flex justify-content-center">
<div
class="range-slider range-slider-init margin-right"
data-vertical="true"
data-min="0"
data-max="100"
data-label="true"
data-step="1"
data-value="25"
style="height: 160px"
></div>
<div
class="range-slider range-slider-init margin-horizontal"
data-vertical="true"
data-min="0"
data-max="100"
data-label="true"
data-step="1"
data-value="50"
style="height: 160px"
></div>
<div
class="range-slider range-slider-init margin-horizontal"
data-vertical="true"
data-min="0"
data-max="100"
data-label="true"
data-step="1"
data-value="75"
style="height: 160px"
></div>
<div
class="range-slider range-slider-init margin-left"
data-dual="true"
data-vertical="true"
data-min="0"
data-max="100"
data-label="true"
data-step="1"
data-value-left="25"
data-value-right="75"
style="height: 160px"
></div>
<div class="range-slider range-slider-init margin-right" data-vertical="true" data-min="0" data-max="100"
data-label="true" data-step="1" data-value="25" style="height: 160px"></div>
<div class="range-slider range-slider-init margin-horizontal" data-vertical="true" data-min="0" data-max="100"
data-label="true" data-step="1" data-value="50" style="height: 160px"></div>
<div class="range-slider range-slider-init margin-horizontal" data-vertical="true" data-min="0" data-max="100"
data-label="true" data-step="1" data-value="75" style="height: 160px"></div>
<div class="range-slider range-slider-init margin-left" data-dual="true" data-vertical="true" data-min="0"
data-max="100" data-label="true" data-step="1" data-value-left="25" data-value-right="75"
style="height: 160px"></div>
</div>
<div class="block-title">Vertical Reversed</div>
<div class="block block-strong display-flex justify-content-center">
<div
class="range-slider range-slider-init color-red margin-right"
data-vertical="true"
data-vertical-reversed="true"
data-min="0"
data-max="100"
data-label="true"
data-step="1"
data-value="25"
style="height: 160px"
></div>
<div
class="range-slider range-slider-init color-red margin-horizontal"
data-vertical="true"
data-vertical-reversed="true"
data-min="0"
data-max="100"
data-label="true"
data-step="1"
data-value="50"
style="height: 160px"
></div>
<div
class="range-slider range-slider-init color-red margin-horizontal"
data-vertical="true"
data-vertical-reversed="true"
data-min="0"
data-max="100"
data-label="true"
data-step="1"
data-value="75"
style="height: 160px"
></div>
<div
class="range-slider range-slider-init color-red margin-left"
data-dual="true"
data-vertical="true"
data-vertical-reversed="true"
data-min="0"
data-max="100"
data-label="true"
data-step="1"
data-value-left="25"
data-value-right="75"
style="height: 160px"
></div>
<div class="range-slider range-slider-init color-red margin-right" data-vertical="true"
data-vertical-reversed="true" data-min="0" data-max="100" data-label="true" data-step="1" data-value="25"
style="height: 160px"></div>
<div class="range-slider range-slider-init color-red margin-horizontal" data-vertical="true"
data-vertical-reversed="true" data-min="0" data-max="100" data-label="true" data-step="1" data-value="50"
style="height: 160px"></div>
<div class="range-slider range-slider-init color-red margin-horizontal" data-vertical="true"
data-vertical-reversed="true" data-min="0" data-max="100" data-label="true" data-step="1" data-value="75"
style="height: 160px"></div>
<div class="range-slider range-slider-init color-red margin-left" data-dual="true" data-vertical="true"
data-vertical-reversed="true" data-min="0" data-max="100" data-label="true" data-step="1" data-value-left="25"
data-value-right="75" style="height: 160px"></div>
</div>
</div>
</div>
Expand Down
48 changes: 19 additions & 29 deletions kitchen-sink/react/src/pages/range.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,5 @@
import React, { useState } from 'react';
import {
Navbar,
Page,
BlockTitle,
Range,
List,
ListItem,
ListItemCell,
Icon,
Block,
} from 'framework7-react';
import { Navbar, Page, BlockTitle, Range, List, ListItem, Icon, Block } from 'framework7-react';

export default () => {
const [priceMin, setPriceMin] = useState(200);
Expand All @@ -27,30 +17,30 @@ export default () => {
<BlockTitle>Volume</BlockTitle>
<List simpleList>
<ListItem>
<ListItemCell className="width-auto flex-shrink-0">
<div>
<Icon ios="f7:speaker_fill" aurora="f7:speaker_fill" md="material:volume_mute" />
</ListItemCell>
<ListItemCell className="flex-shrink-3">
</div>
<div style={{ width: '100%', margin: '0 16px' }}>
<Range min={0} max={100} step={1} value={10} />
</ListItemCell>
<ListItemCell className="width-auto flex-shrink-0">
</div>
<div>
<Icon ios="f7:speaker_3_fill" aurora="f7:speaker_3_fill" md="material:volume_up" />
</ListItemCell>
</div>
</ListItem>
</List>

<BlockTitle>Brightness</BlockTitle>
<List simpleList>
<ListItem>
<ListItemCell className="width-auto flex-shrink-0">
<div>
<Icon ios="f7:sun_min" aurora="f7:sun_min" md="material:brightness_low" />
</ListItemCell>
<ListItemCell className="flex-shrink-3">
</div>
<div style={{ width: '100%', margin: '0 16px' }}>
<Range min={0} max={100} step={1} value={50} label={true} color="orange" />
</ListItemCell>
<ListItemCell className="width-auto flex-shrink-0">
</div>
<div>
<Icon ios="f7:sun_max_fill" aurora="f7:sun_max_fill" md="material:brightness_high" />
</ListItemCell>
</div>
</ListItem>
</List>

Expand All @@ -62,14 +52,14 @@ export default () => {
</BlockTitle>
<List simpleList>
<ListItem>
<ListItemCell className="width-auto flex-shrink-0">
<div>
<Icon
ios="f7:money_dollar_circle"
aurora="f7:money_dollar_circle"
md="material:attach_money"
/>
</ListItemCell>
<ListItemCell className="flex-shrink-3">
</div>
<div style={{ width: '100%', margin: '0 16px' }}>
<Range
min={0}
max={500}
Expand All @@ -80,14 +70,14 @@ export default () => {
color="green"
onRangeChange={onPriceChange}
/>
</ListItemCell>
<ListItemCell className="width-auto flex-shrink-0">
</div>
<div>
<Icon
ios="f7:money_dollar_circle_fill"
aurora="f7:money_dollar_circle_fill"
md="material:monetization_on"
/>
</ListItemCell>
</div>
</ListItem>
</List>

Expand Down
Loading

0 comments on commit 6bb3df2

Please sign in to comment.