Segmented Button

The Segmented Button control consists of several button parts. It provides the possibility to switch between several pages by activating one button segment at a time. Each segment may contain a text or (and) an icon. You can set a desired set of options for button segments and specify what segment should be selected.

Related resources

• Get the widget by installing the wx-svelte-core package.
• Check Segmented Button API Reference to see the list of configuration properties and events.
• Explore the samples to visualize the available features.

Initialization

To create an instance of Segmented Button on a page, you need to complete two steps:

• import the source file of the control on a page:

App.svelte

<script>
    import { Segmented } from "wx-svelte-core";
</script>

• use the <Segmented> tag to initialize the control and specify an options' set to provide content for the button's segments:

App.svelte

<script>
    import { Segmented } from "wx-svelte-core";

    const options = [
        { id: 1, name: "One"},
        { id: 2, name: "Two"},
        { id: 3, name: "Three"}
    ];
</script>

<Segmented {options} />

Setting the content of segments

You can specify the content of segments by setting an array of options, each of which will correspond to a button segment. Use the options configuration property to cope with this task.

Each option presents an object with properties presented as key:value pairs. An object of the options array may have the following properties:

• name - the text of a button segment
• icon - the name of the icon to be used in a button segment
• title - the tooltip text that will appear on hovering the mouse cursor over a button segment

Below you'll find examples of the content you can specify for button segments.

Text content

The text of segments is specified via the value of the name property of an option:

<script>
    const optionsText = [
        { id: 1, name: "One" },
        { id: 2, name: "Two" },
        { id: 3, name: "Three"}
    ];
</script>

<Segmented options={optionsText} />

Icons content

The icon property of an option serves to provide a desired icon for a segment. The name of a default icon is formed as wxi-name:

<script>
    const optionsIcons =[
        { id: 1, icon: "wxi-view-sequential" },
        { id: 2, icon: "wxi-view-grid" },
        { id: 3, icon: "wxi-view-column" }
    ];
</script>

<Segmented options={optionsIcons} />

Get more information on usage of icons in SVAR buttons.

Combination of a text and an icon

You can easily combine both a text and an icon inside a segment by using both the name and the icon properties in the option's object:

<script>
    const options = [
        { id: 1, name: "One", icon: "wxi-view-sequential" },
        { id: 2, name: "Two", icon: "wxi-view-grid" },
        { id: 3, name: "Three", icon: "wxi-view-column" }
    ];
</script>

<Segmented {options} />

Titles for segments

A title is a tooltip text that appears on hovering the mouse cursor over a button segment and may contain some extra information about it. To add a title for a segment, make use of the title property of an option. Each segment can have a title of its own, e.g.:

<script>
    const options = [
        { id: 1, name: "One", icon: "wxi-view-sequential", title: "Grid mode" },
        { id: 2, name: "Two", icon: "wxi-view-grid", title: "Tiles mode" },
        { id: 3, name: "Three", icon: "wxi-view-column", title: "Two panels mode" }
    ];
</script>

<Segmented {options} value={1} />

Related sample: Segmented Button

Setting the value

You can choose what segment should be selected in the Segmented Button with the help of the value property. As a value of this property, set the id of the corresponding option:

<script>
    const options = [
        { id: 1, name: "One", icon: "wxi-view-sequential" },
        { id: 2, name: "Two", icon: "wxi-view-grid" },
        { id: 3, name: "Three", icon: "wxi-view-column" }
    ];
</script>

<Segmented {options} value={2} />

Related sample: Segmented Button

Getting the current value

It is possible to get the value of the segment selected at the moment. For this, you need:

• specify a variable that will contain the value of the button (it may contain the initial value):

<script>
    import { Segmented } from "wx-svelte-core";

    const dataset = [
        { id: 1, name: "One"},
        { id: 2, name: "Two"},
        { id: 3, name: "Three"},
    ];

    let segment = 2;
</script>

• bind the variable to the value property of the control:

<Segmented options={dataset} bind:value={segment} />

If the name of the variable matches its value, you can use the shorthand while binding the property:

<script>
    import { Segmented } from "wx-svelte-core";

    const dataset = [
        { id: 1, name: "One"},
        { id: 2, name: "Two"},
        { id: 3, name: "Three"},
    ];

    let value = 2;
</script>

<Segmented options={dataset} bind:value />

After that the value assigned to the bound variable will be updated on each change of the selected segment.

Related sample: Segmented Button

Catching the change of the selected segment

In case you need to catch the change of the selected segment, you can do it by handling the select event. Inside the event you can get the value of the newly selected segment in the following way:

<script>
      function handleSelect(ev) {
        const newSelection = ev.detail;
        console.log(newSelection); 
        //=>{id:2}
      }
</script>

<Segmented value={1} on:select={handleSelect}/>

The handler function of the select event takes the CustomEvent object as a parameter and in its detail property it contains an object with the id of the newly selected segment.

Customizing the content of segments

Text content

You can use a template with the name of an option's field the text of which you want to show instead of the default "name" field. In the example below, the text of the "color" property is used for segments:

<script>
    const optionsText = [
        { id: 1, name: "One", color: "Blue" },
        { id: 2, name: "Two", color: "Yellow"},
        { id: 3, name: "Three", color: "Green"}
    ];
</script>

<Segmented {options} let:option>
    {option.color}
</Segmented>

Icons content

You can customize the appearance of the icons content by applying the necessary style attributes via the icon CSS class and applying the corresponding template to the "icon" field of an option:

<script>
    const optionsIcons =[
        { id: 1, icon: "wxi-view-sequential" },
        { id: 2, icon: "wxi-view-grid" },
        { id: 3, icon: "wxi-view-column" }
    ];
</script>

<Segmented {options} let:option >
    <i class="icon {option.icon}" />
</Segmented>

<style>
    .icon {
        height: 48px;
        font-size: 48px;
        line-height: 1;
        color: inherit;
    }
</style>

HTML content

If you need use a more complex content in segments of the Segmented Button, you may add some HTML markup.

For example, you can place a text under an icon. For this, you will need to wrap the template with the content of a segment in a <div> and use a CSS class that will specify the arrangement of elements in that div:

<script>
    const options = [
        { id: 1, name: "One", icon: "wxi-view-sequential" },
        { id: 2, name: "Two", icon: "wxi-view-grid" },
        { id: 3, name: "Three", icon: "wxi-view-column" }
    ];
</script>

<Segmented {options} let:option>
    <div>
        <i class="icon {option.icon}" />
        <span class="bottom">{option.name}</span>
    </div>
</Segmented>

<style>
    .icon {
        height: 48px;
        font-size: 48px;
        line-height: 1;
        color: inherit;
    }
    .bottom {
        display: block;
        text-align: center;
    }
</style>

In the above example, the templates for an icon and a text are wrapped in a div and the "bottom" CSS class defines the position of the text relative to the icon.

Related sample: Segmented Button

Styling a Segmented button

You can apply custom styling to the segments to get the desired look and feel. For this, you should specify the necessary settings in the style section of the application and set the name of the custom class as a value of the css property in the control's tag.

<div class="demo-box">
    <Segmented css="my" options={optionsText} bind:value />
</div>

<style>
    /* styling segments of the control */
    .demo-box :global(div.my button){
        background-color: lightsalmon;
        color:white;
    }
</style>

In the example the style is set as global in order to reach an isolated button control. Since segments of the button are placed in a div, the class name is added to this element ("div.my"). The name of the HTML element ("button") is set after the class name to make the selector specific for a button segment.

Styling the selected segment

To change the style of the selected segment, add the .selected selector to the button element and provide new style attributes for it, like this:

<style>
    /* styling the selected segment */
    .demo-box :global(div.my button.selected){
        background-color: blueviolet;
        color:white;
    }
</style>

The result of applying a custom style is the following: