# @flourish/ui-styles 中文文档

规范地址：https://npmcn.com/package/%40flourish/ui-styles/

版本：7\.0\.2
npm 元数据更新时间：2026-10-28T12:39:03.988Z
中文译文更新时间：2026-11-15T00:03:27.891Z
软件包许可：LicenseRef-LICENSE

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40flourish/ui-styles
原文对照：https://npmcn.com/package/%40flourish/ui-styles/?lang=original

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：152 kB，20 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：未声明
- 运行依赖：3 个
- 首次发布：2019-11-29T17:05:45.328Z
- 最新版本发布：2026-10-28T12:39:03.706Z
- 近 30 天下载量：5754（2026-10-15 至 2026-11-13，npm 官方下载统计）
- 已发布版本数：22（近 12 个月 4 个）

## 中文简介

用于设计 UI 元素的面粉模块

## 安装

```sh
npm install @flourish/ui-styles
```

也可以使用：`pnpm add @flourish/ui-styles`、`yarn add @flourish/ui-styles`、`bun add @flourish/ui-styles`

## README

# 面粉UI 样式

面粉模板中的样式 UI 元素( 如 @ flourish/ controls) .

## 如何安装

`npm install -s @flourish/ui-styles`

向模板状态添加一个或多个控制样式对象 :

```js
export var state = {
    controls_style: {},
    button_style: {},
    dropdown_style: {},
    slider_style: {},
    searchbox_style: {},
}
```

导入用于控制样式的设置 `template.yml` 设置.

```yaml
- property: controls_style
  import: "@flourish/ui-styles/controls-style"
- property: dropdown_style
  import: "@flourish/ui-styles/dropdown-style"
- property: button_style
  import: "@flourish/ui-styles/button-style"
- property: slider_style
  import: "@flourish/ui-styles/slider-style"
- property: searchbox_style
  import: "@flourish/ui-styles/searchbox-style"
```

## 基本情况

初始化任何函数外的或特殊init函数外的样式:

```js
import { createGeneralControlsStyle, createButtonStyle, createDropdownStyle, createSliderStyle, createSearchboxStyle } from "@flourish/ui-styles";
var controlsStyle = createGeneralControlsStyle(state.controls_style, ".fl-control"),
    buttonStyle = createButtonStyle(state.button_style, ".fl-control-buttons"),
    dropdownStyle = createDropdownStyle(state.dropdown_style, ".fl-control-dropdown"),
    sliderStyle = createSliderStyle(state.slider_style, ".fl-control-slider"),
    searchboxStyle = createSearchboxStyle(state.searchbox_style, ".fl-control-searchbox");
```

Init 函数将状态对象作为第一个参数. 第二个论点是用于造型的目标容器. 如果您正在使用 @ flourish/ controls, 您可以使用上面代码中的选择器 .

如果您在自定义 HTML 上使用此选项, 请确定瞄准您控件的直接母容器, 并确保给您的控件一个类名 : `fl-control`。如果您正在使用自定义 HTML 的按钮样式,请确保您的按钮也有一个 `button` 类和所选元素 a `selected` 课.

然后在更新函数中,确保以 `update()`。为了确保右到左读方向支持工程在模板的读取方向被更新(即:. `layout.update()` 已调用).

```js
controlsStyle.update();
buttonStyle.update();
dropdownStyle.update();
sliderStyle.update();
searchboxStyle.update();
```

## 样式搜索框

使用 `createSearchboxStyle` 与 `searchbox` 由 @flourish/ controls 创建搜索输入、图标和建议的样式。 导入的设置允许您保持输入扩展并自定义其大小,背景颜色和不透明,文本/icon颜色,中风不透明以及边框半径.

搜索行为,如占位符文本和建议,在 `searchbox` 控制设置.

## 使用来自 @ flourish/ layout 的默认值

有一个可选的功能允许您从布局模块中继承文本和背景颜色. 只要在布局状态对象中通过,在初始化样式时作为第三个参数.

```js
import { createButtonStyle } from "@flourish/ui-styles";
var buttonStyle = createButtonStyle(state.button_style, ".fl-control-buttons", state.layout);
```

搜索框样式也支持这个参数. 当没有设置搜索框文本或背景颜色时,它们使用相应的布局颜色:

```js
var searchboxStyle = createSearchboxStyle(state.searchbox_style, ".fl-control-searchbox", state.layout);
```

## 常见问题

### @flourish/ui-styles 是什么？

用于设计 UI 元素的面粉模块

### 如何安装 @flourish/ui-styles？

在项目目录运行 npm install @flourish/ui-styles，或使用 pnpm add / yarn add / bun add。

### @flourish/ui-styles 支持 TypeScript 吗？

该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/flourish\_\_ui-styles 是否存在。

### @flourish/ui-styles 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @flourish/ui-styles 可以商用吗？

@flourish/ui-styles 使用 LicenseRef-LICENSE 许可。声明的许可为 LicenseRef-LICENSE，请阅读许可原文确认使用条件。以上为概括，不构成法律意见，请以许可原文为准。

### @flourish/ui-styles 的下载量有多少？

根据 npm 官方下载统计，@flourish/ui-styles 在 2026/10/15 – 2026/11/13 这 30 天内被下载 5,754 次，日均约 192 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @flourish/ui-styles 还在维护吗？

最新版本 7\.0\.2 发布于 2026/10/28（18 天前）；至今共发布 22 个版本，其中过去 12 个月发布了 4 个；首次发布于 2019/11/30。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。