|
1 | 1 | extends ../../_layout/default.pug |
2 | 2 |
|
| 3 | +block canonical |
| 4 | + link(rel='canonical' href='https://coreui.io/docs/4.0/components/scrollspy/') |
| 5 | + |
3 | 6 | block view |
| 7 | + +callout('Scrollspy', 'https://coreui.io/docs/4.0/components/scrollspy/') |
4 | 8 | .card.mb-4 |
5 | 9 | .card-header |
6 | | - | Scrollspy |
7 | | - .float-end |
8 | | - a(href='https://coreui.io/docs/4.0/components/scrollspy/', target='_blank') |
9 | | - | docs |
| 10 | + strong Scrollspy |
| 11 | + span.small.ms-1 Example in navbar |
10 | 12 | .card-body |
11 | | - nav#navbar-example1.navbar.navbar-light.bg-light(style='padding: .5rem 1rem;') |
12 | | - a.navbar-brand(href='#') Navbar |
13 | | - ul.nav.nav-pills |
14 | | - li.nav-item |
15 | | - a.nav-link(href='#fat') @fat |
16 | | - li.nav-item |
17 | | - a.nav-link(href='#mdo') @mdo |
18 | | - li.nav-item.dropdown |
19 | | - a.nav-link.dropdown-toggle(data-coreui-toggle='dropdown' href='#' role='button' aria-expanded='false') Dropdown |
20 | | - ul.dropdown-menu.dropdown-menu-end |
21 | | - li |
22 | | - a.dropdown-item(href='#one') one |
23 | | - li |
24 | | - a.dropdown-item(href='#two') two |
25 | | - li |
26 | | - hr.dropdown-divider |
27 | | - li |
28 | | - a.dropdown-item(href='#three') three |
29 | | - div(data-coreui-spy='scroll', data-coreui-target='#navbar-example1', data-coreui-offset='0', style='position: relative; height: 200px; overflow: auto; margin-top: .5rem; overflow-y: scroll;') |
30 | | - h4#fat @fat |
31 | | - p |
32 | | - | Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat. |
33 | | - h4#mdo @mdo |
34 | | - p |
35 | | - | Veniam marfa mustache skateboard, adipisicing fugiat velit pitchfork beard. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat four loko nisi, ea helvetica nulla carles. Tattooed cosby sweater food truck, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1 sartorial. Carles non aesthetic exercitation quis gentrify. Brooklyn adipisicing craft beer vice keytar deserunt. |
36 | | - h4#one one |
37 | | - p |
38 | | - | Occaecat commodo aliqua delectus. Fap craft beer deserunt skateboard ea. Lomo bicycle rights adipisicing banh mi, velit ea sunt next level locavore single-origin coffee in magna veniam. High life id vinyl, echo park consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing. Consectetur nisi DIY minim messenger bag. Cred ex in, sustainable delectus consectetur fanny pack iphone. |
39 | | - h4#two two |
40 | | - p |
41 | | - | In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt. |
42 | | - h4#three three |
43 | | - p |
44 | | - | Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat. |
45 | | - p |
46 | | - | Keytar twee blog, culpa messenger bag marfa whatever delectus food truck. Sapiente synth id assumenda. Locavore sed helvetica cliche irony, thundercats you probably haven't heard of them consequat hoodie gluten-free lo-fi fap aliquip. Labore elit placeat before they sold out, terry richardson proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan craft beer seitan readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats. |
47 | | - |
| 13 | + p.text-medium-emphasis.small |
| 14 | + | Scroll the area below the navbar and watch the active class change. The dropdown items will be highlighted as well. |
| 15 | + +example() |
| 16 | + nav#navbar-example2.navbar.navbar-light.bg-light.px-3 |
| 17 | + a.navbar-brand(href='#') Navbar |
| 18 | + ul.nav.nav-pills |
| 19 | + li.nav-item |
| 20 | + a.nav-link.active(href='#fat') @fat |
| 21 | + li.nav-item |
| 22 | + a.nav-link(href='#mdo') @mdo |
| 23 | + li.nav-item.dropdown |
| 24 | + a.nav-link.dropdown-toggle(data-coreui-toggle='dropdown' href='#' role='button' aria-expanded='false') Dropdown |
| 25 | + ul.dropdown-menu |
| 26 | + li |
| 27 | + a.dropdown-item(href='#one') one |
| 28 | + li |
| 29 | + a.dropdown-item(href='#two') two |
| 30 | + li |
| 31 | + hr.dropdown-divider |
| 32 | + li |
| 33 | + a.dropdown-item(href='#three') three |
| 34 | + .scrollspy-example(data-coreui-spy='scroll' data-coreui-target='#navbar-example2' data-coreui-offset='0' tabindex='0') |
| 35 | + h4#fat @fat |
| 36 | + p |
| 37 | + | Placeholder content for the scrollspy example. You got the finest architecture. Passport stamps, she's cosmopolitan. Fine, fresh, fierce, we got it on lock. Never planned that one day I'd be losing you. She eats your heart out. Your kiss is cosmic, every move is magic. I mean the ones, I mean like she's the one. Greetings loved ones let's take a journey. Just own the night like the 4th of July! But you'd rather get wasted. |
| 38 | + h4#mdo @mdo |
| 39 | + p |
| 40 | + | Placeholder content for the scrollspy example. 'Cause she's the muse and the artist. (This is how we do) So you wanna play with magic. So just be sure before you give it all to me. I'm walking, I'm walking on air (tonight). Skip the talk, heard it all, time to walk the walk. |
| 41 | + h4#one one |
| 42 | + p |
| 43 | + | Placeholder content for the scrollspy example. Takes you miles high, so high, 'cause she’s got that one international smile. There's a stranger in my bed, there's a pounding in my head. Oh, no. In another life I would make you stay. ‘Cause I, I’m capable of anything. Suiting up for my crowning battle. Used to steal your parents' liquor and climb to the roof. Tone, tan fit and ready, turn it up cause its gettin' heavy. Her love is like a drug. I guess that I forgot I had a choice. |
| 44 | + h4#two two |
| 45 | + p |
| 46 | + | Placeholder content for the scrollspy example. It's time to bring out the big balloons. I'm walking, I'm walking on air (tonight). Yeah, we maxed our credit cards and got kicked out of the bar. Yo, shout out to all you kids, buying bottle service, with your rent money. I'm ma get your heart racing in my skin-tight jeans. If you get the chance you better keep her. Yo, shout out to all you kids, buying bottle service, with your rent money. |
| 47 | + h4#three three |
| 48 | + p |
| 49 | + | Placeholder content for the scrollspy example. If you wanna dance, if you want it all, you know that I'm the girl that you should call. Walk through the storm I would. So let me get you in your birthday suit. The one that got away. Last Friday night, yeah I think we broke the law, always say we're gonna stop. 'Cause she's a little bit of Yoko, And she's a little bit of 'Oh no'. I want the jaw droppin', eye poppin', head turnin', body shockin'. Yeah, we maxed our credit cards and got kicked out of the bar. |
| 50 | + p And some more placeholder content, for good measure. |
| 51 | + .card.mb-4 |
| 52 | + .card-header |
| 53 | + strong Scrollspy |
| 54 | + span.small.ms-1 Example with nested nav |
| 55 | + .card-body |
| 56 | + p.text-medium-emphasis.small |
| 57 | + | Scrollspy also works with nested |
| 58 | + code .nav |
| 59 | + | s. If a nested |
| 60 | + code .nav |
| 61 | + | is |
| 62 | + code .active |
| 63 | + | , its parents will also be |
| 64 | + code .active |
| 65 | + | . Scroll the area next to the navbar and watch the active class change. |
| 66 | + +example() |
| 67 | + .row |
| 68 | + .col-4 |
| 69 | + nav#navbar-example3.navbar.navbar-light.bg-light.flex-column |
| 70 | + a.navbar-brand(href='#') Navbar |
| 71 | + nav.nav.nav-pills.flex-column |
| 72 | + a.nav-link.active(href='#item-1') Item 1 |
| 73 | + nav.nav.nav-pills.flex-column |
| 74 | + a.nav-link.ms-3.my-1.active(href='#item-1-1') Item 1-1 |
| 75 | + a.nav-link.ms-3.my-1(href='#item-1-2') Item 1-2 |
| 76 | + a.nav-link(href='#item-2') Item 2 |
| 77 | + a.nav-link(href='#item-3') Item 3 |
| 78 | + nav.nav.nav-pills.flex-column |
| 79 | + a.nav-link.ms-3.my-1(href='#item-3-1') Item 3-1 |
| 80 | + a.nav-link.ms-3.my-1(href='#item-3-2') Item 3-2 |
| 81 | + .col-8 |
| 82 | + .scrollspy-example-2(data-coreui-spy='scroll' data-coreui-target='#navbar-example3' data-coreui-offset='0' tabindex='0') |
| 83 | + h4#item-1 Item 1 |
| 84 | + p |
| 85 | + | Placeholder content for the scrollspy example. This one relates to item 1. Takes you miles high, so high, 'cause she’s got that one international smile. There's a stranger in my bed, there's a pounding in my head. Oh, no. In another life I would make you stay. ‘Cause I, I’m capable of anything. Suiting up for my crowning battle. Used to steal your parents' liquor and climb to the roof. Tone, tan fit and ready, turn it up cause its gettin' heavy. Her love is like a drug. I guess that I forgot I had a choice. |
| 86 | + h5#item-1-1 Item 1-1 |
| 87 | + p |
| 88 | + | Placeholder content for the scrollspy example. This one relates to the item 1-1. You got the finest architecture. Passport stamps, she's cosmopolitan. Fine, fresh, fierce, we got it on lock. Never planned that one day I'd be losing you. She eats your heart out. Your kiss is cosmic, every move is magic. I mean the ones, I mean like she's the one. Greetings loved ones let's take a journey. Just own the night like the 4th of July! But you'd rather get wasted. |
| 89 | + h5#item-1-2 Item 1-2 |
| 90 | + p |
| 91 | + | Placeholder content for the scrollspy example. This one relates to the item 1-2. Her love is like a drug. All my girls vintage Chanel baby. Got a motel and built a fort out of sheets. 'Cause she's the muse and the artist. (This is how we do) So you wanna play with magic. So just be sure before you give it all to me. I'm walking, I'm walking on air (tonight). Skip the talk, heard it all, time to walk the walk. Catch her if you can. Stinging like a bee I earned my stripes. |
| 92 | + h4#item-2 Item 2 |
| 93 | + p |
| 94 | + | Placeholder content for the scrollspy example. This one relates to item 2. Don't need apologies. There is no fear now, let go and just be free, I will love you unconditionally. Last Friday night. Don't be a shy kinda guy I'll bet it's beautiful. Summer after high school when we first met. 'Cause she's the muse and the artist. What? Wait. No, no, no, no. Thought that I was the exception. |
| 95 | + h4#item-3 Item 3 |
| 96 | + p |
| 97 | + | Placeholder content for the scrollspy example. This one relates to item 3. Word on the street, you got somethin' to show me, me. All this money can't buy me a time machine. Make it like your birthday everyday. So we hit the boulevard. You make me feel like I'm livin' a teenage dream, the way you turn me on Skip the talk, heard it all, time to walk the walk. Word on the street, you got somethin' to show me, me. It's no big deal, it's no big deal, it's no big deal. |
| 98 | + h5#item-3-1 Item 3-1 |
| 99 | + p |
| 100 | + | Placeholder content for the scrollspy example. This one relates to item 3-1. Baby do you dare to do this? This is no big deal. Yeah, you're lucky if you're on her plane. Just own the night like the 4th of July! Standing on the frontline when the bombs start to fall. So just be sure before you give it all to me. |
| 101 | + h5#item-3-2 Item 3-2 |
| 102 | + p |
| 103 | + | Placeholder content for the scrollspy example. This one relates to item 3-2. You're original, cannot be replaced. All night they're playing, your song. California girls we're undeniable. Like a bird without a cage. There is no fear now, let go and just be free, I will love you unconditionally. I can see the writing on the wall. You could travel the world but nothing comes close to the golden coast. |
48 | 104 | .card.mb-4 |
49 | 105 | .card-header |
50 | | - | Scrollspy |
51 | | - span.small.ms-1 with list-group |
| 106 | + strong Scrollspy |
| 107 | + span.small.ms-1 Example with list-group |
52 | 108 | .card-body |
53 | | - .row |
54 | | - .col-4 |
55 | | - #list-example.list-group |
56 | | - a.list-group-item.list-group-item-action.active(href='#list-item-1') Item 1 |
57 | | - a.list-group-item.list-group-item-action(href='#list-item-2') Item 2 |
58 | | - a.list-group-item.list-group-item-action(href='#list-item-3') Item 3 |
59 | | - a.list-group-item.list-group-item-action(href='#list-item-4') Item 4 |
60 | | - .col-8 |
61 | | - #spy-example2(data-coreui-spy='scroll', data-coreui-target='#list-example', style='height: 200px; overflow: auto') |
62 | | - h4#list-item-1 Item 1 |
63 | | - p |
64 | | - | Ex consequat commodo adipisicing exercitation aute excepteur occaecat ullamco duis aliqua id magna |
65 | | - | ullamco eu. Do aute ipsum ipsum ullamco cillum consectetur ut et aute consectetur labore. Fugiat laborum |
66 | | - | incididunt tempor eu consequat enim dolore proident. Qui laborum do non excepteur nulla magna eiusmod |
67 | | - | consectetur in. Aliqua et aliqua officia quis et incididunt voluptate non anim reprehenderit adipisicing |
68 | | - | dolore ut consequat deserunt mollit dolore. Aliquip nulla enim veniam non fugiat id cupidatat nulla elit |
69 | | - | cupidatat commodo velit ut eiusmod cupidatat elit dolore. |
70 | | - h4#list-item-2 Item 2 |
71 | | - p |
72 | | - | Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex nulla tempor. Laborum consequat non |
73 | | - | elit enim exercitation cillum aliqua consequat id aliqua. Esse ex consectetur mollit voluptate est in duis |
74 | | - | laboris ad sit ipsum anim Lorem. Incididunt veniam velit elit elit veniam Lorem aliqua quis ullamco |
75 | | - | deserunt sit enim elit aliqua esse irure. Laborum nisi sit est tempor laborum mollit labore officia |
76 | | - | laborum excepteur commodo non commodo dolor excepteur commodo. Ipsum fugiat ex est consectetur ipsum |
77 | | - | commodo tempor sunt in proident. |
78 | | - h4#list-item-3 Item 3 |
79 | | - p |
80 | | - | Ex consequat commodo adipisicing exercitation aute excepteur occaecat ullamco duis aliqua id magna |
81 | | - | ullamco eu. Do aute ipsum ipsum ullamco cillum consectetur ut et aute consectetur labore. Fugiat laborum |
82 | | - | incididunt tempor eu consequat enim dolore proident. Qui laborum do non excepteur nulla magna eiusmod |
83 | | - | consectetur in. Aliqua et aliqua officia quis et incididunt voluptate non anim reprehenderit adipisicing |
84 | | - | dolore ut consequat deserunt mollit dolore. Aliquip nulla enim veniam non fugiat id cupidatat nulla elit |
85 | | - | cupidatat commodo velit ut eiusmod cupidatat elit dolore. |
86 | | - h4#list-item-4 Item 4 |
87 | | - p |
88 | | - | Ex consequat commodo adipisicing exercitation aute excepteur occaecat ullamco duis aliqua id magna |
89 | | - | ullamco eu. Do aute ipsum ipsum ullamco cillum consectetur ut et aute consectetur labore. Fugiat laborum |
90 | | - | incididunt tempor eu consequat enim dolore proident. Qui laborum do non excepteur nulla magna eiusmod |
91 | | - | consectetur in. Aliqua et aliqua officia quis et incididunt voluptate non anim reprehenderit adipisicing |
92 | | - | dolore ut consequat deserunt mollit dolore. Aliquip nulla enim veniam non fugiat id cupidatat nulla elit |
93 | | - | cupidatat commodo velit ut eiusmod cupidatat elit dolore. |
| 109 | + p.text-medium-emphasis.small |
| 110 | + | Scrollspy also works with |
| 111 | + code .list-group |
| 112 | + | s. Scroll the area next to the list group and watch the active class change. |
| 113 | + +example() |
| 114 | + .row |
| 115 | + .col-4 |
| 116 | + #list-example.list-group |
| 117 | + a.list-group-item.list-group-item-action.active(href='#list-item-1') Item 1 |
| 118 | + a.list-group-item.list-group-item-action(href='#list-item-2') Item 2 |
| 119 | + a.list-group-item.list-group-item-action(href='#list-item-3') Item 3 |
| 120 | + a.list-group-item.list-group-item-action(href='#list-item-4') Item 4 |
| 121 | + .col-8 |
| 122 | + .scrollspy-example(data-coreui-spy='scroll' data-coreui-target='#list-example' data-coreui-offset='0' tabindex='0') |
| 123 | + h4#list-item-1 Item 1 |
| 124 | + p |
| 125 | + | Placeholder content for the scrollspy list-group example. This one relates to item 1. Don't need apologies. There is no fear now, let go and just be free, I will love you unconditionally. Last Friday night. Don't be a shy kinda guy I'll bet it's beautiful. Summer after high school when we first met. 'Cause she's the muse and the artist. What? Wait. Thought that I was the exception. |
| 126 | + h4#list-item-2 Item 2 |
| 127 | + p |
| 128 | + | Placeholder content for the scrollspy list-group example. This one relates to item 2. Yeah, she dances to her own beat. Oh, no. You could've been the greatest. 'Cause, baby, you're a firework. Maybe a reason why all the doors are closed. Open up your heart and just let it begin. So très chic, yeah, she's a classic. |
| 129 | + h4#list-item-3 Item 3 |
| 130 | + p |
| 131 | + | Placeholder content for the scrollspy list-group example. This one relates to item 3. We go higher and higher. Never one without the other, we made a pact. I'm walking on air. Someone said you had your tattoo removed. Now I’m floating like a butterfly. Tone, tan fit and ready, turn it up cause its gettin' heavy. Cause once you’re mine, once you’re mine. You just gotta ignite the light and let it shine! So we hit the boulevard. Do you ever feel, feel so paper thin. I see it all, I see it now. |
| 132 | + h4#list-item-4 Item 4 |
| 133 | + p |
| 134 | + | Placeholder content for the scrollspy list-group example. This one relates to item 4. Summer after high school when we first met. There is no fear now, let go and just be free, I will love you unconditionally. Sun-kissed skin so hot we'll melt your popsicle. This love will make you levitate. |
0 commit comments