Skip to content

Extra Image

Jump to bottom
Meisam Alifallhi edited this page Apr 5, 2022 · 1 revision

Basic

1

<ExImage ImgSrc="images/2.jpg" />

Text Overlay Color & Size

2

<ExImage ImgSrc="images/i1.jpg" Text="Overlay text" />
<ExImage ImgSrc="images/i1.jpg" Text="Overlay text" TextColor="TextColor.Danger" />
<ExImage ImgSrc="images/i1.jpg" Text="Overlay text" TextColor="TextColor.Warning" TextSize="HeadingSize.Is6" />

Text Position

3

<ExImage ImgSrc="images/i1.jpg" Text="Test" ContentPosition="ContentPosition.TopCenter" />
<ExImage ImgSrc="images/i1.jpg" Text="Test" ContentPosition="ContentPosition.LeftCenter" />
<ExImage ImgSrc="images/i1.jpg" Text="Test" ContentPosition="ContentPosition.Center" />
<ExImage ImgSrc="images/i1.jpg" Text="Test" ContentPosition="ContentPosition.RightCenter" />
<ExImage ImgSrc="images/i1.jpg" Text="Test" ContentPosition="ContentPosition.BottomCenter" />

Text background & Opacity

4

<ExImage ImgSrc="images/profile.jpg" ContentBackground="Background.Warning" Text="Overlay text" ContentPosition="ContentPosition.Bottom" />
<ExImage ImgSrc="images/profile.jpg" ContentBackground="Background.Warning" ContentOpacity=".5" Text="Overlay text" ContentPosition="ContentPosition.Bottom" />

Customize

5

<ExImage ImgSrc="images/i1.jpg" ContentPosition="ContentPosition.BottomCenter">
    <ChildContent>
        <Div Padding="Padding.Is2"
             Style="background-color:#d9d310; background-color:rgba(233, 237, 42, 0.78);">
            <Field>
                <FieldLabel>Email address</FieldLabel>
                <TextEdit Placeholder="Enter email">
            </Field>
        </Div>
    </ChildContent>
</ExImage>
Clone this wiki locally