{"id":13559392,"url":"https://github.com/alesgenova/split-me","last_synced_at":"2025-04-25T15:31:14.032Z","repository":{"id":32693692,"uuid":"140045799","full_name":"alesgenova/split-me","owner":"alesgenova","description":"Universal web component to create resizable split layouts","archived":false,"fork":false,"pushed_at":"2023-01-06T18:03:42.000Z","size":1155,"stargazers_count":76,"open_issues_count":14,"forks_count":13,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-04-19T02:28:25.106Z","etag":null,"topics":["html","javascript","split-layout","splitter","stenciljs","typescript","webcomponents"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/alesgenova.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-07-07T02:18:55.000Z","updated_at":"2025-01-22T21:46:16.000Z","dependencies_parsed_at":"2023-01-14T21:57:07.087Z","dependency_job_id":null,"html_url":"https://github.com/alesgenova/split-me","commit_stats":null,"previous_names":[],"tags_count":13,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alesgenova%2Fsplit-me","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alesgenova%2Fsplit-me/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alesgenova%2Fsplit-me/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alesgenova%2Fsplit-me/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/alesgenova","download_url":"https://codeload.github.com/alesgenova/split-me/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250844266,"owners_count":21496540,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["html","javascript","split-layout","splitter","stenciljs","typescript","webcomponents"],"created_at":"2024-08-01T13:00:20.902Z","updated_at":"2025-04-25T15:31:13.729Z","avatar_url":"https://github.com/alesgenova.png","language":"TypeScript","funding_links":[],"categories":["List of Awesome Components Made using StencilJS","TypeScript"],"sub_categories":["Individual Components"],"readme":"[![npm package](https://img.shields.io/npm/v/split-me.svg)](https://www.npmjs.com/package/split-me)\n[![workflow status](https://github.com/alesgenova/split-me/workflows/main/badge.svg?branch=master)](https://github.com/alesgenova/split-me/actions?query=workflow%3Amain+branch%3Amaster)\n[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/split-me)\n[![Built With Stencil](https://img.shields.io/badge/-Built%20With%20Stencil-16161d.svg?logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjIuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIgNTEyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI%2BCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI%2BCgkuc3Qwe2ZpbGw6I0ZGRkZGRjt9Cjwvc3R5bGU%2BCjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00MjQuNywzNzMuOWMwLDM3LjYtNTUuMSw2OC42LTkyLjcsNjguNkgxODAuNGMtMzcuOSwwLTkyLjctMzAuNy05Mi43LTY4LjZ2LTMuNmgzMzYuOVYzNzMuOXoiLz4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTQyNC43LDI5Mi4xSDE4MC40Yy0zNy42LDAtOTIuNy0zMS05Mi43LTY4LjZ2LTMuNkgzMzJjMzcuNiwwLDkyLjcsMzEsOTIuNyw2OC42VjI5Mi4xeiIvPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNNDI0LjcsMTQxLjdIODcuN3YtMy42YzAtMzcuNiw1NC44LTY4LjYsOTIuNy02OC42SDMzMmMzNy45LDAsOTIuNywzMC43LDkyLjcsNjguNlYxNDEuN3oiLz4KPC9zdmc%2BCg%3D%3D\u0026colorA=16161d)](https://stenciljs.com)\n\n# SplitMe - Universal Splitter\n\n`SplitMe` is a universal splitter built with [Stencil](http://stenciljs.com). It can be embedded in projects using any framework or even plain HTML.\n\nSee a [Live Demo](https://alesgenova.github.io/split-me/).\n\n\u003c!--\n```\n\u003ccustom-element-demo\u003e\n  \u003ctemplate\u003e\n    \u003cscript src=\"../webcomponentsjs/webcomponents-lite.js\"\u003e\u003c/script\u003e\n    \u003cscript src=\"https://unpkg.com/split-me/dist/split-me.js\"\u003e\u003c/script\u003e\n    \u003cstyle is=\"custom-style\"\u003e\n      .container {\n        width: 100%;\n        height: 15rem;\n      }\n      .fill {\n        width: 100%;\n        height: 100%;\n      }\n      .red {\n        background-color: #f44336;\n      }\n      .green {\n        background-color: #4CAF50;\n      }\n      .blue {\n        background-color: #3F51B5;\n      }\n      .light-green {\n        background-color: #CDDC39;\n      }\n    \u003c/style\u003e\n    \u003cdiv class=\"container\"\u003e\n      \u003csplit-me n=3\u003e\n        \u003cdiv slot=\"0\" class=\"fill red\"\u003e\u003c/div\u003e\n        \u003csplit-me slot=\"1\" n=2 d=\"vertical\"\u003e\n          \u003cdiv slot=\"0\" class=\"fill blue\"\u003e\u003c/div\u003e\n          \u003cdiv slot=\"1\" class=\"fill green\"\u003e\u003c/div\u003e\n        \u003c/split-me\u003e\n        \u003cdiv slot=\"2\" class=\"fill light-green\"\u003e\u003c/div\u003e\n      \u003c/split-me\u003e\n    \u003c/div\u003e\n  \u003c/template\u003e\n\u003c/custom-element-demo\u003e\n```\n--\u003e\n\n[![demo](./demo.gif)](https://alesgenova.github.io/split-me/)\n\n## Table of Contents\n\n- [Setup](#setup)\n- [Basic Usage](#basic-usage)\n- [Advanced Usage](#advanced-usage)\n  - [Properties](#properties)\n  - [Events](#events)\n  - [Saving State](#saving-state)\n- [Styling](#styling)\n\n## Setup\n\n### Option 1 (HTML)\n\nAdd the `SplitMe` script tag to your `index.html`:\n\n```\n\u003cscript src=\"https://unpkg.com/split-me/dist/split-me.js\"\u003e\u003c/script\u003e\n```\n\n### Option 2 (React / Angular / Vue)\n\nAdd `SplitMe` to your project:\n\n```\nnpm install --save split-me\n```\n\nImport `SplitMe` in your `index.js`:\n\n```js\nimport { defineCustomElements as defineSplitMe } from 'split-me/loader';\n\ndefineSplitMe(window);\n```\n\n## Basic Usage\n\nUse the `split-me` tag anywhere you like. Set the number of slots in the splitter through the `n` attribute. Set the order the inner elements through the `slot` attribute:\n\n```html\n\u003csplit-me n=\"2\"\u003e\n  \u003cdiv slot=\"0\" class=\"fill red\"\u003e\u003c/div\u003e\n  \u003cdiv slot=\"1\" class=\"fill green\"\u003e\u003c/div\u003e\n\u003c/split-me\u003e\n\n\u003cstyle\u003e\n  .fill {\n    height: 100%;\n    width: 100%;\n  }\n\u003c/style\u003e\n```\n\nSplitters can be arbitrarily nested into each other to achieve any layout.\n\n```html\n\u003csplit-me n=\"3\" sizes=\"0.3, 0.3, 0.4\" min-sizes=\"0.2, 0.0, 0.0\"\u003e\n  \u003cdiv slot=\"0\" class=\"fill red\"\u003e\u003c/div\u003e\n  \u003cdiv slot=\"1\" class=\"fill green\"\u003e\u003c/div\u003e\n  \u003csplit-me slot=\"2\" n=\"2\" d=\"vertical\" fixed\u003e\n    \u003cdiv slot=\"0\" class=\"fill blue\"\u003e\u003c/div\u003e\n    \u003cdiv slot=\"1\" class=\"fill magenta\"\u003e\u003c/div\u003e\n  \u003c/split-me\u003e\n\u003c/split-me\u003e\n```\n\n## Advanced Usage\n\n### Properties\n\n| Property   | Attribute   | Description                                                                                             | Type                         |\n| ---------- | ----------- | ------------------------------------------------------------------------------------------------------- | ---------------------------- |\n| `d`        | `d`         | The direction of the splitter.                                                                          | `\"horizontal\" \\| \"vertical\"` |\n| `fixed`    | `fixed`     | Prevent the splitter from being resized.                                                                | `boolean`                    |\n| `maxSizes` | `max-sizes` | The maximum sizes of the slots. Same format as `sizes`                                                  | `number[] \\| string`         |\n| `minSizes` | `min-sizes` | The minimum sizes of the slots. Same format as `sizes`                                                  | `number[] \\| string`         |\n| `n`        | `n`         | The number of slots in the splitter.                                                                    | `number`                     |\n| `sizes`    | `sizes`     | The initial sizes of the slots. Acceptable formats are: `sizes=\"0.33, 0.67\"` or `sizes=\"50%, 25%, 25%\"` | `number[] \\| string`         |\n| `throttle` | `throttle`  | The minimum time (in ms) between resize events while dragging.                                          | `number`                     |\n\n### Events\n\n| Event         | Detail       | Description                                            |\n| ------------- | ------------ | ------------------------------------------------------ |\n| `slotResized` | IResizeEvent | Emitted every time dragging causes the slots to resize |\n\n```typescript\ninterface IResizeEvent {\n  sizes: number[]; // [0.25, 0.75]\n  divider: number; // internal divider index\n  originalEvent: MouseEvent | TouchEvent; // event that triggered resize\n}\n```\n\n#### Saving State\n\n```javascript\nfunction handle(event) {\n  // extrapolate details\n  const { sizes, divider, originalEvent } = event.detail;\n  const sourceElement = event.target;\n\n  console.log(sourceElement, originalEvent);\n  console.dir({ divider, sizes });\n\n  // store state\n  localStorage.setItem('split-sizes', sizes);\n}\n\nconst el = document.querySelector('split-me');\n\n// loads sizes, but only if they have not been set yet.\nel.sizes = el.sizes || localStorage.getItem('split-sizes');\n\n// listen on changes\nel.addEventListener('slotResized', handle);\n```\n\n## Styling\n\n`SplitMe` exposes a few CSS variables that can be overridden in order to adjust the styling of the dividers (gutters) to your liking.\n\nThis is the list of variables and their default values:\n\n```css\n:host {\n  --divider-length: 100%; /* Length of the divider along the principal axis */\n  --divider-thickness: 0.15rem; /* Thickness of the divider */\n  --divider-color: #eeeeee; /* Background color of the divider */\n  --divider-shadow: 0 0 0.3rem black; /* Shadow of the divider */\n  --divider-image-h: none; /* Background image of the divider when d=\"horizontal\" */\n  --divider-image-v: none; /* Background image of the divider when d=\"vertical\" */\n  --divider-background-repeat: no-repeat; /* Repeat rule of the background image */\n  --divider-background-position: center; /* Position of the background image */\n  --phantom-divider-thickness: 2rem; /* Thickness of the phantom divider used to grab mouse events */\n}\n```\n\nAny of these variables can be overridden when using `SplitMe` in your app.\nFor example, to make the dividers thicker and change their color to yellow:\n\n```html\n\u003csplit-me n=\"2\"\u003e\n  \u003cdiv slot=\"0\" class=\"fill red\"\u003e\u003c/div\u003e\n  \u003cdiv slot=\"1\" class=\"fill green\"\u003e\u003c/div\u003e\n\u003c/split-me\u003e\n\n\u003cstyle\u003e\n  :root split-me {\n    --divider-thickness: 0.75rem;\n    --divider-color: yellow;\n  }\n\u003c/style\u003e\n```\n\n## TODO\n\n- ~~Prevent resizing~~\n- ~~Specify initial sizes~~\n- ~~Specify minimum and maximum sizes~~\n- ~~Customizable splitter style~~\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falesgenova%2Fsplit-me","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falesgenova%2Fsplit-me","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falesgenova%2Fsplit-me/lists"}