jio-dimmer

Props

Prop name	Description	Type	Values	Default
isEnabled	Whether the dimmer is currently visible	boolean	-
hideOnLargeScreen	Whether to hide the dimmer on larger windows	boolean	-

View on Gitlab

General

This component is used to dim the background, so that a particular element becomes emphasized. For instance, when interacting with the navbar, other elements on the page may be dimmed.

Code examples

A button that enables the dimmer. Click the dimmed area to remove it.

<template>
  <div class="jio-core">
    <jio-button @click="enableDim">Enable dimmer</jio-button>
    <jio-dimmer :isEnabled="isDimEnabled" @click="disableDim" />
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";

const isDimEnabled = ref(false);

function enableDim(): void {
  isDimEnabled.value = true;
}

function disableDim(): void {
  isDimEnabled.value = false;
}
</script>

jio-dimmer ​

Props ​

General ​

Code examples ​

jio-dimmer

Props

General

Code examples