Wrapper
Wrapper creates the necessary structure to wrap elements so that full width backgrounds can be applied.
Basics
import { StyleProvider, Wrapper } from "@muil/components";
<StyleProvider>
<Wrapper>content</Wrapper>
</StyleProvider>;
Full (fluid) width header or footer
import {
StyleProvider,
Container,
Wrapper,
Row,
Column,
Image,
Text,
} from "@muil/components";
<StyleProvider>
<Container>
<Wrapper class="header" bgcolor="#8a8a8a" style={{ background: "#8a8a8a" }}>
<Container>
<Row class="collapse">
<Column small="6" valign="middle">
<Image src="https://placehold.it/200x50/663399" />
</Column>
<Column small="6" valign="middle">
<Text class="text-right">BASIC</Text>
</Column>
</Row>
</Container>
</Wrapper>
</Container>
</StyleProvider>;
Properties
Property | Type | Description |
---|---|---|
bgcolor | String | background color |
style | Object | style |
innerStyle | String | style of inner component |
className | String | class name |
innerClassName | String | class name of inner component |