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 = ` -