Media
v0.0.10
Media components put pictures, icons and video on a page. Icon draws a Heroicon by name, with its size and color set by Tailwind classes. Image shows a single picture that adapts to the screen, Gallery lays out many in a default, masonry or featured layout, Carousel steps through images or other content with its own controls, and Video plays a clip from one or more sources, with subtitles and a thumbnail.
They are generated into your Phoenix project as source code and styled with Tailwind CSS, so you can change them where they live. Each page below shows the component with examples.
- Carousel ComponentStatelessJS Carousel for Phoenix LiveView with slide slots for images, titles, links and overlaid content, plus indicators, controls and autoplay with a set interval.
- Gallery ComponentStatelessJS Image gallery for Phoenix LiveView in default, masonry or featured layouts, with column and gap props, hover animations, and a filterable category version.
- Icon ComponentStateless Draw Heroicons in Phoenix LiveView by name. Pick a style, then set size, color and animation with Tailwind classes. Other Chelekom components use it too.
- Image ComponentStateless Image component for Phoenix LiveView built on the HTML img tag, with src, alt, srcset and lazy loading, plus shadow, rounded and filter props from Tailwind CSS.
- Video ComponentStateless HTML5 video component for Phoenix LiveView with multiple source formats, subtitle tracks, thumbnails, caption styling, and ratio, width and height props.