Vertikale Zeitleiste für React.js

Blog

Vertikale Zeitleiste für React.js

Vertikale Zeitleiste für React.js

React-Vertical-Timeline-Komponente - Vertikale Zeitachse für React.js

Vollständige Dokumentation & Demo

React Vertical Timeline-Dokumentation

Installieren

$ npm i react-vertical-timeline-component

Verwendungszweck

--- import { VerticalTimeline, VerticalTimelineElement } from 'react-vertical-timeline-component'; import 'react-vertical-timeline-component/style.min.css'; ...

Creative Director

Miami, FL

Creative Direction, User Experience, Visual Design, Project Management, Team Leading

Art Director

San Francisco, CA

Creative Direction, User Experience, Visual Design, SEO, Online Marketing

Web Designer

Los Angeles, CA

User Experience, Visual Design

Web Designer

San Francisco, CA

User Experience, Visual Design

Content Marketing for Web, Mobile and Social Media

Online Course

Strategy, Social Media

Agile Development Scrum Master

Certification

Creative Direction, User Experience, Visual Design

Bachelor of Science in Interactive Digital Media Visual Imaging

Bachelor Degree

Creative Direction, Visual Design

Holen Sie sich das Attribut Selenpython

VertikaleTimeline-Requisiten

animate={ Boolean }

Aktivieren oder deaktivieren Sie Animationen für Elemente (Standard: true).

className={ String }

Fügen Sie dem Root-Div-Element einen zusätzlichen Klassennamen hinzu.

layout={ String }

Wählen Sie, ob Sie möchten |_+_| oder |_+_| (Standard: |_+_|).

Wie eröffne ich mein geschlossenes Cash-App-Konto wieder?

VerticalTimelineElement Requisiten

'1-column'

Fügen Sie dem Root-Div-Element einen zusätzlichen Klassennamen hinzu.

'2-columns'

Fügen Sie dem Inhaltspfeil-Div-Element einen zusätzlichen Stil hinzu.

'2-columns'

Fügen Sie dem Inhalts-Div-Element einen zusätzlichen Stil hinzu.

className={ String }

Datum des Elements.

contentArrowStyle={ Object }

Fügen Sie dem Datum des Elements einen zusätzlichen Klassennamen hinzu.

contentStyle={ Object }

Symbol des Elements.

date={ String }

Fügen Sie dem Symbol des Elements einen zusätzlichen Klassennamen hinzu.

dateClassName={ String }

onClick-Handler des Elementsymbols.

icon={ String }

Stil des Elementsymbols.

iconClassName={ String }

Position des Elements (links oder rechts).

iconOnClick={ Function }

Fügen Sie dem Root-Div-Element einen zusätzlichen Stil hinzu.

iconStyle={ Object }

Fügen Sie dem Textcontainer einen zusätzlichen Klassennamen hinzu.

position={ String }

Benutzerdefinierte Requisiten werden an die VisibilitySensor-Komponente übergeben (Standard: { partielleVisibility: true, offset: { bottom: 80 } }). Sehen Reagieren-Sichtbarkeitssensor für mehr Informationen.

Vitrine

Zur Entwicklung

Demo mit Katalog starten

style={ Object }

Führen Sie die Tests durch

textClassName={ String }

Sehen Sie sich die Tests an und führen Sie sie aus

visibilitySensorProps={ Object }

Fussel ausführen

$ yarn start

Neue Version veröffentlichen (nur für Betreuer)

$ yarn test

Download-Details:

Autor: stephane-monnot

kann mich nicht bei aol mail einloggen

Live-Demo: https://stephane-monnot.github.io/react-vertical-timeline/

GitHub: https://github.com/stephane-monnot/react-vertical-timeline

#reactjs #javascript