split

split copied to clipboard

Why isn't there a live demo of the split in action on your site?

I thought that too.

Here are some examples that I put together.

https://github.com/LondonWebFactory/bootstrap-split

I made one you can check it here.

http://jsfiddle.net/0zbj37kh/23/

@LondonWebFactory your link has an error in its markdown and actually goes somewhere else. I had to copy and paste the text of your url rather than clicking on it. Here is the correct link https://github.com/LondonWebFactory/bootstrap-split

Hello.

I just discovered split. Does anyone have react example with both horizontal/vertical splits? I can't seem to get my head around it.

For example, I've seen the example below: http://jsfiddle.net/3ouzzzxb/

How would this be re-written in react?

Thanks

No examples no demos no full code example, i don't understand how hard to create 2-3 examples for start going?

I don't know if you guys are joking or what. There are 2 live demos on the main page, have been for at least 2 years 🤣

https://split.js.org/

here's one

They are referring to Split-grid.js, which doesn't have its own landing page, and the example from split.js won't work because in -grid you need to bring your own gutters. It is s quite confusing that they share github repo.

Agreed - definitely needs a live demo or a simple copy-paste to get people started. Here's one that I found:

https://jsfiddle.net/oskar/rcqkox3t/

Edit: Looks like split.js.org now has some nice simple demos. In case anyone wants a quick copy-paste:

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/split-grid.min.js"></script>

<style>
  body {
    height: 100%;  
  }
  .grid {
    display: grid;
    grid-template-columns: 1fr 10px 1fr;
    height:100%;
  }

  .vertical-gutter {
    grid-area: 1 / 2 / 4 / 2;
    border: solid 1px #cacaca;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==');
    background-repeat: no-repeat;
    background-position: center;
    cursor: ew-resize;
    border-top: none;
    border-bottom: none;
    background-color: #ebebeb;
  }
</style>

<div class="grid">
  <div>
    left side
  </div>
  <div>
    right side
  </div>
  <div class="vertical-gutter"></div>
</div>
<script>
  Split({
    columnGutters: [{
      track: 1,
      element: document.querySelector('.vertical-gutter'),
    }],
  })
</script>