ui

#react #ui Fairly simple widget cards with tab-able panes made with react typescript and bootstrap. We start with a generalized widget card. I gave only a few options for fixed sizes, because I want them to be consistent if you are placing a bunch together on a page. Other than that it is basically a nice frame or wrapper around whatever children you give the component. The style style={{ overflowY: "auto", overflowX: "hidden" }} is important if you want the widget to be scroll able from within the pane....

#react #ui #designpatterns Now we want to be able to dynamically load the widgets that the user wants, as well as allow them to order them. Problems: How do we give let each widget control the order of the list that’s contained in the parent? How can we make react widgets share a common interface, so they can all be rendered generically, while still allowing customization? How do we delay the creation of each widget until we have the necessary information they need to render?...