# One Of

### The Goal

Prepare an application switching content based on the *One Of* component.

![The One Of Application](https://4190342052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MjiITn8B0C9eJvihABh%2Fuploads%2Fu2CGg5EskQCbTOvHRr6Q%2Fimage.png?alt=media\&token=2969f925-8eff-4511-b0a9-dc3043b7de0b)

### The Description

In our case, the *Options Dropdown menu* will contain two parameters *Items* that selected *Value* will be checked by the *One Of* component.

### The Knowledge You Will Get

1. The Principle of how to use the One Of component.

### The Project Structure

{% tabs %}
{% tab title="View\[MainView]" %}

* [ ] MainView
  * [ ] Container\[container1]
    * [ ] Options\[dropdown]
    * [ ] One Of\[oneOf1]
      * [ ] Container(#1)
        * [ ] Text\[text1]
      * [ ] Container(#2)
        * [ ] Text\[text2]
          {% endtab %}
          {% endtabs %}

### 1. Prepare a Basic Layout

Let's prepare a basic *Layout* containing the *Option Dropdown* menu and *One Of* component.

1. Place in `MainView` a new **Container** and set up its *ID* -> `container1`; *Item Flex* -> `Stretch`
2. Into the `container1` place a **Options**, name it `dropdown` and add two *Items*:
   1. *#1* -> *Value* -> "`first`"
   2. *#2* -> *Value* -> "`second`"
3. Then placed a **One Of** component with *ID* -> `oneOf1`; *Item Flex* -> `Stretch`; and add two *Options*:
   1. *#1* -> *Option* -> *Name* -> "`First option`"
   2. *#2* -> *Option* -> *Name* -> "`Second option`"
4. Switching the *Clog* by `oneOf1` input to each of the two *Texts* components:
   1. *First option* -> add a **Text**, name its *Value* -> "`FIRST`"; *Text Alignment* -> `Middle`; *Text Style* -> `Bold`; *Font Size* -> `Large`
   2. *Second option* -> add a **Text**, name its *Value* -> "`SECOND`"; *Text Alignment* -> `Middle`; *Text Style* -> `Bold`; *Font Size* -> `Large`

### 2. Add a Switching Conditions

Comparing the `dropdown` *Value* of `oneOf1` *Options Conditions* will trigger the display of different *Content Layouts*.

1. Switch the `oneOf1` *Conditions* to dynamic *Functions* and set up as follows:
   1. *First option* -> *Condition* -> `dropdown.value == "first"`
   2. *Second option* -> *Condition* -> `dropdown.value == "second"`

{% hint style="info" %}
Don't forget that any *Current Values* of any existing components are visible in the Data Explorer.
{% endhint %}

{% tabs %}
{% tab title="DATA EXPLORER\[dropdown]" %}
![](https://4190342052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MjiITn8B0C9eJvihABh%2Fuploads%2Fx8o07vAYKHqNRPPt55L0%2Fimage.png?alt=media\&token=df1c5de8-a943-4c08-b8ed-346a823d994f)
{% endtab %}
{% endtabs %}

### The Conclusion

The *One Of* component is an effective tool how to switch between content. Try to add more *Option Layouts* and change them by a different component method.

{% hint style="info" %}
Follow up on our *One Of* tutorial <https://youtu.be/ywBr11REwrQ>
{% endhint %}