30:[] 2e:{"title":"Resize","cells":[{"id":0,"value":"# Resize\n## A Resizable HTML Container","pinned":false,"hidden":false,"mode":"md"},{"id":48,"value":"The `resize` renders the content inside an element that can be resized,\nhorizontally. \n\nI have made this to test responsive components. It can be used like you\nwould use htl.html``.\n","pinned":false,"hidden":false,"mode":"md"},{"id":94,"value":"## Usage\n\nImport the `resize` into your your notebook:\n```js\nimport { resize } from \"@saneef/resize\"\n```\n\n...in another cell use `resize` as a [tagged template literal](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#tagged_templates):\n\n```js\nresize`

Resize

This a sample sentence for testing this component.

`\n```\n\nThat should render like this. Try resizing by dragging the handle on bottom left.","pinned":false,"hidden":false,"mode":"md"},{"id":10,"value":"resize`

Resize

This a sample sentence for testing this component.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":111,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":73,"value":"## Implementation","pinned":false,"hidden":false,"mode":"md"},{"id":5,"value":"function resize(...args) {\n const outerStyles = { paddingBottom: \"0.125rem\" };\n const innerStyles = {\n overflow: \"auto\",\n resize: \"horizontal\",\n padding: \"0.25rem\",\n border: \"1px solid #e8e8e8\",\n borderRadius: \"0.25rem\",\n width: \"fit-content\",\n maxWidth: \"100%\"\n };\n return html`

${html(...args)}

`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":31,"value":"html = htl.html","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}