Dynamic CSS in LWC

February 14, 2021 nisarkhan LWC, 0

&lt;template>
    &lt;lightning-card title="Dynamic CSS">
        &lt;div class="slds-var-m-around_medium">
            &lt;lightning-input type="number" value={percent} label="Percentage" 
            onkeyup={changeHandler}>&lt;/lightning-input>
            &lt;div style={percentage} class="slds-notify slds-notify_alert slds-theme_alert-texture slds-theme_error" role="alert">
              some message!!!
            &lt;/div>
        &lt;/div>
    &lt;/lightning-card>
&lt;/template>

<lightning-card title="Dynamic CSS">

<lightning-input type="number" value={percent} label="Percentage"

onkeyup={changeHandler}></lightning-input>

some message!!!

</div>

</lightning-card>

</template>

import { LightningElement } from 'lwc';

export default class DynamicCss extends LightningElement {
    percent = 10
    changeHandler(event){
        this.percent = event.target.value
    }
   get percentage(){
        return `width:${this.percent}%`
    }
}

import { LightningElement } from 'lwc';

export default class DynamicCss extends LightningElement {

percent = 10

changeHandler(event){

this.percent = event.target.value

}

get percentage(){

return `width:${this.percent}%`

}

Accessing Elements in the Component in LWC Lifecycle Hooks in Mounting Phase in LWC – Parent/Child

Dynamic CSS in LWC

Leave a Reply Cancel reply

Pages

Categories

Archives