程序员经验分享-hwhale

【MarkDown】CSDN Markdown之时间轴图timeline详解

2023-11-01

时间轴图

时间轴图：现在这是一个实验性的图表。语法和属性可能会在未来版本中更改。除了图标集成，它是实验部分外，语法是稳定的。

“通过互联网技术，依据时间顺序，把一方面或多方面的事件串联起来，形成相对完整的记录体系，再运用图文的形式呈现给用户；时间轴可以运用于不同领域，最大的作用就是把过去的事物系统化、完整化、精确化。
通过记录生活、记录文化、记录历史，来实现自己传承文化的梦想。时间轴正是实现梦想的基础。想要传承，必须先有系统、完整的记录。而时间轴就是依据文化分类和时间把事物归类和排序，以最适合的形态展示给用户。记录年华岁月中的故事，让时间和空间不再是我们的障碍，只需一条线，就能够回到从前。”              — 百度百科

以下所有例子都是在 mermaid v10.2.3 进行测试，CSDN 当前使用 mermaid v8.14.0 不支持此语法

一个关于时间轴图的例子

代码:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Mermaid 时间轴图</title>
  <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.js"></script>
</head>
<body>
  <pre class="mermaid">
    timeline
    title 社交媒体平台的历史
    1999 : QQ
    2011 : 微信
         : 快手
    2011 : 微信
    2013 : 小红书
</pre>
  <script>
  const config = {
    startOnLoad: true,
    securityLevel: 'loose',
  };
  mermaid.initialize(config);
</script>
</body>
</html>

在这里插入图片描述

语法

创建时间轴图的语法很简单。您始终从timeline关键字开始，以让mermaid知道您要创建时间轴图。

之后有可能添加标题到时间轴图上。通过添加一个以关键字 title 开头后面跟着标题文本的行来完成。

然后加入时间轴图数据，它总是从一个时间段开始，然后是一个:冒号，然后是事件文本。
可选的，您可以添加第二个:冒号，然后是事件文本。因此，您可以每个时间段拥有一个或多个事件。

{时间段} : {事件文本}

或

{时间段} : {事件文本} : {事件文本}

或

{时间段} : {事件文本}
              : {事件文本}
              : {事件文本}

注意： 时间段和事件文本均为简单文本，不仅限于数字。

让我们看一下上述示例的语法。

代码:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Mermaid 时间轴图</title>
  <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.js"></script>
</head>
<body>
  <pre class="mermaid">
    timeline
    title 社交媒体平台的历史
    1999 : QQ
    2011 : 微信
         : 快手
    2011 : 微信
    2013 : 小红书
</pre>
  <script>
  const config = {
    startOnLoad: true,
    securityLevel: 'loose',
  };
  mermaid.initialize(config);
</script>
</body>
</html>

在这里插入图片描述

通过这样的方式，我们可以使用文本来生成时间轴图。时间段和事件的顺序很重要，因为它将用于绘制时间轴图。第一个时间段将放置在时间轴图的左侧，而最后一个时间段将放置在时间轴图的右侧。

同样地，特定时间段的第一个事件将放置在顶部，而最后一个事件将放置在底部。

分组

你可以把时间段分配在不同的分组中。这是通过添加一个以关键字 section 开头后面跟着分组名称来完成定义的。

所有随后的时间段将被放置在此分组中，直到定义一个新的分组。

如果没有定义分组，则所有时间段将被放置在默认分组中。

让我们看一个示例，其中我们已经将时间段分配到不同的分组中。

代码:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Mermaid 时间轴图</title>
  <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.js"></script>
</head>
<body>
  <pre class="mermaid">
    timeline
    title 工业革命时间轴图
    section 17世纪到20世纪
        工业 1.0 : 机械、水力和蒸汽 动力
        工业 2.0 : 电力、内燃机、大规模生产
        工业 3.0 : 电子、计算机、自动化
    section 21世纪
        工业 4.0 : 互联网、机器人、物联网
        工业 5.0 : 人工智能、大数据、3D打印
</pre>
  <script>
  const config = {
    startOnLoad: true,
    securityLevel: 'loose',
  };
  mermaid.initialize(config);
</script>
</body>
</html>

在这里插入图片描述

正如您所看到的，时间段位于分组中，分组按照定义的顺序排列。

给定分组下的所有时间段和事件都遵循类似的颜色方案。这样做是为了更容易地看到时间段和事件之间的关系。

长时间段或事件文本换行

默认情况下，如果时间段和事件文本过长，则需要将其换行。这是为了避免文本绘制在图表之外。

您还可以使用<br>强制换行。

让我们看另一个示例，其中我们有一个长时间段和一个长事件。

代码:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Mermaid 时间轴图</title>
  <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.js"></script>
</head>
<body>
  <pre class="mermaid">
    timeline
        title 中国历史时间轴图
        section 石器时代
          公元前7000年 : 以华南的洞穴遗址和贝丘 遗址为主，有少量磨制石 器和陶器，农业已有萌芽 ，个别地点 已会养猪。
          公元前5000年 : 华北的磁山文化等已有较 发达的旱地农业，种植粟 、黍，养猪，并有较发达 的磨制石器和陶器；华中 的彭头山文化（见彭头山 遗址）等已栽植水稻，养 猪和水牛等，磨制石器尚 不多见，陶器则比较发达。
        section 青铜时代
          公元前2080年 : 出现了品类繁杂的青铜制 品，在一些墓葬中还发现 了人殉和人牲。
                       : 青铜器数量大增，常伴有 成套礼器,贝币大量出现 ，人殉、人牲更为普遍
          公元前1300年 : 青铜铸造工艺相当成熟， 出土大量的精美青铜礼器 、武器与工具 。<br>  西周的周原遗址和丰镐遗 址中，发掘出周王朝的宫 殿 、宗庙和墓 葬，发现 了大量的青铜礼器，反映 出中国古代社会的礼制已 成熟。
                    :   青铜铸造工艺取得突出发 展，出现了分铸法、失蜡 法等先进工艺技术。
</pre>
  <script>
  const config = {
    startOnLoad: true,
    securityLevel: 'loose',
  };
  mermaid.initialize(config);
</script>
</body>
</html>

在这里插入图片描述

代码:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Mermaid 时间轴图</title>
  <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.js"></script>
</head>
<body>
  <pre class="mermaid">
    timeline
    title 微信2023更新时间轴图
    section 2023 微信iOS平台&ensp; &ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp; 更新记录
      版本 1 : v8.0.33 : v8.0.34
           : v8.0.37
      功能 2 : 微信110 : 问一问
    section 2023 微信安卓平台&ensp; &ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp; 更新记录
      版本 3 : v8.0.34 : v8.0.35
           : v8.0.37 
      功能 4 :  微信110 : 问一问
</pre>
  <script>
  const config = {
    startOnLoad: true,
    securityLevel: 'loose',
  };
  mermaid.initialize(config);
</script>
</body>
</html>

在这里插入图片描述

时间段和事件文本样式

如前所述，每个部分都有一个颜色方案，并且每个时间段和事件文本在该分组下遵循相似的颜色方案。

但是，如果没有定义分组，则有两种可能性：

单独为时间段设置样式，即每个时间段（及其对应的事件文本）将有自己的颜色方案。这是默认的行为。
代码:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Mermaid 时间轴图</title>
  <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.js"></script>
</head>
<body>
  <pre class="mermaid">
    timeline
    title 社交媒体平台的历史
      1999 : QQ
      2009 : 微博 : B站
      2011 : 微信
      2013 : 小红书
</pre>
  <script>
  const config = {
    startOnLoad: true,
    securityLevel: 'loose',
  };
  mermaid.initialize(config);
</script>
</body>
</html>

在这里插入图片描述

注意 没有定义任何分组，每个时间段及其相应的事件文本都有自己的颜色方案。

使用 disableMulticolor 选项禁用多颜色选项。这将使所有时间段和事件遵循相同的颜色方案。你需要通过mermaid.initialize函数或指令添加这个选项。

mermaid.initialize({
        theme: 'base',
        startOnLoad: true,
        logLevel: 0,
        timeline: {
          disableMulticolor: false,
        },
        ...
        ...

让我们看一个相同的示例，其中禁用了多颜色选项。

代码:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Mermaid 时间轴图</title>
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css">
  <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
</head>
<body>
    <!--%%{init: { 'logLevel': 'debug', 'theme': 'base', 'timeline': {'disableMulticolor': true}}}%%-->
  <div class="mermaid">
timeline
title 社交媒体平台的历史
  1999 : QQ
  2009 : 微博 : B站
  2011 : 微信
  2013 : 小红书
</div>
<script>
  const config = {
    startOnLoad: true,
    securityLevel: 'loose',
    logLevel:'debug',
    theme:"base",
    timeline:{
      disableMulticolor:true
    }
  };
  mermaid.initialize(config);
</script>
</body>
</html>

在这里插入图片描述

自定义颜色方案

您可以使用cScale0到cScale11主题变量自定义颜色方案。Mermaid允许您为最多12个分组设置独特的颜色，其中cScale0变量将设置第一个部分或时间段的值，cScale1变量将设置第二个部分的值，以此类推。如果您有超过12个部分，则颜色方案将开始重复。

注意：这些主题变量的默认值是从选择的主题中选取的。如果要覆盖默认值，则可以使用mermaid.initialize调用添加自定义主题变量值。

示例:

现在让我们覆盖cScale0到cScale2变量的默认值：

代码:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Mermaid 时间轴图</title>
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css">
  <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
</head>
<body>
    <!--%%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': {
              'cScale0': '#ff0000',
              'cScale1': '#00ff00',
              'cScale2': '#0000ff'
       } } }%%-->
  <div class="mermaid">
timeline
title 社交媒体平台的历史
  1999 : QQ
  2009 : 微博 : B站
  2011 : 微信
  2013 : 小红书
</div>
<script>
  const config = {
    startOnLoad: true,
    securityLevel: 'loose',
    logLevel:'debug',
    theme:"default",
    themeVariables:{
      cScale0:'#ff0000',
      cScale1:'#00ff00',
      cScale2:'#0000ff'
    }
  };
  mermaid.initialize(config);
</script>
</body>
</html>

在这里插入图片描述

看看颜色如何更改为主题变量中指定的值。

主题

Mermaid支持一堆预定义的主题，您可以使用它们来找到适合您的主题。 PS：您实际上可以覆盖现有主题的变量以获得自己的自定义主题。在这里了解更多有关主题渲染您图表的信息。

以下是不同的预定义主题选项：

  • base
  • forest
  • dark
  • default
  • neutral

注意：要更改主题，您可以使用mermaid.initialize调用或指令。在这里了解更多关于指令的内容。让我们看看不同的主题下的效果：

基础主题

代码:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Mermaid 时间轴图</title>
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css">
  <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
</head>
<body>
    <!--%%{init: { 'logLevel': 'debug', 'theme': 'base' } }%%-->
  <div class="mermaid">
    timeline
        title 社交媒体平台的历史
          1999 : QQ
          2003 : 百度贴吧
          2009 : 微博 : B站
          2011 : 微信
          2013 : 小红书
          2016 : 抖音
          2017 : TikTok
</div>
<script>
  const config = {
    startOnLoad: true,
    securityLevel: 'loose',
    logLevel:'debug',
    theme:"base"
  };
  mermaid.initialize(config);
</script>
</body>
</html>

在这里插入图片描述

森林主题

代码:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Mermaid 时间轴图</title>
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css">
  <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
</head>
<body>
    <!--%%{init: { 'logLevel': 'debug', 'theme': 'forest' } }%%-->
  <div class="mermaid">
    timeline
        title 社交媒体平台的历史
          1999 : QQ
          2003 : 百度贴吧
          2009 : 微博 : B站
          2011 : 微信
          2013 : 小红书
          2016 : 抖音
          2017 : TikTok
</div>
<script>
  const config = {
    startOnLoad: true,
    securityLevel: 'loose',
    logLevel:'debug',
    theme:"forest"
  };
  mermaid.initialize(config);
</script>
</body>
</html>

在这里插入图片描述

黑色主题

代码:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Mermaid 时间轴图</title>
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css">
  <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
</head>
<body>
    <!--%%{init: { 'logLevel': 'debug', 'theme': 'dark' } }%%-->
  <div class="mermaid">
    timeline
        title 社交媒体平台的历史
          1999 : QQ
          2003 : 百度贴吧
          2009 : 微博 : B站
          2011 : 微信
          2013 : 小红书
          2016 : 抖音
          2017 : TikTok
</div>
<script>
  const config = {
    startOnLoad: true,
    securityLevel: 'loose',
    logLevel:'debug',
    theme:"dark"
  };
  mermaid.initialize(config);
</script>
</body>
</html>

在这里插入图片描述

默认主题

代码:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Mermaid 时间轴图</title>
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css">
  <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
</head>
<body>
    <!--%%{init: { 'logLevel': 'debug', 'theme': 'default' } }%%-->
  <div class="mermaid">
    timeline
        title 社交媒体平台的历史
          1999 : QQ
          2003 : 百度贴吧
          2009 : 微博 : B站
          2011 : 微信
          2013 : 小红书
          2016 : 抖音
          2017 : TikTok
</div>
<script>
  const config = {
    startOnLoad: true,
    securityLevel: 'loose',
    logLevel:'debug',
    theme:"default"
  };
  mermaid.initialize(config);
</script>
</body>
</html>

在这里插入图片描述

中性主题

代码:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Mermaid 时间轴图</title>
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css">
  <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
</head>
<body>
    <!--%%{init: { 'logLevel': 'debug', 'theme': 'neutral' } }%%-->
  <div class="mermaid">
    timeline
        title 社交媒体平台的历史
          1999 : QQ
          2003 : 百度贴吧
          2009 : 微博 : B站
          2011 : 微信
          2013 : 小红书
          2016 : 抖音
          2017 : TikTok
</div>
<script>
  const config = {
    startOnLoad: true,
    securityLevel: 'loose',
    logLevel:'debug',
    theme:"neutral"
  };
  mermaid.initialize(config);
</script>
</body>
</html>

在这里插入图片描述

与库或网站集成

时间轴图使用实验性的延迟加载和异步渲染功能，这些功能在未来可能会更改。延迟加载非常重要，以便能够在未来添加其他图表。

您可以使用以下方法将Mermaid及其时间轴图表添加到网页中：

<script type="module">
  import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
</script>

您还可以在此处参考实现，以了解如何完成异步加载。

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

语言排版

Timeline

时间轴图

markdown

时间轴

【MarkDown】CSDN Markdown之时间轴图timeline详解 的相关文章

  • 在 Markdown 中更改美人鱼主题

    除了代码之外 我在 Markdown 文档中使用 mermaid 进行基本图表渲染 我发现这个在线编辑器 https mermaidjs github io mermaid live editor 在预览时对其进行编辑很有用 这建议更改主题

  • 如何将 package.json 中的所有 npm 依赖项记录到 README.md 中

    我想记录所有 npmdevDependencies and dependencies中描述的package json文件到README md文件在同一个项目中 以下属性值得关注name description and version 当然

  • R Markdown 中未定义 Tex Proof 环境，生成的 Tex 文件中未定义 amsthm

    编辑以提供更多信息 我正在使用以下 R markdown 文件来生成以下 Tex 文件 我在 rmd 标头中包含 amsthm 它生成一个没有 amsthm 的 Tex 文件 因此 在编译期间并未定义证明环境 这是我的 rmd 文件 tit

  • 我可以在 jQuery 中为每个动画步骤实现回调吗？

    我想在我的网站中实现一个动画 需要更新多个 DOM 元素 每个 DOM 元素都有自己的动画路径 取决于它们的位置 并且仍然有缓和的效果 如果我为每个元素调用 jQuery 的 animate 函数 队列 false 它将使每个元素与其余元素

  • 无法在 GitHub 上呈现标头

    这是我的README md在 GitHub 存储库中 This is a Header This is not a Header 这两行都呈现为纯文本 第一个应该呈现为标题 我记得它之前是这样的 我不知道我的浏览器 macOS 上的 Chr

  • 如何让 markdown.js 在 Delphi 的 TWebBrowser 中将 Markdown 文档显示为 HTML？

    如何让 markdown js 在 Delphi 的 TWebBrowser 中将 Markdown 文档显示为 HTML 给定包含 Markdown 的字符串的内容 如何让 markdown js 将该 markdown 转换为 HTML

  • 将多个帧选项传递到 rmarkdown::beamer_presentation 中的单个帧

    如何将多个框架选项传递给特定框架rmarkdown beamer presentation 在下面的 MWE 中 第二帧应包含与前一帧相同的表 只是多了几行 Thus 理想情况下 两个框架的页码相同 gt noframenumbering

  • 如何使用 Node.js 标记 Markdown？

    我正在构建一个 iOS 应用程序 该应用程序的视图将从 Markdown 中获取其来源 我的想法是能够将 MongoDB 中存储的 markdown 解析为 JSON 对象 如下所示 h1 This is the heading p Her

  • 如何在 tkinter 中显示 markdown 格式文本？

    In python 3 x with tkinterGUI 我开发了一个带有常规简单窗口的程序 我想展示一个markdown格式字符串保存在名为的字符串中markdownText在程序窗口上 markdownText italic or b

  • Markdown 所见即所得编辑器和预览在同一文本区域中[关闭]

    Closed 此问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 我寻找一个编辑器来编写 Markdown 语法并在同一文本区域中预览 例如引导所见即所得HTML5 ht

  • 关于：链接（Markdown 页面）上的blank#blocked

    在 Markdown 页面中 Microsoft TFS Wiki 我尝试创建 A 标签file link a href file txt a 点击 Chrome 后 我得到了 about blank blocked 这不是 Chrome

  • 如何将 Markdown 文档批量转换为 HTML？

    我正在用 Markdown 编写一些文档 并为文档的每个部分创建一个单独的文件 我希望能够一次性将所有文件转换为 HTML 但我找不到其他人尝试过同样的事情 我使用的是 Mac 所以我认为一个简单的 bash 脚本应该能够处理它 但我从未在

  • 如何在 VS TextMateRules 中将标记设为粗体+斜体

    在 Visual Studio Code 中 我编辑 Markdown 文件 在编辑器中标记的文本 bold 被渲染bold以及标记的那个 italic 呈现在italic 但文字标记 bold and italic 简单地呈现为itali

  • 摆脱 Sphinx 中的“重复标签”警告

    在 Sphinx 中 我收到大量警告 例如 PATH FILENAME LINE WARNING duplicate label LABELNAME other instance in PATH FILENAME 似乎将所有节标题视为 标签

  • Pandoc：如何在目录前添加表格？

    我想在 pandoc markdown 生成的目录之前添加一个表格 我找到了参数 include before 这样 我可以在目录之前添加文本 但是有没有办法添加表格呢 下面显示我的代码 我希望目录位于两个表和 header1 之间 而不是

  • yaml / yaml 多行转义序列中的 Markdown？

    是否可以在 yaml 中存储未转义的 Markdown 文档 我测试过 key markdown text block that could have any combination of line breaks gt etc etc 这是

  • 如何在 IPython 中设置 markdown 链接的基本 url？

    我很高兴地设置 在我的 IPython html 笔记本 IPython 0 12 的 Markdown 单元中 以便能够将链接缩写为 wiki documentation doc html 在 Markdown 单元格中 但这使得保存笔记

  • 有没有基于 WPF 的 Markdown 渲染器？ [关闭]

    Closed 这个问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 我们有基于 WPF 的应用程序 我们有单独的字符串存储库 其中的文本在网络中进行编辑 在我们的 WPF

  • Pandoc Markdown 分页符

    最近我开始使用 Pandoc markdown 它似乎是 LaTeX 的一个很好的替代品 因为我的文档没有很多数学公式 而且我没有任何使用 LaTeX 的经验 再加上不到 2 周的提交截止日期 这使它成为一个很好的解决方案 我无法解决的一件

  • 如何创建像谷歌位置历史记录一样的Android时间轴视图？

    我想设计像谷歌位置历史这样的用户界面 我必须为我正在使用的应用程序复制此 UIRecyclerView 每行都是水平的LinearLayout其中包含右侧的图标 线条和视图 该线是一个FrameLayout具有圆形背景和半透明圆圈Views

随机推荐

  • flutter loading前一个界面关闭后一个界面的loading

    import package flutter cupertino dart import package flutter material dart import package flutter easyloading flutter ea

  • H5 架构和原生架构的区别

    1 App 的 3 种开发方式 表面上看 手机 App 都是同样的东西 就是手机上的应用程序 点击图标就能运行 但是它们的底层技术不一样 按照开发技术 App 可以分成三大类 原生应用 简称 nativeApp Web 应用 简称 WebA

  • 阿里云轻量应用服务器mysql远程连接教程

    阿里云轻量应用服务器mysql远程连接教程 打开轻量应用服务器控制台 打开防火墙 点击添加规则 打开服务器命令行 可以使用Xshell等软件 在阿里云控制台开放3306端口后后在linux系统中也要开放3306端口 在服务器中开放防火墙33

  • esp32搭建lvgl

    platformio 下载两个库 TFT eSPI lv arduino 3 0 1对应lvgl 7 2 7 5对应lvgl6 pio libdeps tft espi user Setup h 驱动芯片选择 颜色顺序 分辨率选择 不同芯片

  • Nginx反向代理配置流式响应

    Nginx 是通过缓存响应内容来处理请求的 也就是说 当 Nginx 接收到完整的响应后 才会将其发送给客户端 所以默认不支持流式响应 这里讲讲 Nginx 反向代理中怎么配置流式响应 一 使用背景 最近使用 Egg js 搭建自动化部署服

  • MyEclipse提示过期,MyEclipse Subscription Expired解决方案

    一 错误描述 某一天打开MyEclipse 突然发现出现如下提示框 1 错误日志 Thank you for choosing MyEclipse Your license expired 1091 days ago To continue

  • @Valid和@Validated在service层的应用及问题汇总

    1 背景 实际开发中 很多时候要对参数校验 比如为空等 除了要在接口的入口处使用 很多普通方法也需要检查 比如service方法 那么如何在service上使用这个参数校验呢 2 使用方式 步骤一 在service接口上加上 Validat

  • [CF1149C](Tree Generator)

    题意 给出一颗树的括号序 有m个操作 每次交换两个括号 保证交换后括号序仍然合法 输出每次操作后 包括未操作时 树的直径 solution 首先转化题目 对于一棵树的括号序 我们找到一段子串 满足将其中匹配的括号消去后剩下的括号最多 那么剩

  • STM32 Flash操作（擦写）过程中器件复位导致数据丢失问题

    1 问题描述 产品在运行过程中需要保存一些断电不丢失的数据 为此将数据保存在STM32内部的flash中 但是测试人员在测试的过程中 修改了数据参数 直接断电重启机器 并没有等待flash的操作时间 导致原有的数据丢失 2 原理分析 本产品

  • 理解准确率(accuracy)、精度(precision)、查全率(recall)、F1

    Precision又叫查准率 Recall又叫查全率 这两个指标共同衡量才能评价模型输出结果 TP TN FP FN的定义 在二分类问题中 Real 1 Real 0 Predict 1 TP FP Predict 0 FN TN TP 预

  • 记录用Anaconda搭建Tensorflow1.13环境

    上文才搭建好了Pytorch环境 这次获得了一篇论文源码 其中用到的是Tensorflow环境 为了复现论文结果 只好再搭建一个Tensorflow环境 首先论文中给出的环境信息是 Tensorflow 1 13 以及 Python 3 这

  • [第六篇]——云服务器之Spring Cloud直播商城 b2b2c电子商务技术总结

    云服务器 云服务器 Elastic Compute Service ECS 是一种简单高效 安全可靠 处理能力可弹性伸缩的计算服务 云服务器管理方式比物理服务器更简单高效 我们无需提前购买昂贵的硬件 即可迅速创建或删除云服务器 云服务器费用

  • flutter强制横屏竖屏设置

    void main 强制横屏 SystemChrome setPreferredOrientations DeviceOrientation landscapeLeft DeviceOrientation landscapeRight ru

  • Latex 约等于符号

    approx

  • 深入理解Python 中的特殊常量None

    False 不同 它不表示 0 也不表示空字符串 而表示没有值 也就是空值 None 有自己的数据类型 我们可以在 IDLE 中使用 type 函数查看它的类型 执行代码如下 gt gt gt type None

  • LangChain 中文入门教程

    文章目录 LangChain 中文入门教程 一 介绍 1 1 背景 1 2 基础功能 二 必知概念 2 1 Loader 加载器 2 2 Document 文档 2 3 Text Spltters 文本分割 2 4 Vectorstores

  • 语音中的 Transformer一文打尽！

    写在前面 自 2017 年 Transformer 技术出现以来 便在 NLP CV 语音 生物 化学等领域引起了诸多进展 知源月旦团队期望通过 Transformer X 梳理清 Transformer 技术的发展脉络 以及其在各领域中的

  • BigQueue：The Architecture and Design of a Publish & Subscribe Messaging System Tailored for Big Data

    The Architecture and Design of a Publish Subscribe Messaging System Tailored for Big Data Collecting and Analytics MAR 2

  • stm32USART使用（库函数）

    1 定义GPIO端口 串口USART 中断NVIC初始化结构体 2 打开相关外设时钟 串口1的时钟和引脚都在APB2总线上所以可以直接 操作 如下 3 给GPIO结构体成员赋值 设置引脚功能 此处用的是USART1 Tx是PA9 Rx是PA

  • 【MarkDown】CSDN Markdown之时间轴图timeline详解

    文章目录 时间轴图 一个关于时间轴图的例子 语法 分组 长 时间段 或 事件文本 换行 时间段 和 事件文本 样式 自定义颜色方案 主题 基础主题 森林主题 黑色主题 默认主题 中性主题 与库或网站集成 时间轴图 时间轴图 现在这是一个实验

热门标签