me

Default panel

Widget Panel comes with four basic functions (close, collapse, expand, refresh). Panel allows you to enable support for jquery-ui sortable by adding a class .sortable-item to Panel (assuming you have added an attribute data-toggle="sortable" to the Panel parent). Click and drag Panel Icon to se how it work!

How to make a basic Panel? Please see Bootstrap docs about Panel.

Panel close actions

Panel actions close support with animate.css (only exits animation) by Dan Eden. Add attribute data-animate="animateOutName" to the action close button to activate custom animate close Panel.

If you close the Panel it same you adding class .hide to Panel. Just remove class .hide to show it again.

Support all of Animate.css

Expand actions

Expand make a widget to toggle full window or fullscreen. Add attribute data-expand="#panel-id" to activate it, adding attribute data-expand-mode="fullscreen" to fullscreen mode. Expand feature also allow you to hide/show a element on screen toggle by adding class .hide-on-expand or .show-on-expand

This block show on expand

Commodo lobortis. Nascetur sed, fringilla dolor, etiam feugiat massa. Mauris tortor suspendisse, mauris etiam vitae. Quam in sunt. Tempor ultrices lacinia. Velit dis.

This block hide on expand

Ridiculus tristique sed, feugiat tortor commodo. Mollis urna, ac hendrerit egestas, et adipiscing. Phasellus id pharetra. At dui, eget convallis, accumsan elementum. Adipiscing pellentesque. Purus vestibulum urna.

Fullscreen Support browsers.
Safari 5.1 doesn't support use of the keyboard in fullscreen.

With table no-sortable

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Sortable handler

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni, at, deserunt, eveniet, iure aperiam tempore facilis quam ut beatae dolores voluptate error voluptatibus quis minus repellendus qui commodi sint! Inventore.

Play with button

Easily Use button like a toolbar, best support with .btn-sm and .btn-xs

Please click on update button below!

Contextual alternatives

Easily make a panel more meaningful to a particular context by adding any of the contextual state classes (panel-primary, panel-success, panel-info, panel-warning, panel-danger). Please select a color to see contextual demo (click on color chooser actions ).

You can activate toggle contextual Panel by adding attributes data-context="panel-context-class" data-target="#panel-id" on your custom action.

Panel refresh actions

Panel actions refresh allow you to update data inside Panel via ajax. Just add data-refresh="#panel-id" and see how it work. Targeting action url via attribute data-url="path/target/file" and custom loader type with attribute data-loader="loader-name" (See avilable Loaders).

By default data will replace on Panel Body .panel-body, But you can customize it with attribute data-target-place="#target-place"

NOTE: Sometime, you may get an error message when refreshing a Panel. If your Panel have Panel body, error message will placed on there. But if you not have Panel Body on your Panel, error will placed after Panel Heading.

Collapse actions

Collapse just hide the Panel Body, Table and List Group inside Panel. If your panel have a footer, its not include on hide elements. When you want make it or other elements include to collapse, just add class .panel-collapse-element. Add attribute data-collapse="#panel-id" to actions button.

Default Collapse actions

Add class .panel-collapsed to Panel when you want to collapse it by default.

Scroll nice

Just add attribute data-toggle="niceScroll" on Panel Body or other elements you want to make a Nice Scroll and define the scroll wrapper target (required) data-scroll-wrapper=".wrapper-scroll" (can use with attribute class or id).

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus, dicta, sed quod veniam inventore nesciunt doloremque accusamus modi quasi tempore ratione excepturi cupiditate fuga iusto molestiae officiis saepe aperiam fugit qui neque culpa dolore aspernatur nemo totam quas dolorum dolor molestias autem quae quisquam.

Consequatur, qui distinctio aperiam itaque sapiente amet quaerat hic. Quia, veritatis, assumenda, iste dolor laboriosam tenetur vitae neque illum sapiente esse expedita ipsum dolore tempora fugiat obcaecati consectetur facilis commodi fuga eveniet voluptates reprehenderit a culpa libero optio asperiores ad enim accusantium. Suscipit, aspernatur, laborum, ad cumque quos omnis quisquam inventore repudiandae fugiat alias aut qui?

Consequatur, qui distinctio aperiam itaque sapiente amet quaerat hic. Quia, veritatis, assumenda, iste dolor laboriosam tenetur vitae neque illum sapiente esse expedita ipsum dolore tempora fugiat obcaecati consectetur facilis commodi fuga eveniet voluptates reprehenderit a culpa libero optio asperiores ad enim accusantium. Suscipit, aspernatur, laborum, ad cumque quos omnis quisquam inventore repudiandae fugiat alias aut qui?

List group & slippylist

  • hold & reorder
  • 5
    Swipe,
  • or instantly hold & reorder
  • or either
  • or none of them.
  • Can play nicely with:
  • interaction
  • CSS transforms
  • and selectable text, even though animating elements with selected text is a bit weird.
  • iOS Safari
  • Android Firefox
  • Mobile Chrome
  • Oprea Presto and Blink