Mofron-comp-modalfil NPM

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)