Note how each of the elements is of the type “button”. In order to display the source code, simply click on the “” button shown above. Some examples of colored buttons with the source code look like this: You can find these under the “Elements” tab in the Semantic UI documentation. Buttonsīuttons are used to trigger some action when pressed almost every webpage will use buttons at some point. We will examine Buttons, Cards, and Forms. Each component page gives an overview of what the element is used for and provides various examples with the source code and the output. Let’s quickly check out a few of the components to get a feel for how Semantic UI code works. There are different kinds of elements or groups of elements under the tabs: “Elements”, “Collections”, “Views”, and “Modules”. In the documentation, we can find the layout and frame elements under the tab “Layout” and the widgets and other components are spread over multiple different tabs. For now, we will spend most of our time in the documentation: Here we will take a look at the Semantic UI documentation, examine a few elements to see what the source code looks like, and then see how to add the element to our webpages. It’s a copy-and-paste framework so learning how to navigate the website to find the widgets and frames that we want will save us time in the long run. An important part of using Semantic UI is getting familiar with the website.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |