Solid Directory
Solid Directory serves 3 components:
- Solid Profile, to edit your own profile
- Solid Directory itself, profile listing component
- Solid Picture, widget for profile picture uploading
How to use
Once the package is installed, you can use the solid-directory component:
<html>
<head>
<!-- import the module in the head of the page -->
<script
type="module"
src="https://cdn.jsdelivr.net/npm/@startinblox/component-directory"
></script>
</head>
<body>
<!-- use the component -->
<solid-directory
data-src="http://mydatasrc"
range-skills="http://myrangeskills"
paginate-by="3"
></solid-directory>
</body>
</html>Parameters
| Name | Default | Description |
|---|---|---|
data-src |
undefined |
Data source of your user container |
extra-context |
{} |
Custom extra context |
range-skills |
? |
Data source of your skills container, if any |
route-chat |
undefined |
Route for chat |
paginate-by |
undefined |
How many cards per page |
show-incomplete |
undefined |
Show profile having no picture ? |
show-skills |
undefined |
Show skills filters and property ? |
SIB Picture
SIB Picture is a standalone component that allows to upload picture on my profile.
You can use it as a standalone component this way:
<html>
<head>
<!-- import the module in the head of the page -->
<script type="module" src="https://cdn.jsdelivr.net/npm/@startinblox/component-directory/solid-picture"></script>
</head>
<body>
<!-- use the component -->
<solid-picture
data-src="http://mydatasrc"
upload-src="http://mydatasrc/upload"
upload-id="id-of-the-upload-field"
nested-field="nested-object-in-resource"
fields="field-of-the-nested-resource"
next="form-submit-redirect"
additional='comma, seperated, additional, fields'
></solid-picture>
</body>
</html>Parameters
| Name | Default | Description |
|---|---|---|
data-src |
undefined |
Data source of your resource container |
upload-src |
undefined |
Upload source of your resource container |
upload-id |
undefined |
Upload ID |
nested-field |
undefined |
Nested resource container |
fields |
undefined |
Field of the nested resource |
next |
undefined |
Redirect to after form submit |
additional |
undefined |
Additional fields of the nested resource ontainer |
Developpers
Installation:
npm installBuild with:
npm run buildWatch files & rebuild on change with this command:
npm run watch