awesome-layout v0.8.0
Awesome-Layout
An awesome way to do layout.
Installation
From NPM
npm i awesome-layout
From CDN
<script type="module" src="https://unpkg.com/awesome-layout"></script>
Usage
Importing
Using <script>
tag
You can either grab the code using CDN or using NPM.
If you grab it from the CDN, then you just need to directly put the below code into your HTML file.
<script type="module" src="https://unpkg.com/awesome-layout"></script>
If you grab it from NPM, then you might need ajust the src
. The code should be located at node_modules/awesome-layout/dist/awesome-layout/awesome-layout.esm.js.
Note that type="module"
is an ES6 syntax and only works in modern browsers. It is required to use type="module"
and we do not provide the ES5 version.
Using loader
If you need to import inside JavaScript code, using the loader is the suggested way. Basically, you want to call defineCustomElements()
from the loader. Optionally, you can call applyPolyfills()
first. For different project types, please check below sections for more details.
Vanilla JS
First, install using NPM.
Then put below code in your JS file.
import { defineCustomElements } from "node_modules/awesome-layout/loader";
defineCustomElements();
And make sure you import this JS file using type="module"
like below.
<script type="module" src="path/to/the/js/file"></script>
Note that type="module"
is an ES6 syntax and only works in modern browsers.
You can check here for more details for Vanilla JS importing.
Angular
Please check here for details. Just make sure you import defineCustomElements()
from node_modules/awesome-layout/loader instead.
React
We suggest to use our React wrapper package awesome-layout-react.
However, if you still want to use the web component directly, please check here for details. Just make sure you import defineCustomElements()
from node_modules/awesome-layout/loader instead.
Vue
Please check here for details. Just make sure you import defineCustomElements()
from node_modules/awesome-layout/loader instead. In addition, when you ignore elements, you should ignore all elements starting with awesome-
.