Story

Интерактивный не респонсивный виджет.

Использование

HTML

<ds-story
  id="story"
  path="https://..."
></ds-story>

<script>
  // Демонстрация получения ввода на элементе
  const story = document.getElementById('story');
  if (story) {
    story.addEventListener('input', (e) => {
      console.log('Событие ввода на компоненте Story!');
    });
  }
</script>

React

import { useCallback } from 'react';
import { Story } from '@rir/ds-library';

function Component() {
  const onInput = useCallback(() => {
    console.log('Событие ввода на компоненте Story!');
  }, []);

  return (
    <>
      <Story
        path="https://..."
        onInput={onInput}
      ></Story>
    </>
  );
}

export default Component;

API

Props

Name	Type	Description	Default
path	String	Путь до картинки	''
text	String	Текст	''
loading	Boolean	Происходит загрузка?	false
_loading	undefined, String: ['true', 'false']	Дублирующий литеральный атбрибут	undefined
disabled	Boolean	Неактивная, "выключенная" кнопка?	false
_disabled	undefined, String: ['true', 'false']	Дублирующий литеральный атбрибут	undefined

Events

Name	Description
input	Событие щелчка мыши по аватаре или кнопки редактирования

Примеры проектов

React

Angular

Vue