smartSplitter

Splitter is a layout control that allows creating dynamic layouts with resizable and collapsible items.

A splitter allows the creation of an infinite number of panes each with a different size. The size can be set via CSS selector or the property size. The element offers two orientation modes:

  • Vertical
  • Horizontal

Panes inside the Splitter can be resized in a direction based on the orientation. Several resize modes are available:

  • Adjacent
  • End
  • Proportional

An Additional liveResize property is available giving the user the possibility to monitor the resizing process at real time.

The Splitter offers full keyboard support for the dragging and collapsing operations. You can read all about it in the API docs.

Usage

Generic Splitter

The generic splitter has a vertical orientation by default. It's content is completely empty until the user creates/appends a Splitter Item.


Automatic Splitter Bars

The splitter bars between the panes are created/removed automatically when necessary. The user can lock or hide any particular splitter bar by calling the corresponding method and passing in it's index or instance.


Min/Max Limits

Splitter items can have min and max size limits by setting the corresponding property to the desired item.


Overflowing Content

By default the content of the splitter should fit it's size. If the user sets incorrect sizes or limits( min, max ) the panes will be validated in order to fill the parent completely. Setting the CSS overflow property to 'auto' or 'scroll' on element initialization will change that behavior. If set the size of the items will no longer be validated and they will be able to overflow the container. The content becomes scrollable.

A

B

Style

Customizable themes

Smart material themes are easily customizable. With a simple CSS variable changes the user is able to modify the colors of the Splitter.

By default the element uses Transparent splitter bars while the panes have a white backgorund.

Custom Elements

Introduction

The browser gives us an excellent tool for structuring web applications. It's called HTML. You may have heard of it! It's declarative, portable, well supported, and easy to work with. Great as HTML may be, its vocabulary and extensibility are limited. The HTML living standard has always lacked a way to automatically associate JS behavior with your markup... until now. Custom elements are the answer to modernizing HTML, filling in the missing pieces, and bundling structure with behavior. If HTML doesn't provide the solution to a problem, we can create a custom element that does. Custom elements teach the browser new tricks while preserving the benefits of HTML.

Smart Elements Framework

Outstanding Performance

Carefully optimized to deliver great performance on a wide range of devices and browsers. Small in size, highly modular and responsive web components.

Optimal User Experience Across Devices & Browsers

Smart HTML Elements takes the JavaScript and HTML UI development to a professional level. It is platform independent, cross-browser compatible and adjusts for the best user experience across devices.

Web Components Compliant

Smart HTML Elements is a reliable, feature rich JavaScript framework based on Custom Elements. It increases productivity and minimizes development cost.

Smart Splitter

Splitter is a layout control that allows creating dynamic layouts with resizable and collapsible items.

A splitter allows the creation of an infinite number of panes each with a different size. The size can be set via CSS selector or the property size.

Panes inside the Splitter can be resized or collapsed. Min and Max limits can be applied to each of the panes using the corresponding properties min and max.

Three resize modes available: Adjacent, End and Proportional.

Additionaly the element offers live resize mode that allows to see the resizing operation at real time.

The Splitter offers full keyboard support. You can read all about it in the API docs.

Light theme

With a simple color change the Splitter quickly changes it's appearance

Custom Elements

Introduction

The browser gives us an excellent tool for structuring web applications. It's called HTML. You may have heard of it! It's declarative, portable, well supported, and easy to work with. Great as HTML may be, its vocabulary and extensibility are limited. The HTML living standard has always lacked a way to automatically associate JS behavior with your markup... until now. Custom elements are the answer to modernizing HTML, filling in the missing pieces, and bundling structure with behavior. If HTML doesn't provide the solution to a problem, we can create a custom element that does. Custom elements teach the browser new tricks while preserving the benefits of HTML.

Smart Elements Framework

Outstanding Performance

Carefully optimized to deliver great performance on a wide range of devices and browsers. Small in size, highly modular and responsive web components.

Optimal User Experience Across Devices & Browsers

Smart HTML Elements takes the JavaScript and HTML UI development to a professional level. It is platform independent, cross-browser compatible and adjusts for the best user experience across devices.

Web Components Compliant

Smart HTML Elements is a reliable, feature rich JavaScript framework based on Custom Elements. It increases productivity and minimizes development cost.

Smart Splitter

Splitter is a layout control that allows creating dynamic layouts with resizable and collapsible items.

A splitter allows the creation of an infinite number of panes each with a different size. The size can be set via CSS selector or the property size.

Panes inside the Splitter can be resized or collapsed. Min and Max limits can be applied to each of the panes using the corresponding properties min and max.

Three resize modes available: Adjacent, End and Proportional.

Additionaly the element offers live resize mode that allows to see the resizing operation at real time.

The Splitter offers full keyboard support. You can read all about it in the API docs.

Dark theme

Orientation

smartSplitter has a vertical orientation by default.

Splitter items can be resized horizontally in that orientation.

Travel

New York City

Day reappeared. The tempest still ragged with undiminished fury; but the wind now returned to the south-east. It was a favourable change, and the Tankadere again

Share Explore

Travel

Kangaroo Valley Safari

Located two hours south of Sidney in the Southern Highlands of New South Wales, ...

Share Explore

Travel

Niagara Falls

Niagara Falls is the collective, name of three big waterfalls on the Niagara River in eastern North America, on the border between the United States and Canada. The three waterfalls are: the Horseshoe Falls, sometimes called the Canadian Falls, the American Falls, and the smaller Bridal Veil Falls. The American Falls and the Horseshoe Falls are separated with Goat Island, and the Bridal Veil Falls separated from the other waterfalls with Luna Island.

Share Explore

Unlimited music now

Listen to your favorite artists and albums whenever and whatever, online and offline.

Listen now

Supermodel

Foster the People

Halcyon Days

Ellie Goulding

Thunder

Imagine Dragons

Anywhere

Rita Ora

Vertical Splitter with two items

Splitters can also have horizontal orientation.

Splitter items can be resized vertically in that orientation.

Travel

New York City

Day reappeared. The tempest still ragged with undiminished fury; but the wind now returned to the south-east. It was a favourable change, and the Tankadere again

Share Explore

Travel

Kangaroo Valley Safari

Located two hours south of Sidney in the Southern Highlands of New South Wales, ...

Share Explore

Travel

Niagara Falls

Niagara Falls is the collective, name of three big waterfalls on the Niagara River in eastern North America, on the border between the United States and Canada. The three waterfalls are: the Horseshoe Falls, sometimes called the Canadian Falls, the American Falls, and the smaller Bridal Veil Falls. The American Falls and the Horseshoe Falls are separated with Goat Island, and the Bridal Veil Falls separated from the other waterfalls with Luna Island.

Share Explore

Unlimited music now

Listen to your favorite artists and albums whenever and whatever, online and offline.

Listen now

Supermodel

Foster the People

Halcyon Days

Ellie Goulding

Thunder

Imagine Dragons

Anywhere

Rita Ora

Horizontal Splitter with two items

Resize Modes

LiveResize property allows to observe the resize operation at real time.

The splitter has three resize modes.

The first one is called adjacent.
It allows the user to resize two adjacent splitter items.

Call
Antonny

June 20, 2018

Call
Jenifer

June 20, 2018

Call
Alister

June 20, 2018

Call
Bill

June 20, 2018

Vertical Splitter with 4 panes and resizeMode set to Adjacent

The second is called end.
It allows the user to resize the first item on the left of the focused splitter bar and the last.

Ingredients

Almond milk
Coconut water
Cucumber

Campbell

Ingredients

Tomato
Onion
Cucumber

Campbell

Ingredients

Corn
Cheese
Butter

Campbell

Ingredients

Ketchup
Maionese
Mustard

Campbell

Vertical Splitter with 4 panes and resizeMode set to End

The third is called proportional.
It allows the user to resize the first item on the left of the focused splitter bar and those that are to the right/bottom by mantaining their proportion.

Vertical Splitter with 4 panes and resizeMode set to Proportional

resizeStep property determines the step at which the items resize while dragging a splitter bar. The default step is set to 5pxs.

Demo

Splitters allow to display two or more views at once.

Screen Chrome Facebook Bluetooth Google Play Music Android OS Google Play Store YouTube Sync Mail Services Clock Android System Idle State Call Services Cloud Services Location services External Storage Security Services

Battery usage statistics by apps

Displaying multiple content in separate containers at the same time have never been easier.

What is Lorem Ipsum?

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Why do we use it?

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed lobortis mi. Sed at urna eget justo tincidunt finibus nec eu nulla. Sed vitae pretium lorem. Sed tristique, risus non pellentesque pellentesque, ligula purus ullamcorper diam, non iaculis enim orci semper nibh. Donec tincidunt ex lacus, sed ornare dui commodo at. Nullam id lectus cursus felis posuere venenatis. Phasellus gravida felis eu vestibulum luctus. Nunc convallis diam sed pretium gravida. Fusce scelerisque leo sem, vitae accumsan arcu tempus ac. Cras commodo augue mauris, eu posuere lectus lobortis auctor. Sed euismod sit amet lectus et bibendum. Aenean congue felis nunc.

Vivamus placerat quam vel eros hendrerit, id sagittis eros suscipit. Cras quis dapibus sem. Maecenas faucibus faucibus metus, sit amet viverra augue auctor quis. Quisque sed lectus sed tellus dapibus vulputate. Aenean sem est, aliquam non ornare ut, tristique et leo. Nulla vehicula urna non aliquet rutrum. Nullam imperdiet nibh a aliquam elementum. Nullam vitae mi posuere, sollicitudin magna at, ultricies magna. Aenean egestas, nulla nec faucibus dictum, sapien elit vulputate odio, ut interdum nisi velit at leo. Proin posuere ac neque id volutpat. In varius dignissim posuere.

Why do we use it?

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).

Where does it come from?

Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.

The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.

Newspaper style splitter