React Desktop Windows 10 组件完整参考

React Desktop Windows 10 是一个基于 React 开发的组件库，旨在为开发者提供快速构建和定制 Windows 10 应用程序的工具集。本文将全面介绍 React Desktop Windows 10 组件库。

安装

使用以下命令安装 React Desktop Windows 10：

npm install react-desktop-win-10 --save

组件列表

以下是 React Desktop Windows 10 中提供的所有组件：

• Alert
• Button
• ButtonGroup
• Checkbox
• Dropdown
• Icon
• IconButton
• Input
• Label
• Link
• ProgressBar
• RadioButton
• RadioGroup
• Select
• Spinner
• Switch
• TextArea

组件 API

在下面的章节中，将对 React Desktop Windows 10 中的每个组件进行详细介绍。

Alert

Alert 组件用于显示警告消息。

API

| 属性名 | 类型 | 必需 | 默认值 | 说明 | | --- | --- | --- | --- | --- | | title | string | 是 | 无 | 弹窗标题 | | message | string | 是 | 无 | 弹窗消息内容 | | confirmLabel | string | 否 | "确定" | 确定按钮文本 | | cancelLabel | string | 否 | "取消" | 取消按钮文本 | | onConfirm | function | 否 | 无 | 点击确定按钮时的回调函数 | | onCancel | function | 否 | 无 | 点击取消按钮时的回调函数 |

示例

import { Alert } from 'react-desktop-win-10';

function App() {
  const handleConfirm = () => {
    console.log('Confirmed!');
  };

  const handleCancel = () => {
    console.log('Cancelled!');
  };

  return (
    <div>
      <Alert
        title="警告"
        message="确定要删除此文件吗？"
        onConfirm={handleConfirm}
        onCancel={handleCancel}
      />
    </div>
  );
}

Button

Button 组件用于创建按钮。

API

| 属性名 | 类型 | 必需 | 默认值 | 说明 | | --- | --- | --- | --- | --- | | label | string | 是 | 无 | 按钮文本 | | icon | string | 否 | 无 | 按钮图标名称 | | disabled | bool | 否 | false | 是否禁用按钮 | | primary | bool | 否 | false | 是否为主要按钮 | | onClick | function | 否 | 无 | 点击按钮时的回调函数 |

示例

import { Button } from 'react-desktop-win-10';

function App() {
  const handleClick = () => {
    console.log('Clicked!');
  };

  return (
    <div>
      <Button label="按钮" onClick={handleClick} />
    </div>
  );
}

ButtonGroup

ButtonGroup 组件用于将多个 Button 组合在一起。

API

| 属性名 | 类型 | 必需 | 默认值 | 说明 | | --- | --- | --- | --- | --- | | children | node | 是 | 无 | Button 组件 | | alignRight | bool | 否 | false | 是否右对齐按钮 |

示例

import { Button, ButtonGroup } from 'react-desktop-win-10';

function App() {
  return (
    <div>
      <ButtonGroup alignRight>
        <Button label="按钮1" />
        <Button label="按钮2" />
        <Button label="按钮3" />
      </ButtonGroup>
    </div>
  );
}

Checkbox

Checkbox 组件用于创建复选框。

API

| 属性名 | 类型 | 必需 | 默认值 | 说明 | | --- | --- | --- | --- | --- | | label | string | 否 | 无 | 复选框文本 | | checked | bool | 否 | false | 是否选中复选框 | | onChange | function | 否 | 无 | 复选框状态变化时的回调函数 |

示例

import { Checkbox } from 'react-desktop-win-10';

function App() {
  const handleChange = (e) => {
    console.log(e.target.checked);
  };

  return (
    <div>
      <Checkbox label="复选框" onChange={handleChange} />
    </div>
  );
}

Dropdown

Dropdown 组件用于创建下拉菜单。

API

| 属性名 | 类型 | 必需 | 默认值 | 说明 | | --- | --- | --- | --- | --- | | label | string | 是 | 无 | 下拉菜单文本 | | options | array | 是 | 无 | 选项列表 | | selectedIndex | number | 否 | -1 | 选中的选项的索引 | | onChange | function | 否 | 无 | 选中选项变化时的回调函数 |

示例

import { Dropdown } from 'react-desktop-win-10';

function App() {
  const options = [
    { label: '选项1', value: 1 },
    { label: '选项2', value: 2 },
    { label: '选项3', value: 3 },
  ];

  const handleChange = (selectedIndex) => {
    console.log(selectedIndex);
  };

  return (
    <div>
      <Dropdown label="下拉菜单" options={options} onChange={handleChange} />
    </div>
  );
}

Icon

Icon 组件用于显示图标。

API

| 属性名 | 类型 | 必需 | 默认值 | 说明 | | --- | --- | --- | --- | --- | | name | string | 是 | 无 | 图标名称 |

示例

import { Icon } from 'react-desktop-win-10';

function App() {
  return (
    <div>
      <Icon name="user" />
    </div>
  );
}

IconButton

IconButton 组件用于创建带图标的按钮。

API

| 属性名 | 类型 | 必需 | 默认值 | 说明 | | --- | --- | --- | --- | --- | | icon | string | 是 | 无 | 按钮图标名称 | | disabled | bool | 否 | false | 是否禁用按钮 | | onClick | function | 否 | 无 | 点击按钮时的回调函数 |

示例

import { IconButton } from 'react-desktop-win-10';

function App() {
  const handleClick = () => {
    console.log('Clicked!');
  };

  return (
    <div>
      <IconButton icon="user" onClick={handleClick} />
    </div>
  );
}

Input

Input 组件用于创建文本输入框。

API

| 属性名 | 类型 | 必需 | 默认值 | 说明 | | --- | --- | --- | --- | --- | | type | string | 否 | "text" | 输入框类型 | | label | string | 否 | 无 | 输入框标签 | | placeholder | string | 否 | 无 | 输入框占位符 | | value | string | 否 | 无 | 输入框的值 | | onChange | function | 否 | 无 | 输入框值变化时的回调函数 |

示例

import { Input } from 'react-desktop-win-10';

function App() {
  const handleChange = (e) => {
    console.log(e.target.value);
  };

  return (
    <div>
      <Input label="输入框" onChange={handleChange} />
    </div>
  );
}

Label

Label 组件用于显示文本标签。

API

| 属性名 | 类型 | 必需 | 默认值 | 说明 | | --- | --- | --- | --- | --- | | children | node | 是 | 无 | 标签文本 |

示例

import { Label } from 'react-desktop-win-10';

function App() {
  return (
    <div>
      <Label>标签</Label>
    </div>
  );
}

Link

Link 组件用于创建超链接。

API

| 属性名 | 类型 | 必需 | 默认值 | 说明 | | --- | --- | --- | --- | --- | | label | string | 是 | 无 | 链接文本 | | href | string | 是 | 无 | 链接地址 |

示例

import { Link } from 'react-desktop-win-10';

function App() {
  return (
    <div>
      <Link label="链接" href="https://www.example.com/" />
    </div>
  );
}

ProgressBar

ProgressBar 组件用于显示进度条。

API

| 属性名 | 类型 | 必需 | 默认值 | 说明 | | --- | --- | --- | --- | --- | | value | number | 否 | 0 | 进度条的进度值 | | max | number | 否 | 100 | 进度条的最大值 | | label | string | 否 | 无 | 进度条标签 |

示例

import { ProgressBar } from 'react-desktop-win-10';

function App() {
  return (
    <div>
      <ProgressBar value={50} max={100} label="50%" />
    </div>
  );
}

RadioButton

RadioButton 组件用于创建单选框。

API

| 属性名 | 类型 | 必需 | 默认值 | 说明 | | --- | --- | --- | --- | --- | | label | string | 否 | 无 | 单选框文本 | | checked | bool | 否 | false | 是否选中单选框 | | onChange | function | 否 | 无 | 单选框状态变化时的回调函数 |

示例

import { RadioButton } from 'react-desktop-win-10';

function App() {
  const handleChange = (e) => {
    console.log(e.target.checked);
  };

  return (
    <div>
      <RadioButton label="单选框" onChange={handleChange} />
    </div>
  );
}

RadioGroup

RadioGroup 组件用于将多个 RadioButton 组合在一起。

API

| 属性名 | 类型 | 必需 | 默认值 | 说明 | | --- | --- | --- | --- | --- | | children | node | 是 | 无 | RadioButton 组件 | | name | string | 否 | 无 | 单选框组名称 | | value | string | 否 | 无 | 选中的单选框的值 | | onChange | function | 否 | 无 | 选中单选框变化时的回调函数 |

示例

import { RadioButton, RadioGroup } from 'react-desktop-win-10';

function App() {
  const handleChange = (value) => {
    console.log(value);
  };

  return (
    <div>
      <RadioGroup name="options" onChange={handleChange}>
        <RadioButton label="选项1" value="1" />
        <RadioButton label="选项2" value="2" />
        <RadioButton label="选项3" value="3" />
      </RadioGroup>
    </div>
  );
}

Select

Select 组件用于创建下拉选择框。

API

| 属性名 | 类型 | 必需 | 默认值 | 说明 | | --- | --- | --- | --- | --- | | label | string | 否 | 无 | 下拉选择框标签 | | options | array | 是 | 无 | 选项列表 | | value | string | 否 | 无 | 选中的选项的值 | | onChange | function | 否 | 无 | 选中选项变化时的回调函数 |

示例

import { Select } from 'react-desktop-win-10';

function App() {
  const options = [
    { label: '选项1', value: '1' },
    { label: '选项2', value: '2' },
    { label: '选项3', value: '3' },
  ];

  const handleChange = (value) => {
    console.log(value);
  };

  return (
    <div>
      <Select label="下拉选择框" options={options} onChange={handleChange} />
    </div>
  );
}

Spinner

Spinner 组件用于显示加载动画。

API

| 属性名 | 类型 | 必需 | 默认值 | 说明 | | --- | --- | --- | --- | --- | | size | number | 否 | 24 | 动画大小 |

示例

import { Spinner } from 'react-desktop-win-10';

function App() {
  return (
    <div>
      <Spinner size={32} />
    </div>
  );
}

Switch

Switch 组件用于创建开关按钮。

API

| 属性名 | 类型 | 必需 | 默认值 | 说明 | | --- | --- | --- | --- | --- | | label | string | 否 | 无 | 开关按钮标签 | | checked | bool | 否 | false | 是否选中开关按钮 | | onChange | function | 否 | 无 | 开关按钮状态变化时的回调函数 |

示例

import { Switch } from 'react-desktop-win-10';

function App() {
  const handleChange = (e) => {
    console.log(e.target.checked);
  };

  return (
    <div>
      <Switch label="开关按钮" onChange={handleChange} />
    </div>
  );
}

TextArea

TextArea 组件用于创建文本域。

API

| 属性名 | 类型 | 必需 | 默认值 | 说明 | | --- | --- | --- | --- | --- | | label | string | 否 | 无 | 文本域标签 | | value | string | 否 | 无 | 文本域的值 | | onChange | function | 否 | 无 | 文本域值变化时的回调函数 |

示例

import { TextArea } from 'react-desktop-win-10';

function App() {
  const handleChange = (e) => {
    console.log(e.target.value);
  };

  return (
    <div>
      <TextArea label="文本域" onChange={handleChange} />
    </div>
  );
}

总结

本文介绍了 React Desktop Windows 10 组件库中的所有组件及其 API。这些组件可以帮助开发者快速构建和定制 Windows 10 应用程序。如果您需要更详细的信息，请参阅 React Desktop Windows 10 的官方文档。