Lesson 17 of 21 · surf:ui
Standard components
The module surf:ui has the standard components: Dialog, Tabs, Menu, Toast and more. Each one is a .surf file in the compiler, so it works on each target. Each one has the roles and the keys of the WAI-ARIA Authoring Practices.A named import takes each component that the app uses. An app has no code of the other components.A Dialog is open while its bindable prop open is true. Escape, a press outside it and its close button close it. The focus returns to the button that opened it.Your turn
- Add import { Dialog } from "surf:ui"; at the top.
- Change the Button so that it sets asking = true.
- Add a Dialog with heading="Delete the file?" and bind:open={asking}. Put two buttons into #fill actions { ... }. One sets asking = false. The other one also sets deleted = true.
Preview
1 error
The sandbox needs a browser.