11/19/2023 0 Comments Xojo weblistbox listindexUsing a WebRectangle, with a line of two of code in its Opening event, will be enough. The Navigation Link Indicator is so simple and so tied to the Sidebar, that I don’t think creating an individual Atom for it is worth the effort. We have most of the Atoms and Molecules created already. Let’s quickly test it: NavigationLink demo IconImageViewer.Picture = WebPicture.BootstrapIcon(icon, iconColor) Var icon As String = If(mActive, mIconName + "-fill", mIconName) The magic is inside ShowIcon: Var iconColor As Color = If(mActive, Color.Black, Color.LightGray) Whenever you change either the Active property or IconName, the computed property will call ShowIcon. There will also be a private ShowIcon method. Technically, this could be just an ImageViewer subclass, but using a WebContainer we can also specify its default width and height. This Control is basically a Container, with an ImageViewer inside. Finally, the Vertical Navigation Control will be the Organism, combining everything into one.The Active Link Indicator will move to the active link, using an animation.The navigation link will be a Molecule, combining the icon and the label.There is no need to wrap it in a Container, in this case. For the label Atom, we can just use the WebLabel built-in control. As you notice in the Twitter example, if the link is active, the icon will be filled. There is a “Navigation Link Icon”, an Atom, which will show one of the available Bootstrap Icons.In the above image, we have identified each of them. This is how Twitter’s navigation sidebar looks like:Įach Atom, Molecule and Organism will be a Container. We will be using just plain Xojo Web Containers for creating our Atoms and Molecules. In this case, we won’t need to use any Web SDK control, CSS or JavaScript. Here is a video from Brad Frost, the person behind Atomic Design Methodology. The idea resonates perfectly with Xojo and, while we will create a few web controls in this example, you can apply it to other targets like Desktop or Mobile. Adapt it to your own personal way of building software. As long as you can compose controls with other controls, that’s perfect. Keep in mind you don’t really need to blindly follow the Atoms, Molecules and Organisms proposed categories, and don’t overthink where to categorize them. Then, we will compose more complex controls reusing the smallest. With this way of methodology in mind, we will start building the smallest controls we can. If you haven’t heard about Atomic Design before, I really recommend that you dig a bit into this topic. Brief introduction to the Atomic Design Methodology Let’s build a reusable vertical navigation, with animations, for your Xojo Web projects. Composing new controls using primitives is something you definitely want to explore.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |