npm 包 luminous-ui 使用教程-JavaScript中文网-JavaScript教程资源分享门户

简介

luminous-ui 是一款基于 React 的 UI 组件库，提供了丰富多样的 UI 组件，包括按钮、输入框、下拉框、标签页等。使用 luminous-ui 可以让你快速搭建美观、易用的前端界面。

安装

使用 npm 安装 luminous-ui：

npm install luminous-ui --save

使用

在代码中引入需要的组件：

import { Button, Input, Select, Tabs } from 'luminous-ui';

然后在组件中使用：

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

API 文档

Button

属性名	类型	默认值	说明
type	string	`null`	按钮类型
size	string	`null`	按钮大小
disabled	boolean	`false`	是否禁用
onClick	func	`null`	点击事件回调函数

type 属性支持以下值：

primary: 主按钮
default: 默认按钮
danger: 危险按钮

size 属性支持以下值：

large: 大按钮
small: 小按钮

示例：

<Button type="primary" size="large" onClick={() => console.log('点击了按钮')}>点击</Button>

Input

属性名	类型	默认值	说明
type	string	`text`	输入框类型
placeholder	string	`null`	占位文字
value	string	`''`	输入框的值
onChange	func	`null`	值改变事件回调函数
onBlur	func	`null`	失焦事件回调函数

type 属性支持以下值：

text: 文本输入框
password: 密码输入框
number: 数字输入框

示例：

<Input type="text" placeholder="请输入内容" value={this.state.inputValue} onChange={this.handleInputChange} onBlur={this.handleInputBlur} />

Select

属性名	类型	默认值	说明
value	string	`null`	选中的值
onChange	func	`null`	值改变事件回调函数

Select 组件使用了子组件 Option，用于显示选项。

示例：

<Select value={this.state.selectValue} onChange={this.handleSelectChange}>
  <Option value="选项一">选项一</Option>
  <Option value="选项二">选项二</Option>
  <Option value="选项三">选项三</Option>
</Select>

Tabs

属性名	类型	默认值	说明
defaultActiveKey	string	`null`	默认选中的分页
onChange	func	`null`	分页改变事件回调函数

Tabs 组件使用了子组件 TabPane，用于显示分页内容。

示例：

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

结语

luminous-ui 提供了丰富多样的 UI 组件，让我们在开发前端界面时可以事半功倍。相信通过这篇教程，你已经学会如何使用 luminous-ui。如果还有任何问题，欢迎在评论区留言，我会尽快回复。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/600555ac81e8991b448d2c74