From cfc6773cb9d115c4657945e3f6db7d2500c82852 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Mon, 16 Mar 2020 09:51:13 -0400 Subject: [PATCH] docs(segment): clarify usage of scrollable segments (#20765) resolves #20692 --- core/src/components/segment/readme.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/core/src/components/segment/readme.md b/core/src/components/segment/readme.md index a9b00f48b7..d8dbf5a0bf 100644 --- a/core/src/components/segment/readme.md +++ b/core/src/components/segment/readme.md @@ -4,6 +4,9 @@ Segments display a group of related buttons, sometimes known as segmented contro Their functionality is similar to tabs, where selecting one will deselect all others. Segments are useful for toggling between different views inside of the content. Tabs should be used instead of a segment when clicking on a control should navigate between pages. +### Scrollable Segments + +Segments are not scrollable by default. Each segment button has a fixed width, and the width is determined by dividing the number of segment buttons by the screen width. This ensures that each segment button can be displayed on the screen without having to scroll. As a result, some segment buttons with longer labels may get cut off. To avoid this we recommend either using a shorter label or switching to a scrollable segment by setting the `scrollable` property to `true`. This will cause the segment to scroll horizontally, but will allow each segment button to have a variable width.