Ink JS UI

Beautiful js components to go with your project.

To use these components in your application you need to include the Ink.js bundle. Just add this line somewhere in your document:

<script type="text/javascript" src="http://js.sapo.pt/Bundles/Ink-v1.js"></script>

The Gallery component provides you an easy way to show images in a "carousel" format.

Besides being a responsive component, it also allows you to set other configurations such as:

  • Captions
  • Thumbnails
  • Images' maximum width and height, in the full and thumbnail version
  • Type of Layout

Want to know more?

Check the technical documentation.

The Modal component was designed to replace the common/native modal boxes that browser have, providing some features:

  • HTML formatted messages
  • Configuration of height and width of the modal
  • Remove the dismissing through the 'x'/close button. Particularly useful if you want to define another button to do the dismissing

Other options available and a more detailed explanation of the above ones are available in the technical documentation.


Open modal to view the component working.

View Source Code

Table

The Table component ease the process of improving a regular table element with some features like:

  • Pagination
  • Sorting
  • Loading through AJAX (via an endpoint)

More examples and a list of all options supported on our technical documentation.

View Source Code

Tree View

The Tree View component allows you to create a hierarchical list in a tree format or transform an existing list. It supports:

  • Multi-node trees
  • Custom state of the branches (open, closed)


Specifications and other examples, available in the technical documentation.

  • root
    • child 1
      • c
      • grandchild 1b
      • grandchild 1c
    • child 2
      • grandchild 2a
      • grandchild 2b
        • grandgrandchild 1bA
        • grandgrandchild 1bB
    • child 3
View Source Code

Sortable List

The Sortable List component transforms the rows of a list in draggable/droppable items inside of the list.

By doing that, allows the user to sort the order of the list.


Also allows other configurations, as you can see in the technical documentation.

  • first
  • second
  • third
View Source Code

Date Picker

As the name says, the Date Picker transforms a textbox into an element that, when in use, shows a calendar to help selecting a specific date.


It allows several configurations, available on the technical documentation.

.

View Source Code

Tabs

The Tabs component allows you to implement a tabbed UI, where each container is displayed as it's related tabbed is selected.


You can see several examples in technical documentation.

Home

Arnold ipsum. Well then God shouldn't have cloned my dog. I'm a cybernetic organizm. Living tissue over endoskeleton. You're not going to have your mommies right behind you to wipe your little tushies. Blondes. Consider it a divorce. Talk to the hand. Take it BACK. I'll be back. Knock knock. I did nothing. The pavement with his enemy. You LIE! I'm not shitting on you. Get down or I'll put you down. You are not you you're me. Scumbag. Bring your toy back to the carpet. Bring it back to the carpet. Dylan. You son of a bitch. Get down. Of course. I'm a Terminator. Talk to the hand. I need your clothes, your boots, and your motorcycle. Into the tunnel. My name is John Kimble and I love my car. I'll be back.

News

Aliens do exist. They're just waiting for Chuck Norris to die before they attack. When his martial arts prowess fails to resolve a situation, Chuck Norris plays dead. When playing dead doesn't work, he plays zombie. Chuck Norris invented water. Shortly after the farm animal sprang back to life and a crowd had gathered, Chuck Norris roundhouse kicked the animal, breaking its neck, to remind the crew once more that Chuck giveth, and the good Chuck, he taketh away.

Description

Aliens do exist. They're just waiting for Chuck Norris to die before they attack. When his martial arts prowess fails to resolve a situation, Chuck Norris plays dead. When playing dead doesn't work, he plays zombie. Chuck Norris invented water. Chuck Norris eats transformer toys in vehicle mode and poos them out transformed into a robot. Filming on location for Walker: Texas Ranger, Chuck Norris brought a stillborn baby lamb back to life by giving it a prolonged beard rub.

Stuff

They now play poker every second Wednesday of the month. Chuck Norris doesnt have AIDS but he gives it to people anyway. When you open a can of whoop-ass, Chuck Norris jumps out. If you have five dollars and Chuck Norris has five dollars, Chuck Norris has more money than you. A blind man once stepped on Chuck Norris' shoe. Chuck replied, "Don't you know who I am? I'm Chuck Norris!" The mere mention of his name cured this man blindness. Sadly the first, last, and only thing this man ever saw, was a fatal roundhouse delivered by Chuck Norris. Helen Keller's favorite color is Chuck Norris Chuck Norris invented water.

View Source Code

Form Validator

The FormValidator component provides an easy way to validate forms before submitting them. It can:

  • Detect required fields
  • Validate some field types
  • Detect match with password and confirmation password
  • Use custom field types


More examples and detailed configurations, in the technical documentation.

  • Radio test:

View Source Code

Behaviors

Dockable

Dockable keeps your menus visible while scrolling through the page.

Activate it by using the "ink-dockable" class. A working example of dockable is the submenu that keeps following your progress on this page.

Check the technical documentation for more details.

Collapsible

Collapsible turns your horizontal menus into vertical ones depending on the screen width. It gives you the possibility to collapse/expand your menus.

Activate it by using the "ink-collapsible" class. A working example of collapsible is the top most menu.

Check the technical documentation for more details.

Close

When clicking an element with the "ink-close" class, the first "ink-alert" or "ink-alert-block" ancestor is removed from the document.

Activate it by using the "ink-close" class inside of an element with one of the previously mentioned classes.

Check the technical documentation for more details.