Silk (@silk_hq) 's Twitter Profile
Silk

@silk_hq

Native-like swipeable sheets on the web. Bring your web app to a whole new level.

ID: 1324704652668084224

linkhttp://silkhq.co calendar_today06-11-2020 13:26:25

16 Tweet

490 Takipçi

1 Takip Edilen

Bruno Stasse (@brunostasse) 's Twitter Profile Photo

Working on revamping Silk examples' code to make them a lot more flexible and easier to drop into your project. One change I’m making is switching from props as slots to compound components that match the actual API. before → after

Working on revamping <a href="/silk_hq/">Silk</a> examples' code to make them a lot more flexible and easier to drop into your project.

One change I’m making is switching from props as slots to compound components that match the actual API.

before → after
Bruno Stasse (@brunostasse) 's Twitter Profile Photo

Want a sheet that can only be dismissed with a button tap? With Silk just set the `swipeDismissal` prop to `false` and the sheet won’t be dismissible by swipe. On iOS the user can still swipe the sheet, but it will snap back into place instead of closing.

Bruno Stasse (@brunostasse) 's Twitter Profile Photo

Little UX improvement to the music player example that'll come with the code revamp I'm working on: you'll be able to scroll the page right after swiping down the panel, without having to wait for the animation to end.

Bruno Stasse (@brunostasse) 's Twitter Profile Photo

The backdrop not covering the status bar when opening a sheet on the web makes it feel... subpar compared to native. So in Silk I baked-in the ability to blend them together by automatically dimming the theme-color in sync with the backdrop opacity. Works with any color

Bruno Stasse (@brunostasse) 's Twitter Profile Photo

Freelancers and agency owners: if you’re open to taking on projects using Silk, drop a comment with your info (or DM if you prefer). Companies have started reaching out for help with Silk projects, so next time I'd love to point them to you. Please include: - language(s)

Bruno Stasse (@brunostasse) 's Twitter Profile Photo

Just shipped a big revamp of Silk examples' code. Each example is now fully self-contained, making it much easier to just copy/paste into your own project. The generic part of the example is now also structured as compound components, matching Silk's API and providing granular

Just shipped a big revamp of Silk examples' code.

Each example is now fully self-contained, making it much easier to just copy/paste into your own project.

The generic part of the example is now also structured as compound components, matching Silk's API and providing granular
Bruno Stasse (@brunostasse) 's Twitter Profile Photo

Sheet with transient detent. The intermediate detent is removed once the sheet reaches the last detent. Swipe up or tap the input to expand. Scroll to dismiss the keyboard. Swipe down to dismiss the sheet. Made with Silk, on the web.

Bruno Stasse (@brunostasse) 's Twitter Profile Photo

Coming soon: Rich code editor hints for Silk ✨ You'll see which sub-components are required, how they compose together and what their props do without leaving your editor.

Coming soon: Rich code editor hints for Silk ✨

You'll see which sub-components are required, how they compose together and what their props do without leaving your editor.
Bruno Stasse (@brunostasse) 's Twitter Profile Photo

Rich in-editor hints for Silk just shipped! You now get information about each component, sub-component and prop inline as you type. Learn what is required, what things do and how they compose together without leaving you editor.

Bruno Stasse (@brunostasse) 's Twitter Profile Photo

Sometimes all you need is a clean, smoothly animated page. 120fps enter/exit animations. Inner scrolling with overshoot. Perfect body scroll locking. Fully accessible. Made with Silk, on the web.

Bruno Stasse (@brunostasse) 's Twitter Profile Photo

Tjek’s eTilbudsavis web app, home to digital catalogs from brands across Scandinavia, is now using Silk. It looks great, check it out 👇

Bruno Stasse (@brunostasse) 's Twitter Profile Photo

Just added an `updateThemeColor()` function to Silk that lets you update the page `theme-color` used for the iOS status bar while preserving the dimming that makes it blend with the Sheet's Backdrop. Pretty useful when you're switching between light/dark mode from within a

Charlie Joseph (@heychazza) 's Twitter Profile Photo

Continuing to develop AtoBeach whilst on vacation & absolutely loving Bruno Stasse’s Sheet component. I’m looking to write a blog post soon sharing my “Drawdal” component I’ve built with Silk for AtoB. If you use React and need a drawer + modal component, Silk is fkn awesome!

Continuing to develop <a href="/AtoBeach/">AtoBeach</a> whilst on vacation &amp; absolutely loving <a href="/brunostasse/">Bruno Stasse</a>’s Sheet component.

I’m looking to write a blog post soon sharing my “Drawdal” component I’ve built with Silk for AtoB.

If you use React and need a drawer + modal component, Silk is fkn awesome!