0

I need your help!

I'm trying to make a cart with a product counter, like the notification counter that Facebook has. I currently use lightning-tabset to organize my lwc and I only need to apply CSS to a tab label.

in advance, thank you all!

enter image description here

Here is my code:

<lightning-tabset>
            <lightning-tab label="Products" title="Products" icon-name="standard:product">
                <c-screen-products cart-products={cartProducts}
                    available-products={availableProducts}
                    initial-records={initialRecords}
                    filter-records={filterRecords}
                    onchangerow={attValuesAPI}
                    onclearfilter={attValuesAPI}></c-screen-products>
                <template if:true={error}>
                    {error}
                </template>
            </lightning-tab>
            <lightning-tab icon-name="standard:webcart" title="Cart" label={cont}>
                <c-screen-cart cart-products={cartProducts}
                    available-products={availableProducts}
                    initial-records={initialRecords}
                    ondeleterow={attValuesAPI}
                    exibe-valor-total={exibeValorTotal}
                    onsaveobj={attValuesAPI}
                    onvalortotal={attValuesAPI}>
                </c-screen-cart>
                
            </lightning-tab>
        </lightning-tabset>

1 Answer 1

0

To apply CSS to a tab label in lightning-tabset, you can use the class attribute on the lightning-tab component and define your custom styles in a CSS file.

For example, you can add a class named "counter" to the lightning-tab that shows the cart products and use the ::after pseudo-element to display the number of products in the cart. Here is a sample code snippet that illustrates this idea:

<!-- YourComponent.html -->
    <lightning-tabset  >
        <lightning-tab label="Products" title="Products" icon-name="standard:product">
            <!-- your products component -->
        </lightning-tab>
        <!-- add the counter class to the lightning-tab that shows the cart products -->
        <!-- use a custom attribute to pass the number of products to the counter -->
        <lightning-tab class="counter" data-count={cont} icon-name="standard:webcart" title="Cart" label="Cart">
            <!-- your cart component -->
        </lightning-tab>
    </lightning-tabset>



/* YourComponent.css */
/* define a custom style for the counter class */
.counter {
    position: relative;
}
.counter::after {
    position: absolute;
    top: -45px;
    left: 135px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: green;
    color: white;
    text-align: center;
    line-height: 20px;
    font-size: 12px;
    font-weight: bold;
    content: attr(data-count);
}

Output: enter image description here

1
  • 1
    Thanks my friend!!! Do you saved my day!! Commented Dec 29, 2023 at 15:02

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .