Pie componentAvailable since EcoComposer 2.0
Complex method with "clip-path", transforms and classic gradients
"conic-gradient" method
font-size : 16px,
text : 'true',
suffix : '',
themes : (
light : (
),
dark : (
)
)
We can implement it that way :
@include pie.init-classic; // only for classic pie, not conic ones
@include pie.create(
(
'themes' : $themes,
'slices' : (
(
'value' : 10,
'radial-gradient' : #f00,
'color' : #fff
),
(
'value' : 25,
'radial-gradient' : #0f0
),
(
'value' : 15,
'radial-gradient' : #00f,
'color' : #fff
),
(
'value' : 20,
'radial-gradient' : #0aa,
'color' : #fff
),
(
'value' : 30,
'radial-gradient' : #aaf
)
)
)
);
We can implement it that way :
<div class="pie suffix">
<div class="pie--segment suffix"></div>
<div class="pie--segment suffix"></div>
<div class="pie--segment suffix"></div>
<div class="pie--segment suffix"></div>
<div class="pie--segment suffix"></div>
</div>