Commita5472c9

authored

accordian that uses bootstrap, so no custom js (#1546)

1 parent08d643e commita5472c9Copy full SHA for a5472c9

File tree

+133

-0

lines changed

+133

-0

lines changed

Lines changed: 45 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,45 @@`
	`1`	`+div[data-controller="accordion"] {`
	`2`	`+.accordion-header {`
	`3`	`+cursor:pointer;`
	`4`	`+ }`
	`5`	`+`
	`6`	`+.accordion-body {`
	`7`	`+overflow:hidden;`
	`8`	`+transition:all0.3sease-in-out;`
	`9`	`+ }`
	`10`	`+`
	`11`	`+.accordion-item {`
	`12`	`+padding-top:1rem;`
	`13`	`+padding-bottom:1rem;`
	`14`	`+border-top:solid#{$gray-600}1px;`
	`15`	`+ }`
	`16`	`+`
	`17`	`+.accordion-item:last-child {`
	`18`	`+border-bottom:solid#{$gray-600}1px;`
	`19`	`+ }`
	`20`	`+`
	`21`	`+.accordion-header {`
	`22`	`+div[aria-expanded="true"] {`
	`23`	`+.title {`
	`24`	`+color:#{$gray-100};`
	`25`	`+ }`
	`26`	`+.add {`
	`27`	`+display:none;`
	`28`	`+ }`
	`29`	`+.remove {`
	`30`	`+display:block;`
	`31`	`+ }`
	`32`	`+ }`
	`33`	`+div[aria-expanded="false"] {`
	`34`	`+.title {`
	`35`	`+color:#{$gray-300};`
	`36`	`+ }`
	`37`	`+.add {`
	`38`	`+display:block;`
	`39`	`+ }`
	`40`	`+.remove {`
	`41`	`+display:none;`
	`42`	`+ }`
	`43`	`+ }`
	`44`	`+ }`
	`45`	`+}`

Lines changed: 52 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,52 @@`
	`1`	`+use pgml_components::{component,Component};`
	`2`	`+use sailfish::TemplateOnce;`
	`3`	`+`
	`4`	`+#[derive(TemplateOnce,Default)]`
	`5`	`+#[template(path ="accordion/template.html")]`
	`6`	`+pubstructAccordion{`
	`7`	`+html_contents:Vec<Component>,`
	`8`	`+html_titles:Vec<Component>,`
	`9`	`+selected:usize,`
	`10`	`+title_size:String,`
	`11`	`+}`
	`12`	`+`
	`13`	`+implAccordion{`
	`14`	`+pubfnnew() ->Accordion{`
	`15`	`+Accordion{`
	`16`	`+html_contents:Vec::new(),`
	`17`	`+html_titles:Vec::new(),`
	`18`	`+selected:0,`
	`19`	`+title_size:"h5".to_string(),`
	`20`	`+}`
	`21`	`+}`
	`22`	`+`
	`23`	`+pubfnhtml_contents(mutself,html_contents:Vec<Component>) ->Self{`
	`24`	`+self.html_contents = html_contents;`
	`25`	`+self`
	`26`	`+}`
	`27`	`+`
	`28`	`+pubfnhtml_titles(mutself,html_titles:Vec<Component>) ->Self{`
	`29`	`+self.html_titles = html_titles;`
	`30`	`+self`
	`31`	`+}`
	`32`	`+`
	`33`	`+pubfnset_title_size_body(mutself) ->Self{`
	`34`	`+self.title_size ="body-regular-text".to_string();`
	`35`	`+self`
	`36`	`+}`
	`37`	`+`
	`38`	`+pubfnset_title_size_header(mutself,title_size:i32) ->Self{`
	`39`	`+match title_size{`
	`40`	`+1 =>self.title_size ="h1".to_string(),`
	`41`	`+2 =>self.title_size ="h2".to_string(),`
	`42`	`+3 =>self.title_size ="h3".to_string(),`
	`43`	`+4 =>self.title_size ="h4".to_string(),`
	`44`	`+5 =>self.title_size ="h5".to_string(),`
	`45`	`+6 =>self.title_size ="h6".to_string(),`
	`46`	`+ _ =>self.title_size ="h5".to_string(),`
	`47`	`+}`
	`48`	`+self`
	`49`	`+}`
	`50`	`+}`
	`51`	`+`
	`52`	`+component!(Accordion);`

Lines changed: 31 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,31 @@`
	`1`	`+<%`
	`2`	`+ let items = html_contents.iter().zip(html_titles.iter());`
	`3`	`+%>`
	`4`	`+`
	`5`	`+<divdata-controller="accordion">`
	`6`	`+<divclass="accordion"id="accordionExample">`
	`7`	`+<% for (i, (content, title)) in items.enumerate() {%>`
	`8`	`+`
	`9`	`+<%`
	`10`	`+ let expanded = i == selected;`
	`11`	`+ let target = format!("collapse{}a", i);`
	`12`	`+ %>`
	`13`	`+`
	`14`	`+<divclass="accordion-item">`
	`15`	`+<divclass="accordion-header">`
	`16`	`+<divclass="d-flex justify-content-between align-items-center w-100"type="button"data-bs-toggle="collapse"data-bs-target="#<%- target %>"aria-expanded=<%- expanded %> aria-controls="<%- target %>">`
	`17`	`+<h6class="mb-0 title <%- title_size %>"><%+ title.clone() %></h6>`
	`18`	`+<spanclass="add material-symbols-outlined">add</span>`
	`19`	`+<spanclass="remove material-symbols-outlined">remove</span>`
	`20`	`+</div>`
	`21`	`+</div>`
	`22`	`+<divid="<%- target %>"class="accordion-collapse collapse <% if expanded {%>show<% } %>"data-bs-parent="#accordionExample">`
	`23`	`+<divclass="accordion-body pt-3">`
	`24`	`+<%+ content.clone() %>`
	`25`	`+</div>`
	`26`	`+</div>`
	`27`	`+</div>`
	`28`	`+<% } %>`
	`29`	`+`
	`30`	`+</div>`
	`31`	`+</div>`

Lines changed: 4 additions & 0 deletions

Lines changed: 1 addition & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -2,6 +2,7 @@`
`2`	`2`	`// There is no need to edit it manually.`
`3`	`3`
`4`	`4`	`@import"../../src/components/accordian/accordian.scss";`
	`5`	`+@import"../../src/components/accordion/accordion.scss";`
`5`	`6`	`@import"../../src/components/badges/large/label/label.scss";`
`6`	`7`	`@import"../../src/components/badges/small/label/label.scss";`
`7`	`8`	`@import"../../src/components/breadcrumbs/breadcrumbs.scss";`

Comments

(0)