topic grid in calcite-segmented-control doesn't work in Calcite Design System Questions

grid in calcite-segmented-control doesn't work

TomSellsted — Thu, 18 May 2023 16:28:40 GMT

Greetings,

I am trying to use a calcite-segmented-control and would like to keep it as horizontal as possible. I do see a grid option for the layout property, but using it has no effect on the control. I was expecting it to create a two row, three column grid of items.

What am I missing to make this work properly?

Thanks very much!

Re: grid in calcite-segmented-control doesn't work

KittyHurley — Thu, 18 May 2023 20:18:14 GMT

Hi there @TomSellsted, great catch! Exposing the layout's "grid" option is not intended, so created an issue to remove it. Segmented Control's layout should only be displayed as "horizontal" or "vertical".

If you are seeking a grid option for layout, would recommend a new enhancement request, which would include acceptance criteria and use case(s) to help with prioritization and adoption.

Re: grid in calcite-segmented-control doesn't work

TomSellsted — Thu, 18 May 2023 22:01:21 GMT

Thanks very much for the quick reply. I was really wanting a segmented control that just displayed icons and no text. The icons would be enough in this context. Is there a way to not show the value of the segmented control item?

Re: grid in calcite-segmented-control doesn't work

KittyHurley — Fri, 19 May 2023 01:37:59 GMT

Segmented Control does not currently support icons without text.

There is an an existing enhancement request, which you can add in a use case via a comment, and/or upvote the request with a thumb up reaction.

Re: grid in calcite-segmented-control doesn't work

TomSellsted — Fri, 19 May 2023 15:13:23 GMT

Thank you! I will do that!

Re: grid in calcite-segmented-control doesn't work

TomSellsted — Thu, 25 May 2023 20:07:58 GMT

I figured out how to make this work. I was able to embed icons instead of the text. Here is how it looks now, which is exactly what I was trying to do.

Here is the code:

<calcite-segmented-control id="cboStylePoint" selection-mode="single" scale="s" width="full"> <calcite-segmented-control-item value="circle" checked><calcite-icon icon="circle" scale="s"></calcite-icon></calcite-segmented-control-item> <calcite-segmented-control-item value="plus"><calcite-icon icon="plus" scale="s"></calcite-icon></calcite-segmented-control-item> <calcite-segmented-control-item value="diamond"><calcite-icon icon="diamond" scale="s"></calcite-icon></calcite-segmented-control-item> <calcite-segmented-control-item value="square"><calcite-icon icon="square" scale="s"></calcite-icon></calcite-segmented-control-item> <calcite-segmented-control-item value="triangle"><calcite-icon icon="triangle" scale="s"></calcite-icon></calcite-segmented-control-item> <calcite-segmented-control-item value="x"><calcite-icon icon="x" scale="s"></calcite-icon></calcite-segmented-control-item> </calcite-segmented-control>

Cheers!

Tom