import Link from '../Link'
import Div from '../Div'
import Br from '../Br'
import Rating from '../Rating'
import Button from '../Button'
import { u } from 'startupjs'
import { Sandbox } from '@startupjs/docs'

# Link (ссылка)

Ссылка позволяет перемещаться по приложению и настраивать якоря.

```jsx
import { Link } from '@startupjs/ui'
```

## Простой пример

```jsx example
return (
  <Link to='/docs/foundation/Typography'>
    Типография
  </Link>
)
```

## Различное отображение

Существует два варианта `inline` и `block` свойства `display`. Он определяется автоматически в зависимости от типа `children`, если он не указан. Когда тип `children` является строковым, он `inline` и `block` в противном случае. В зависимости от свойства `display`, компонент имеет разный вид.

```jsx example
return (
  <Div>
    <Link to='/docs/foundation/Typography'>
      Типография
    </Link>
    <Br />
    <Link to='/docs/components/Rating'>
      <Rating value={4.5} readonly />
    </Link>
  </Div>
)
```

## Цвета

Чтобы изменить цвет ссылки передайте свойство `color` (работает только когда `display` имеет значение `inline`).

```jsx example
return (
  <Link
    to='/docs/foundation/Typography'
    color='primary'
  >
    Типография
  </Link>
)
```

## Жирная ссылка

Чтобы сделать текст ссылки жирным, передайте компоненту свойство `bold`.

```jsx example
return (
  <Link to='/docs/foundation/Typography' bold>
    Типография
  </Link>
)
```

## Курсив

Чтобы сделать текст ссылки курсивом, передайте компоненту свойство `italic`.

```jsx example
return (
  <Link to='/docs/foundation/Typography' italic>
    Типография
  </Link>
)
```

## Стиль наведения

Вы можете изменить стиль наведения, как в [Div компоненте](/docs/components/Div) передав `variant='highlight'` (работает только когда `display` имеет значение `block`).

```jsx example
const style = {
  height: u(10),
  backgroundColor: 'white',
  alignItems: 'center',
  justifyContent: 'center'
}
return (
  <Link
    style={style}
    to='/docs/components/Rating'
    variant='highlight'
  >
    <Rating value={4.5} readonly />
  </Link>
)
```

## Кнопка в качестве ссылки

Иногда вы хотите сделать кнопку в качестве ссылки. Приведенный ниже пример иллюстрирует, как это сделать правильно.

```jsx example
return (
  <Link to='/docs/foundation/Typography'>
    <Button color='primary' variant='flat'>Typography</Button>
  </Link>
)
```

## Действия

Передавая `onPress` обработчик в компонент, вы можете выполнить некоторую логику перед перенаправлением.

```jsx example
function onPress (event) {
  console.log('Go to alert docs')
}
return (
  <Link
    color='primary'
    to='/docs/components/Alert'
    onPress={onPress}
  >
    Alert docs
  </Link>
)
```

## Sandbox

<Sandbox
  Component={Link}
  props={{
    to: '#',
    children: 'StartupJS'
  }}
/>