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. Paul learned to program in BASIC at age 13 and has programmed in more languages than he remembers, with Xojo being an obvious favorite. When not working on Xojo, you can find him talking about retrocomputing at Goto 10 and on Mastodon new controls using primitives is something you definitely want to explore. I hope these new commands can make your time in the Xojo Code Editor more productive! To duplicate a line, put the cursor on the line and press Option+Shift+Down Arrow (use Alt instead of Option on Windows/Linux): To swap lines, put the cursor on a line and press Option+Up Arrow (Mac) or Alt+Up Arrow (Win/Linux) to move the line up in the code. Starting with Xojo 2023r1 you can now do this in the Xojo Code Editor. Similarly, you may have used the command to duplicate entire lines (or a selection). If you’ve used other code editors such as Visual Studio Code or BBEdit you may have run across a feature that lets you easily move a line or a selection up or down in the editor.
0 Comments
Leave a Reply. |
Details
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |