calcite-tab dismissible/closable?

[Ranga_Tolapi]

Possible to make calcite-tab dismissible/closable? Like shown in the below screenshot.

[KittyHurley]

Hi @Ranga_Tolapi, the Tab components (Tab Title and Tab) only support selected and disabled states, so it wouldn't be possible to fully close/dismiss at this time.

Depending on the use case, we do have a few components which have some similar functionality, such as Accordion when using a "single-persist" selectionMode. Where content isn't fully dismissible, it could be focused.

We have an open enhancement request to follow along, or comment on to provide additional use cases for inclusion as well.

[Ranga_Tolapi]

Hi @KittyHurley, we would like to show multiple FeatureTable widgets in multiple tabs (calcite-tab) and allow users to dismiss/close the tab. Any plans to include dismissible/closable feature for calcite-tab?

[KittyHurley · Accepted solution]

Hi @Ranga_Tolapi the above enhancement request was added to the Calcite 1.4.0 release earlier this year on May 25, and is available from 1.4.0 to our current version released earlier today (1.10.0).

Below is an example implementation, which adds the "closable" attribute to the Tab Title component:

<calcite-tabs>
  <calcite-tab-nav slot="title-group">
    <calcite-tab-title selected closable>
      Watercraft
    </calcite-tab-title>
    <calcite-tab-title closable>Automobiles</calcite-tab-title>
    <calcite-tab-title closable>Aircrafts</calcite-tab-title>
  </calcite-tab-nav>
  <calcite-tab selected>
    <calcite-notice icon="embark" open>
      <div slot="message">Recommended for coastal use</div>
    </calcite-notice>
  </calcite-tab>
  <calcite-tab>
    <calcite-notice icon="car" open>
      <div slot="message">A good choice for inland adventure</div>
    </calcite-notice>
  </calcite-tab>
  <calcite-tab>
    <calcite-notice icon="plane" open>
      <div slot="message">Cross continents quickly</div>
    </calcite-notice>
  </calcite-tab>
</calcite-tabs>