@@ -170,6 +170,25 @@ const ComponentsPage = React.createClass({
170
170
< ReactPlayground codeText = { Samples . SplitButtonRight } />
171
171
</ div >
172
172
173
+ { /* Menu Item */ }
174
+ < div className = 'bs-docs-section' >
175
+ < h1 id = 'menu-item' className = 'page-header' > Menu Item < small > MenudItem</ small > </ h1 >
176
+ < p > This is a component used in other components (see < a href = "buttons" > Buttons</ a > , < a href = "#navbars" > Navbars</ a > ).</ p >
177
+ < p > It supports the basic anchor properties < code > href</ code > , < code > target</ code > , < code > title</ code > .</ p >
178
+ < p > It also supports different properties of the normal Bootstrap MenuItem.
179
+ < ul >
180
+ < li > < code > header</ code > : To add a header label to sections</ li >
181
+ < li > < code > divider</ code > : Adds an horizontal divider between sections</ li >
182
+ < li > < code > disabled</ code > : shows the item as disabled, and prevents the onclick</ li >
183
+ < li > < code > eventKey</ code > : passed to the callback</ li >
184
+ < li > < code > onSelect</ code > : a callback that is called when the user clicks the item.</ li >
185
+ </ ul >
186
+ < p > The callback is called with the following arguments: < code > eventKey</ code > , < code > href</ code > and < code > target</ code > </ p >
187
+ </ p >
188
+ < ReactPlayground codeText = { Samples . MenuItem } />
189
+ </ div >
190
+
191
+ { /* Panels */ }
173
192
< div className = 'bs-docs-section' >
174
193
< h1 id = 'panels' className = 'page-header' > Panels < small > Panel, PanelGroup, Accordion</ small > </ h1 >
175
194
@@ -426,6 +445,19 @@ const ComponentsPage = React.createClass({
426
445
< ReactPlayground codeText = { Samples . PagerDisabled } />
427
446
</ div >
428
447
448
+ { /* Pagination */ }
449
+ < div className = 'bs-docs-section' >
450
+ < h1 id = 'pagination' className = 'page-header' > Pagination < small > Pagination</ small > </ h1 >
451
+ < h2 id = 'pagination-examples' > Example pagination</ h2 >
452
+
453
+ < p > Provide pagination links for your site or app with the multi-page pagination component. Set < code > items</ code > to the number of pages. < code > activePage</ code > prop dictates which page is active</ p >
454
+ < ReactPlayground codeText = { Samples . PaginationBasic } />
455
+
456
+ < p > More options such as < code > first</ code > , < code > last</ code > , < code > previous</ code > , < code > next</ code > and < code > ellipsis</ code > .</ p >
457
+ < ReactPlayground codeText = { Samples . PaginationAdvanced } />
458
+
459
+ </ div >
460
+
429
461
{ /* Alerts */ }
430
462
< div className = 'bs-docs-section' >
431
463
< h1 id = 'alerts' className = 'page-header' > Alert messages < small > Alert</ small > </ h1 >
@@ -607,6 +639,7 @@ const ComponentsPage = React.createClass({
607
639
< code > getValue()</ code > will not work when used this way.</ p >
608
640
< ReactPlayground codeText = { Samples . InputWrapper } />
609
641
</ div >
642
+
610
643
</ div >
611
644
612
645
< div className = 'col-md-3' >
@@ -623,6 +656,7 @@ const ComponentsPage = React.createClass({
623
656
< SubNav href = '#buttons' key = { 1 } text = 'Buttons' >
624
657
< NavItem href = '#btn-groups' key = { 2 } > Button groups</ NavItem >
625
658
< NavItem href = '#btn-dropdowns' key = { 3 } > Button dropdowns</ NavItem >
659
+ < NavItem href = '#menu-item' key = { 25 } > Menu Item</ NavItem >
626
660
</ SubNav >
627
661
< NavItem href = '#panels' key = { 4 } > Panels</ NavItem >
628
662
< NavItem href = '#modals' key = { 5 } > Modals</ NavItem >
@@ -633,19 +667,20 @@ const ComponentsPage = React.createClass({
633
667
< NavItem href = '#navbars' key = { 10 } > Navbars</ NavItem >
634
668
< NavItem href = '#tabs' key = { 11 } > Togglable tabs</ NavItem >
635
669
< NavItem href = '#pager' key = { 12 } > Pager</ NavItem >
636
- < NavItem href = '#alerts' key = { 13 } > Alerts</ NavItem >
637
- < NavItem href = '#carousels' key = { 14 } > Carousels</ NavItem >
638
- < NavItem href = '#grids' key = { 15 } > Grids</ NavItem >
639
- < NavItem href = '#thumbnail' key = { 16 } > Thumbnail</ NavItem >
640
- < NavItem href = '#listgroup' key = { 17 } > List group</ NavItem >
641
- < NavItem href = '#labels' key = { 18 } > Labels</ NavItem >
642
- < NavItem href = '#badges' key = { 19 } > Badges</ NavItem >
643
- < NavItem href = '#jumbotron' key = { 20 } > Jumbotron</ NavItem >
644
- < NavItem href = '#page-header' key = { 21 } > Page Header</ NavItem >
645
- < NavItem href = '#wells' key = { 22 } > Wells</ NavItem >
646
- < NavItem href = '#glyphicons' key = { 23 } > Glyphicons</ NavItem >
647
- < NavItem href = '#tables' key = { 24 } > Tables</ NavItem >
648
- < NavItem href = '#input' key = { 25 } > Input</ NavItem >
670
+ < NavItem href = '#pagination' key = { 13 } > Pagination</ NavItem >
671
+ < NavItem href = '#alerts' key = { 14 } > Alerts</ NavItem >
672
+ < NavItem href = '#carousels' key = { 15 } > Carousels</ NavItem >
673
+ < NavItem href = '#grids' key = { 16 } > Grids</ NavItem >
674
+ < NavItem href = '#thumbnail' key = { 17 } > Thumbnail</ NavItem >
675
+ < NavItem href = '#listgroup' key = { 18 } > List group</ NavItem >
676
+ < NavItem href = '#labels' key = { 19 } > Labels</ NavItem >
677
+ < NavItem href = '#badges' key = { 20 } > Badges</ NavItem >
678
+ < NavItem href = '#jumbotron' key = { 21 } > Jumbotron</ NavItem >
679
+ < NavItem href = '#page-header' key = { 22 } > Page Header</ NavItem >
680
+ < NavItem href = '#wells' key = { 23 } > Wells</ NavItem >
681
+ < NavItem href = '#glyphicons' key = { 24 } > Glyphicons</ NavItem >
682
+ < NavItem href = '#tables' key = { 25 } > Tables</ NavItem >
683
+ < NavItem href = '#input' key = { 26 } > Input</ NavItem >
649
684
</ Nav >
650
685
< a className = 'back-to-top' href = '#top' >
651
686
Back to top
0 commit comments