Skip to main content

[UI] headless UI

開發與深入原始碼

  • 到 GitHub headlessui 的 repo 將專案 clone 下來
$ cd headlessui
$ yarn
$ cd packages/@headlessui-react
$ yarn run playground

這時會透過 next server 啟動一個 playground 的頁面。

打開編輯器進到你想了解原始碼的元件(例如 /pages/dialog/dialog.tsx),把 import 的路徑從 @headless/react 改成 ../../src,也就是原始碼的位置:

diff --git a/packages/@headlessui-react/pages/dialog/dialog.tsx b/packages/@headlessui-react/pages/dialog/dialog.tsx
index 8e3f055..6ca72c0 100644
--- a/packages/@headlessui-react/pages/dialog/dialog.tsx
+++ b/packages/@headlessui-react/pages/dialog/dialog.tsx
@@ -1,5 +1,5 @@
import React, { useState, Fragment } from 'react'
-import { Dialog, Menu, Portal, Transition } from '@headlessui/react'
+import { Dialog, Menu, Portal, Transition } from '../../src'
import { usePopper } from '../../playground-utils/hooks/use-popper'

function classNames(...classes) {

接著進到元件原始碼的地方(例如,src/components/dialog/dialog.tsx),修改程式碼後,即可在 playground 的頁面看到對應的改變。