Bỏ qua để đến nội dung

gói npm

Gói npm @wink/elements là cách nhanh nhất để thêm các thành phần web Wink vào bất kỳ dự án JavaScript hoặc TypeScript nào. Nó cung cấp một hàm load() để chèn tài nguyên CDN và khai báo kiểu TypeScript đầy đủ cho tất cả các thuộc tính của thành phần.

wink-travel/wink-elements trên GitHub Mã nguồn, tham khảo API và hướng dẫn đóng góp.

Cài đặt

npm install @wink/elements

Bắt đầu nhanh

Gọi load() một lần khi khởi động ứng dụng. Hàm này có tính idempotent — an toàn khi gọi nhiều lần.

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

load({ clientId: 'YOUR_CLIENT_ID' });

Sau đó sử dụng bất kỳ thành phần Wink nào trong HTML hoặc JSX của bạn:

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

Ví dụ với các framework

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 });
  }
}

Kiểu TypeScript

Tất cả các giao diện thuộc tính thành phần được xuất để sử dụng trong JSX, template literals hoặc từ điển có kiểu:

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

const attrs: WinkContentLoaderAttributes = {
  layout: 'HOTEL',    // TypeScript sẽ phát hiện giá trị layout không hợp lệ
  id: 'abc123',
  sort: 'POPULARITY',
};

Sử dụng CDN giai đoạn thử nghiệm

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

API

`load(options)`

Tùy chọn	Kiểu	Bắt buộc	Mặc định	Mô tả
`clientId`	`string`	Có	—	Client ID OAuth2 của bạn trên Wink
`configurationId`	`string`	Không	—	ID tùy chỉnh tùy chọn
`cdnBaseUrl`	`string`	Không	`https://elements.wink.travel`	Ghi đè URL CDN

Đọc thêm