Implement Bootstrap UI components

[nathanielw]

Let me know if any are missing!

• Basic Dropdowns
  • Dropdowns with headers
  • Dropdowns with dividers
  • Dropdowns with disabled items

---

• Basic Buttons
  • Button Groups (via right-click > group position)
  • Button Dropdowns
  • Split Button Dropdowns
  • Button Dropups

---

• Text Input Fields
• Text Input Field Addons (Just use buttons and set the group position via right-click)
• Radio buttons added in v1.1.0
• Checkboxes added in v1.1.0

---

• Tabs
  • Tab Dropdowns
• Pills
  • Pill Dropdowns

---

• Default Navbar
  • Full-Width Navbar
  • Inverted Navbar
• Nav Items/Links

---

• Breadcrumbs
• Pagination
• Pager

---

• Labels
• Badges

---

• Jumbotron (Need some way of combining other components, since that's all it is) ❔

---

• Alerts
  • Dismissible Alerts
• Progress Bars
  • Progress Bars with label
  • Colourful Progress Bars
  • Striped Progress Bars
  • Stacked Progress Bars ❔

---

• List Groups (Just slightly taller button groups) ❕
• Panels
  • Panels with heading
  • Colourful Panels with heading
  • Panels with tables (add a panel then add a table on top)
  • Panels with list groups
• Wells
• Thumbnails (need to look into image loading) ❔
• Tables added in v1.1.0

Super-fancy emoji key:
‼️ Easy stuff I'll add ASAP
❗ Not as easy, but still ASAP
❕ Less important stuff that would still be nice to have
❔ Nice to have, but may have problems implementing

[gdurelle]

Amazing work. Thank you

[ubx-rmorteo]

Thank you for your work... Have you thought of including collapsables?

[nathanielw]

@ubx-rmorteo Do you an example of the type of collapsible you want?

[t4ec]

It would be also great to have checkbox and radio-button.

[bdjnk]

I see you've got panels with tables listed, but what about tables alone?

[nathanielw]

Sorry for the delayed response.

@bdjnk Thanks for the suggestion and link - I've just added a table element.

@t4ec I think Bootstrap leaves the styling of those elements to the system, so I'll have to come up with some platform-generic looking ones, but they'd definitely be useful to have. edit: added

[prikhi]

This seems pretty complete, should I remove the work-in-progress text from the Pencil readme?

[nathanielw]

Sorry for the delay responding. Yeah, it's pretty complete, definitely able to be used, so I'm happy if the WIP text is removed from Pencil's readme.

[skydevht]

No text element..

[TimeBandit]

You are the bees neez, that cats pyjamas and the dogs bollocks. Thanks! 👍

[heppa]

Thanks for your awesome work... Helps me a lot in quickly visualising bootstrap-based screens... Would it be difficult to also add glyphicons?

[nathanielw]

@heppa If you're just needing general icons, I've got a couple of collections that provide icons in Pencil (Material and Twemoji) and someone else has made a collection for FontAwesome icons (towards the bottom of https://code.google.com/archive/p/evoluspencil/downloads). I should be able to adapt the script I'm using to generate/extract the other two collections to work with GlyphIcons without too much difficulty. Not sure when I'll get it done, but I'll ping you here when it's ready :)

[heppa]

@nathanielw many thanks! Not urgent at all... Was just an additional idea. Will check out your links. I just felt like missing a bit the look & feel of a bootstrap-based app and it was due to missing icons for me... But as I said: Not urgent!

[Craig-Fisk]

@heppa @nathanielw Hey guys, I already started creating a pencil collection for the bootstrap glyphicons using the vector information in the font https://github.com/Craig-Fisk/BootstrapGlyph-Pencil-Stencil been a little while since I updated it but if theres a need for it from more than just myself I will definitely get working on it

[inadarei]

How do you indicate dropdown elements in the Button dropdown? Change of button type is from right-click, but where do you enter the text for each dropdown element? Thanks

[nathanielw]

@Craig-Fisk Nice work! I won't bother adapting my script in any hurry then.

@inadarei The item list bit of the dropdown is included as a separate element. It should be called Dropdown and you can edit the elements by just double clicking. The default items show the syntax for things like headers and highlighting items.

[inadarei]

@nathanielw thank you! Appreciate the quick response and: great stencil!

[d-ph]

Hi Nathaniel. Would it be possible to add accordion, please? In fact, it would be enough, if there were a pane's header only widget, that can be dragged on the canvas (your stencil collection currently offers panes and pane without header -- I could really use the header without a pane to model collapsed accordion, while pane with a header is enough to model an opened accordion).

Many thanks for your stencil collection. This is really useful.

Edit:
Hm, on the other hand, the well component looks like an accordion/pane header. Forget my asking then. Thanks again for the collection.

[ghost]

Panel Footer and Thumbnails would be cool. With Bootstrap 4 on the horizon for final release next year, a pencil version for it would be nice. 👍

[MikeWilliams-UK]

Would it be possible to add a bootstrap toggle
http://www.bootstraptoggle.com/