compatibility-widget

Usage

Options

• items-per-page (number): Number of items to display per page. Default is 10.
• src (string): URL to fetch compatibility data from.
  • One: https://storage.googleapis.com/autotuner-eu-public/compatibility_one.json (default)
  • Tool: https://storage.googleapis.com/autotuner-eu-public/compatibility_tool.json

Browser (Global)

<compatibility-widget items-per-page="12" />
<script type="module" src="https://cdn.jsdelivr.net/npm/@autotuner/compatibility@latest/dist/compatibility-widget.js"></script>
<style>
  compatibility-widget {
    --mf-font: "Rajdhani", sans-serif;
    --mf-main-color: #3D3D3D;
    --mf-title-color: #FFFFFF;
    --mf-table-bg: #FFFFFF;
    --mf-pagination-button-color: #3D3D3D;
    --mf-pagination-button-active: #3D3D3D;
    --mf-pagination-button-hover: #3D3D3D;
  }
</style>

React

npm install @autotuner/compatibility

import '@autotuner/compatibility';

function App() {
  return (
    <div>
      <compatibility-widget items-per-page="12" />
    </div>
  );
}
export default App;

Svelte

npm install @autotuner/compatibility

<script>
  import '@autotuner/compatibility';
</script>

<compatibility-widget items-per-page="12" />

<style>
  compatibility-widget {
    --mf-font: "Rajdhani", sans-serif;
    --mf-main-color: #3D3D3D;
    --mf-title-color: #FFFFFF;
    --mf-table-bg: #FFFFFF;
    --mf-pagination-button-color: #3D3D3D;
    --mf-pagination-button-active: #3D3D3D;
    --mf-pagination-button-hover: #3D3D3D;
  }
</style>