Giter VIP home page Giter VIP logo

split-me's Issues

Add a css variable for the phantom-divider thickness

When setting the divider-thickness, the phantom-divider still remains wider, and the drag handle may overlap content to the right (if the split is vertical). It would be nice if we could reduce the drag handle width.

Also, if the split is vertical, and the left item is set to overflow auto/scroll, the phantom-divider (drag handle) overlaps the scrollbar and you can't scroll.

How do I set min-sizes in pixels?

Hi @alesgenova

split-me works really well. Thanks for sharing.

Just a question: How would I set min-sizes in pixels? In my use case (proxy example below) I need the left sidebar to be minimum 200px wide. Is that possible and how?

image

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Split Me Example</title>
    <script src="https://unpkg.com/split-me/dist/split-me.js"></script>
    <style>
        body {
            margin: 0px;
            width: 100vw;
            min-height: 100vh;
        }
        .dark {
            background: black;
            color: white;
        }
        .fill {
            min-height: 100vh;
            width: 100%;
        }
        .red {
            background: red;
        }
        .blue {
            background: blue;
        }
        </style>
    </head>
  <body>
    <split-me n="2" sizes="0.2, 0.8" min-sizes="0.1, 0.0">
        <div slot="0" class="fill dark"></div>
        <div slot="1" class="fill"></div>
      </split-me>
      <style>
        :root split-me {
            --divider-thickness: 8px; /* Thickness of the divider */
            --divider-color: lightgray; /* Background color of the divider */
            --divider-shadow: none; /* Shadow of the divider */
            --divider-image-h: url('https://raw.githubusercontent.com/MarcSkovMadsen/awesome-panel-extensions/master/assets/images/three_dots_vertical_5_18.png'); /* Background image of the divider when d="horizontal" */
            --divider-image-v: url('https://raw.githubusercontent.com/MarcSkovMadsen/awesome-panel-extensions/master/assets/images/three_dots_horizontal_5_18.png'); /* Background image of the divider when d="horizontal" */
        }
      </style>
  </body>

</html>

slotResized's detail shall be more informative

From your feedback from Slack, I'd suggest making an issue.

To stick with the nth's being scaled by percentage like Split.js does is generally not a bad idea. There should be no need to return the index of the divider since you can still differentiate them by assigning their specific handlers.

Personally, I would like a whole object which may be better to maintain. I would also consider extending the event with an originalEvent property in order to detect different behaviors (e.g. touch).

I guess if you're using a lot of instances, people may be better off to use an id instead of an index. That way, you can still re-acquire the NodeElement without much overhead. But I don't have a preference here, just some thoughts. Maybe declaring the divider with an provided id, only otherwise using an index since there will be no other way to make it unique.

Like this:

CustomEvent {
  detail: {
    sizes: [0.25, 0.75],
    divider: number | NodeElement | "id"
  },
  originalEvent: MouseEvent | TouchEvent
}

Let me know you what you think.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.