nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

grid in calcite-segmented-control doesn't work

TomSellsted

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!

Trouver plus de publications taguées avec

Accepted answers

KittyHurley

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.

All comments

TomSellsted

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

TomSellsted

Thank you! I will do that!

KittyHurley

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.

TomSellsted

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?

KittyHurley

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.

Rejoindre la conversation

Les membres connectés peuvent publier, suivre les mises à jour, et plus encore. Nouveau ici ? Inscrivez-vous gratuitement.

Liens rapides

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.