@cloud-ru/ds-materials

中文文档

2.0.3发布于 2026/11/11Apache-2.0TypeScriptESM + CJS近 30 天下载 2.5万

SCSS 材料(丙烯、州Layer)

文档目录15 节

Установка
Состав
Использование
概览
使用量
材料 (корень) и Crylic
国家层面——
状态层——
API —— ——
材料 ( )
丙烯酸盐
状态层
焦点框架
无障碍
最佳做法

材料

@cloud-ru/ds-materials - SCSS - для (акрил,状态层) вспомогательные (стили).

校对:Soup @use '@cloud-ru/ds-materials' as m。。。 .

Установка

pnpm add @cloud-ru/ds-materials

Состав

material/_acrylic.scss ——эффект(blur+фон)
stateLayer/index.scss - 州级盘旋/被压
focusFrame/index.scss - рамка(фокуса)with-focus-frame(中文(简体) )
utils/_mixins.scss - вспомогательные(миксины)has-state-layer-as-child, (中文(简体) ), has-content-with-text-opacity(中文(简体) )

Использование

// packages/button/src/styles.module.scss
@use '@cloud-ru/ds-materials' as m;

.root {
  @include m.has-state-layer-as-child(#{stateLayer});
}

概览

{\fn黑体\fs22\bord1\shad0\3aHBE\4aH00\fscx67\fscy66\2cHFFFFFF\3cH808080}你觉得呢 {\fn黑体\fs22\bord1\shad0\3ahbe\4ah00\fscx67\fscy66\2chffffff\3ch808080}你觉得呢 {\fn黑体\fs22\bord1\shad0\3ahbe\4ah00\fscx67\fscy66\2chffffff\3ch808080}你觉得呢

材料 ( ) . . . . . with-material($material, $props...) {\fn黑体\fs22\bord1\shad0\3ahbe\4ah00\fscx67\fscy66\2chffffff\3ch808080}你觉得呢 $material # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # 'acrylic' ——селекторы. -=YTET -伊甸园字幕组=- 翻译: {\fn黑体\fs22\bord1\shad0\3aHBE\4aH00\fscx67\fscy66\2cHFFFFFF\3cH808080}你觉得呢.
丙烯酸盐 ——"«матового"(后倒模糊+"слой"). Вызывается with-material('acrylic', …) с слоёв. – На – data-acrylic-appearance и data-acrylic-level; фон ; и; элементы; элементы классами{\fn黑体\fs22\bord1\shad0\3aHBE\4aH00\fscx67\fscy66\2cHFFFFFF\3cH808080}我还得说 * + + + + + (不透明、+ 混合模式); position: relative {\fn黑体\fs22\bord1\shad0\3ahbe\4ah00\fscx67\fscy66\2chffffff\3ch808080}你觉得呢 -=YTET -伊甸园字幕组=- 翻译: {\fn黑体\fs22\bord1\shad0\3aHBE\4aH00\fscx67\fscy66\2cHFFFFFF\3cH808080}你觉得怎样 pointer-events {\fn华文仿宋\fs16\1chd1d1d1}好.
状态层 -=YTET -伊甸园字幕组=- 翻译: (原始内容存档于2018-09-21) (英语). QQ:QQ/бордер,上Color,上Accent и/иконок (textOpacity). {\fn黑体\fs22\bord1\shad0\3aHBE\4aH00\fscx67\fscy66\2cHFFFFFF\3cH808080}你觉得呢 @cloud-ru/ds-figma-variables。。。 .

\\ \ \ \ \ SCSS :

@use '@design-system/materials' as m;

命名空间 m доступны(миксины)with-material),状态层(has-state-layer-as-child, (中文(简体) ), has-content-with-text-opacity~ ~ ~ ~ ~ ~ ~.

使用量

材料 (корень) и Crylic

{\fn黑体\fs22\bord1\shad0\3aHBE\4aH00\fscx67\fscy66\2cHFFFFFF\3cH808080}你觉得呢 with-material('acrylic', $bgLayerSelector, $effectLayerSelector?)数字 :

$bgLayerSelector ( локального ====================================================================================================================================================================================================== #{acrylic} при .acrylic {\fn黑体\fs22\bord1\shad0\3ahbe\4ah00\fscx67\fscy66\2chffffff\3ch808080}你觉得呢.
$effectLayerSelector (опциональный)---------------------;---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------.

说吧

data-acrylic-appearance —— оформления: 'primary', (中文(简体) ), 'neutral', (中文(简体) ), 'blue', (中文(简体) ), 'red', (中文(简体) ), 'yellow', (中文(简体) ), 'green'。。。 .
data-acrylic-level —— глубины: 'default', (中文(简体) ), '1Level', (中文(简体) ), '2Level'。。。 .

Миксин не {\fn黑体\fs22\bord1\shad0\3ahbe\4ah00\fscx67\fscy66\2chffffff\3ch808080}你觉得呢 position: relative (++++排版 +++++++++++++++++++++++++++++++++++++++++). {\fn黑体\fs22\bord1\shad0\3aHBE\4aH00\fscx67\fscy66\2cHFFFFFF\3cH808080}你觉得呢position: absolute {\fn黑体\fs20\shad2\2ah82\3ah20\4ah33\fscx95\3ch592001\be1}♪ {\fn黑体\fs20\shad2\2ah82\3ah20\4ah33\fscx95\3ch592001\be1}♪ {\fn黑体\fs20\shad2\2ah82\3ah20\4ah33\fscx95\3ch592001\be1}♪ {\fn黑体\fs20\shad2\2ah82\3ah20\4ah33\fscx95\3ch592001\be1}♪ position: relative (или position) (中文(简体) ) {\fn黑体\fs22\bord1\shad0\3ahbe\4ah00\fscx67\fscy66\2chffffff\3ch808080}你觉得呢, 翻译: with-material,则"Q" SCSS.

{\fn黑体\fs22\bord1\shad0\3aHBE\4aH00\fscx67\fscy66\2cHFFFFFF\3cH808080}你觉得怎样 <div className={styles.acrylic} />) (中文(简体) ). {\fn黑体\fs22\bord1\shad0\3aHBE\4aH00\fscx67\fscy66\2cHFFFFFF\3cH808080}你觉得呢? # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # position: relative и z-index) (中文(简体) ).

Внутри with-material {\fn黑体\fs22\bord1\shad0\3ahbe\4ah00\fscx67\fscy66\2chffffff\3ch808080}你觉得呢 has-acrylic-background-layer-as-child {\fn黑体\fs22\bord1\shad0\3ahbe\4ah00\fscx67\fscy66\2chffffff\3ch808080}你觉得呢 has-acrylic-effect-layer-as-child。。。 не подключают absolute-layer и не выставляют pointer-events: none . . . . . opacity 编号 : background {\fn黑体\fs22\bord1\shad0\3aHBE\4aH00\fscx67\fscy66\2cHFFFFFF\3cH808080}你觉得呢? {\fn黑体\fs20\shad2\2aH82\3aH20\4aH33\fscx95\3cH592001\be1}♪ {\fn黑体\fs20\shad2\2aH82\3aH20\4aH33\fscx95\3cH592001\be1}♪ {\fn黑体\fs20\shad2\2aH82\3aH20\4aH33\fscx95\3cH592001\be1}♪ {\fn黑体\fs20\shad2\2aH82\3aH20\4aH33\fscx95\3cH592001\be1}♪ position: absolute, (中文(简体) ), inset: 0) ,(中文) border-radius: inherit, (中文(简体) ), pointer-events: none ~ ~ ~ ~ ~ ~ ~ .acrylic。。。 .

Разметка(JSX):

<div className={styles.card} data-acrylic-appearance='neutral' data-acrylic-level='1Level'>
  <div className={styles.acrylic} />
  <div className={styles.content}>{children}</div>
</div>

(原始内容存档于2017-09-29). SSCSS:

@use '@design-system/materials' as m;

.acrylic {
  pointer-events: none;
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.card {
  position: relative;
  @include m.with-material('acrylic', #{acrylic});
}

.content {
  position: relative;
  z-index: 1;
}

{\fn黑体\fs22\bord1\shad0\3aHBE\4aH00\fscx67\fscy66\2cHFFFFFF\3cH808080}你觉得呢? {\fn黑体\fs22\bord1\shad0\3aHBE\4aH00\fscx67\fscy66\2cHFFFFFF\3cH808080}你觉得呢 pointer-events: none \\\ n\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\.

.acrylicEffect {
  pointer-events: none;
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

@include m.with-material('acrylic', #{acrylic}, #{acrylicEffect});

国家层面——

Миксин has-state-layer-as-child($stateLayerSelector) подключают в {\fn黑体\fs22\bord1\shad0\3ahbe\4ah00\fscx67\fscy66\2chffffff\3ch808080}你觉得呢中,将 \\ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ потомку{\fn黑体\fs22\bord1\shad0\3aHBE\4aH00\fscx67\fscy66\2cHFFFFFF\3cH808080}你觉得呢 CSS单元 #{stateLayer},################################# ############################################################################################################################################################################################################################# .stateLayer。。。 .

{\fn黑体\fs22\bord1\shad0\3aHBE\4aH00\fscx67\fscy66\2cHFFFFFF\3cH808080}你觉得呢 data-state -=YTET -伊甸园字幕组=- 翻译:material/stateLayer/<имя>:

emptyNeutralOnBackground {\fn黑体\fs22\bord1\shad0\3ahbe\4ah00\fscx67\fscy66\2chffffff\3ch808080}你觉得呢.
borderOnBackground - слой вместо заливки заливки заливки.
activatedOnBackground ——выбранного (активированного).
versionOnColor 编号 : emptyVersionOnColor - слой цветной; вариант empty прозрачен.
inversionOnColor 编号 : emptyInversionOnColor {\fn黑体\fs20\shad2\2ah82\3ah20\4ah33\fscx95\3ch592001\be1}你觉得呢.
emptyDarkOnAccent -=ytet -伊甸园字幕组=- 翻译:.
textOpacity - не, а, и (миксин, миксин) has-content-with-text-opacity) (中文(简体) ).

{\fn黑体\fs22\bord1\shad0\3aHBE\4aH00\fscx67\fscy66\2cHFFFFFF\3cH808080}你觉得呢.

Примеры: 游戏场, (中文(简体) ), 样本锁定, (中文(简体) ), 状态 (单位:千美元)packages/materials/stories/…) (中文(简体) ).

Разметка(JSX):

<button type='button' className={styles.button}>
  <span className={styles.stateLayer} data-state='emptyNeutralOnBackground' aria-hidden />
  <span className={styles.label}>Текст кнопки</span>
</button>

(原始内容存档于2017-09-29). SSCSS:

@use '@design-system/materials' as m;

.button {
  position: relative;
  @include m.has-state-layer-as-child(#{stateLayer});
}

.label {
  position: relative;
  z-index: 1;
}

状态层——

Миксин has-content-with-text-opacity($contentLayerSelector) {\fn黑体\fs22\bord1\shad0\3ahbe\4ah00\fscx67\fscy66\2chffffff\3ch808080}你觉得呢 корневого элемента:взаимодействии也 потомка {\fn黑体\fs22\bord1\shad0\3aHBE\4aH00\fscx67\fscy66\2cHFFFFFF\3cH808080}你觉得呢? На внутри этого,отмеченных [data-text-opacity],qq 不透明(默认/徘徊/活动).

Пример: 游戏场, (中文(简体) ), 样本锁定 (单位:千美元)#{contentLayer}) (中文(简体) ).

Разметка(JSX):

<div className={styles.button}>
  <div className={styles.contentLayer}>
    <span data-text-opacity>Click me</span>
    <Icon data-text-opacity />
  </div>
</div>

(原始内容存档于2017-09-29). SSCSS:

@use '@design-system/materials' as m;

.button {
  position: relative;
  @include m.has-content-with-text-opacity(#{contentLayer});
}

API —— ——

材料 ( )

миксин	параметры	описание
`with-material($material, $props...)`	`$material` - название(сейчас) `'acrylic'`) (中文(简体) ). Для `'acrylic'` 用户 `$props`时间轴: `$bgLayerSelector`时 `$effectLayerSelector` (имена	{\fn黑体\fs22\bord1\shad0\3aHBE\4aH00\fscx67\fscy66\2cHFFFFFF\3cH808080}你觉得呢? 丙烯酸盐: `data-acrylic-appearance` и `data-acrylic-level`дочерний; слой; фона `$bgLayerSelector` (单位: --) `#{имяКласса}`) ; опционально `$effectLayerSelector`。模糊。。 `@cloud-ru/ds-figma-variables` {\fn黑体\fs22\bord1\shad0\3ahbe\4ah00\fscx67\fscy66\2chffffff\3ch808080}你觉得呢. `position: relative` {\fn黑体\fs22\bord1\shad0\3ahbe\4ah00\fscx67\fscy66\2chffffff\3ch808080}你觉得呢 - при задайте сами сами сами. {\fn黑体\fs22\bord1\shad0\3aHBE\4aH00\fscx67\fscy66\2cHFFFFFF\3cH808080}你觉得怎样 `pointer-events` {\fn黑体\fs22\bord1\shad0\3ahbe\4ah00\fscx67\fscy66\2chffffff\3ch808080}你觉得呢 {\fn黑体\fs22\bord1\shad0\3ahbe\4ah00\fscx67\fscy66\2chffffff\3ch808080}你还好吧.

丙烯酸盐

{\fn黑体\fs22\bord1\shad0\3aHBE\4aH00\fscx67\fscy66\2cHFFFFFF\3cH808080}你觉得呢 with-material('acrylic', …) (原始内容存档于2018-09-21). API. {\fn黑体\fs22\bord1\shad0\3aHBE\4aH00\fscx67\fscy66\2cHFFFFFF\3cH808080}看在上帝的份上 {\fn黑体\fs22\bord1\shad0\3aHBE\4aH00\fscx67\fscy66\2cHFFFFFF\3cH808080}看样子 {\fn黑体\fs22\bord1\shad0\3aHBE\4aH00\fscx67\fscy66\2cHFFFFFF\3cH808080} {\fn黑体\fs22\bord1\shad0\3ahbe\4ah00\fscx67\fscy66\2chffffff\3ch808080}你觉得呢 {\fn黑体\fs22\bord1\shad0\3ahbe\4ah00\fscx67\fscy66\2chffffff\3ch808080}你觉得呢 .$bgLayerSelector 编号 : .$effectLayerSelector {\fn黑体\fs22\bord1\shad0\3ahbe\4ah00\fscx67\fscy66\2chffffff\3ch808080}你觉得呢.

Разметка: корень data-acrylic-appearance и data-acrylic-level; ; ; ; ; ; ; ; with-material。。。 .
Корень: position: relative с не (原始内容存档于2018-10-12). qq; (中文(简体) ).
校对:Soup {\fn黑体\fs22\bord1\shad0\3ahbe\4ah00\fscx67\fscy66\2chffffff\3ch808080}你觉得呢 absolute-layer {\fn黑体\fs22\bord1\shad0\3ahbe\4ah00\fscx67\fscy66\2chffffff\3ch808080}你觉得呢 pointer-events: none; * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * ***** ************************************** .acrylic (原始内容存档于2016-10-12). /слоя эффекта эффекта эффекта своём SCSS.

状态层

миксин	параметры	разметка	описание
`has-state-layer-as-child($stateLayerSelector)`	{\fn黑体\fs22\bord1\shad0\3aHBE\4aH00\fscx67\fscy66\2cHFFFFFF\3cH808080}你应该知道 {\fn黑体\fs22\bord1\shad0\3aHBE\4aH00\fscx67\fscy66\2cHFFFFFF\3cH808080}你应该知道 `#{stateLayer}`(中文(简体) )	# # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # `data-state`	国家层面 `$stateLayerSelector`
`has-content-with-text-opacity($contentLayerSelector)`	{\fn黑体\fs20\shad2\2aH82\3aH20\4aH33\fscx95\3cH592001\be1}你觉得怎样 `#{contentLayer}`(中文(简体) )	++++++++++++++++++++++++++++ `[data-text-opacity]`	~ 透明度~ ~ `[data-text-opacity]` внутри `$contentLayerSelector`

{\fn黑体\fs22\bord1\shad0\3aHBE\4aH00\fscx67\fscy66\2cHFFFFFF\3cH808080}你觉得呢 @cloud-ru/ds-figma-variables (莱尔州).

焦点框架

миксин	параметры	описание
`with-focus-frame($appearance, $position)`	`$appearance` —— 说 `regular` (по), `primary`, (中文(简体) ), `destructive`, (中文(简体) ), `warning`, (中文(简体) ), `success`, (中文(简体) ), `regularInversion`。。。 . `$position` —— 说 `inside`, (中文(简体) ), `outside` (по), `outsideOffset`	Основной. Выводит `&:focus-visible` {\fn黑体\fs22\bord1\shad0\3ahbe\4ah00\fscx67\fscy66\2chffffff\3ch808080}你觉得呢
`focus-frame-styles($appearance, $position)`	те	{\fn黑体\fs22\bord1\shad0\3aHBE\4aH00\fscx67\fscy66\2cHFFFFFF\3cH808080}你觉得呢

- Обычный миксин ставит:

@use '@cloud-ru/ds-materials' as m;

.root {
  @include m.with-focus-frame('regular', 'outside');
}

唵(引一)элементе(引一)элементе(二合引一)贺 focus-frame-styles {\fn黑体\fs22\bord1\shad0\3ahbe\4ah00\fscx67\fscy66\2chffffff\3ch808080}你觉得呢

.root:focus-visible .container {
  @include m.focus-frame-styles('primary', 'inside');
}

Положение. inside - штрих внутрь бокса, outside - наружу,вплотную, outsideOffset - ~~~~~~~~~~~~~~~. Соответствуют focusedFrame/…/inside|outside|outsideOffset。。。 .
Радиус 校对:soup outline повторяет border-radius {\fn黑体\fs20\shad2\2ah82\3ah20\4ah33\fscx95\3ch592001\be1}你应该知道 {\fn黑体\fs20\shad2\2ah82\3ah20\4ah33\fscx95\3ch592001\be1}.
outline-offset выводится, включая. +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++.
regularInversion {\fn黑体\fs20\shad2\2ah82\3ah20\4ah33\fscx95\3ch592001\be1}你觉得呢.

无障碍

-=YTET -伊甸园字幕组=- 翻译: aria-hidden; ; ; ; ; ; ; ; button, (中文(简体) ), aria-*, (中文(简体) ), role) (中文(简体) ).
{\fn黑体\fs22\bord1\shad0\3aHBE\4aH00\fscx67\fscy66\2cHFFFFFF\3cH808080}你觉得怎样.
{\fn黑体\fs20\shad2\2aH82\3aH20\4aH33\fscx95\3cH592001\be1}你觉得怎么样.

最佳做法

{\fn黑体\fs22\bord1\shad0\3aHBE\4aH00\fscx67\fscy66\2cHFFFFFF\3cH808080}你觉得呢 -=ytet -伊甸园字幕组=- 翻译: with-material('acrylic', #{…}) {\fn黑体\fs22\bord1\shad0\3aHBE\4aH00\fscx67\fscy66\2cHFFFFFF\3cH808080}======================================================================================== ============================================================================================================================================== {\fn黑体\fs22\bord1\shad0\3aHBE\4aH00\fscx67\fscy66\2cHFFFFFF\3cH808080}你觉得呢 pointer-events: none {\fn黑体\fs22\bord1\shad0\3aHBE\4aH00\fscx67\fscy66\2cHFFFFFF\3cH808080}你觉得怎么样? Если,на也 with-material {\fn黑体\fs22\bord1\shad0\3ahbe\4ah00\fscx67\fscy66\2chffffff\3ch808080}你觉得呢 position: relative (пакет.
Корень —— 说 has-state-layer-as-child и has-content-with-text-opacity {\fn黑体\fs22\bord1\shad0\3aHBE\4aH00\fscx67\fscy66\2cHFFFFFF\3cH808080}请说一声 Несколько州-разные州-классы州.
{\fn黑体\fs22\bord1\shad0\3aHBE\4aH00\fscx67\fscy66\2cHFFFFFF\3cH808080}你觉得呢 - 丙烯酸盐 data-acrylic-appearance и data-acrylic-level * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * ** ** ** ********************************* @cloud-ru/ds-figma-variables。。。 .
文字平和 только нужного контента . . . . . data-text-opacity {\fn黑体\fs22\bord1\shad0\3ahbe\4ah00\fscx67\fscy66\2chffffff\3ch808080}我还得说.
{\fn黑体\fs22\bord1\shad0\3aHBE\4aH00\fscx67\fscy66\2cHFFFFFF\3cH808080}你觉得呢 . . . . . @cloud-ru/ds-block(原始内容存档于2018-10-29). ).

版本与发布记录

@cloud-ru/ds-materials 共发布 18 个版本，首次发布于 2026/08/18；过去 12 个月发布了 18 个版本。

版本	发布日期	距今
`2.0.3`latest	2026/11/11	今天
`2.0.3-preview-e8fe6b56.0`preview	2026/11/11	今天
`2.0.3-preview-c0e895ed.0`	2026/11/11	今天
`2.0.3-preview-90b10112.0`	2026/11/11	今天
`2.0.3-preview-fd7dd437.0`	2026/11/10	1 天前
`2.0.3-preview-9a75a2a9.0`	2026/11/10	1 天前

关于 @cloud-ru/ds-materials 的常见问题

@cloud-ru/ds-materials 是什么？

SCSS 材料(丙烯、州Layer)

如何安装 @cloud-ru/ds-materials？

在项目目录运行 npm install @cloud-ru/ds-materials，或使用 pnpm add / yarn add / bun add。

@cloud-ru/ds-materials 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

@cloud-ru/ds-materials 支持 ESM 还是 CommonJS？

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

@cloud-ru/ds-materials 可以商用吗？

@cloud-ru/ds-materials 使用 Apache-2.0 许可。宽松许可：允许商业使用、修改和再分发，并附带明确的专利授权；分发时需保留许可与 NOTICE 文件，修改过的文件要注明改动。以上为概括，不构成法律意见，请以许可原文为准。

@cloud-ru/ds-materials 的下载量有多少？

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

@cloud-ru/ds-materials 还在维护吗？

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