# @cloud-ru/ds-materials 中文文档 规范地址：https://npmcn.com/package/%40cloud-ru/ds-materials/ 版本：2\.0\.3 npm 元数据更新时间：2026-11-11T14:59:58.887Z 中文译文更新时间：2026-11-11T15:06:25.016Z 软件包许可：Apache-2\.0 本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。 原始 npm 页面：https://www.npmjs.com/package/%40cloud-ru/ds-materials 原文对照：https://npmcn.com/package/%40cloud-ru/ds-materials/?lang=original 项目主页：https://github.com/cloud-ru-tech/snack-v2/tree/master/packages/materials 源码仓库：https://github.com/cloud-ru-tech/snack-v2 ## 关键信息（来自 npm 元数据） - 包体积（解压后）：215 kB，40 个文件 - 模块格式：ESM + CJS - TypeScript 类型：包内自带 - 运行依赖：1 个 - 首次发布：2026-08-18T12:38:28.975Z - 最新版本发布：2026-11-11T14:59:58.606Z - 近 30 天下载量：24902（2026-10-10 至 2026-11-08，npm 官方下载统计） - 已发布版本数：18（近 12 个月 18 个） ## 中文简介 SCSS 材料(丙烯、州Layer) ## 安装 ```sh npm install @cloud-ru/ds-materials ``` 也可以使用：`pnpm add @cloud-ru/ds-materials`、`yarn add @cloud-ru/ds-materials`、`bun add @cloud-ru/ds-materials` ## README # 材料 `@cloud-ru/ds-materials` - SCSS - для (акрил,状态层) вспомогательные (стили). 校对:Soup `@use '@cloud-ru/ds-materials' as m`。 。 。 . ## Установка ```bash 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`(中文(简体) ) ## Использование ```scss // 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 : ```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}你觉得怎样 `
`) (中文(简体) ). {\\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):** ```tsx
{children}
``` **(原始内容存档于2017-09-29). SSCSS:** ```scss @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\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\. ```scss .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):** ```tsx ``` **(原始内容存档于2017-09-29). SSCSS:** ```scss @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):** ```tsx
Click me
``` **(原始内容存档于2017-09-29). SSCSS:** ```scss @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}你觉得呢 | \- Обычный миксин ставит: ```scss @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}你觉得呢 ```scss .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}你觉得怎么样. ## 最佳做法 1. **{\\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` (пакет. 2. **Корень** —— 说 `has-state-layer-as-child` и `has-content-with-text-opacity` {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}请说一声 Несколько州-разные州-классы州. 3. **{\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢** - 丙烯酸盐 `data-acrylic-appearance` и `data-acrylic-level` \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \*\* \*\* \*\* \*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\* `@cloud-ru/ds-figma-variables`。 。 。 . 4. **文字平和 только нужного контента** . . . . . `data-text-opacity` {\\fn黑体\\fs22\\bord1\\shad0\\3ahbe\\4ah00\\fscx67\\fscy66\\2chffffff\\3ch808080}我还得说. 5. **{\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢** . . . . . `@cloud-ru/ds-block`(原始内容存档于2018-10-29). ). ## 常见问题 ### @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 和提交记录判断。