Collages
People love collages. With collages we could combined several images together and make them more vivid and interesting.
Developers could apply <msc-collages />
instead of annoying HTML code & CSS setting.
All we need to do is just make a few setting and everything will be all set.
That's take a look what can <msc-collages />
do ?
Here comes some <msc-collages />
with different theme.
Basic Usage
<msc-collages />
is a web component. All we need to do is put the required script into your HTML document. Then follow <msc-collages />
's html structure and everything will be all set.
Required Script
Structure
Put <msc-collages />
into HTML document. It will have different functions and looks with attribute mutation.
Otherwise, developers could also choose remoteconfig
to fetch config for <msc-collages />
.
JavaScript Instantiation
<msc-collages>
could also use JavaScript to create DOM element. Here comes some examples.
Style Customization
<msc-collages />
uses CSS variables to hook uploader trigger theme & drop zone. That means developer could easy change it into the looks you like.
Attributes
<msc-collages />
supports some attributes to let it become more convenience & useful.
theme
Set theme id for different usage. Developers could set 1 ~ 8 theme. Default is "1".
object-fit
Set image render property. This attribute only accept cover or contain. Default is "cover".
collages
Set collages data. This should be JSON string and each element needs contains "link"、"src"、"alt"、"target" for rendering. Max count is 4.
Properties
Property Name | Type | Description |
---|---|---|
theme
|
String | Getter / Setter for theme id. |
object-fit
|
String | Getter / Setter for image render property. Only accept "cover " or "contain " |
collages
|
Object | Getter / Setter for collages data. |
Event
Event Signature | Description |
---|---|
msc-collages-click
|
Fired when <msc-collages /> clicked. Developers could get original click event from event.detail.baseEvent to do preventDefault behavior. |