Pāriet uz saturu

npm pakotne

@wink/elements npm pakotne ir ātrākais veids, kā pievienot Wink tīmekļa komponentus jebkuram JavaScript vai TypeScript projektam. Tā nodrošina load() funkciju, kas ielādē CDN resursus un pilnas TypeScript tipu deklarācijas visiem komponentu atribūtiem.

wink-travel/wink-elements GitHub Avota kods, API atsauce un ieguldījuma norādījumi.

Instalēšana

npm install @wink/elements

Ātra sākšana

Izsauciet load() vienu reizi lietotnes startā. Tā ir idempotenta — droši izsaukt vairākas reizes.

import { load } from '@wink/elements';

load({ clientId: 'YOUR_CLIENT_ID' });

Pēc tam izmantojiet jebkuru Wink komponentu savā HTML vai JSX:

<wink-content-loader layout="HOTEL" id="YOUR_LAYOUT_ID"></wink-content-loader>

Ietvaru piemēri

Next.js (App Router)

'use client';
import { useEffect } from 'react';
import { load } from '@wink/elements';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  useEffect(() => {
    load({ clientId: process.env.NEXT_PUBLIC_WINK_CLIENT_ID! });
  }, []);
  return <html><body>{children}</body></html>;
}

Nuxt 3

import { load } from '@wink/elements';

export default defineNuxtPlugin(() => {
  load({ clientId: useRuntimeConfig().public.winkClientId });
});

Astro

---
import { load } from '@wink/elements';
---
<script>
  import { load } from '@wink/elements';
  load({ clientId: import.meta.env.PUBLIC_WINK_CLIENT_ID });
</script>

SvelteKit

import { load as loadWink } from '@wink/elements';
import { browser } from '$app/environment';

export function load() {
  if (browser) {
    loadWink({ clientId: import.meta.env.PUBLIC_WINK_CLIENT_ID });
  }
}

TypeScript tipi

Visas komponentu atribūtu interfeisu definīcijas ir eksportētas izmantošanai JSX, veidņu literāļos vai tipizētās vārdnīcās:

import type { WinkContentLoaderAttributes, WinkLayout } from '@wink/elements';

const attrs: WinkContentLoaderAttributes = {
  layout: 'HOTEL',    // TypeScript pamanīs nederīgas layout vērtības
  id: 'abc123',
  sort: 'POPULARITY',
};

Staging CDN izmantošana

load({
  clientId: 'YOUR_CLIENT_ID',
  cdnBaseUrl: 'https://staging-elements.wink.travel',
});

API

`load(options)`

Opcija	Tips	Obligāta	Noklusējums	Apraksts
`clientId`	`string`	Jā	—	Jūsu Wink OAuth2 klienta ID
`configurationId`	`string`	Nē	—	Pēc izvēles pielāgošanas ID
`cdnBaseUrl`	`string`	Nē	`https://elements.wink.travel`	CDN URL pārrakstīšana

Papildu lasāmviela