mofron-comp-modalfil

mofron is module based frontend framework.

modal filter component for mofron

apply a dim filter to the entire screen as when displaying a modal window

Feature

• modal windows can be easily implemented by adding child components to this component
• it is possible to make the back look like frosted glass (blur)

Attention

• default visible is false
• this component must be positioned to root for enabling the "blur" function
• other components that are the same hierarchy from this component are added mofron-effect-blur.

Install

npm install mofron mofron-comp-modalfil

Sample

<setting>
    <tag load="mofron-comp-text">Text</tag>
    <tag load="mofron-comp-modalfil">Mdlfil</tag>
</setting>

<script run=after>
    mfil.visible(true);
</script>

<Text>Modal Filter</Text>
<Mdlfil name=mfil blur=(0.1rem,2000)><Mdlfil>

Parameter

| ShortForm | Parameter Name | Type | Description | |:-------------:|:---------------|:-----|:------------| | | mainColor | mixed (color) | string: background color name, #hex | | | | | array: [red, green, blue, (alpha)] | | | | key-value | style option | | | baseColor | mixed (color) | string: background color name, #hex | | | | | array: [red, green, blue, (alpha)] | | | | key-value | style option | | ◯ | blur | string (size) | blur value | | | | number | blur speed (ms) | | | speed | number | blur speed (ms) |