spectacle, 基于ReactJS的演示库

分享于 

36分钟阅读

GitHub

  繁體 雙語
ReactJS based Presentation Library
  • 源代码名称:spectacle
  • 源代码网址:http://www.github.com/FormidableLabs/spectacle
  • spectacle源代码文档
  • spectacle源代码下载
  • Git URL:
    git://www.github.com/FormidableLabs/spectacle.git
    Git Clone代码到本地:
    git clone http://www.github.com/FormidableLabs/spectacle
    Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/FormidableLabs/spectacle
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
    

    Join the chat at https://gitter.im/FormidableLabs/spectacleTravis Status 基于ReactJS的演示库

    眼镜样板

    电子邮件内容

    正在启动

    启动新的最佳方法是运行 create-react-app my-presentation --scripts-version spectacle-scripts 这将使用 create-react-app 来创建几乎所有需要的内容。 然而,这并不包括发布脚本,而弹出式的内容需要推出。

    第二个最好的方法开始是使用眼镜样板文件。

    或者,你可以 npm install spectacle 并编写自己的构建配置。 在 dist/spectacle.jsdist/spectacle.min.js 中,我们还提供了完整的UMD构建( 使用 Spectacle 全局变量),用于更通用的用例。 例如你可以通过脚本标记包含库,其中包含: https://unpkg.com/spectacle@VERSION/dist/spectacle.min.js

    要注意,在 reactreact-domprop-types 中有 web pack外部,所以你需要在你的upstream 构建中提供它们,或者在你的HTML页面中为所有3 个库中的。 这个comports与我们的项目依赖关系,将这三个库放在 peerDependencies 中。

    但实际上,使用样板文件是简单得多。 信任我。

    一页

    为了帮助快速开发/踢出轮胎,我们支持使用一个简单的模板HTML页面。 它的余部分将负责transpiling你的React/esnext代码,提供眼镜。React和ReactDOM库,以至少使用 raring。

    我们可以从 one-page.html 项目的这个示例开始。 实际上,与fully-built-from-source版本相同的演示文稿,有几个显著的例外:

    没有 import 或者 require。 所有内容都必须来自全局命名空间。 这包括 SpectaclereactReactDOM 和所有从 ./src/index.js -- DeckSlidethemes 等导出的眼镜。

    演示文稿必须包含与类型为的类型为的一个脚本标记的精确值。 目前,该函数是直接将 inline 插入包装器代码样板中作为响应组件 render 函数。 包装是 transpiled。不应该像外部变量或者注释那样在它周围有任何无关的内容。

    好的范例:

    <scripttype="text/spectacle"> () => ( <Deck>{/* SLIDES */}</Deck> )</script>
    <scripttype="text/spectacle"> () => {//Code-y code stuff in JS... return ( <Deck>{/* SLIDES */}</Deck> ); }</script>

    不应该做什么的示例:

    <scripttype="text/spectacle">//Outer comment (BAD) const outerVariable ="BAD"; () => ( <Deck>{/* SLIDES */}</Deck> )</script>

    "。"。记住这些指南,你可以通过copy-and-paste文件进入一个HTML文件并启动一个视图演示。

    <!DOCTYPE html>
    <htmllang="en">
    <head>
     <metacharset="UTF-8">
     <metaname="viewport"content="width=device-width initial-scale=1 user-scalable=no"/>
     <title>Spectacle</title>
     <linkhref="https://fonts.googleapis.com/css?family=Lobster+Two:400,700"rel="stylesheet"type="text/css">
     <linkhref="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700"rel="stylesheet"type="text/css">
     <linkhref="https://unpkg.com/normalize.css@7/normalize.css"rel="stylesheet"type="text/css">
    </head>
    <body>
     <divid="root"></div>
     <scriptsrc="https://unpkg.com/prop-types@15/prop-types.js"></script>
     <scriptsrc="https://unpkg.com/react@15/dist/react.js"></script>
     <scriptsrc="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>
     <scriptsrc="https://unpkg.com/babel-standalone@6/babel.js"></script>
     <scriptsrc="https://unpkg.com/spectacle/dist/spectacle.js"></script>
     <scriptsrc="https://unpkg.com/spectacle/lib/one-page.js"></script>
     <scripttype="text/spectacle"> () => {//Your JS Code goes here return ( <Deck> {/* Throw in some slides here! */} </Deck> ); }</script>
    </body>
    </html>

    插件开发

    下载完文件后,你的第一个业务订单是打开终端并运行 npm install

    下一次运行 rm -R. git 以删除现有版本控制。

    然后,要启动本地服务器,运行 npm start

    打开浏览器,点击 http://localhost:3000 插件,我们就可以开始滚动了

    构建&部署

    构建幻灯片的dist版本与运行 npm run build:dist 一样简单

    如果要将幻灯片放映部署到电涌,请运行 npm run deploy

    解决这个问题的一个非常hacky的方法是编辑produced包中的一个位置,如下面的GitHub中所示的

    Spectacle带有内置的演示者模式。 它将向你显示幻灯片前,当前时间和当前幻灯片:

    http://i.imgur.com/jW8uMYY.png

    否则,它还可以显示一个秒表来计算经过的时间:

    http://i.imgur.com/VDltgmZ.png

    要呈现:

    注意:如果你不希望使用演示模式,则同一浏览器中的任何 Windows/选项卡都将同步。

    检查一下

    http://i.imgur.com/H7o2qHI.gif

    你可以按 alt+palt+o 切换演示者或者概述模式。

    控制

    按键组合功能
    右箭头键下一张幻灯片
    左箭头上一幻灯片
    空间下一张幻灯片
    Shift+Space上一幻灯片
    alt/选项+切换概述模式
    alt/选项+ P切换演示者模式
    alt/选项+ T切换演示器模式中的计时器
    alt/选项+启动自动播放( 如果启用)

    全屏

    全屏可以通过浏览器选项切换,或者在窗口的右下角悬停,直到全屏显示,然后点击它来打开窗口。

    PDF导出

    从你完全甜蜜的眼镜展示中导出一个完全好看的PDF是非常容易的。 你可以通过浏览器或者从 命令行 执行这里操作:

    • 运行 npm install spectacle-renderer -g
    • 在项目上运行 npm start,并等待它生成并可用
    • 运行 spectacle-renderer
    • 在你的项目目录中创建了一个完全酷的PDF

    有关这里工具的更多选项和配置,请签出:

    https://github.com/FormidableLabs/spectacle-renderer

    浏览器

    http://i.imgur.com/t6GL5Oc.png

    如果要打印幻灯片,并且需要打印机友好版本,只需重复 上面 进程,但从 http://localhost:3000/?export&print 页面打印出来。

    基本概念

    主文件

    你的演示文稿文件&资产将在 presentation 文件夹中。

    你的甲板上写的主要 .js 文件是 /presentation/index.js

    请看这里,这里是boilerplate样板。

    // index.jsimport React, { Component } from'react';import { Appear, BlockQuote, Cite, CodePane, Code, Deck, Fill, Fit, Heading, Image, Layout, ListItem, List, Quote, Slide, Text} from'spectacle';export defaultclassextendsComponent {
     render() { return (
     <Deck>
     <Slide>
     <Text>Hello</Text>
     </Slide>
     </Deck>
     );
     }
    }

    在这里你可以使用库的标签来编写演示文稿。 尽管可以使用任何JSX语法,但是用提供的标签构建演示文稿可以使主题正常工作。

    最少需要启动的是 Deck 元素和 Slide 元素。 每个 Slide 元素表示幻灯片的幻灯片 inside。

    主题

    在Spectacle中,主题是为 screen & print 返回样式对象的函数。

    你可以从以下位置导入默认主题:

    import createTheme from"spectacle/lib/themes/default";

    或者根据源代码创建自己的。

    index.js 是为了创建自定义主题,使用基于对象的样式编辑的。

    你需要编辑 index.html 以包含任何网页字体或者你的主题所需的附加 CSS。

    createTheme ( 颜色,字体)

    眼镜主题系统功能允许你传递颜色和字体变量,你可以在你的元素中使用。 字体配置对象可以为系统字体或者指定它为Google字体的对象获取字符串。 如果你使用谷歌字体,你可以为加载不同的权重和变化提供一个样式 array。 将自动创建Google字体标签。 请参见下面的示例:

    consttheme =createTheme({primary:"red",secondary:"blue"}, {primary:"Helvetica",secondary: {name:"Droid Serif",googleFont: true,styles: [ "400", "700i" ] }
    });

    然后可以通过 theme 道具将返回的主题对象传递给 Deck 标记,并覆盖默认的样式。

    常见问题解答

    如何为演示文稿轻松设置基本组件的样式?

    历史上,眼镜中的自定义样式意味着使用主题文件或者使用 important 重写。! 这是由情感驱动的,所以你可以带你自己的风格库,不管是情感本身,还是风格的组件或者迷人的风格。 例如如果要创建自定义标题样式,请执行以下操作:

    importstyledfrom'styled-components';import { Heading } from'spectacle';constCustomHeading=styled(Heading)` font-size: 1.2em; color: papayawhip;`;

    如何将幻灯片分隔为其他文件?

    在这里版本之前,你需要做一些 array shenanigans,但现在你可以用具有特殊支持的元素包装这些幻灯片:

    // mySlides.jsexportdefaultclassmySlidesextendsComponent {
     render() {
     return (
     <div hasSlideChildren><Slide>1</Slide><Slide>2</Slide><Slide>3</Slide></div> )
     }
    }

    标记 API

    在Spectacle中,演示文稿由一组基本标记组成。 我们可以将这些分为三个类别: 主标签,布局标记&元素标记。

    主标签

    Deck标签是你的演示文稿的root 级别标记。 它支持以下道具:

    名称PropType描述
    控件PropTypes.bool在全屏显示时显示控制箭头
    contentHeightPropTypes.numbers基线内容区域高度( 默认值: 700 )
    contentWidthPropTypes.numbers基线内容区域宽度( 默认值: 1000 )
    历史记录PropTypes.object接受历史记录的自定义配置。
    进度PropTypes.string接受 pacmanbarnumber 或者 none。 若要覆盖颜色,请更改主题中的'第四纪'颜色。
    主题PropTypes.object接受主题对象以设置演示文稿的样式
    转换PropTypes.array接受 Slidezoomfade 或者 spin,并且可以组合。 设置全局幻灯片切换。注意: 如果你使用'刻度'转换,则在Safari中安装的文本将无法正常工作。
    transitionDurationPropTypes.number以毫秒为单位接受全局转换持续时间的整数值。
    自动播放PropTypes.bool自动放映幻灯片。
    autoplayDurationPropTypes.number以毫秒为单位,以毫秒为单位接受整数值,默认值为 7000.

    幻灯片( Base )

    幻灯片标记代表演示文稿中的每张幻灯片。 一个幻灯片标记一个 id 属性将替代它的数字基于所提供的id的导航哈希。 它支持以下道具,除了基类道具列表中列出的任何道具之外:

    名称PropType描述
    对齐PropTypes.string接受空间分隔值定位内部内容。 第一个值可以是 flex-start ( 左边)。center ( 中间中) 或者 flex-end ( 右边)。 第二个值可以是 flex-start ( 顶端),center ( 中间中) 或者 flex-end ( 底部)。 你将像 align="center center" 那样提供这个道具,它是默认。
    controlColorPropTypes.string用于替代每个幻灯片上控制箭头的颜色,接受颜色别名或者有效颜色值。
    转到PropTypes.number用于浏览out-of-order演示文稿的幻灯片。 幻灯片编号从 1 开始。 这也可以用来跳过幻灯片。
    idPropTypes.string用于创建基于字符串的哈希。
    高度高度PropTypes.number用于设置幻灯片的最大尺寸。
    maxWidthPropTypes.number用于设置幻灯片的最大尺寸。
    便笺PropTypes.string显示在演示者模式中的文本。 可以是 HTML。
    onActivePropTypes.func可选函数,当幻灯片进入视图时使用幻灯片索引调用。
    progressColorPropTypes.string用于替代每个幻灯片中进度元素的颜色,接受颜色别名或者有效颜色值。
    转换PropTypes.array接受 Slidezoomfadespin 或者函数,并且可以组合使用。 设置幻灯片切换。这将影响输入和退出转换。 注意:如果你使用转换,安装的文本将无法在Safari中正常工作。
    transitionInPropTypes.array指定幻灯片进入视图时的幻灯片切换。 接受与转换相同的值。
    transitionOutPropTypes.array指定幻灯片退出时的幻灯片切换。 接受与转换相同的值。
    transitionDurationPropTypes.number以毫秒为单位接受幻灯片转换持续时间的整数值。

    包装幻灯片

    如果在它的他文件中创作幻灯片或者需要任何需要一个额外级别的组合,可以添加 hasSlideChildren 支持。 这让眼镜识别它是一个包装器,而且将忽略 heirarchy,而不是选择读取子幻灯片。

    转换函数

    眼镜现在支持定义定制转换。 函数Prototype是 (transitioning: boolean, forward: boolean) => Objecttransitioning 参数在幻灯片进入和退出时是 true。 当幻灯片进入时,forward 参数为 true,当幻灯片退出时为 false。 函数返回一个样式对象。 你可以混合基于字符串的转换和函数。 在幻灯片的lifecyle期间将显示 transitioningfalse 提供的样式。 下面是一个示例:

    <Slidetransition={['fade', (transitioning, forward) => {constangle = forward?-180:180;return {transform:` translate3d(0%, ${transitioning?100:0}%, 0) rotate(${transitioning? angle:0}deg)`,backgroundColor: transitioning?'#26afff':'#000' }; } ]}>

    注释

    注释标记允许使用任何响应元素树作为幻灯片的注释。 它用作幻灯片标记的子 node,其子级重写作为其父幻灯片的notes 属性给定的任何值。

    <Slide.. .>
     <Notes>
     <h4>Slide notes</h4>
     <ol>
     <li>First note</li>
     <li>Second note</li>
     </ol>
     </Notes>
     {/* Slide content */}</Slide>

    MarkdownSlides

    使用MarkdownSlides函数可以使用 Markdown 创建单个或者多个幻灯片。 它可以被用作标记模板文本或者函数。 三个破折号( --- ) 用作幻灯片之间的分隔符。

    标记模板文字使用

    <Deck.. .>
     {MarkdownSlides`## Slide One TitleSlide Content---## Slide Two TitleSlide Content`}</Deck>

    函数使用

    import slidesMarkdown from"raw-loader!markdown.md";
    <Deck.. .>
     {MarkdownSlides(slidesMarkdown)}</Deck>

    布局标签

    布局标记用于在幻灯片中使用Flexbox进行布局。 它们是 LayoutFit & Fill

    布局

    布局标记用于包装 FitFill 标记以提供行。

    适合

    匹配标记占用的空间与它的边界提供程序所占的空间一样多。

    填充

    填充标记占用了所有可用的空间。 例如,如果在 Fit 标记旁边有一个 Fill 标记,Fill 标记将占用空间的剩余部分。 相邻 Fill 标记分割差异并形成等距网格。

    Markdown 标记

    Markdown ( 基)

    Markdown 标记用于在幻灯片中添加 inline Markdown。 你可以通过 source prop提供 Markdown 源,也可以作为子。 你还可以通过prop提供定制的 mdast配置插件。

    Markdown 生成的标记不是可以配置的,而是使用你的主题默认值进行渲染。

    名称PropType描述
    PropTypes.stringMarkdown 源

    魔术标记

    魔法

    注意:魔术标签使用了网络动画 API。 如果使用魔术标记并希望它不是 Chrome 以外的地方,那么需要包含 polyfill https://github.com/web-animations/web-animations-js。

    魔术标记是一个新的试验特性,尝试重新创建幻灯片作者可以能习惯的幻灯片行为。 它包装幻灯片,并在子元素的位置值之间进行转换。 这意味着如果你有两个相似的字符串,我们将转换普通字符到它们的新位置。 这不会转换为非位置值,如幻灯片 background 颜色或者字体大小。

    使用魔术非常简单,只要用它包装幻灯片,它就会在它们之间转换:

    <Magic><Slide><Heading>First Heading</Heading></Slide><Slide><Heading>Second Heading</Heading></Slide></Magic>

    在类似状态之间转换会根据输入内容而变化。 如果有更常见的元素,它看起来会更好。 将来的补丁将允许自定义键,它将为哪些元素提供 GREATER 控件以用于重用。

    在这个之前,我们非常欢迎反馈,因为这是一个非琐碎特性,我们期望迭代 behind的场景机制,以便我们能够适应大多数用例。

    元素标记

    元素标签是幻灯片内容的面包和黄油。 大多数标签都从基类派生了他们的道具,但是有特殊选项的那些将会列出它们:

    出现

    这里标记不从基础扩展。 这是特殊的在出现标记中包装元素使它们按顺序显示/消失,以响应导航。

    名称PropType描述
    顺序PropTypes.number从 1开始的可选整数,用于在幻灯片中显示标记的显示顺序。 如果幻灯片包含有序和无序的出现标记,无序将显示第一个。

    引用,引用和引用( Base )

    这些标记创建样式化的引用。 按如下方式使用它们:

    <BlockQuote>
     <Quote>Ken Wheeler is amazing</Quote>
     <Cite>Everyone</Cite>
    </BlockQuote>

    CodePane ( Base )

    这里标记显示样式化的高亮显示的代码预览。 我更喜欢将代码示例放在外部 .example 文件中,并要求它们使用 raw-loader,如演示所示。 这些是道具:

    名称PropType描述
    langPropTypes.stringPrism兼容语言 NAME。例如: ''javascript"'
    PropTypes.string要显示的代码字符串
    类名PropTypes.string要追加到的类的字符串
    主题PropTypes.string接受 lightdark 或者 external,用于编辑编辑器的源语法。 默认为 dark

    如果要更改这里使用的主题,可以通过样式或者链接标记在 index.html 中包含prism主题。 为了实际应用你的主题,你需要将 theme 支持器设置为 "external",这将禁用内置的灯光和暗主题。 请注意,包括一个主题实际上会影响所有的,和,组件,即使你没有设置这个支持。

    CodePane和Playground都使用罩下的prism库,其中有几个主题可以供包括。

    代码( Base )

    简单标记 inline 文本的简单标记,你需要在多行字体中轻松设置它的样式。

    组件游乐场

    这里标记显示右侧的两个窗格视图,并在右侧显示一个ES6源代码编辑器,显示自定义React组件。 reactrender 作为变量提供。 使用某些JSX代码呈现组件调用 render。 任何 console 输出都将被转发到浏览器中的主控制台。

    有关操场的更多信息,请在处阅读文档,以响应实时的需求。

    名称PropType描述
    代码PropTypes.string你想要最初提供给组件游乐场的代码 block。 如果没有提供演示组件,将显示演示组件。
    previewBackgroundColorPropTypes.string预览窗格所需的background 颜色。 默认为 #fff
    主题PropTypes.string接受 lightdark 或者 external,用于编辑编辑器的源语法。 默认为 dark
    作用域PropTypes.object定义任何外部模块或者组件以公开到运动场。 为你提供React。组件和呈现。

    代码块示例:

    constButton= ({ title }) => (<buttontype="button">{ title}</button>);render(<Buttontitle="My Button"/>);
    classViewextendsReact.Component {
     componentDidMount() {
     console.log("Hello");
     }
     render() { return (<div>My View</div>);
     }
    }render(<View/>);

    如果你想更改这里使用的主题,请参考codepane参考文档的API中的instructions 上面。

    转到动作( Base )

    使用GoToAction标记可以跳到deck的另一张幻灯片。 GoToAction可以使用一个简单按钮,支持 Base 样式或者接受呈现支持器,支持自定义组件。

    名称PropType描述
    幻灯片PropTypes.string 或者 PropTypes.number按钮应该跳转到的字符串标识符或者数字的编号。 幻灯片编号从 1 开始。 仅在简单按钮配置中使用。
    呈现PropTypes.func具有 goToSlide 参数的函数,该函数应返回一个响应元素以呈现。 仅在自定义组件配置中使用。
    简单按钮配置示例
    <GoToActionslide={3}>Jump to 3</GoToAction>
    自定义组件配置示例
    <GoToActionrender={goToSlide=> ( <CustomComponentonClick={() =>goToSlide("wait-wut")}> WAIT WUT!? </CustomComponent> )}/>

    标题( Base )

    标题标签特别特殊,当指定一个 size 工具栏时,它们会生成适当的标题标记,并用主题文件中定义的样式。 线路高度可以通过数字 lineHeight 支柱进行调整。

    名称PropType描述
    适合PropTypes.boolean设置为 true 时,将文本适应幻灯片宽度。 注意:如果你使用的是转换,那么在Safari中将无法。
    lineHeightPropTypes.number设置文本的行高度。

    图像( 基) NAME PropType描述
    altPropTypes.string设置图像的alt 属性
    显示PropTypes.string设置图像的显示样式属性
    高度PropTypes.string 或者 PropTypes.number给图像提供高度
    srcPropTypes.string图像源
    宽度PropTypes.string 或者 PropTypes.number为图像提供宽度

    链路( Base )

    链接标记用于呈现 <a> 标记。 它接受一个 href 道具:

    名称PropType描述
    hrefPropTypes.stringhref 属性的url字符串
    目标PropTypes.string设置 target 属性

    列表 & ListItem ( 基) NAME PropType说明
    有序PropTypes.bool呈现为 <ol> -tag
    反转PropTypes.bool设置 reversed 属性
    开始PropTypes.bool设置 start 属性,默认值: 1
    类型PropTypes.bool设置 type 属性。默认值: "1"

    这些标记创建列表。请按如下所示使用它们:

    排序列表:

    <Listorderedstart={2}type="A">
     <ListItem>Item 1</ListItem>
     <ListItem>Item 2</ListItem>
     <ListItem>Item 3</ListItem>
     <ListItem>Item 4</ListItem>
    </List>

    无序列表:

    <List>
     <ListItem>Item 1</ListItem>
     <ListItem>Item 2</ListItem>
     <ListItem>Item 3</ListItem>
     <ListItem>Item 4</ListItem>
    </List>

    ( Base )

    S 标记用于向一段文本中添加样式,例如下划线或者删除线。

    名称PropType描述
    类型PropTypes.string接受 strikethroughunderlinebold 或者 italic

    table,TableRow,TableHeaderItem和 TableItem ( Base )

    Table 标记用于将 table 添加到幻灯片中。 它与 TableHeaderTableBodyTableRowTableHeaderItemTableItem 一起使用。 按如下方式使用它们:

    <Table>
     <TableHeader>
     <TableRow>
     <TableHeaderItem></TableHeaderItem>
     <TableHeaderItem>2011</TableHeaderItem>
     </TableRow>
     </TableHeader>
     <TableBody>
     <TableRow>
     <TableItem>None</TableItem>
     <TableItem>61.8%</TableItem>
     </TableRow>
     <TableRow>
     <TableItem>jQuery</TableItem>
     <TableItem>28.3%</TableItem>
     </TableRow>
     </TableBody>
    </Table>

    文本( Base )

    Text 标记用于向幻灯片中添加文本。 线路高度可以通过数字 lineHeight 支柱进行调整。

    名称PropType描述
    适合PropTypes.boolean设置为 true 时,将文本适应幻灯片宽度。 注意:如果你使用的是转换,那么在Safari中将无法。
    lineHeightPropTypes.number设置文本的行高度。

    基准道具

    每个具有 (Base)的组件 上面 都从一个共同类扩展,包括以下道具:

    名称PropType描述
    斜体PropTypes.booleanfontStyle 设置为 italic
    粗体PropTypes.booleanfontWeight 设置为 bold
    大写PropTypes.booleantextTransform 设置为 uppercase
    边距PropTypes.number 或者字符串设置 margin
    填充PropTypes.number 或者字符串设置 padding
    textColorPropTypes.string设置 color
    textFontPropTypes.string设置 fontFamily
    textSizePropTypes.string设置 fontSize
    对齐PropTypes.string设置 textAlign
    textFontPropTypes.string设置 textFont
    cmykPropTypes.string设置 backgroundColor
    bgImagePropTypes.string设置 backgroundImage
    bgSizePropTypes.string设置 backgroundSize
    bgPositionPropTypes.string设置 backgroundPosition
    bgRepeatPropTypes.string设置 backgroundRepeat
    bgDarkenPropTypes.number从 0.0到 1.0的浮点值指定bgImage图像的变暗程度
    溢出PropTypes.string设置 overflow
    高度PropTypes.string设置 height

    字体

    Typeface 标记用于将特定字体应用于文本内容。 它可以使用系统上存在的字体,也可以从Google库加载一种字体。 Typeface 需要定义 font 或者 googleFont

    名称PropType描述
    字体PropTypes.string使用本地系统中的字体
    googleFontPropTypes.string使用 Google Fonts中的字体
    权重PropTypes.number字体的数字权重值。 默认值:400
    斜体PropTypes.boolean如果字体存在,则使用斜体的字体。 默认值:false
    <TypefacegoogleFont="Roboto Slab"weight={600}>
     <Text>This text is using bold Roboto Slab from Google Fonts.</Text>
    </Typeface>
    <Typefacefont="SF Text"weight={400}italic={true}>
     <Text>This text is using the San Francisco Text font from the system.</Text>
    </Typeface>

    第三方扩展

    • 使用这个可怕的幻灯片扩展的代码行代码幻灯片代码
    • 眼镜终端幻灯片 - 可以在Spectacle滑动deck使用的终端组件
    • 带大图片和标题的幻灯片幻灯片

    BASE  react  PRE  Presentation  Reactjs