Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit948a1cb

Browse files
set active pagination on render (#1408)
1 parentc17b406 commit948a1cb

File tree

4 files changed

+71
-5
lines changed

4 files changed

+71
-5
lines changed

‎pgml-dashboard/src/components/pagination/mod.rs

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@ pub struct Pagination {
77
count:usize,
88
timed:bool,
99
identifier:u16,
10+
active_index:Option<usize>,
11+
clickable:bool,
1012
}
1113

1214
implPagination{
@@ -15,13 +17,27 @@ impl Pagination {
1517
count,
1618
timed:false,
1719
identifier: identifier,
20+
active_index:None,
21+
clickable:true,
1822
}
1923
}
2024

2125
pubfntimed(mutself) ->Self{
2226
self.timed =true;
2327
self
2428
}
29+
30+
// When the user wantes to set the active index on render.
31+
pubfnactive_index(mutself,index:usize) ->Self{
32+
self.active_index =Some(index);
33+
self
34+
}
35+
36+
// Prevents hover states.
37+
pubfnnot_clickable(mutself) ->Self{
38+
self.clickable =false;
39+
self
40+
}
2541
}
2642

2743
component!(Pagination);

‎pgml-dashboard/src/components/pagination/pagination.scss

Lines changed: 28 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
div[data-controller="pagination"] {
2+
$active-color:#00E0FF;
23

34
.pagination-container {
45
display:flex;
@@ -15,6 +16,26 @@ div[data-controller="pagination"] {
1516
transition:width0.25s;
1617
}
1718

19+
.pagination-item-container-animation {
20+
animation: IndicatorGrow0.3s;
21+
animation-fill-mode:forwards;
22+
23+
.pagination-item {
24+
background-color:$active-color;
25+
width:100%;
26+
}
27+
}
28+
29+
.pagination-item-container-animation-reverse {
30+
animation: IndicatorShrink0.3s;
31+
animation-fill-mode:forwards;
32+
33+
.pagination-item {
34+
background-color:#{$gray-700};
35+
width:100%;
36+
}
37+
}
38+
1839
.pagination-item-container-clickable:not(.pagination-item-active) {
1940
cursor:pointer;
2041
&:hover {
@@ -26,14 +47,14 @@ div[data-controller="pagination"] {
2647

2748
.pagination-item-active {
2849
.pagination-item {
29-
background-color:#00E0FF;
50+
background-color:$active-color;
3051
width:100%;
3152
}
3253
}
3354

3455
.pagination-item-timed-active {
3556
.pagination-item {
36-
background-color:#00E0FF;
57+
background-color:$active-color;
3758
animation: IndicatorGrow4500ms;
3859
animation-fill-mode:forwards;
3960
}
@@ -44,6 +65,11 @@ div[data-controller="pagination"] {
4465
100% {width:4rem;}
4566
}
4667

68+
@keyframesIndicatorShrink {
69+
0% {width:4rem;}
70+
100% {width:1rem;}
71+
}
72+
4773
.pagination-item {
4874
width:1rem;
4975
height:1rem;

‎pgml-dashboard/src/components/pagination/template.html

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<%
22
let active_class = if timed { "pagination-item-timed-active" } else { "pagination-item-active" };
3-
let clickable_class = if timed { "" } else { "pagination-item-container-clickable" };
3+
let clickable_class = if timed|| !clickable{ "" } else { "pagination-item-container-clickable" };
44
%>
55

66
<div
@@ -11,8 +11,15 @@
1111
>
1212
<divclass="pagination-container w-100 mt-4 pt-3">
1313
<% if count> 1 {
14-
for i in 0..count { %>
15-
<divclass="pagination-item-container <%- clickable_class %>"data-pagination-target="paginationItem">
14+
for i in 0..count {
15+
let make_active = match active_index {
16+
Some(index) if i == index => "pagination-item-container-animation",
17+
Some(index) if i + 1 == index => "pagination-item-container-animation-reverse",
18+
Some(index) if i == count - 1 && index == 0 => "pagination-item-container-animation-reverse",
19+
_ => ""
20+
};
21+
%>
22+
<divclass="pagination-item-container <%- clickable_class %> <%- make_active %>"data-pagination-target="paginationItem">
1623
<divclass="pagination-item"data-action="click->pagination#change"data-pagination-index-param="<%- i %>"></div>
1724
</div>
1825
<% }

‎pgml-dashboard/templates/content/playground.html

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,12 +11,28 @@
1111
use crate::components::cards::marketing::Slider as SliderCard;
1212
use crate::components::icons::Checkmark;
1313
use crate::components::Slider;
14+
use crate::components::pagination::Pagination;
1415
%>
1516

1617
<divclass="min-height: 100vh;"data-controller="playground">
1718
<h1class="h1">Playground</h1>
1819
<p>This is a space to display components.</p>
1920

21+
<divstyle="margin-bottom: 14rem;">
22+
<%+ Pagination::new(3, 1)
23+
.active_index(0)
24+
.not_clickable() %>
25+
26+
<%+ Pagination::new(3, 1)
27+
.active_index(1)
28+
.not_clickable() %>
29+
30+
<%+ Pagination::new(3, 1)
31+
.active_index(2)
32+
.not_clickable() %>
33+
34+
</div>
35+
2036
<h3class="h3">icons</h3>
2137
<divclass="mb-5">
2238
<%+ GithubIcon::new() %>
@@ -271,3 +287,4 @@ <h3 class="h3">Inputs</h3>
271287
])
272288
)%>
273289
</div>
290+

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp