УрФУ

Profile 🔗

Компонент для отображения информации про пользователей

Пример использования:

Profile

Петров Пётр Петрович

Исполняющий обязанности замещающего заместителя

undefined

Profile

Иванов Иван Иванович

Заместитель главного заместителя

undefined

Profile

Николаев Николай Николаевич

Директор директоров

undefined


Исходный код для примера выше: 

<Grid l={3}>
    <Profile variant="white">
        <svelte:fragment slot="name">Петров Пётр Петрович</svelte:fragment>
        <svelte:fragment slot="description">Исполняющий обязанности замещающего заместителя</svelte:fragment>
        <svelte:fragment slot="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit...</svelte:fragment>
    </Profile>
    <Profile variant="white">
        <svelte:fragment slot="name">Иванов Иван Иванович</svelte:fragment>
        <svelte:fragment slot="description">Заместитель главного заместителя</svelte:fragment>
        <svelte:fragment slot="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit...</svelte:fragment>
    </Profile>
    <Profile variant="white">
        <svelte:fragment slot="name">Николаев Николай Николаевич</svelte:fragment>
        <svelte:fragment slot="description">Директор директоров</svelte:fragment>
        <svelte:fragment slot="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit...</svelte:fragment>
    </Profile>
</Grid>

Параметры:

variant
enum

Цвет заднего фона. Поддерживаются два значения: white и grey.
Значение по умолчанию: grey

src
string

Ссылка на изображение

transition
object

Объект, описывающий переходы для компонента. Имеет следующие свойства:
in – переход при монтировании компонента
out – переход при демонтировании компонента

Каждое из этих свойств может содержать в себе объект со следующими свойствами:
func – функция, выполняющая переход от начального состояния к конечному
options – опциональный объект с опциональными свойствами delay, duration и easing
Подробнее: Документация по Svelte

node
HTMLElement

Параметр для связки с HTML-элементом, который лежит в основе компонента
(аналог стандартного bind:this)

id
string

Аналог стандартного атрибута id

className
string

Аналог стандартного атрибута class


Слоты:

name

Имя, отображаемое в заголовке

description

Подпись под именем

text

Основное содержание компонента. Текст, длиной до 400 символов отображется целиком. Длиннее – скрывается при монтировании компонента и раскрывается по нажатию на кнопку "Дальше"


Поддерживаемые события:

on:click

on:mouseover

on:mouseleave

on:mouseup

on:mousedown