@cloud-ru/ds-uikit-product-card-predefined

中文文档

4.2.0发布于 2026/11/11Apache-2.0TypeScriptESM + CJS近 30 天下载 7803

QQ 产品 UI Kit – 名牌班纳,名牌服务,名牌服务灯,名牌服务 Small,名牌Suggest,名牌Custom.

文档目录26 节

Установка
纸牌
Когда
Примеры
道具
卡片服务
Когда
道具
卡片服务灯
Когда
Примеры
道具
Видимость
Адаптивность
卡片服务信息
Когда
Примеры
道具
小型卡片服务
Примеры
道具
Видимость
纸牌推荐
Когда
Примеры
道具

卡片预定义

@cloud-ru/ds-uikit-product-card-predefined ——QQ产品UI Kit ——卡通,卡通,卡通,卡通,卡通,卡通,卡通,卡通,卡通.

产品UI Kit @cloud-ru/ds-card数字 :

{\fn黑体\fs22\bord1\shad0\3aHBE\4aH00\fscx67\fscy66\2cHFFFFFF\3cH808080}你觉得呢 as 道具 : as='a', (中文(简体) ), as={Link} {\fn黑体\fs22\bord1\shad0\3ahbe\4ah00\fscx67\fscy66\2chffffff\3ch808080}你觉得呢.

Установка

pnpm add @cloud-ru/ds-uikit-product-card-predefined

import { CardBanner, CardService, CardServiceLight, CardServiceInfo, CardSuggest } from '@cloud-ru/ds-uikit-product-card-predefined';

纸牌

{\fn黑体\fs20\shad2\2aH82\3aH20\4aH33\fscx95\3cH592001\be1}♪♪♪♪♪♪♪♪♪♪♪♪♪♪♪♪♪♪♪♪♪♪♪♪♪♪♪♪♪♪♪♪♪♪♪♪♪♪♪♪♪♪♪♪♪♪♪♪♪♪♪♪♪♪♪♪♪♪♪♪♪♪♪♪♪♪♪♪♪♪♪♪♪♪♪♪♪♪♪♪♪♪♪♪♪♪♪♪♪♪♪♪♪♪♪♪♪♪♪♪♪♪♪♪♪♪♪♪♪♪♪♪♪♪♪♪♪♪ {\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}你觉得呢.

Примеры

Базовый

96×96 справа:текстового.

import { CardBanner } from '@cloud-ru/ds-uikit-product-card-predefined';

import illustrationSrc from '../assets/card-banner-illustration.jpg?url';

export function Basic() {
  return (
    <CardBanner
      title='Заголовок карточки'
      content='Краткое описание сервиса или предложения для пользователя'
      actionLabel='Подробнее'
      image={{ src: illustrationSrc, alt: 'Иллюстрация сервиса' }}
    />
  );
}

Обработка

(笑声) (掌声) (掌声).

import { Typography } from '@cloud-ru/ds-typography';
import { CardBanner } from '@cloud-ru/ds-uikit-product-card-predefined';
import { useState } from 'react';

import illustrationSrc from '../assets/card-banner-illustration.jpg?url';

export function WithOnClick() {
  const [clicks, setClicks] = useState(0);

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
      <CardBanner
        title='Заголовок карточки'
        content='Клик по карточке обрабатывается через onClick'
        actionLabel='Подробнее'
        image={{ src: illustrationSrc, alt: 'Иллюстрация сервиса' }}
        onClick={() => setClicks(c => c + 1)}
      />

      <Typography variant='body' size='m'>
        Кликов по карточке: {clicks}
      </Typography>
    </div>
  );
}

Закрываемый

{\fn黑体\fs22\bord1\shad0\3aHBE\4aH00\fscx67\fscy66\2cHFFFFFF\3cH808080}你应该知道 {\fn黑体\fs22\bord1\shad0\3aHBE\4aH00\fscx67\fscy66\2cHFFFFFF\3cH808080}你应该知道.

import { Typography } from '@cloud-ru/ds-typography';
import { CardBanner } from '@cloud-ru/ds-uikit-product-card-predefined';
import { useState } from 'react';

import illustrationSrc from '../assets/card-banner-illustration.jpg?url';

export function WithClose() {
  const [visible, setVisible] = useState(true);

  if (!visible) {
    return (
      <Typography variant='body' size='m'>
        Баннер закрыт
      </Typography>
    );
  }

  return (
    <CardBanner
      title='Заголовок карточки'
      content='Кнопка закрытия появляется при передаче onClose'
      actionLabel='Подробнее'
      image={{ src: illustrationSrc, alt: 'Иллюстрация сервиса' }}
      onClose={() => setVisible(false)}
    />
  );
}

Ссылка(多态)

? 当作? ? ? .

import { CardBanner } from '@cloud-ru/ds-uikit-product-card-predefined';

import illustrationSrc from '../assets/card-banner-illustration.jpg?url';

export function PolymorphicLink() {
  return (
    <CardBanner
      as='a'
      href='https://cloud.ru'
      target='_blank'
      title='Перейти на сайт'
      content='Откроется в новой вкладке'
      actionLabel='Подробнее'
      image={{ src: illustrationSrc, alt: 'Иллюстрация сервиса' }}
    />
  );
}

道具

纸箱程序

Prop	类型	默认	说明
`actionLabel`	`string`	—— 说	{\fn黑体\fs22\bord1\shad0\3aHBE\4aH00\fscx67\fscy66\2cHFFFFFF\3cH808080}你觉得呢
`as`	`ElementType`	—— 说	校对:Soup `'div'`, (中文(简体) ), `'a'`, (中文(简体) ), `{Link}` {\fn黑体\fs22\bord1\shad0\3ahbe\4ah00\fscx67\fscy66\2chffffff\3ch808080}你觉得呢.
`className`	`string`	—— 说	CSS - класс элемента
`content`	`string`	—— 说	Описание
`data-test-id`	`string`	—— 说	支持道具 # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # #
`disabled`	`boolean`	—— 说	Неактивное
`image`	`{ src: string; alt: string; }`	—— 说	Изображение
`innerRef`	`PolymorphicRef`	—— 说	参考:
`onClose`	`MouseEventHandler<HTMLElement>`	—— 说	Колбэк. {\fn黑体\fs22\bord1\shad0\3aHBE\4aH00\fscx67\fscy66\2cHFFFFFF\3cH808080}你觉得呢
`title`	`string`	—— 说	Заголовок

卡片服务

{\fn黑体\fs20\shad2\2aH82\3aH20\4aH33\fscx95\3cH592001\be1}你觉得呢.

Когда

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

道具

卡片服务方案

Prop	类型	默认	说明
`actionLabel`	`string`	—— 说	{\fn黑体\fs22\bord1\shad0\3aHBE\4aH00\fscx67\fscy66\2cHFFFFFF\3cH808080}你觉得呢
`as`	`ElementType`	—— 说	校对:Soup `'div'`, (中文(简体) ), `'a'`, (中文(简体) ), `{Link}` {\fn黑体\fs22\bord1\shad0\3ahbe\4ah00\fscx67\fscy66\2chffffff\3ch808080}你觉得呢.
`className`	`string`	—— 说	CSS - класс элемента
`content`	`string`	—— 说	Описание
`data-test-id`	`string`	—— 说	支持道具 # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # #
`disabled`	`boolean`	—— 说	Неактивное
`emblem`	`ReactElement<any, string \| JSXElementConstructor<any>>`	—— 说	Эмблема-передавайте `<IconPredefined icon={...} />` * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * ** * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
`innerRef`	`PolymorphicRef`	—— 说	参考:
`title`	`string`	—— 说	Заголовок

卡片服务灯

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

+++++++++++++++ (ArrowRight/Left键盘导航).

Когда

{\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}你觉得呢.

import { PlaceholderSVG } from '@cloud-ru/ds-icons/interface/system';
import { CardServiceLight } from '@cloud-ru/ds-uikit-product-card-predefined';

export function Basic() {
  return <CardServiceLight title='Мой сервис' icon={<PlaceholderSVG size={24} />} />;
}

{\fn黑体\fs22\bord1\shad0\3aHBE\4aH00\fscx67\fscy66\2cHFFFFFF\3cH808080}我很高兴见到你.

import { PlaceholderSVG } from '@cloud-ru/ds-icons/interface/system';
import { CardServiceLight } from '@cloud-ru/ds-uikit-product-card-predefined';

export function WithPromoTag() {
  return <CardServiceLight title='Мой сервис' icon={<PlaceholderSVG size={24} />} promoTag={{ variant: 'preview' }} />;
}

Обрезка

{\fn黑体\fs22\bord1\shad0\3aHBE\4aH00\fscx67\fscy66\2cHFFFFFF\3cH808080}短道速滑字幕翻译:.

import { PlaceholderSVG } from '@cloud-ru/ds-icons/interface/system';
import { CardServiceLight } from '@cloud-ru/ds-uikit-product-card-predefined';

const longTitle =
  'Очень длинное название сервиса, которое не помещается в одну строку и обрезается через TruncateString';

export function WithTruncate() {
  return (
    <div style={{ maxWidth: 280 }}>
      <CardServiceLight title={longTitle} icon={<PlaceholderSVG size={24} />} truncate={{ title: 1 }} />
    </div>
  );
}

* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *

动作可视性="永远"——действия;最爱. 检查了 \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\.

import { PlaceholderSVG } from '@cloud-ru/ds-icons/interface/system';
import { CardServiceLight, VISIBILITY_STRATEGY } from '@cloud-ru/ds-uikit-product-card-predefined';
import { useState } from 'react';

export function WithFavorite() {
  const [isFavorite, setIsFavorite] = useState(false);

  return (
    <CardServiceLight
      title='Мой сервис'
      icon={<PlaceholderSVG size={24} />}
      actionsVisibility={VISIBILITY_STRATEGY.always}
      favorite={{
        enabled: true,
        checked: isFavorite,
        onChange: setIsFavorite,
      }}
    />
  );
}

{\fn黑体\fs20\shad2\2aH82\3aH20\4aH33\fscx95\3cH592001\be1}你觉得怎样

{\fn黑体\fs22\bord1\shad0\3aHBE\4aH00\fscx67\fscy66\2cHFFFFFF\3cH808080}="hover" - {\fn黑体\fs22\bord1\shad0\3aHBE\4aH00\fscx67\fscy66\2cHFFFFFF\3cH808080}===============================================================================================.

import { PlaceholderSVG } from '@cloud-ru/ds-icons/interface/system';
import { CardServiceLight, VISIBILITY_STRATEGY } from '@cloud-ru/ds-uikit-product-card-predefined';

export function WithFavoriteHover() {
  return (
    <CardServiceLight
      title='Мой сервис'
      icon={<PlaceholderSVG size={24} />}
      actionsVisibility={VISIBILITY_STRATEGY.hover}
      favorite={{
        enabled: true,
      }}
    />
  );
}

Неактивное

已禁用 .

import { PlaceholderSVG } from '@cloud-ru/ds-icons/interface/system';
import { CardServiceLight } from '@cloud-ru/ds-uikit-product-card-predefined';

export function Disabled() {
  return <CardServiceLight title='Мой сервис' icon={<PlaceholderSVG size={24} />} disabled />;
}

Обработка

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

import { PlaceholderSVG } from '@cloud-ru/ds-icons/interface/system';
import { Typography } from '@cloud-ru/ds-typography';
import { CardServiceLight } from '@cloud-ru/ds-uikit-product-card-predefined';
import { useState } from 'react';

export function WithOnClick() {
  const [clicks, setClicks] = useState(0);

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
      <CardServiceLight title='Мой сервис' icon={<PlaceholderSVG size={24} />} onClick={() => setClicks(c => c + 1)} />

      <Typography variant='body' size='m'>
        Кликов по карточке: {clicks}
      </Typography>
    </div>
  );
}

Ссылка(多态)

? 当作? ? ? .

import { PlaceholderSVG } from '@cloud-ru/ds-icons/interface/system';
import { CardServiceLight } from '@cloud-ru/ds-uikit-product-card-predefined';

export function PolymorphicLink() {
  return (
    <CardServiceLight
      as='a'
      href='https://cloud.ru'
      target='_blank'
      title='Ссылка-сервис'
      icon={<PlaceholderSVG size={24} />}
    />
  );
}

道具

卡片服务灯道

Prop	类型	默认	说明
`actionsVisibility`	`"always"` \| `"hover"`	`'hover'`	Формат:всегда也
`as`	`ElementType`	—— 说	校对:Soup `'button'`, (中文(简体) ), `'a'`, (中文(简体) ), `{Link}` {\fn黑体\fs22\bord1\shad0\3ahbe\4ah00\fscx67\fscy66\2chffffff\3ch808080}你觉得呢.
`className`	`string`	—— 说	CSS - класс элемента
`data-test-id`	`string`	—— 说	支持道具 # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # #
`disabled`	`boolean`	`false`	Неактивное
`expandable`	`{ value: boolean; onClick(): void; }`	—— 说	{\fn黑体\fs22\bord1\shad0\3aHBE\4aH00\fscx67\fscy66\2cHFFFFFF\3cH808080}你觉得呢
`favorite`	`FavoriteProps`	—— 说	Настройки. 键盘:ArrowRight QQ QQ + 工具提示 (QQ) → Favorite; ArrowLeft – \ +.
`icon`	`ReactElement<any, string \| JSXElementConstructor<any>>`	—— 说	Иконка
`innerRef`	`PolymorphicRef`	—— 说	参考:
`promoTag`	`CardPromoTagProps` \| `PromoTagPredefinedBaseProps`	—— 说	宣传标签。 {\fn黑体\fs22\bord1\shad0\3aHBE\4aH00\fscx67\fscy66\2cHFFFFFF\3cH808080}你觉得呢
`title`	`string`	—— 说	Заголовок
`tooltip`	`TooltipProps`	—— 说	{\fn黑体\fs22\bord1\shad0\3aHBE\4aH00\fscx67\fscy66\2cHFFFFFF\3cH808080}你觉得呢
`truncate`	`{ title?: number; }`	—— 说	{\fn黑体\fs22\bord1\shad0\3aHBE\4aH00\fscx67\fscy66\2cHFFFFFF\3cH808080}你觉得呢

CardPromoTagProps =: PromoTagPredefinedProps & { as?: never; innerRef?: never; }

最爱选项

Prop	类型	默认	说明
`checked`	`boolean \| undefined`	—— 说	Состояние(受控)
`enabled`	`boolean`	—— 说	{\fn黑体\fs22\bord1\shad0\3aHBE\4aH00\fscx67\fscy66\2cHFFFFFF\3cH808080}你觉得呢
`onChange`	`((value: boolean) => void) \| undefined`	—— 说	{\fn黑体\fs22\bord1\shad0\3aHBE\4aH00\fscx67\fscy66\2cHFFFFFF\3cH808080}你觉得呢

VisibilityStrategy =: "always" | "hover"

Видимость

Проп actionsVisibility (单位:千美元)'hover' по умолчанию управляет {\fn黑体\fs22\bord1\shad0\3ahbe\4ah00\fscx67\fscy66\2chffffff\3ch808080}你觉得呢.

Адаптивность

桌面第一: AdaptiveProvider。QQ手机:

у .container ставится data-mobile —— 说 min-height 40 вместо 32;
{\fn黑体\fs22\bord1\shad0\3ahbe\4ah00\fscx67\fscy66\2chffffff\3ch808080}你觉得呢 s вместо m。。。 .

• 工具栏-全球 layoutType /вложенный AdaptiveProvider 编号 : withLayoutType。。。 .

卡片服务信息

{\fn黑体\fs20\shad2\2aH82\3aH20\4aH33\fscx95\3cH592001\be1}# # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # #.

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

Когда

++++++++++++++++++.
Когда CardServiceLight {\fn黑体\fs22\bord1\shad0\3ahbe\4ah00\fscx67\fscy66\2chffffff\3ch808080}你觉得呢 description。。。 .

Примеры

Базовый

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

import { PlaceholderSVG } from '@cloud-ru/ds-icons/interface/system';
import { CardServiceInfo } from '@cloud-ru/ds-uikit-product-card-predefined';

export function Basic() {
  return (
    <CardServiceInfo
      title='Мой сервис'
      description='Краткое описание сервиса для подробного режима карточки.'
      icon={<PlaceholderSVG size={24} />}
    />
  );
}

{\fn黑体\fs22\bord1\shad0\3aHBE\4aH00\fscx67\fscy66\2cHFFFFFF\3cH808080}我很高兴见到你.

import { PlaceholderSVG } from '@cloud-ru/ds-icons/interface/system';
import { CardServiceInfo } from '@cloud-ru/ds-uikit-product-card-predefined';

export function WithPromoTag() {
  return (
    <CardServiceInfo
      title='Мой сервис'
      description='Краткое описание сервиса для подробного режима карточки.'
      icon={<PlaceholderSVG size={24} />}
      promoTag={{
        variant: 'preview',
      }}
    />
  );
}

* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *

import { PlaceholderSVG } from '@cloud-ru/ds-icons/interface/system';
import { CardServiceInfo, VISIBILITY_STRATEGY } from '@cloud-ru/ds-uikit-product-card-predefined';
import { useState } from 'react';

export function WithFavorite() {
  const [isFavorite, setIsFavorite] = useState(false);

  return (
    <CardServiceInfo
      title='Мой сервис'
      description='Краткое описание сервиса для подробного режима карточки.'
      icon={<PlaceholderSVG size={24} />}
      actionsVisibility={VISIBILITY_STRATEGY.always}
      favorite={{
        enabled: true,
        checked: isFavorite,
        onChange: setIsFavorite,
      }}
    />
  );
}

{\fn黑体\fs20\shad2\2aH82\3aH20\4aH33\fscx95\3cH592001\be1}你觉得怎样

import { PlaceholderSVG } from '@cloud-ru/ds-icons/interface/system';
import { CardServiceInfo, VISIBILITY_STRATEGY } from '@cloud-ru/ds-uikit-product-card-predefined';

export function WithFavoriteHover() {
  return (
    <CardServiceInfo
      title='Мой сервис'
      description='Краткое описание сервиса для подробного режима карточки.'
      icon={<PlaceholderSVG size={24} />}
      actionsVisibility={VISIBILITY_STRATEGY.hover}
      favorite={{
        enabled: true,
      }}
    />
  );
}

Неактивное

已禁用 .

import { PlaceholderSVG } from '@cloud-ru/ds-icons/interface/system';
import { CardServiceInfo } from '@cloud-ru/ds-uikit-product-card-predefined';

export function Disabled() {
  return (
    <CardServiceInfo
      title='Мой сервис'
      description='Краткое описание сервиса для подробного режима карточки.'
      icon={<PlaceholderSVG size={24} />}
      disabled
    />
  );
}

Обработка

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

import { PlaceholderSVG } from '@cloud-ru/ds-icons/interface/system';
import { Typography } from '@cloud-ru/ds-typography';
import { CardServiceInfo } from '@cloud-ru/ds-uikit-product-card-predefined';
import { useState } from 'react';

export function WithOnClick() {
  const [clicks, setClicks] = useState(0);

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
      <CardServiceInfo
        title='Мой сервис'
        description='Краткое описание сервиса для подробного режима карточки.'
        icon={<PlaceholderSVG size={24} />}
        onClick={() => setClicks(c => c + 1)}
      />

      <Typography variant='body' size='m'>
        Кликов по карточке: {clicks}
      </Typography>
    </div>
  );
}

Ссылка(多态)

? 当作? ? ? .

import { PlaceholderSVG } from '@cloud-ru/ds-icons/interface/system';
import { CardServiceInfo } from '@cloud-ru/ds-uikit-product-card-predefined';

export function PolymorphicLink() {
  return (
    <CardServiceInfo
      as='a'
      href='https://cloud.ru'
      target='_blank'
      title='Ссылка-сервис'
      description='Карточка рендерится как якорь через as и href.'
      icon={<PlaceholderSVG size={24} />}
    />
  );
}

道具

卡片服务信息

Prop	类型	默认	说明
`actionsVisibility`	`"always"` \| `"hover"`	`'hover'`	Формат:всегда也
`as`	`ElementType`	—— 说	校对:Soup `'button'`, (中文(简体) ), `'a'`, (中文(简体) ), `{Link}` {\fn黑体\fs22\bord1\shad0\3ahbe\4ah00\fscx67\fscy66\2chffffff\3ch808080}你觉得呢.
`className`	`string`	—— 说	CSS - класс элемента
`data-test-id`	`string`	—— 说	支持道具 # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # #
`description`	`string`	—— 说	Описание
`disabled`	`boolean`	—— 说	Неактивное
`expandable`	`{ value: boolean; onClick(): void; }`	—— 说	{\fn黑体\fs22\bord1\shad0\3aHBE\4aH00\fscx67\fscy66\2cHFFFFFF\3cH808080}你觉得呢
`favorite`	`FavoriteProps`	—— 说	Настройки. 键盘:Arrow Right QQ QQ + Favorite + 扩展;ArrowLeft- + + + .
`icon`	`ReactElement<any, string \| JSXElementConstructor<any>>`	—— 说	Иконка
`innerRef`	`PolymorphicRef`	—— 说	参考:
`promoTag`	`CardPromoTagProps` \| `PromoTagPredefinedBaseProps`	—— 说	宣传标签。 {\fn黑体\fs22\bord1\shad0\3aHBE\4aH00\fscx67\fscy66\2cHFFFFFF\3cH808080}你觉得呢
`title`	`string`	—— 说	Заголовок

CardPromoTagProps =: PromoTagPredefinedProps & { as?: never; innerRef?: never; }

最爱选项

Prop	类型	默认	说明
`checked`	`boolean \| undefined`	—— 说	Состояние(受控)
`enabled`	`boolean`	—— 说	{\fn黑体\fs22\bord1\shad0\3aHBE\4aH00\fscx67\fscy66\2cHFFFFFF\3cH808080}你觉得呢
`onChange`	`((value: boolean) => void) \| undefined`	—— 说	{\fn黑体\fs22\bord1\shad0\3aHBE\4aH00\fscx67\fscy66\2cHFFFFFF\3cH808080}你觉得呢

VisibilityStrategy =: "always" | "hover"

小型卡片服务

{\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}你觉得呢.

import { PlaceholderSVG } from '@cloud-ru/ds-icons/interface/system';
import { CardServiceSmall } from '@cloud-ru/ds-uikit-product-card-predefined';

export function Basic() {
  return <CardServiceSmall title='Название сервиса' emblem={{ icon: PlaceholderSVG }} />;
}

{\fn黑体\fs22\bord1\shad0\3aHBE\4aH00\fscx67\fscy66\2cHFFFFFF\3cH808080}我还得说.

import { PlaceholderSVG } from '@cloud-ru/ds-icons/interface/system';
import { APPEARANCE, ROLE_APPEARANCE, SIZE } from '@cloud-ru/ds-promo-tag';
import { CardServiceSmall } from '@cloud-ru/ds-uikit-product-card-predefined';

export function WithPromoTag() {
  return (
    <CardServiceSmall
      title='Название сервиса'
      emblem={{ icon: PlaceholderSVG }}
      promoBadge={{
        label: 'Promo Tag',
        appearance: APPEARANCE.Primary,
        role: ROLE_APPEARANCE.Accent,
        size: SIZE.Xs,
      }}
    />
  );
}

Обрезка

{\fn黑体\fs22\bord1\shad0\3aHBE\4aH00\fscx67\fscy66\2cHFFFFFF\3cH808080}短道速滑字幕翻译:.

import { PlaceholderSVG } from '@cloud-ru/ds-icons/interface/system';
import { CardServiceSmall } from '@cloud-ru/ds-uikit-product-card-predefined';

const longTitle =
  'Очень длинное название сервиса, которое не помещается в одну строку и обрезается через TruncateString';

export function WithTruncate() {
  return (
    <div style={{ maxWidth: 280 }}>
      <CardServiceSmall title={longTitle} emblem={{ icon: PlaceholderSVG }} truncate={{ title: 1 }} />
    </div>
  );
}

Выбранное

检查.

import { PlaceholderSVG } from '@cloud-ru/ds-icons/interface/system';
import { CardServiceSmall } from '@cloud-ru/ds-uikit-product-card-predefined';

export function WithChecked() {
  return <CardServiceSmall title='Название сервиса' emblem={{ icon: PlaceholderSVG }} checked />;
}

QQ( 外线)

提纲.

import { PlaceholderSVG } from '@cloud-ru/ds-icons/interface/system';
import { CardServiceSmall } from '@cloud-ru/ds-uikit-product-card-predefined';

export function WithOutline() {
  return <CardServiceSmall title='Название сервиса' emblem={{ icon: PlaceholderSVG }} outline />;
}

* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *

动作可视性=“总是” ——\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\.

import { PlaceholderSVG } from '@cloud-ru/ds-icons/interface/system';
import { CardServiceSmall, VISIBILITY_STRATEGY } from '@cloud-ru/ds-uikit-product-card-predefined';
import { useState } from 'react';

export function WithFavorite() {
  const [isFavorite, setIsFavorite] = useState(false);

  return (
    <CardServiceSmall
      title='Название сервиса'
      emblem={{ icon: PlaceholderSVG }}
      actionsVisibility={VISIBILITY_STRATEGY.always}
      favorite={{
        enabled: true,
        checked: isFavorite,
        onChange: setIsFavorite,
      }}
    />
  );
}

{\fn黑体\fs20\shad2\2aH82\3aH20\4aH33\fscx95\3cH592001\be1}你觉得怎样

import { PlaceholderSVG } from '@cloud-ru/ds-icons/interface/system';
import { CardServiceSmall, VISIBILITY_STRATEGY } from '@cloud-ru/ds-uikit-product-card-predefined';

export function WithFavoriteHover() {
  return (
    <CardServiceSmall
      title='Название сервиса'
      emblem={{ icon: PlaceholderSVG }}
      actionsVisibility={VISIBILITY_STRATEGY.hover}
      favorite={{ enabled: true }}
    />
  );
}

Неактивное

已禁用 .

import { PlaceholderSVG } from '@cloud-ru/ds-icons/interface/system';
import { CardServiceSmall } from '@cloud-ru/ds-uikit-product-card-predefined';

export function Disabled() {
  return <CardServiceSmall title='Название сервиса' emblem={{ icon: PlaceholderSVG }} disabled />;
}

Обработка

(笑声) (掌声) (掌声).

import { PlaceholderSVG } from '@cloud-ru/ds-icons/interface/system';
import { Typography } from '@cloud-ru/ds-typography';
import { CardServiceSmall } from '@cloud-ru/ds-uikit-product-card-predefined';
import { useState } from 'react';

export function WithOnClick() {
  const [clicks, setClicks] = useState(0);

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
      <CardServiceSmall
        title='Название сервиса'
        emblem={{ icon: PlaceholderSVG }}
        onClick={() => setClicks(c => c + 1)}
      />

      <Typography variant='body' size='m'>
        Кликов по карточке: {clicks}
      </Typography>
    </div>
  );
}

Ссылка(多态)

? 当作? ? ? .

import { PlaceholderSVG } from '@cloud-ru/ds-icons/interface/system';
import { CardServiceSmall } from '@cloud-ru/ds-uikit-product-card-predefined';

export function PolymorphicLink() {
  return (
    <CardServiceSmall
      as='a'
      href='https://cloud.ru'
      target='_blank'
      title='Ссылка-сервис'
      emblem={{ icon: PlaceholderSVG }}
    />
  );
}

道具

卡片服务小方案

Prop	类型	默认	说明
`actionsVisibility`	`"always"` \| `"hover"`	`'hover'`	Формат:всегда也
`as`	`ElementType`	—— 说	校对:Soup `'div'`, (中文(简体) ), `'a'`, (中文(简体) ), `{Link}` {\fn黑体\fs22\bord1\shad0\3ahbe\4ah00\fscx67\fscy66\2chffffff\3ch808080}你觉得呢.
`checked`	`boolean`	—— 说	Выбранное
`className`	`string`	—— 说	CSS - класс элемента
`data-test-id`	`string`	—— 说	支持道具 # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # #
`disabled`	`boolean`	—— 说	Неактивное
`emblem`	`ReactElement<any, string \| JSXElementConstructor<any>> \| { icon: JSXElementConstructor<{ className?: string \| undefined; size?: number \| undefined; }>; }`	—— 说	Эмблема:объект也. Принимает `{ icon: JSXElementConstructor }` 反弹.
`favorite`	`FavoriteProps`	—— 说	{\fn黑体\fs22\bord1\shad0\3aHBE\4aH00\fscx67\fscy66\2cHFFFFFF\3cH808080}你觉得呢
`innerRef`	`PolymorphicRef`	—— 说	参考:
`outline`	`boolean`	—— 说	{\fn黑体\fs22\bord1\shad0\3aHBE\4aH00\fscx67\fscy66\2cHFFFFFF\3cH808080}你觉得呢
`promoBadge`	`PromoTagOwnProps` \| `PromoTagProps`	—— 说	(原始内容存档于2018-10-21) (中文(简体) ). Тип- `PromoTagProps` из `@cloud-ru/ds-promo-tag`。。。 .
`title`	`string`	—— 说	Заголовок
`truncate`	`{ title?: number; }`	—— 说	{\fn黑体\fs22\bord1\shad0\3aHBE\4aH00\fscx67\fscy66\2cHFFFFFF\3cH808080}你觉得呢

最爱选项

Prop	类型	默认	说明
`checked`	`boolean \| undefined`	—— 说	Состояние(受控)
`enabled`	`boolean`	—— 说	{\fn黑体\fs22\bord1\shad0\3aHBE\4aH00\fscx67\fscy66\2cHFFFFFF\3cH808080}你觉得呢
`onChange`	`((value: boolean) => void) \| undefined`	—— 说	{\fn黑体\fs22\bord1\shad0\3aHBE\4aH00\fscx67\fscy66\2cHFFFFFF\3cH808080}你觉得呢

VisibilityStrategy =: "always" | "hover"

Видимость

Проп actionsVisibility (单位:千美元)'hover' по умолчанию управляет {\fn黑体\fs22\bord1\shad0\3ahbe\4ah00\fscx67\fscy66\2chffffff\3ch808080}你觉得呢. пакета. favorite.visibilityStrategy и: actionsVisibility не,значение也.

纸牌推荐

{\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}你觉得呢.

Примеры

Базовый

==================================================================================================== =================================================== (============================ (========= (=============.

import { CARD_SIZE, CardSuggest } from '@cloud-ru/ds-uikit-product-card-predefined';

export function Basic() {
  return (
    <CardSuggest
      title='Подсказка для пользователя'
      content='Краткое описание действия или функциональности'
      size={CARD_SIZE.M}
    />
  );
}

Размерs

大小="''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''.

import { CARD_SIZE, CardSuggest } from '@cloud-ru/ds-uikit-product-card-predefined';

export function SizeSmall() {
  return (
    <CardSuggest
      title='Подсказка для пользователя'
      content='Краткое описание действия или функциональности'
      size={CARD_SIZE.S}
    />
  );
}

{\fn黑体\fs22\bord1\shad0\3aHBE\4aH00\fscx67\fscy66\2cHFFFFFF\3cH808080}我很高兴见到你.

import { APPEARANCE, ROLE_APPEARANCE, SIZE } from '@cloud-ru/ds-promo-tag';
import { CardSuggest } from '@cloud-ru/ds-uikit-product-card-predefined';

export function WithPromoTag() {
  return (
    <CardSuggest
      title='Подсказка для пользователя'
      content='Краткое описание действия или функциональности'
      promoBadge={{
        label: 'New',
        appearance: APPEARANCE.Primary,
        role: ROLE_APPEARANCE.Accent,
        size: SIZE.Xs,
      }}
    />
  );
}

Обрезка

{\fn黑体\fs22\bord1\shad0\3aHBE\4aH00\fscx67\fscy66\2cHFFFFFF\3cH808080}短道速滑 {\fn黑体\fs22\bord1\shad0\3aHBE\4aH00\fscx67\fscy66\2cHFFFFFF\3cH808080}小调.

import { CardSuggest } from '@cloud-ru/ds-uikit-product-card-predefined';

const longTitle =
  'Очень длинный заголовок подсказки, который не помещается в две строки и обрезается через TruncateString';
const longDescription =
  'Очень длинное описание подсказки, которое не помещается в три строки и обрезается через TruncateString. Дополнительный текст для демонстрации обрезки.';

export function WithTruncate() {
  return (
    <div style={{ maxWidth: 320 }}>
      <CardSuggest title={longTitle} content={longDescription} truncate={{ title: 2, content: 3 }} />
    </div>
  );
}

Неактивное

已禁用 .

import { CardSuggest } from '@cloud-ru/ds-uikit-product-card-predefined';

export function Disabled() {
  return (
    <CardSuggest title='Подсказка для пользователя' content='Краткое описание действия или функциональности' disabled />
  );
}

Обработка

(笑声) (掌声) (掌声).

import { Typography } from '@cloud-ru/ds-typography';
import { CardSuggest } from '@cloud-ru/ds-uikit-product-card-predefined';
import { useState } from 'react';

export function WithOnClick() {
  const [clicks, setClicks] = useState(0);

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
      <CardSuggest
        title='Подсказка для пользователя'
        content='Краткое описание действия или функциональности'
        onClick={() => setClicks(c => c + 1)}
      />

      <Typography variant='body' size='m'>
        Кликов по карточке: {clicks}
      </Typography>
    </div>
  );
}

Ссылка(多态)

? 当作? ? ? .

import { CardSuggest } from '@cloud-ru/ds-uikit-product-card-predefined';

export function PolymorphicLink() {
  return (
    <CardSuggest
      as='a'
      href='https://cloud.ru'
      target='_blank'
      title='Подсказка-ссылка'
      content='Это якорный элемент'
    />
  );
}

道具

卡片推荐方案

Prop	类型	默认	说明
`as`	`ElementType`	—— 说	校对:Soup `'div'`, (中文(简体) ), `'a'`, (中文(简体) ), `{Link}` {\fn黑体\fs22\bord1\shad0\3ahbe\4ah00\fscx67\fscy66\2chffffff\3ch808080}你觉得呢.
`className`	`string`	—— 说	CSS - класс элемента
`content`	`string`	—— 说	Описание
`data-test-id`	`string`	—— 说	支持道具 # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # #
`disabled`	`boolean`	—— 说	Неактивное
`innerRef`	`PolymorphicRef`	—— 说	参考:
`promoBadge`	`PromoTagOwnProps` \| `PromoTagProps`	—— 说	Промо -тег. Используйте `PromoTagProps` из `@cloud-ru/ds-promo-tag`。。。 .
`size`	`"m"` \| `"s"`	`m`	Размер:управляет也. `'m'` 角色Title/m + 角色Body/m, 贴上16px; `'s'` ——角色Title/s + 角色Body/s,被贴上8px.
`title`	`string`	—— 说	Заголовок
`truncate`	`{ title?: number; content?: number; } \| undefined`	—— 说	{\fn黑体\fs22\bord1\shad0\3aHBE\4aH00\fscx67\fscy66\2cHFFFFFF\3cH808080}你觉得呢

CardSize =: "m" | "s"

版本与发布记录

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

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

关于 @cloud-ru/ds-uikit-product-card-predefined 的常见问题

@cloud-ru/ds-uikit-product-card-predefined 是什么？

QQ 产品 UI Kit – 名牌班纳,名牌服务,名牌服务灯,名牌服务 Small,名牌Suggest,名牌Custom.

如何安装 @cloud-ru/ds-uikit-product-card-predefined？

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

@cloud-ru/ds-uikit-product-card-predefined 支持 TypeScript 吗？

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

@cloud-ru/ds-uikit-product-card-predefined 支持 ESM 还是 CommonJS？

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

@cloud-ru/ds-uikit-product-card-predefined 可以商用吗？

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

@cloud-ru/ds-uikit-product-card-predefined 的下载量有多少？

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

@cloud-ru/ds-uikit-product-card-predefined 还在维护吗？

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

npm install @cloud-ru/ds-uikit-product-card-predefined

pnpmpnpm add @cloud-ru/ds-uikit-product-card-predefined
yarnyarn add @cloud-ru/ds-uikit-product-card-predefined
bunbun add @cloud-ru/ds-uikit-product-card-predefined

在你的项目目录中运行此命令。

近 30 天下载

7,803

约 7803 次日均 260 次

统计周期 2026/10/10 – 2026/11/08
数据来自 npm 官方下载统计，1 天前更新

最新版本4.2.0发布于今天

开源许可Apache-2.0宽松许可

包体积1 MB352 个文件 · 解压后

运行依赖18 个

模块格式ESM + CJS

TypeScript自带类型

发布版本194 个近 12 个月 194 个

首次发布2026/08/182 个月前

元数据更新2026/11/11

每一个软件包背后，
都有分享与创造的人。

@cloud-ru/ds-uikit-product-card-predefined

卡片预定义

Установка

纸牌

Когда

Примеры

Базовый

Обработка

Закрываемый

Ссылка(多态)

道具

卡片服务

Когда

道具

卡片服务灯

Когда

Примеры

Базовый

宣传标签

Обрезка

{\fn黑体\fs20\shad2\2aH82\3aH20\4aH33\fscx95\3cH592001\be1}你觉得怎样

Неактивное

Обработка

Ссылка(多态)

道具

相关类型

Видимость

Адаптивность

卡片服务信息

Когда

Примеры

Базовый

宣传标签

{\fn黑体\fs20\shad2\2aH82\3aH20\4aH33\fscx95\3cH592001\be1}你觉得怎样

Неактивное

Обработка

Ссылка(多态)

道具

相关类型

小型卡片服务

Примеры

Базовый

宣传徽章

Обрезка

Выбранное

QQ( 外线)

{\fn黑体\fs20\shad2\2aH82\3aH20\4aH33\fscx95\3cH592001\be1}你觉得怎样

Неактивное

Обработка

Ссылка(多态)

道具

相关类型

Видимость

纸牌推荐

Когда

Примеры

Базовый

Размерs

宣传徽章

Обрезка

Неактивное

Обработка

Ссылка(多态)

道具

相关类型

版本与发布记录

关于 @cloud-ru/ds-uikit-product-card-predefined 的常见问题

@cloud-ru/ds-uikit-product-card-predefined 是什么？

如何安装 @cloud-ru/ds-uikit-product-card-predefined？

@cloud-ru/ds-uikit-product-card-predefined 支持 TypeScript 吗？

@cloud-ru/ds-uikit-product-card-predefined 支持 ESM 还是 CommonJS？

@cloud-ru/ds-uikit-product-card-predefined 可以商用吗？

@cloud-ru/ds-uikit-product-card-predefined 的下载量有多少？

@cloud-ru/ds-uikit-product-card-predefined 还在维护吗？