ktui-components

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

KtUI Components

KtUI组件

Use this skill when working with KtUI—free Tailwind UI components by Keenthemes. It ensures correct package usage, initialization, and reference to official docs.

当你使用KtUI——Keenthemes推出的免费Tailwind UI组件库——进行开发时，可使用本技能。它能确保你正确使用相关包、完成初始化操作，并引导你参考官方文档。

Package and imports

包与导入

Package:
```
@keenthemes/ktui
```
(npm install
```
@keenthemes/ktui
```
).
Import pattern (ESM): Import components and/or the init helper from the package root:
- Single component:
```
import { KTModal } from '@keenthemes/ktui';
```
- Init all:
```
import { KTComponents } from '@keenthemes/ktui';
```
  then call
```
KTComponents.init()
```
  after DOM ready.
Types (TypeScript): Types are exported from the same entry; use the package root (e.g.
```
@keenthemes/ktui
```
) for types, not deep
```
lib/esm
```
paths.
Styles: Include KtUI CSS (e.g. from the package or built
```
dist/styles.css
```
) and ensure Tailwind and CSS variables are set up as in the installation docs.

包：
```
@keenthemes/ktui
```
（通过npm安装
```
@keenthemes/ktui
```
）。
导入模式（ESM）： 从包的根目录导入组件和/或初始化助手：
- 单个组件：
```
import { KTModal } from '@keenthemes/ktui';
```
- 初始化全部组件：
```
import { KTComponents } from '@keenthemes/ktui';
```
  ，然后在DOM加载完成后调用
```
KTComponents.init()
```
  。
类型（TypeScript）： 类型从同一入口导出；请使用包的根目录（例如
```
@keenthemes/ktui
```
）获取类型，而非深层的
```
lib/esm
```
路径。
样式： 引入KtUI CSS（例如从包中引入或使用构建后的
```
dist/styles.css
```
），并确保按照安装文档中的说明配置Tailwind和CSS变量。

Initialization

初始化

Call
```
KTComponents.init()
```
once after the DOM is ready so that data-attribute–driven components (dropdowns, modals, tabs, etc.) are initialized.
Frameworks (React, Vue, Next): Run init after the root is mounted (e.g.
```
useEffect
```
with empty deps, or
```
onMounted
```
) so the DOM with
```
data-kt-*
```
attributes exists before init.
For dynamically added markup (e.g. after route change or lazy load), run
```
KTComponents.init()
```
again or use per-component init (e.g.
```
KTModal.init()
```
on the new container).
SSR: Call init only on the client (e.g. inside
```
useEffect
```
or when
```
typeof document !== 'undefined'
```
), never during server render.
Per-component init is also available (e.g.
```
KTModal.init()
```
) when not using the full init.

在DOM加载完成后调用一次
```
KTComponents.init()
```
，这样基于data属性驱动的组件（如下拉菜单、模态框、标签页等）就能完成初始化。
框架（React、Vue、Next）： 在根组件挂载完成后执行初始化（例如使用空依赖数组的
```
useEffect
```
，或
```
onMounted
```
钩子），确保带有
```
data-kt-*
```
属性的DOM在初始化前已存在。
对于动态添加的标记（例如路由切换或懒加载后），再次调用
```
KTComponents.init()
```
，或者使用单个组件的初始化方法（例如在新容器上调用
```
KTModal.init()
```
）。
SSR： 仅在客户端调用初始化（例如在
```
useEffect
```
内部，或当
```
typeof document !== 'undefined'
```
时），绝不能在服务端渲染期间调用。
当不使用全量初始化时，也可以使用单个组件的初始化方法（例如
```
KTModal.init()
```
）。

Documentation

文档

Official docs: https://ktui.io — use for component APIs, examples, and markup.

Doc paths: Getting started:

ktui.io/docs/installation

ktui.io/docs/theming

ktui.io/docs/typescript

ktui.io/docs/dark-mode

ktui.io/docs/rtl

ktui.io/docs/changelog

. Components:

ktui.io/docs/<component>

(e.g.

ktui.io/docs/modal

ktui.io/docs/tooltip

ktui.io/docs/datatable

ktui.io/docs/dropdown

ktui.io/docs/repeater

Prefer docs and examples from ktui.io over inferring markup or options.

官方文档： https://ktui.io——可用于查阅组件API、示例和标记代码。

文档路径： 入门指南：

ktui.io/docs/installation

、

ktui.io/docs/theming

、

ktui.io/docs/typescript

、

ktui.io/docs/dark-mode

、

ktui.io/docs/rtl

、

ktui.io/docs/changelog

。组件文档：

ktui.io/docs/<component>

（例如

ktui.io/docs/modal

、

ktui.io/docs/tooltip

、

ktui.io/docs/datatable

、

ktui.io/docs/dropdown

、

ktui.io/docs/repeater

）。

优先参考ktui.io上的文档和示例，而非自行推断标记或配置选项。

Common pitfalls

常见问题

Components not opening or reacting: Ensure
```
KTComponents.init()
```
ran after the relevant DOM was in the page; for SPAs, run init after navigation or after injecting KtUI markup.
Styles missing or wrong: Confirm KtUI CSS and CSS variables are loaded (see installation, theming).
SSR/hydration: Do not call init during server render; run it only in the browser after mount.

组件无法打开或响应： 确保
```
KTComponents.init()
```
是在相关DOM元素加载到页面后调用的；对于单页应用（SPA），请在导航完成或注入KtUI标记后执行初始化。
样式缺失或异常： 确认已加载KtUI CSS和CSS变量（参见安装文档、主题文档）。
SSR/水合问题： 不要在服务端渲染期间调用初始化；仅在浏览器中组件挂载完成后执行。

Component list (reference)

组件列表（参考）

Components exported from

@keenthemes/ktui

include: KTDropdown, KTModal, KTDrawer, KTCollapse, KTDismiss, KTTabs, KTAccordion, KTScrollspy, KTScrollable, KTScrollto, KTSticky, KTReparent, KTToggle, KTTooltip, KTStepper, KTThemeSwitch, KTImageInput, KTTogglePassword, KTDataTable, KTSelect, KTToast, KTRating, KTRepeater. See the package exports or ktui.io for the full list and usage.

从

@keenthemes/ktui

导出的组件包括：KTDropdown、KTModal、KTDrawer、KTCollapse、KTDismiss、KTTabs、KTAccordion、KTScrollspy、KTScrollable、KTScrollto、KTSticky、KTReparent、KTToggle、KTTooltip、KTStepper、KTThemeSwitch、KTImageInput、KTTogglePassword、KTDataTable、KTSelect、KTToast、KTRating、KTRepeater。完整列表及使用方法请查看包的导出内容或ktui.io官网。