### Button Basic Usage Example

Source: https://github.com/kingdee/kingdee-web-component-document/blob/main/src/Button/index.en-US.md

Demonstrates the basic usage of the Kingdee UI Button component. It shows how to import and render a button, and includes examples in JSX, HTML, and CSS for different integration needs. The JavaScript example shows event handling for button clicks.

```javascript
import { KingdeeElement } from '@kdcloudjs/kwc';

export default class ButtonBasic extends KingdeeElement {
    clickedButtonLabel;
    handleClick(event) {
        this.clickedButtonLabel = event.target.label;
    }
}
```

```html
<kd-button label="Button"></kd-button>
```

```css
body { color: red; }
```

--------------------------------

### Card Component Examples (React)

Source: https://context7.com/kingdee/kingdee-web-component-document/llms.txt

Provides examples of the KWC Card component, highlighting its structure with optional header, title, icon, footer, and action slots for displaying content.

```tsx
import { Card } from 'kwc';

// Basic card
<Card.Default />

// Card with title
<Card.WithTitle />

// Card with icon
<Card.WithIcon />

// Card without header
<Card.WithoutHeader />

// Card with custom actions
<Card.WithActions />

// Card with footer
<Card.WithFooter />

// Card with custom title slot
<Card.WithCustomTitle />
```

--------------------------------

### Install and Develop Kingdee Web Components

Source: https://github.com/kingdee/kingdee-web-component-document/blob/main/README.md

This section details the commands for managing dependencies, developing the library using documentation demos, and building the source code. It also includes commands for building and previewing the documentation locally.

```bash
# install dependencies
$ yarn install

# develop library by docs demo
$ yarn start

# build library source code
$ yarn run build

# build library source code in watch mode
$ yarn run build:watch

# build docs
$ yarn run docs:build

# Locally preview the production build.
$ yarn run docs:preview

# check your project for potential problems
$ yarn run doctor
```

--------------------------------

### Spin Component Examples (React)

Source: https://context7.com/kingdee/kingdee-web-component-document/llms.txt

Demonstrates the KWC Spin component for loading indicators, covering configurations like size, alternative text, controlled loading state, delay, and custom indicators.

```tsx
import { Spin } from 'kwc';

// Basic loading spinner
<Spin.Default />

// Different sizes
<Spin.Size />

// Spinner with text
<Spin.WithText />

// Controlled loading state
<Spin.LoadingControl />

// Delayed spinner (shows after 3 seconds)
<Spin.WithDelay />

// Custom loading indicator
<Spin.CustomIndicator />
```

--------------------------------

### Switch Component Examples (React)

Source: https://context7.com/kingdee/kingdee-web-component-document/llms.txt

Demonstrates the usage of the KWC Switch component with different configurations such as default, size variants, disabled state, loading state, and label positioning.

```tsx
import { Switch } from 'kwc';

// Basic switch
<Switch.Default />

// Different sizes
<Switch.Size />

// Disabled state
<Switch.Disabled />

// Loading state
<Switch.Loading />

// Switch with label
<Switch.Label />

// Label positioning
<Switch.LabelPosition />
```

--------------------------------

### InputNumber Component Examples (React)

Source: https://context7.com/kingdee/kingdee-web-component-document/llms.txt

Illustrates the KWC InputNumber component with features like stepper controls, counter style, size variants, precision control, and min/max constraints.

```tsx
import { InputNumber } from 'kwc';

// Basic input number with stepper
<InputNumber.Default />

// Counter style stepper
<InputNumber.Count />

// Different sizes
<InputNumber.Size />

// Precision control with decimal steps
<kdcq-input-number
  show-stepper
  step={0.1}
  precision={1}
  value={3.5}
  min={0}
  max={40}
/>
```

--------------------------------

### Render Kingdee Button Component in React

Source: https://context7.com/kingdee/kingdee-web-component-document/llms.txt

Demonstrates how to use the Kingdee Button component within a React application. Shows examples of different variants, sizes, and states like disabled and loading. Requires the 'kwc' library to be installed.

```tsx
import { Button } from 'kwc';

// Basic button variants
<div style={{ display: 'flex', gap: '10px', alignItems: 'center' }}>
  <Button type="1" />
</div>

// Button with icon
<div style={{ display: 'flex', gap: '10px', alignItems: 'center' }}>
  <Button type="2" />
</div>

// Different sizes
<div style={{ display: 'flex', gap: '10px', alignItems: 'center' }}>
  <Button type="4" />
</div>

// Disabled and loading states
<Button type="5" />
<Button type="6" />
```

--------------------------------

### Tabset Component Examples (React)

Source: https://context7.com/kingdee/kingdee-web-component-document/llms.txt

Shows the KWC Tabset component for navigation, including options for icons, controlled mode, nested tabs, various sizes, and scrollable overflow handling.

```tsx
import { Tabset } from 'kwc';
import ReactDOM from 'react-dom';

// Basic tabset
<Tabset.Default />

// Tabset with icons
<Tabset.WithIcon />

// Controlled tabset
<Tabset.Controlled />

// Nested tabsets
<Tabset.Nesting />

// Different sizes
<Tabset.Size />

// Scrollable tabs (for many tabs)
<Tabset.Scroll />
```

--------------------------------

### Implement Kingdee Layout Component in React

Source: https://context7.com/kingdee/kingdee-web-component-document/llms.txt

Demonstrates the Kingdee Layout component for creating responsive grid systems in React. Includes examples of basic column layouts, alignment options, and responsive item configurations. The 'kwc' library is required.

```tsx
import { Layout } from 'kwc';

// Basic 3-column layout
<Layout.Default />

// Horizontal alignment options
<Layout.HorizontalAlign />

// Vertical alignment options
<Layout.VerticalAlign />

// Multi-row layout with wrapping
<Layout.MultipleRows />

// Responsive layout items
<kdcq-layout>
  <kdcq-layout-item size={12} xs={2} sm={4} md={6} lg={8} xl={10}>
    <div>Responsive Item 1</div>
  </kdcq-layout-item>
  <kdcq-layout-item size={12} xs={20} sm={16} md={12} lg={8} xl={4}>
    <div>Responsive Item 2</div>
  </kdcq-layout-item>
</kdcq-layout>
```

--------------------------------

### Tag Component Examples (React)

Source: https://context7.com/kingdee/kingdee-web-component-document/llms.txt

Illustrates the KWC Tag component's versatility, showcasing different states (default, invalid, success, warning, processing, error), variants (dark, light, outlined, text), shapes (round, square, mark), and closable functionality.

```tsx
import { Tag } from 'kwc';

// Basic tag with icons
<Tag type="0" />

// Different states
<Tag type="1" />

// Different variants
<Tag type="2" />

// Different shapes
<Tag type="3" />

// Different sizes
<Tag type="4" />

// Closable tag with max-width
<Tag type="6" />
```

--------------------------------

### Utilize Kingdee Modal Component in React

Source: https://context7.com/kingdee/kingdee-web-component-document/llms.txt

Provides examples of using the Kingdee Modal component in React, covering basic modal dialogs, async operations, custom slots for header/body/footer, and resizing capabilities. The 'kwc' library is a prerequisite.

```tsx
import { Modal } from 'kwc';

// Basic modal
<Modal.Default />

// Async modal with delayed close
<Modal.Async />

// Modal with custom slots
<Modal.CustomHeaderSlot />
<Modal.CustomBodySlot />
<Modal.CustomFooterSlot />

// Modal with close button and ESC key support
<Modal.ModalCloseButton />

// Resizable modal
<Modal.ResizeModal />

// Modal with specific dimensions
<Modal.RectModal />
```

--------------------------------

### Use Kingdee Input Component in React

Source: https://context7.com/kingdee/kingdee-web-component-document/llms.txt

Illustrates the usage of the Kingdee Input component in React, showcasing various input types such as text, password, and textarea. It covers different variants, sizes, and validation states. Ensure 'kwc' is installed.

```tsx
import { Input } from 'kwc';

// Basic input with different sizes
<Input.Size />

// Different variants
<Input.Variant />

// Input with validation states
<Input.FeedbackAndTip />

// Password input with visibility toggle
<Input.Password />

// Textarea with auto-sizing
<Input.Textarea />

// Search input
<Input.Search />
```

--------------------------------

### Render Kingdee Tree Component in React

Source: https://context7.com/kingdee/kingdee-web-component-document/llms.txt

Shows how to use the Kingdee Tree component in React for displaying hierarchical data. Examples include basic tree structures, trees with custom icons, and custom data configurations. Requires the 'kwc' library.

```tsx
import { Tree } from 'kwc';

// Basic tree with predefined organizational structure
<Tree.Default />

// Tree with custom icons
<Tree.Icon />

// Custom tree data structure
const customItems = [
  {
    label: 'Root',
    name: 'root',
    expanded: true,
    items: [
      {
        label: 'Child 1',
        name: 'child-1',
        iconName: 'kdfont-shoucang',
        items: []
      }
    ]
  }
];
```

--------------------------------

### Basic Button Usage (JSX, HTML, CSS, JavaScript)

Source: https://github.com/kingdee/kingdee-web-component-document/blob/main/src/DataTable/index.en-US.md

Demonstrates the basic usage of the Kingdee Button component. It shows how to import and render the button in JSX, its HTML representation, basic styling, and JavaScript for handling click events.

```jsx
import { Button } from 'kwc';

const codeInfo = [
  {
    language: 'javascript',
    content: "import { KingdeeElement } from '@kdcloudjs/kwc';\n\nexport default class ButtonBasic extends KingdeeElement {\n    clickedButtonLabel;\n    handleClick(event) {\n        this.clickedButtonLabel = event.target.label;\n    }\n}",
  },
  {
    language: 'html',
    content: '<kd-button label="Button"></kd-button>',
  },
  {
    language: 'css',
    content: 'body { color: red; }',
  },
];

export default () => <Button codeInfo={codeInfo} label="Button" />;
```

--------------------------------

### withComponent Higher-Order Component (React)

Source: https://context7.com/kingdee/kingdee-web-component-document/llms.txt

Demonstrates the `withComponent` higher-order component from KWC, used to wrap components and provide features like code preview, theme switching, and internationalization.

```tsx
import withComponent, { ComponentProps } from './common/withComponent';

const MyComponent = (props: ComponentProps) => {
  const { codeInfo, direction, theme, locale, ...rest } = props;
  return <kdcq-custom {...rest} />;
};

export default withComponent(MyComponent);
```

--------------------------------

### Implement Kingdee DataTable in React

Source: https://context7.com/kingdee/kingdee-web-component-document/llms.txt

Shows how to integrate the Kingdee DataTable component in React, including configuration for columns and data, row selection, and loading states. This requires the 'kwc' library.

```tsx
import { DataTable } from 'kwc';

const columns = [
  { field: 'name', header: 'Name' },
  { field: 'age', header: 'Age' },
  { field: 'email', header: 'Email' }
];

const data = [
  { id: 1, name: 'John Doe', age: 30, email: 'john@example.com' },
  { id: 2, name: 'Jane Smith', age: 25, email: 'jane@example.com' }
];

<DataTable
  data={data}
  columns={columns}
  max-row-selection={5}
  showRowNumberColumn={true}
  loading={false}
/>
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.