Aurelia Slot Name

Posted onby
app.html
  1. GitHub - MeirionHughes/aurelia-template-lint: Sanity Check Of ...
  2. See Full List On Github.com
  3. Aurelia Slot
  4. Aurelia Slots
  5. Cached
<template>
<requirefrom='./man-with-no-name'></require>
<requirefrom='./western-extra'></require>
<man-with-no-name>Sometimes the dead can be more useful than the living.</man-with-no-name>
<western-extra>
<h1slot='outfit'>dead man's shoes</h1>
<h2slot='weapon'>rifle</h2>
</western-extra>
</template>
app.js
index.html

Don't allow two, or more, slots to have the same name; don't allow more than one default slot; Require. Ensure require elments have a 'from' attribute; ConflictingAttributes. Ensure element doesn't have attribute combination marked as conflicting. Template controller attributes (if.bind and repeat.for on the same element) Template. The view you want to load into the layout should specify which content goes where by adding a slot attribute to each element to specify which slot it should be projected to: slot='content1'Some text 1 slot='content2'Some text 2 In the above scenario, the resulting HTML would be.

<!doctype html>
<html>
<head>
<title>Aurelia</title>
<metaname='viewport' content='width=device-width, initial-scale=1'>
</head>
<bodyaurelia-app>
<h1>Loading...</h1>
<scriptsrc='https://jdanyow.github.io/rjs-bundle/node_modules/requirejs/require.js'></script>
<scriptsrc='https://jdanyow.github.io/rjs-bundle/config.js'></script>
<scriptsrc='https://jdanyow.github.io/rjs-bundle/bundles/aurelia.js'></script>
<scriptsrc='https://jdanyow.github.io/rjs-bundle/bundles/babel.js'></script>
<script>
require(['aurelia-bootstrapper']);
</script>
</body>
</html>

GitHub - MeirionHughes/aurelia-template-lint: Sanity Check Of ...

man-with-no-name.css
.ManWithNoName {
border: 1px solid lightslategray;
border-radius: 1rem;
display: block;
padding: 1rem;
margin-bottom: 1rem;
}
man-with-no-name.html

See Full List On Github.com

<templateclass='ManWithNoName'>
<requirefrom='man-with-no-name.css'></require>
<slot></slot>
</template>

Aurelia Slot

man-with-no-name.js
western-extra.css
.WesternExtra {
border: 1px solid lightslategray;
border-radius: 1rem;
display: block;
overflow: hidden;
margin-bottom: 1rem;
}
.WesternExtra-outfit {
background-color: darkgoldenrod;
border-bottom: 1px solid lightslategray;
color: white;
padding: 1rem;
}
.WesternExtra-weapon {
background-color: lightsteelblue;
padding: 1rem;
}

Aurelia Slots

western-extra.html
<templateclass='WesternExtra'>
<requirefrom='western-extra.css'></require>
<headerclass='WesternExtra-outfit'>
<slotname='outfit'></slot>
</header>
<sectionclass='WesternExtra-weapon'>
<slotname='weapon'></slot>
</section>
</template>
western-extra.js
See full list on github.com

Cached

Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment