Solid Resource serves 3 way to display resources:
- Default one to list, create and edit resources
- Simple List to display 5 by 5 resources
- Cards List to display on cards 3 by 3 resources
Once the package is installed, you can use the solid-resource component:
<html>
<head>
<!-- import the module in the head of the page -->
<script type="module" src="https://cdn.jsdelivr.net/npm/@startinblox/component-resource"></script>
</head>
<body>
<!-- use the component -->
<solid-resource
data-src="http://mydatasrc"
range-resource-type="http://myrangetype"
range-resource-keyword="http://myrangekeyword"
post-data-src="http://mypostdatasrc"
post-keyword="http://mypostkeyworddatasrc"
upload-dir="http://myuploadsrc"
></solid-resource>
</body>
</html>| Name | Default | Description |
|---|---|---|
| data-src | undefined |
Data source of your resource container |
| range-resource-keyword | undefined |
Data source of your keyword container |
| range-resource-type | undefined |
Data source of your resource type container |
| upload-dir | undefined |
Upload container |
| post-data-src | data-src |
(Optional) Where to post new resources |
| post-data-keyword-src | range-resource-keyword |
(Optional) Where to post new keyword |
| post-data-type-src | range-resource-type |
(Optional) Where to post new type |
| associated-circle-label | translation file |
(Optional) Label for Circle |
| circles | `` | (Optional) Circles container |
| displayMode | `` | (Optional) undefined, simplelist or cardslist |
| extra-context | {} |
(Optional) Custom extra context |
| nested-field | `` | (Optional) Target a nested field of your data-src |
| route-resource | resource |
(Optional) Route for your main resource component from simple or cards list |
| uniq | auto |
(Optional) Do not generate an uniq |
Installation:
npm installBuild with:
npm run buildWatch files & rebuild on change with this command:
npm run watch