06
JUIL

Spectacle - Un outil pour créer vos présentations / slides avec ReactJs

Publié le 06/07/15 à 08h08 par DJo

Spectacle est un nouvel outil permettant de créer des slides et présentations modernes, basé sur React.js

Spectacle est un nouvel outil permettant de créer des slides et présentations modernes, basé sur React.js

Dans la même lignée que Reveal.js, Spectacle vous permettra de créer des présentations pour vos conférences, debrief client, présentation produits / services ...

La grande différence réside dans l'utilisation de React.js et de sa fameuse syntaxe JSX.

L'outil propose plusieurs tags permettant de créer rapidement vos slides:

  • Les tags principaux: deck, slide
  • Les tags de layout: layout, fit, fill
  • Les tags d'éléments: appear, blockquote, CodePan, Code, Heading, Image, Link, List, S, Text

Voici un exemple de création d'un slide basique:

// deck.jsx
import React from 'react/addons';
import {
  Appear, BlockQuote, Cite, CodePane, Code, Deck, Fill, Fit,
  Heading, Image, Layout, ListItem, List, Quote, S, Slide, Text
} from '../src/spectacle';
export default class extends React.Component {
  render() {
    return (
      <Deck>
        <Slide>
          <Text>Hello</Text>
        </Slide>
      </Deck>
    )
  }
}

Ces éléments sont automatiquement mis en forme à l'aide du style du thème. Le thème par défaut est très bien réalisé et vous permettra de démarrer rapidement une nouvelle présentation.

Il est bien évidemment possible de créer votre propre thème en personnalisant les variables dédiées:

var colors = {  // <--- Color variables used in the presentation
  primary: '#f9c300',
  secondary: 'black',
  tertiary: 'white'
};
var fonts = { // <--- Font variables used in the presentation
  primary: 'Open Sans Condensed',
  secondary: 'Lobster Two',
  tertiary: 'monospace'
}
module.exports = {
  colors: colors,
  fonts: fonts,
  global: { // <--- Global styles added to a <style> tag in the body
    body: {
      background: colors.primary,
      fontFamily: fonts.primary,
      fontWeight: 'normal',
      fontSize: '2em',
      color: colors.secondary
    }
  },
  components: { // <--- Component specific style declarations
    blockquote: {
      textAlign: 'left',
      position: 'relative',
      display: 'inline-block'
    },
    ...
}

En mode présentation, vous pourrez suivre l'avancée des slides et le temps pour gérer au mieux le déroulement de votre conférence:

Spectacle: Mode présentation

Et si on vous demande de remettre une version PDF de vos slides, pas de panique, une fonction dédiée est prévue pour ça:

Spectacle: Version impression PDF disponible

Un bel outil de présentation qui ravira tous les fans de React.js. De quoi s'amuser en créant sa présentation !

 

Site Officiel

Baraguiné par atlasweb le 06/12/17 à 17h53
atlasweb sur La Ferme du Web
thanks
Baraguiné par atlasweb le 06/12/17 à 17h54
atlasweb sur La Ferme du Web
طراحی سایت

Ajouter un Commentaire

Pour poster un commentaire, vous devez être identifié. Vous pouvez choisir parmi ces trois méthodes d'identification:

Compte la Ferme du Web

Identifiez-vous
Inscrivez-vous

Compte Facebook

Connexion avec Facebook

Compte Twitter

Connexion avec votre compte twitter
Rechercher sur la Ferme du web