`. In standard CSS, the selector `:scope` selects the root element of the DOM no matter where the selector is used. In RIU Component, however, the selector always selects the root element of the component (in this case `

`). This is the only unusual behaviour of CSS selectors, the rest is normal CSS. The selector `#say-hello` selects the button. #### 3. Create Events To make the component reactive, we added a click event to the button. In `events`, a CSS selector (`#say-hello`) was used to select the button. A click event was put in an array. The array can contain any number of events. The property `type` specified that the event is a `click` event. The property `listener` specified an event listener for the event. #### 4. Create Schema A `schema` was created with the properties `markup`, `styles` and `events`. #### 5. Create Component The component was created using `$riu`. The schema was passed as an argument in to `$riu`. Notice the use of `await` when creating the component (`$home`). This is because `$riu` is asynchronous. #### 6. Add Component Element to DOM Finally, we inserted the component into the DOM using `$HelloWorld.replace`. The function inserts the component into the DOM by replacing the element (`div#hello-world`) specified by the CSS selector passed as the parameter. ### Insertions Components, elements, markup, text and data can be inserted into a component. Items can be inserted using either attribute names or attribute values. Attribute values are used to insert data, while attribute names are used to insert other items. #### Data Data is inserted using attribute values that start with `@` and followed by the path to the value using object dot notation. Let us use `schema.utils.data` to insert data into an element's attribute. ```javascript const markup = `

`; const data = { title: "Say Hello" }; const utils = { data }; const schema = { ..., utils }; // ... ``` The attribute `title` of `` will be updated to `Say Hello`. When you hover over `span`, the tootip will desplay "Say Hello". Note that `data` was added as a property of `utils`, which was the put in the `schema`. #### Text Let us change the text displayed on the button by programatically inserting text into the markup. This is done using the attribute `riu-txt`. The span element will be replaced with the text specified in the value of the attribute. ```javascript const markup = `

`; const data = { title: "Hello" }; const texts = { action: "Say Hello" }; const utils = { data, texts }; const schema = { ..., utils }; // ... ``` The button will contain the same text as before. The value `action` of `riu-text` points to `schema.utils.texts.action`. ### Conditionals Conditionals can be used to load, show and hide elements based on a particular condition. Conditionals are set on elements using attributes. #### Loading The loading conditional lets us load content when a particular condition has been met. Let us load content using lazy loading, which is one of the loading conditionals. Markup: ```html

``` Images `image-1.png` and `image-2.png` will be loaded instantly. However, `image-3.png` will be loaded only if the user scrolls down the the area the image is supposed to occupy. The attribute `riu-loading` has a normal string or a JSON string as its value. In this case, we have used a normal string with the value `lazy`, in which case the default values for lazy loading will be used. Check out [Loading](./documentation/conditionals.md#loading) for more information. #### Display You can display elements only if a particular condition is met using the display conditional. Let us see how we can make a button not to be displayed on large screens. ```html ``` The value of attribute `riu-display` is JSON object. The object has two attributes, `type` and `conditions`. The type of display of the element is indicated by `type`. The conditions that must be met for the element to have a display value specified in `type` are put in `conditions`, an array. The array can have any number of conditions. We have used a media query to make the button not to be displayed on screens with width atleast `992px`. Check out [Display](./documentation/conditionals.md#display) for more information. ### Collections Collections are a way to turn a single element into a collection of elements containing variants of the element. ```javascript const markup = `

`; const users = ["user-1@email.com", "user-2@email.com", "user-3@email.com"]; const data = { users }; const utils = { data }; const schema = { utils }; // ... ``` In this case `@datum` refers to each item in the array `schema.utils.data.users`. The list will contain three items, each one of them containing a user email. ## Contributing Refer to our [Contributing to RIU Component](https://github.com/riu-web/riu-component/blob/main/CONTRIBUTING.md) guide for information concerning contributing. ## Contact Us You can contact us via email at . ## License This framework is under [MIT license](http://choosealicense.com/licenses/mit/). Copyright (c) 2021, __Mishieck Mwale__. --- _Source: https://npm.io/package/riu-component · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._