@@ -18,6 +18,7 @@ Just have a look at the example folder. There you can find a set of working exam
<!-- add the component wehre you like to display the links -->
<histhub-widgetendpoint="ENDPOINT"resolver="RESOLVER"location="URL TO LOOK FOR"></histhub-widget>
```
## API
### Endpoint
The endpoint defines the restapi, where the widget makes the call to get the links. Currently we provide three endpoints for different resource types.
...
...
@@ -44,5 +45,40 @@ For the `similarto` endpoint the geolinker provides a `elasticsearchresolver`. T
### Location
The location is an optional parameter. By default the widget uses the current window.location.href to make the request. You can specify the url to look for over the url parameter
### Template
The `tempate` is an optional parameter. You can provide your own template to modify the structure and styles of the widget.
## Styling
The webcomponent uses a shadow dom and encapsulate the styles. So it will not use your sites default css styles but also not change any other styles in your site. There are two option to override the component default styles
### Slots
Slots provides the possibility to override some part of the webcomponent. The histhub-widget provides a `title` and a `defaut` slot.
### Heading (slot)
You can change the Heading of the widget with the `title` slot. This slot will override the default title. In allmost all examples we use this slot to change the title. If you override a slot your site css rules applies for this element. Example #6 changes the color of the heading
#### Default Slot
If you want to display some additional text beneath the links you can use the default slot. Just put the content inside the histhub-widget element. Example #7 adds additional information under the links
### Use css Variables
To change basic visual aspects of the component you can define css variables and override default settings. You have the following options to change the styles of the shadow dom.
```css
:root{
--histhub-h3-maring:0000.5rem;
--histhub-h3-color:#000;
--histhub-h3-size:120%;
/** ul element **/
--histhub-ul-padding:0;
--histhub-ul-margin:1rem000;
--histhub-ul-display:block;
--histhub-ul-list-style:circleinside;
/** li element **/
--histhub-li-display:list-item;
--histhub-li-padding:0;
--histhub-li-margin:0;
/** a Element **/
--histhub-a-display:inline-block;
--histhub-a-color:black;
--histhub-a-hover-color:grey;
--histhub-a-hover-text-decoration:underline;
}
```
### Provide a template
You can provide your own template with your own styles. This will give you the power to modify every visual aspect of the webcomponent. You can define your own styles for the shadowdom and add or remove html elements. The example #8 uses a custom template.
<!-- You need to provide a div with id links. Here we will render the links !-->
<divid="links">Daten werden von Histhub geladen...</div>
</template>
<divclass="container">
<h1>Example of the histHub-Net widget (beta)</h1>
<p>The histhub widget can fetch sameas resources for different resoucrces. It makes a simple http request to one of the backends and gets a list of links from there. It finally renders the links in a list and display them.</p>
...
...
@@ -29,7 +69,18 @@
<h3slot="title">Example 4: Links (similarto) from geolinker dodis: Diedenhofen</h3>