diff --git a/docs/components-api/skeleton.md b/docs/components-api/skeleton.md index 3d44f4d9..85914580 100644 --- a/docs/components-api/skeleton.md +++ b/docs/components-api/skeleton.md @@ -2,8 +2,15 @@ # ExtraSkeleton +> ✅ **Реализован**: `ExtraSkeletonComponent` (`@cdek-it/angular-ui-kit`) соответствует спецификации. + Плейсхолдер контента на момент загрузки. -| Свойство | Описание | Типизация | -| -------- | -------- | --------------------- | -| `shape` | форма | `rectangle \| circle` | +| Свойство | Описание | Типизация | +| -------------- | --------------------------------------------------------------------------- | --------------------- | +| `shape` | форма | `rectangle \| circle` | +| `animation` | тип анимации: волновой шиммер или без анимации | `wave \| none` | +| `width` | ширина элемента (CSS-значение); игнорируется при заданном `size` | `string` | +| `height` | высота элемента (CSS-значение); игнорируется при заданном `size` | `string` | +| `size` | размер элемента, задаёт ширину и высоту одновременно (для `shape="circle"`) | `string \| undefined` | +| `borderRadius` | скругление углов (CSS-значение), переопределяет значение темы | `string \| undefined` | diff --git a/src/stories/components/skeleton/examples/skeleton-card-placeholder.component.ts b/src/stories/components/skeleton/examples/skeleton-card-placeholder.component.ts index 18196fbd..b2ee1317 100644 --- a/src/stories/components/skeleton/examples/skeleton-card-placeholder.component.ts +++ b/src/stories/components/skeleton/examples/skeleton-card-placeholder.component.ts @@ -37,7 +37,7 @@ export const CardPlaceholder: StoryObj = { language: 'ts', code: ` import { Component } from '@angular/core'; -import { SkeletonComponent } from '@cdek-it/angular-ui-kit'; +import { ExtraSkeletonComponent } from '@cdek-it/angular-ui-kit'; @Component({ selector: 'app-skeleton-card-placeholder', diff --git a/src/stories/components/skeleton/examples/skeleton-circle.component.ts b/src/stories/components/skeleton/examples/skeleton-circle.component.ts index b74668f8..544cc382 100644 --- a/src/stories/components/skeleton/examples/skeleton-circle.component.ts +++ b/src/stories/components/skeleton/examples/skeleton-circle.component.ts @@ -36,7 +36,7 @@ export const Circle: StoryObj = { language: 'ts', code: ` import { Component } from '@angular/core'; -import { SkeletonComponent } from '@cdek-it/angular-ui-kit'; +import { ExtraSkeletonComponent } from '@cdek-it/angular-ui-kit'; @Component({ selector: 'app-skeleton-circle', diff --git a/src/stories/components/skeleton/examples/skeleton-no-animation.component.ts b/src/stories/components/skeleton/examples/skeleton-no-animation.component.ts index 7a3d93d5..491b74bd 100644 --- a/src/stories/components/skeleton/examples/skeleton-no-animation.component.ts +++ b/src/stories/components/skeleton/examples/skeleton-no-animation.component.ts @@ -34,7 +34,7 @@ export const NoAnimation: StoryObj = { language: 'ts', code: ` import { Component } from '@angular/core'; -import { SkeletonComponent } from '@cdek-it/angular-ui-kit'; +import { ExtraSkeletonComponent } from '@cdek-it/angular-ui-kit'; @Component({ selector: 'app-skeleton-no-animation', diff --git a/src/stories/components/skeleton/examples/skeleton-rectangles.component.ts b/src/stories/components/skeleton/examples/skeleton-rectangles.component.ts index 945ac35a..bbc41eee 100644 --- a/src/stories/components/skeleton/examples/skeleton-rectangles.component.ts +++ b/src/stories/components/skeleton/examples/skeleton-rectangles.component.ts @@ -2,8 +2,10 @@ import { ChangeDetectionStrategy, Component } from '@angular/core'; import { StoryObj } from '@storybook/angular'; import { ExtraSkeletonComponent } from '../../../../lib/components/skeleton/skeleton.component'; +// Пунктирная рамка — границы контейнера: без неё верхняя строка выглядит просто длинной +// полосой, и не видно, что width по умолчанию равен 100% и считается от родителя. const template = ` -
+
@@ -30,13 +32,14 @@ export const Rectangles: StoryObj = { parameters: { docs: { description: { - story: 'Прямоугольные строки-заглушки разной ширины — паттерн для списка отправлений или текстового контента.' + story: + 'Прямоугольные строки-заглушки разной ширины — паттерн для списка отправлений или текстового контента. Пунктирная рамка показывает границы контейнера: `width` по умолчанию равен `100%` и считается от родителя, поэтому верхняя строка занимает его целиком, а следующие — 75% и 50% от той же ширины.' }, source: { language: 'ts', code: ` import { Component } from '@angular/core'; -import { SkeletonComponent } from '@cdek-it/angular-ui-kit'; +import { ExtraSkeletonComponent } from '@cdek-it/angular-ui-kit'; @Component({ selector: 'app-skeleton-rectangles', @@ -44,10 +47,12 @@ import { SkeletonComponent } from '@cdek-it/angular-ui-kit'; changeDetection: ChangeDetectionStrategy.OnPush, imports: [ExtraSkeletonComponent], template: \` -
- - - +
+
+ + + +
\`, }) diff --git a/src/stories/components/skeleton/skeleton.stories.ts b/src/stories/components/skeleton/skeleton.stories.ts index 975acc96..c628ce4c 100644 --- a/src/stories/components/skeleton/skeleton.stories.ts +++ b/src/stories/components/skeleton/skeleton.stories.ts @@ -26,7 +26,7 @@ const meta: Meta = { component: `Заглушка для контента, пока данные загружаются. Поддерживает прямоугольную и круглую форму, а также волновую анимацию. \`\`\`typescript -import { SkeletonComponent } from '@cdek-it/angular-ui-kit'; +import { ExtraSkeletonComponent } from '@cdek-it/angular-ui-kit'; \`\`\`` } }, @@ -39,7 +39,7 @@ import { SkeletonComponent } from '@cdek-it/angular-ui-kit'; options: ['rectangle', 'circle'], description: 'Форма скелетона', table: { - category: 'Props', + category: 'Свойства', defaultValue: { summary: 'rectangle' }, type: { summary: "'rectangle' | 'circle'" } } @@ -49,7 +49,7 @@ import { SkeletonComponent } from '@cdek-it/angular-ui-kit'; options: ['wave', 'none'], description: 'Тип анимации', table: { - category: 'Props', + category: 'Свойства', defaultValue: { summary: 'wave' }, type: { summary: "'wave' | 'none'" } } @@ -58,7 +58,7 @@ import { SkeletonComponent } from '@cdek-it/angular-ui-kit'; control: 'text', description: 'Ширина элемента', table: { - category: 'Props', + category: 'Свойства', defaultValue: { summary: '100%' }, type: { summary: 'string' } } @@ -67,7 +67,7 @@ import { SkeletonComponent } from '@cdek-it/angular-ui-kit'; control: 'text', description: 'Высота элемента', table: { - category: 'Props', + category: 'Свойства', defaultValue: { summary: '1rem' }, type: { summary: 'string' } } @@ -76,7 +76,7 @@ import { SkeletonComponent } from '@cdek-it/angular-ui-kit'; control: 'text', description: 'Размер элемента (устанавливает ширину и высоту одновременно; используется для circle)', table: { - category: 'Props', + category: 'Свойства', defaultValue: { summary: 'undefined' }, type: { summary: 'string' } } @@ -85,7 +85,7 @@ import { SkeletonComponent } from '@cdek-it/angular-ui-kit'; control: 'text', description: 'Скругление углов (переопределяет значение темы)', table: { - category: 'Props', + category: 'Свойства', defaultValue: { summary: 'undefined' }, type: { summary: 'string' } }