Tile

import { Tile } from '@megafon/ui-core';

Примеры и код
Свойства и методы

Код DemoTileWrapperexport const DemoTileWrapper = (props: {
    wrapperTheme: 'light' | 'dark',
    children: JSX.Element[] | Element[] | JSX.Element | Element | string,
}) => {
    const { wrapperTheme = 'light', children } = props;
    const theme = wrapperTheme === 'dark' ? darkWrapperStyle : lightWrapperStyle;
    return <div style={theme}>{children}</div>;
};

Код tileInnerconst tileInner = {
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    padding: '15px',
    height: '100%',
    boxSizing: 'border-box',
    width: '50px',
    margin: '0 auto',
};

Формы

Квадратная плитка

Округлая плитка

<DemoTileWrapper>
  <Tile shadowLevel="default">
    <div style={tileInner}>Квадратная плитка</div>
  </Tile>
  <Tile radius="rounded" shadowLevel="default">
    <div style={tileInner}>Округлая плитка</div>
  </Tile>
</DemoTileWrapper>

<DemoTileWrapper>
  <Tile shadowLevel="default">
    <div style={tileInner}>Квадратная плитка</div>
  </Tile>
  <Tile radius="rounded" shadowLevel="default">
    <div style={tileInner}>Округлая плитка</div>
  </Tile>
</DemoTileWrapper>

Тени

Zero

Default

Hover

Pressed

<DemoTileWrapper>
  <Tile shadowLevel="zero">
    <div style={tileInner}>Zero</div>
  </Tile>
  <Tile shadowLevel="default">
    <div style={tileInner}>Default</div>
  </Tile>
  <Tile shadowLevel="hover">
    <div style={tileInner}>Hover</div>
  </Tile>
  <Tile shadowLevel="pressed">
    <div style={tileInner}>Pressed</div>
  </Tile>
</DemoTileWrapper>

<DemoTileWrapper>
  <Tile shadowLevel="zero">
    <div style={tileInner}>Zero</div>
  </Tile>
  <Tile shadowLevel="default">
    <div style={tileInner}>Default</div>
  </Tile>
  <Tile shadowLevel="hover">
    <div style={tileInner}>Hover</div>
  </Tile>
  <Tile shadowLevel="pressed">
    <div style={tileInner}>Pressed</div>
  </Tile>
</DemoTileWrapper>

Тень при наведении

Zero

Default

Hover

Pressed

<DemoTileWrapper>
  <Tile isInteractive shadowLevel="zero">
    <div style={tileInner}>Zero</div>
  </Tile>
  <Tile isInteractive shadowLevel="default">
    <div style={tileInner}>Default</div>
  </Tile>
  <Tile isInteractive shadowLevel="hover">
    <div style={tileInner}>Hover</div>
  </Tile>
  <Tile isInteractive shadowLevel="pressed">
    <div style={tileInner}>Pressed</div>
  </Tile>
</DemoTileWrapper>

<DemoTileWrapper>
  <Tile isInteractive shadowLevel="zero">
    <div style={tileInner}>Zero</div>
  </Tile>
  <Tile isInteractive shadowLevel="default">
    <div style={tileInner}>Default</div>
  </Tile>
  <Tile isInteractive shadowLevel="hover">
    <div style={tileInner}>Hover</div>
  </Tile>
  <Tile isInteractive shadowLevel="pressed">
    <div style={tileInner}>Pressed</div>
  </Tile>
</DemoTileWrapper>

Цветовой фон

Светлый

Zero shadow

Default shadow

Hover shadow

Pressed shadow

Zero shadow

Default shadow

Hover shadow

Pressed shadow

<DemoTileWrapper>
  <Tile shadowLevel="zero" theme="light">
    <div style={tileInner}>Zero shadow</div>
  </Tile>
  <Tile shadowLevel="default" theme="light">
    <div style={tileInner}>Default shadow</div>
  </Tile>
  <Tile shadowLevel="hover" theme="light">
    <div style={tileInner}>Hover shadow</div>
  </Tile>
  <Tile shadowLevel="pressed" theme="light">
    <div style={tileInner}>Pressed shadow</div>
  </Tile>
</DemoTileWrapper>
<DemoTileWrapper>
  <Tile radius="rounded" shadowLevel="zero" theme="light">
    <div style={tileInner}>Zero shadow</div>
  </Tile>
  <Tile radius="rounded" shadowLevel="default" theme="light">
    <div style={tileInner}>Default shadow</div>
  </Tile>
  <Tile radius="rounded" shadowLevel="hover" theme="light">
    <div style={tileInner}>Hover shadow</div>
  </Tile>
  <Tile radius="rounded" shadowLevel="pressed" theme="light">
    <div style={tileInner}>Pressed shadow</div>
  </Tile>
</DemoTileWrapper>

<DemoTileWrapper>
  <Tile shadowLevel="zero" theme="light">
    <div style={tileInner}>Zero shadow</div>
  </Tile>
  <Tile shadowLevel="default" theme="light">
    <div style={tileInner}>Default shadow</div>
  </Tile>
  <Tile shadowLevel="hover" theme="light">
    <div style={tileInner}>Hover shadow</div>
  </Tile>
  <Tile shadowLevel="pressed" theme="light">
    <div style={tileInner}>Pressed shadow</div>
  </Tile>
</DemoTileWrapper>
<DemoTileWrapper>
  <Tile radius="rounded" shadowLevel="zero" theme="light">
    <div style={tileInner}>Zero shadow</div>
  </Tile>
  <Tile radius="rounded" shadowLevel="default" theme="light">
    <div style={tileInner}>Default shadow</div>
  </Tile>
  <Tile radius="rounded" shadowLevel="hover" theme="light">
    <div style={tileInner}>Hover shadow</div>
  </Tile>
  <Tile radius="rounded" shadowLevel="pressed" theme="light">
    <div style={tileInner}>Pressed shadow</div>
  </Tile>
</DemoTileWrapper>

Тёмный

Тень плитки более прозрачная

Zero shadow

Default shadow

Hover shadow

Pressed shadow

Zero shadow

Default shadow

Hover shadow

Pressed shadow

<DemoTileWrapper wrapperTheme="dark">
  <Tile shadowLevel="zero" theme="dark">
    <div style={tileInnerWhite}>Zero shadow</div>
  </Tile>
  <Tile shadowLevel="default" theme="dark">
    <div style={tileInnerWhite}>Default shadow</div>
  </Tile>
  <Tile shadowLevel="hover" theme="dark">
    <div style={tileInnerWhite}>Hover shadow</div>
  </Tile>
  <Tile shadowLevel="pressed" theme="dark">
    <div style={tileInnerWhite}>Pressed shadow</div>
  </Tile>
</DemoTileWrapper>
<DemoTileWrapper wrapperTheme="dark">
  <Tile radius="rounded" shadowLevel="zero">
    <div style={tileInnerWhiteRounded}>Zero shadow</div>
  </Tile>
  <Tile radius="rounded" shadowLevel="default">
    <div style={tileInnerWhiteRounded}>Default shadow</div>
  </Tile>
  <Tile radius="rounded" shadowLevel="hover">
    <div style={tileInnerWhiteRounded}>Hover shadow</div>
  </Tile>
  <Tile radius="rounded" shadowLevel="pressed">
    <div style={tileInnerWhiteRounded}>Pressed shadow</div>
  </Tile>
</DemoTileWrapper>

<DemoTileWrapper wrapperTheme="dark">
  <Tile shadowLevel="zero" theme="dark">
    <div style={tileInnerWhite}>Zero shadow</div>
  </Tile>
  <Tile shadowLevel="default" theme="dark">
    <div style={tileInnerWhite}>Default shadow</div>
  </Tile>
  <Tile shadowLevel="hover" theme="dark">
    <div style={tileInnerWhite}>Hover shadow</div>
  </Tile>
  <Tile shadowLevel="pressed" theme="dark">
    <div style={tileInnerWhite}>Pressed shadow</div>
  </Tile>
</DemoTileWrapper>
<DemoTileWrapper wrapperTheme="dark">
  <Tile radius="rounded" shadowLevel="zero">
    <div style={tileInnerWhiteRounded}>Zero shadow</div>
  </Tile>
  <Tile radius="rounded" shadowLevel="default">
    <div style={tileInnerWhiteRounded}>Default shadow</div>
  </Tile>
  <Tile radius="rounded" shadowLevel="hover">
    <div style={tileInnerWhiteRounded}>Hover shadow</div>
  </Tile>
  <Tile radius="rounded" shadowLevel="pressed">
    <div style={tileInnerWhiteRounded}>Pressed shadow</div>
  </Tile>
</DemoTileWrapper>

Ссылка

<DemoTileWrapper>
  <div style={{ width: '350px' }}>
    <Tile shadowLevel="pressed" href="#">
      <div style={tileInner}>Ссылка</div>
    </Tile>
  </div>
</DemoTileWrapper>

<DemoTileWrapper>
  <div style={{ width: '350px' }}>
    <Tile shadowLevel="pressed" href="#">
      <div style={tileInner}>Ссылка</div>
    </Tile>
  </div>
</DemoTileWrapper>