open-index/open-npm huggingface dataset:
npm package: @metagrid/svelte-metagrid-widget
Description: svelte metagrid component
Latest version: 0.0.1

# svelte metagrid widget
A simple svelte component to display metagrid links in your project.

## Install

```bash
npm install @metagrid/svelte-metagrid-widget
// or
yarn add @metagrid/svelte-metagrid-widget
```

## Usage

Simply import the component into your project and use it. The component has no styles. So you have to add some css.

```sveltehtml
<script>
	import MetagridWidget from '@metagrid/svelte-metagrid-widget';
</script>

<MetagridWidget identifier="5" provider="dodis" language="en" includeDescription="true" />
```

## Props

### provider

The slug of your provider f.e. dodis

Type: String

Required: true

### identifier

The identifier of the person you want to fetch data for.

Type: String

Required: true

### langauge

The language of the widget

Type: string

Required: false

Default: de

### includeDescription

Get additional information for the provider like a description

Typ: Boolean

Required: false

Default: false

## Styling

The component has no styling. You have to theme it to your need. The following css-classes are available for theming:

```css
/* The root element of the list with the links */
ul.metagrid-list {
}
/* The li element of the link list */
li.metagrid-item {
}
/* The link itself */
a.metagrid-link {
}
/* The credit section of metagrid. Please don't remove that */
div.metagrid-credit {
}
```

## Development

If you find bugs you an open an issue or send us a pull request. We welcome contributions!

This is a svelte-kit project. To develop you can run `yarn dev`. To build the project run `yarn build`. To publish `cd package && npm publish`
npm package: @metagrid/vue-metagrid-widget
Description: Vue 3 metagrid component
Latest version: 1.0.0

# Vue metagrid widget

A simple vue3 component to display metagrid links in your vue project.

## Install

```bash
npm install @metagrid/vue-metagrid-widget
// or
yarn add @metagrid/vue-metagrid-widget
```

## Usage

Simply import the component into your project and use it. The component has no styles. So you have to add some css.

```vue
<script setup lang="ts">
import MetagridWidget from "@metagrid/vue-metagrid-widget";
</script>

<template>
  <MetagridWidget
    provider="dodis"
    identifier="5"
    :include-description="true"
    language="fr"
  ></MetagridWidget>
</template>

<style>
.metagrid-list {
  padding: 0;
}
.metagrid-item {
  list-style: none;
  display: inline-block;
  margin-right: 1em;
}
.metagrid-credit {
  font-size: 75%;
}
</style>
```

## Props

### provider

The slug of your provider f.e. dodis

Type: String

Required: true

### identifier

The identifier of the person you want to fetch data for.

Type: String

Required: true

### langauge

The language of the widget

Type: string

Required: false

Default: de

### include-description

Get additional information for the provider like a description

Typ: Boolean

Required: false

Default: false

## Styling

The component has no styling. You have to theme it to your need. The following css-classes are available for theming:

```css
/* The root element of the list with the links */
ul.metagrid-list {
}
/* The li element of the link list */
li.metagrid-item {
}
/* The link itself */
a.metagrid-link {
}
/* The credit section of metagrid. Please don't remove that */
div.metagrid-credit {
}
```

## Development

If you find bugs you an open an issue or send us a pull request. We welcome contributions!

This is a vite project with a customized rollup config. To develop you can run `yarn dev`. To build the project run `yarn build`.