Компоненты

Logo

Основы

Компонент Logo отображает логотип вашей админ-панели.

make(
    string $href,
    string $logo,
    ?string $logoSmall = null,
    ?string $title = null,
    bool $minimized = false,
)
make(
    string $href,
    string $logo,
    ?string $logoSmall = null,
    ?string $title = null,
    bool $minimized = false,
)
  • $href - адрес ссылки для перехода по клику на логотип,
  • $logo - ссылка на изображения логотипа,
  • $logoSmall - ссылка на уменьшенную версию логотипа,
  • $title - подсказа при наведении,
  • $minimized - взаимодействует с Sidebar. Если установлено true, то автоматически будет выбрано small logo.
use MoonShine\UI\Components\Layout\Logo;
 
Logo::make(
    '/admin',
    '/vendor/moonshine/logo.svg',
    '/vendor/moonshine/logo-small.svg'
),
use MoonShine\UI\Components\Layout\Logo;
 
Logo::make(
    '/admin',
    '/vendor/moonshine/logo.svg',
    '/vendor/moonshine/logo-small.svg'
),
<x-moonshine::layout.logo
    :href="'/admin'"
    :logo="'/vendor/moonshine/logo.svg'"
    :logoSmall="'/vendor/moonshine/logo-small.svg'"
/>
<x-moonshine::layout.logo
    :href="'/admin'"
    :logo="'/vendor/moonshine/logo.svg'"
    :logoSmall="'/vendor/moonshine/logo-small.svg'"
/>

Атрибуты

Для добавления атрибутов к тегу img у лого существуют два метода для двух режимов отображения - logoAttributes() и logoSmallAttributes().

logoAttributes(array $attributes)
 
logoSmallAttributes(array $attributes)
logoAttributes(array $attributes)
 
logoSmallAttributes(array $attributes)

Тёмная тема

Вы можете отдельно указать логотипы для тёмной темы. Для этого воспользуйтесь методом darkMode().

darkMode(string $logo, ?string $small = null)
darkMode(string $logo, ?string $small = null)
protected function getLogoComponent(): Logo
{
    return parent::getLogoComponent()
        ->darkMode(
            asset('logo-dark.svg'),
            asset('logo-dark-small.svg'),
        );
}
protected function getLogoComponent(): Logo
{
    return parent::getLogoComponent()
        ->darkMode(
            asset('logo-dark.svg'),
            asset('logo-dark-small.svg'),
        );
}