# Skeleton Набор компонентов для создания скелетов загрузки (плейсхолдеров). ## LineSkeleton Props (свойства) для компонента LineSkeleton: [{"name":"view","type":{"name":"enum","raw":"\"default\" | \"lighter\"","value":[{"value":"\"default\""},{"value":"\"lighter\""}]}},{"name":"size","type":{"name":"enum","raw":"\"caption\" | \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"body1\" | \"body2\" | \"body3\" | \"button1\" | \"button2\" | \"display1\" | \"display2\" | \"display3\" | \"footnote1\" | \"footnote2\" | \"headline1\" | ... 18 more ...","value":[{"value":"\"caption\""},{"value":"\"h1\""},{"value":"\"h2\""},{"value":"\"h3\""},{"value":"\"h4\""},{"value":"\"h5\""},{"value":"\"body1\""},{"value":"\"body2\""},{"value":"\"body3\""},{"value":"\"button1\""},{"value":"\"button2\""},{"value":"\"display1\""},{"value":"\"display2\""},{"value":"\"display3\""},{"value":"\"footnote1\""},{"value":"\"footnote2\""},{"value":"\"headline1\""},{"value":"\"headline2\""},{"value":"\"headline3\""},{"value":"\"headline4\""},{"value":"\"paragraph1\""},{"value":"\"paragraph2\""},{"value":"\"underline\""},{"value":"\"bodyL\""},{"value":"\"bodyM\""},{"value":"\"bodyS\""},{"value":"\"bodyXS\""},{"value":"\"bodyXXS\""},{"value":"\"dsplL\""},{"value":"\"dsplM\""},{"value":"\"dsplS\""},{"value":"\"textL\""},{"value":"\"textM\""},{"value":"\"textS\""},{"value":"\"textXS\""}]}},{"name":"customGradientColor","type":{"name":"string"}},{"name":"roundness","type":{"name":"enum","raw":"0 | 8 | 12 | 14 | 16 | 18 | 20 | 24 | 28 | 32 | 250","value":[{"value":"0"},{"value":"8"},{"value":"12"},{"value":"14"},{"value":"16"},{"value":"18"},{"value":"20"},{"value":"24"},{"value":"28"},{"value":"32"},{"value":"250"}]}},{"name":"lighter","type":{"name":"boolean"}}] ## RectSkeleton Props (свойства) для компонента RectSkeleton: [{"name":"width","type":{"name":"string | number"}},{"name":"height","type":{"name":"string | number"}},{"name":"customGradientColor","type":{"name":"string"}},{"name":"roundness","type":{"name":"enum","raw":"0 | 8 | 12 | 14 | 16 | 18 | 20 | 24 | 28 | 32 | 250","value":[{"value":"0"},{"value":"8"},{"value":"12"},{"value":"14"},{"value":"16"},{"value":"18"},{"value":"20"},{"value":"24"},{"value":"28"},{"value":"32"},{"value":"250"}]}},{"name":"lighter","type":{"name":"boolean"}}] ## TextSkeleton Props (свойства) для компонента TextSkeleton: [{"name":"view","type":{"name":"enum","raw":"\"default\" | \"lighter\"","value":[{"value":"\"default\""},{"value":"\"lighter\""}]}},{"name":"size","type":{"name":"enum","raw":"\"caption\" | \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"body1\" | \"body2\" | \"body3\" | \"button1\" | \"button2\" | \"display1\" | \"display2\" | \"display3\" | \"footnote1\" | \"footnote2\" | \"headline1\" | ... 18 more ...","value":[{"value":"\"caption\""},{"value":"\"h1\""},{"value":"\"h2\""},{"value":"\"h3\""},{"value":"\"h4\""},{"value":"\"h5\""},{"value":"\"body1\""},{"value":"\"body2\""},{"value":"\"body3\""},{"value":"\"button1\""},{"value":"\"button2\""},{"value":"\"display1\""},{"value":"\"display2\""},{"value":"\"display3\""},{"value":"\"footnote1\""},{"value":"\"footnote2\""},{"value":"\"headline1\""},{"value":"\"headline2\""},{"value":"\"headline3\""},{"value":"\"headline4\""},{"value":"\"paragraph1\""},{"value":"\"paragraph2\""},{"value":"\"underline\""},{"value":"\"bodyL\""},{"value":"\"bodyM\""},{"value":"\"bodyS\""},{"value":"\"bodyXS\""},{"value":"\"bodyXXS\""},{"value":"\"dsplL\""},{"value":"\"dsplM\""},{"value":"\"dsplS\""},{"value":"\"textL\""},{"value":"\"textM\""},{"value":"\"textS\""},{"value":"\"textXS\""}]}},{"name":"customGradientColor","type":{"name":"string"}},{"name":"roundness","type":{"name":"enum","raw":"0 | 8 | 12 | 14 | 16 | 18 | 20 | 24 | 28 | 32 | 250","value":[{"value":"0"},{"value":"8"},{"value":"12"},{"value":"14"},{"value":"16"},{"value":"18"},{"value":"20"},{"value":"24"},{"value":"28"},{"value":"32"},{"value":"250"}]}},{"name":"lighter","type":{"name":"boolean"}},{"name":"lines","type":{"name":"number"}},{"name":"width","type":{"name":"string | number"}}] ## На примере карточки ## Доступность При использование хока `withSkeleton` необходимо воспользоваться атрибутами WAI ARIA. Пример с кнопкой: Таким образом, при `skeleton=true` и `aria-busy=true` скринридер будет оповещать о соответствующем статусе компонента.