svelte-ux
svelte-ux copied to clipboard
techniq
Collection of Svelte components, actions, stores, and utilities to build highly interactive applications.
It would be nice to remove direct usage of `@mdi/js` and allow the user to specify the icon library (still use material icons, or font awesome, feather, etc). Using something...
While [Icon](https://svelte-ux.techniq.dev/docs/components/Icon) supports a large number of icon formats, most notable when the icons are published as SVG paths in a package such as Material Design Icons or Font Awesome......
Using `mask-image` / `-webkit-mask-image` with a `linear-gradient`, fade content if scrollable, similar to [scrollShadow](https://github.com/techniq/svelte-ux/blob/master/src/lib/actions/scroll.ts#L31). See [REPL](https://svelte.dev/repl/f2a0c545ff3f4ce5b40d8030c9f1bccc?version=3.53.1) (without scroll adjustment like scrollShadow) - [x] Ease in fade based on scroll amount...
It would be useful to make sure our bundle size is as small as possible, and we are leveraging tree shaking as well. It would be great to track our...
- [Canvas Paint REPL](https://svelte.dev/repl/ae60eebb77514888b92b51365924de1e?version=4.2.2) - https://observablehq.com/@visnup/drawing-on-canvas - https://github.com/szimek/signature_pad Need to investigate use cases - Extracting drawn path (and recreating from prop) - Extract image - ...others?
Instead of using `items` / `let:pageItems`... ```svelte ``` using `data` / `let:pageData` would work better with `Table`, and generally more standard. ```svelte ```
- [Circular range slider](https://svelte.dev/repl/e5db52ead53643c381eb626c7ee0f5a8?version=4.1.2) - [Angle and Spread Input](https://svelte.dev/repl/f037080d0b0745cfbdd964f4a3d567bd?version=4.1.2) - [Angle viewer](https://svelte.dev/repl/632a82890a1848169c728c253b090cc4?version=4.1.2) - [Clock math](https://svelte.dev/repl/26a31f829f974cb7b77e475c1eed3c80?version=4.1.2) - [Arc Time Slider](https://codepen.io/nicolasjesenberger/pen/KKGJgWr) - [19x0 radial range input (old fashioned js)](https://codepen.io/sean_codes/pen/roGRLm) - [dial-input](https://codepen.io/davatron5000/pen/vYvKZqN) -...
- [ ] Support passing `img` which which loads using `` and centers/crops based on size - [Applying A Circular Crop Mask To An Image](https://pqina.nl/blog/applying-a-circular-crop-mask-to-an-image/) - [ ] Support tailwind...
- [x] Change to `variant="..."` instead of `contained` and `underlined` - [ ] Allow disabling full `ToggleGroup` or individual `ToggleOption` (#28) - [ ] Supporting changing color based on selected...
- [Pure CSS Tree](https://observablehq.com/@mootari/css-tree) - [Pure CSS Tree Menu](https://codepen.io/bisserof/pen/nrMveb) - [CSS Family Tree](https://codepen.io/Pestov/pen/AvQmxv) - [Tree view from unordered list](https://codepen.io/ross-angus/pen/jwxMjL) - [ASCII-art folder structure diagram in semantic markup + CSS](https://codepen.io/patrickhlauke/pen/azbYWZ)