gitea-yuany3721/vuepress-theme-plume
1
0
Fork 1
mirror of https://github.com/pengzhanbo/vuepress-theme-plume.git synced 2026-04-23 10:58:13 +08:00
Code Issues Packages Projects Releases Wiki Activity
vuepress-theme-plume/assets/timeline-BHAegfJ4.js

209 lines
60 KiB
JavaScript
Raw Blame History

import{$ as e,B as t,P as n,_ as r,f as i,g as a,h as o,l as s}from"./runtime-core.esm-bundler-CZvn3YaB.js";import{t as c}from"./plugin-vue_export-helper-CxTVcLa7.js";var l=JSON.parse(`{"path":"/en/guide/markdown/timeline/","title":"Timeline | Guide","lang":"en-US","frontmatter":{"title":"Timeline","icon":"mdi:timeline-text-outline","createTime":"2025/10/08 18:05:29","permalink":"/en/guide/markdown/timeline/","description":"Overview In markdown, use the ::: timeline container with markdown unordered list syntax to achieve timeline rendering effects. Supports horizontal and vertical orientations Ver...","head":[["script",{"type":"application/ld+json"},"{\\"@context\\":\\"https://schema.org\\",\\"@type\\":\\"Article\\",\\"headline\\":\\"Timeline\\",\\"image\\":[\\"\\"],\\"dateModified\\":\\"2025-10-09T07:46:05.000Z\\",\\"author\\":[]}"],["meta",{"property":"og:url","content":"https://theme-plume.vuejs.press/en/guide/markdown/timeline/"}],["meta",{"property":"og:site_name","content":"Plume Theme"}],["meta",{"property":"og:title","content":"Timeline"}],["meta",{"property":"og:description","content":"Overview In markdown, use the ::: timeline container with markdown unordered list syntax to achieve timeline rendering effects. Supports horizontal and vertical orientations Ver..."}],["meta",{"property":"og:type","content":"article"}],["meta",{"property":"og:locale","content":"en-US"}],["meta",{"property":"og:locale:alternate","content":"zh-CN"}],["meta",{"property":"og:updated_time","content":"2025-10-09T07:46:05.000Z"}],["meta",{"property":"article:modified_time","content":"2025-10-09T07:46:05.000Z"}],["link",{"rel":"alternate","hreflang":"zh-cn","href":"https://theme-plume.vuejs.press/guide/markdown/timeline/"}]]},"readingTime":{"minutes":5.83,"words":1749},"git":{"createdTime":1743080813000,"updatedTime":1759995965000,"contributors":[{"name":"zhenghaoyang24","username":"zhenghaoyang24","email":"95458562+zhenghaoyang24@users.noreply.github.com","commits":1,"avatar":"https://avatars.githubusercontent.com/zhenghaoyang24?v=4","url":"https://github.com/zhenghaoyang24"},{"name":"pengzhanbo","username":"pengzhanbo","email":"volodymyr@foxmail.com","commits":3,"avatar":"https://avatars.githubusercontent.com/pengzhanbo?v=4","url":"https://github.com/pengzhanbo"}],"changelog":[{"hash":"385059f214cb07fc9a098859e889432fb81f998b","time":1759995965000,"email":"volodymyr@foxmail.com","author":"pengzhanbo","message":"docs: update en docs (#708)"},{"hash":"4d2361a7046214fe0f4e4af01831107fd00e38ad","time":1759849989000,"email":"volodymyr@foxmail.com","author":"pengzhanbo","message":"feat(theme)!: add collections support (#704)"},{"hash":"9f99ae3ca72b3085c6cd383a9084f42be299c400","time":1743080813000,"email":"95458562+zhenghaoyang24@users.noreply.github.com","author":"zhenghaoyang24","message":"docs: add en <code>markdown</code> doc (#538)","coAuthors":[{"name":"pengzhanbo","email":"volodymyr@foxmail.com"}]}]},"autoDesc":true,"filePathRelative":"en/guide/markdown/timeline.md","headers":[],"bulletin":false}`),u={name:`timeline.md`},d={class:`code-block-title`,"data-title":`.vuepress/config.ts`},f={class:`code-block-title-bar`},p={class:`title`},m={class:`code-block-title`,"data-title":`timeline.md`},h={class:`code-block-title-bar`},g={class:`title`},_={class:`vp-field-group`},v={class:`vp-field-group`},y={class:`code-block-title`,"data-title":`.vuepress/styles/index.css`},b={class:`code-block-title-bar`},x={class:`title`};function S(c,l,u,S,C,w){let T=t(`VPIcon`),E=t(`VPTimelineItem`),D=t(`VPTimeline`),O=t(`VPField`),k=t(`VPLink`);return n(),i(`div`,null,[l[88]||=o(`<h2 id="overview" tabindex="-1"><a class="header-anchor" href="#overview"><span>Overview</span></a></h2><p>In markdown, use the <code>::: timeline</code> container with markdown unordered list syntax to achieve <mark>timeline</mark> rendering effects.</p><ul><li>Supports <mark>horizontal</mark> and <mark>vertical</mark> orientations</li><li>Vertical orientation supports <strong>left alignment</strong>, <strong>right alignment</strong>, and <strong>justified alignment</strong></li><li>Supports <strong>icons</strong> and <strong>line styles</strong></li><li>Supports setting <strong>colors</strong> through preset <strong>types</strong>, and supports custom colors</li></ul><h2 id="enable" tabindex="-1"><a class="header-anchor" href="#enable"><span>Enable</span></a></h2><p>This feature is disabled by default. You need to enable it in the <code>theme</code> configuration.</p>`,5),s(`div`,d,[s(`div`,f,[s(`span`,p,[r(T,{provider:`iconify`,name:`vscode-icons:file-type-typescript`}),l[0]||=a(`.vuepress/config.ts`,-1)])]),l[1]||=o(`<div class="language-ts" data-highlighter="shiki" data-ext="ts" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark has-diff vp-code"><code class="language-ts"><span class="line"><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">export</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;"> default</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;"> defineUserConfig</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">({</span></span>
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> theme</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">: </span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;">plumeTheme</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">({</span></span>
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> markdown</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">: {</span></span>
<span class="line diff add"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> timeline</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">: </span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">true</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">, </span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> }</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> })</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">})</span></span></code></pre></div>`,1)]),l[89]||=s(`h2`,{id:`usage`,tabindex:`-1`},[s(`a`,{class:`header-anchor`,href:`#usage`},[s(`span`,null,`Usage`)])],-1),l[90]||=s(`p`,null,[a(`Inside the `),s(`code`,null,`::: timeline`),a(` container, use markdown unordered list syntax. Each list item represents a point on the timeline.`)],-1),s(`div`,m,[s(`div`,h,[s(`span`,g,[r(T,{provider:`iconify`,name:`vscode-icons:file-type-markdown`}),l[2]||=a(`timeline.md`,-1)])]),l[3]||=o(`<div class="language-md line-numbers-mode" data-highlighter="shiki" data-ext="md" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-md"><span class="line highlighted"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">::: timeline Configuration</span></span>
<span class="line"><span style="--shiki-light:#A65E2B;--shiki-dark:#D4976C;">-</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> Title</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> Configuration</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> Content</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#A65E2B;--shiki-dark:#D4976C;">-</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> Title</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> Configuration</span></span>
<span class="line highlighted"><wbr></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> Content</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">:::</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>`,1)]),l[91]||=o(`<p>For each list item:</p><ul><li><p>Everything from the <strong>first line</strong> to the <strong>first empty line</strong> is considered the <strong>title</strong>. The line immediately following the title is used to <strong>configure</strong> the behavior of the current item.</p></li><li><p><strong>After the first empty line</strong>: Content</p></li></ul><div class="hint-container important"><p class="hint-container-title">Please ensure correct indentation</p></div><p><strong>A simple example:</strong></p><p><strong>Input:</strong></p><div class="language-md line-numbers-mode" data-highlighter="shiki" data-ext="md" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-md"><span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">::: timeline</span></span>
<span class="line"><span style="--shiki-light:#A65E2B;--shiki-dark:#D4976C;">-</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> Node 1</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> time=2025-03-20 type=success</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> Content</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#A65E2B;--shiki-dark:#D4976C;">-</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> Node 2</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> time=2025-02-21 type=warning</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> Content</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#A65E2B;--shiki-dark:#D4976C;">-</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> Node 3</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> time=2025-01-22 type=danger</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> Content</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">:::</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>Output:</strong></p>`,7),r(D,{card:void 0},{default:e(()=>[r(E,{time:`2025-03-20`,type:`success`,card:void 0},{title:e(()=>[...l[4]||=[a(`Node 1`,-1)]]),default:e(()=>[l[5]||=s(`p`,null,`Content`,-1)]),_:1}),r(E,{time:`2025-02-21`,type:`warning`,card:void 0},{title:e(()=>[...l[6]||=[a(`Node 2`,-1)]]),default:e(()=>[l[7]||=s(`p`,null,`Content`,-1)]),_:1}),r(E,{time:`2025-01-22`,type:`danger`,card:void 0},{title:e(()=>[...l[8]||=[a(`Node 3`,-1)]]),default:e(()=>[l[9]||=s(`p`,null,`Content`,-1)]),_:1})]),_:1}),l[92]||=o(`<div class="hint-container important"><p class="hint-container-title">Timeline defaults to vertical orientation</p></div><h2 id="configuration" tabindex="-1"><a class="header-anchor" href="#configuration"><span>Configuration</span></a></h2><p><strong>Timeline</strong> supports highly flexible configuration options, divided into two main parts:</p><ul><li><p><strong>Container Configuration</strong>: Configuration on the <code>::: timeline</code> container, placed after <code>::: timeline</code>. For example:</p><p><code>::: timeline horizontal</code> renders a horizontally oriented timeline.</p></li><li><p><strong>List Item Configuration</strong>: Configuration for each list item, placed on a separate line immediately following the title. For example:</p><div class="language-md" data-highlighter="shiki" data-ext="md" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-md"><span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">::: timeline</span></span>
<span class="line"><span style="--shiki-light:#A65E2B;--shiki-dark:#D4976C;">-</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> Title </span><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;">&lt;!--Title line--&gt;</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> Also title </span><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;">&lt;!--Title line--&gt;</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> time=2025-03-20 type=success </span><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;">&lt;!--Configuration line (optional)--&gt;</span></span>
<span class="line"><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;"> &lt;!--Empty line (required if content exists)--&gt;</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> Content</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">:::</span></span></code></pre></div></li></ul><h3 id="container-configuration" tabindex="-1"><a class="header-anchor" href="#container-configuration"><span>Container Configuration</span></a></h3>`,5),s(`div`,_,[r(O,{name:`horizontal`,optional:``,type:`boolean`,"default-value":`false`},{default:e(()=>[...l[10]||=[s(`p`,null,`Renders a horizontally oriented timeline.`,-1)]]),_:1}),r(O,{name:`card`,optional:``,type:`boolean`,"default-value":`false`},{default:e(()=>[...l[11]||=[s(`p`,null,`Renders each timeline node as a card by default (can be overridden in list item configuration).`,-1)]]),_:1}),r(O,{name:`placement`,optional:``,type:`'left' | 'right' | 'between'`,"default-value":`'left'`},{default:e(()=>[...l[12]||=[s(`p`,null,[a(`Alignment of timeline nodes. `),s(`mark`,{class:`warning`},`Only effective in vertical orientation`)],-1),s(`ul`,null,[s(`li`,null,[s(`code`,null,`left`),a(`: Left-aligns the timeline axis`)]),s(`li`,null,[s(`code`,null,`right`),a(`: Right-aligns the timeline axis`)]),s(`li`,null,[s(`code`,null,`between`),a(`: Justifies the timeline axis (positions defined by `),s(`code`,null,`placement`),a(` in list item configuration, defaults to `),s(`code`,null,`left`),a(`)`)])],-1)]]),_:1}),r(O,{name:`line`,optional:``,type:`'solid' | 'dashed' | 'dotted'`,"default-value":`'solid'`},{default:e(()=>[...l[13]||=[s(`p`,null,`Line style (can be overridden in list item configuration).`,-1)]]),_:1})]),l[93]||=s(`h3`,{id:`list-item-configuration`,tabindex:`-1`},[s(`a`,{class:`header-anchor`,href:`#list-item-configuration`},[s(`span`,null,`List Item Configuration`)])],-1),s(`div`,v,[r(O,{name:`time`,optional:``,type:`string`,"default-value":``},{default:e(()=>[...l[14]||=[s(`p`,null,[a(`Time point, can be any string such as `),s(`code`,null,`2025-03-20`),a(`, `),s(`code`,null,`Q1`),a(`, etc.`)],-1)]]),_:1}),r(O,{name:`type`,optional:``,type:`'info' | 'tip' | 'success' | 'warning' | 'danger' | 'caution' | 'important'`,"default-value":`'info'`},{default:e(()=>[...l[15]||=[s(`p`,null,`Type of the timeline node.`,-1)]]),_:1}),r(O,{name:`card`,optional:``,type:`boolean`,"default-value":`false`},{default:e(()=>[...l[16]||=[s(`p`,null,[a(`Renders the current timeline node as a card. Default value is inherited from container configuration `),s(`code`,null,`card`),a(`.`)],-1)]]),_:1}),r(O,{name:`line`,optional:``,type:`'solid' | 'dashed' | 'dotted'`,"default-value":`'solid'`},{default:e(()=>[...l[17]||=[s(`p`,null,[a(`Line style. Default value is inherited from container configuration `),s(`code`,null,`line`),a(`.`)],-1)]]),_:1}),r(O,{name:`icon`,optional:``,type:`string`,"default-value":``},{default:e(()=>[...l[18]||=[s(`p`,null,[a(`Icon for the timeline node. Supports all `),s(`a`,{href:`https://icon-sets.iconify.design/`,target:`_blank`,rel:`noopener noreferrer`},`iconify`),a(` icons.`)],-1)]]),_:1}),r(O,{name:`placement`,optional:``,type:`'left' | 'right'`,"default-value":`'left'`},{default:e(()=>[...l[19]||=[s(`p`,null,[a(`Defines the position of the current timeline node when container configuration `),s(`code`,null,`placement`),a(` is `),s(`code`,null,`between`),a(`.`)],-1),s(`ul`,null,[s(`li`,null,[s(`code`,null,`left`),a(`: On the left side of the timeline axis`)]),s(`li`,null,[s(`code`,null,`right`),a(`: On the right side of the timeline axis`)])],-1)]]),_:1}),r(O,{name:`color`,optional:``,type:`string`,"default-value":``},{default:e(()=>[...l[20]||=[s(`p`,null,`Line color for the timeline node. Can be any valid color value.`,-1)]]),_:1})]),l[94]||=o(`<h2 id="examples" tabindex="-1"><a class="header-anchor" href="#examples"><span>Examples</span></a></h2><h3 id="horizontal-orientation" tabindex="-1"><a class="header-anchor" href="#horizontal-orientation"><span>Horizontal Orientation</span></a></h3><p>Add <code>horizontal</code> after <code>:::timeline</code> to render the timeline in horizontal orientation.</p><p><strong>Input:</strong></p><div class="language-md line-numbers-mode" data-highlighter="shiki" data-ext="md" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-md"><span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">::: timeline </span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;" class="highlighted-word">horizontal</span></span>
<span class="line"><span style="--shiki-light:#A65E2B;--shiki-dark:#D4976C;">-</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> Node 1</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> time=2025-03-20</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> Content</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#A65E2B;--shiki-dark:#D4976C;">-</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> Node 2</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> time=2025-04-20 type=success</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> Content</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#A65E2B;--shiki-dark:#D4976C;">-</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> Node 3</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> time=2025-01-22 type=danger</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> Content</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#A65E2B;--shiki-dark:#D4976C;">-</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> Node 4</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> time=2025-01-22 type=important</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> Content</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">:::</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>Output:</strong></p>`,6),r(D,{horizontal:``,card:void 0},{default:e(()=>[r(E,{time:`2025-03-20`,card:void 0},{title:e(()=>[...l[21]||=[a(`Node 1`,-1)]]),default:e(()=>[l[22]||=s(`p`,null,`Content`,-1)]),_:1}),r(E,{time:`2025-04-20`,type:`success`,card:void 0},{title:e(()=>[...l[23]||=[a(`Node 2`,-1)]]),default:e(()=>[l[24]||=s(`p`,null,`Content`,-1)]),_:1}),r(E,{time:`2025-01-22`,type:`danger`,card:void 0},{title:e(()=>[...l[25]||=[a(`Node 3`,-1)]]),default:e(()=>[l[26]||=s(`p`,null,`Content`,-1)]),_:1}),r(E,{time:`2025-01-22`,type:`important`,card:void 0},{title:e(()=>[...l[27]||=[a(`Node 4`,-1)]]),default:e(()=>[l[28]||=s(`p`,null,`Content`,-1)]),_:1})]),_:1}),l[95]||=o(`<h3 id="right-alignment" tabindex="-1"><a class="header-anchor" href="#right-alignment"><span>Right Alignment</span></a></h3><p>Add <code>placement=&quot;right&quot;</code> after <code>:::timeline</code> to render the timeline with right alignment.</p><p><strong>Input:</strong></p><div class="language-md line-numbers-mode" data-highlighter="shiki" data-ext="md" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-md"><span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">::: timeline </span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;" class="highlighted-word">placement=&quot;right&quot;</span></span>
<span class="line"><span style="--shiki-light:#A65E2B;--shiki-dark:#D4976C;">-</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> Node 1</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> time=2025-03-20</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> Content</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#A65E2B;--shiki-dark:#D4976C;">-</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> Node 2</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> time=2025-04-20 type=success</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> Content</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#A65E2B;--shiki-dark:#D4976C;">-</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> Node 3</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> time=2025-01-22 type=danger</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> Content</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#A65E2B;--shiki-dark:#D4976C;">-</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> Node 4</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> time=2025-01-22 type=important</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> Content</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">:::</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>Output:</strong></p>`,5),r(D,{placement:`right`,card:void 0},{default:e(()=>[r(E,{time:`2025-03-20`,card:void 0},{title:e(()=>[...l[29]||=[a(`Node 1`,-1)]]),default:e(()=>[l[30]||=s(`p`,null,`Content`,-1)]),_:1}),r(E,{time:`2025-04-20`,type:`success`,card:void 0},{title:e(()=>[...l[31]||=[a(`Node 2`,-1)]]),default:e(()=>[l[32]||=s(`p`,null,`Content`,-1)]),_:1}),r(E,{time:`2025-01-22`,type:`danger`,card:void 0},{title:e(()=>[...l[33]||=[a(`Node 3`,-1)]]),default:e(()=>[l[34]||=s(`p`,null,`Content`,-1)]),_:1}),r(E,{time:`2025-01-22`,type:`important`,card:void 0},{title:e(()=>[...l[35]||=[a(`Node 4`,-1)]]),default:e(()=>[l[36]||=s(`p`,null,`Content`,-1)]),_:1})]),_:1}),l[96]||=o(`<h3 id="justified-alignment" tabindex="-1"><a class="header-anchor" href="#justified-alignment"><span>Justified Alignment</span></a></h3><p>Add <code>placement=&quot;between&quot;</code> after <code>:::timeline</code> to render the timeline with justified alignment.</p><p>List items default to the left side of the timeline. Use <code>placement=&quot;right&quot;</code> in list item configuration to set right-side position.</p><p><strong>Input:</strong></p><div class="language-md line-numbers-mode" data-highlighter="shiki" data-ext="md" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-md"><span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">::: timeline </span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;" class="highlighted-word">placement=&quot;between&quot;</span></span>
<span class="line"><span style="--shiki-light:#A65E2B;--shiki-dark:#D4976C;">-</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> Node 1</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> time=2025-03-20 </span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;" class="highlighted-word">placement=right</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> Content</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#A65E2B;--shiki-dark:#D4976C;">-</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> Node 2</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> time=2025-04-20 type=success</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> Content</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#A65E2B;--shiki-dark:#D4976C;">-</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> Node 3</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> time=2025-01-22 type=danger </span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;" class="highlighted-word">placement=right</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> Content</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#A65E2B;--shiki-dark:#D4976C;">-</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> Node 4</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> time=2025-01-22 type=important</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> Content</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">:::</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>Output:</strong></p>`,6),r(D,{placement:`between`,card:void 0},{default:e(()=>[r(E,{time:`2025-03-20`,placement:`right`,card:void 0},{title:e(()=>[...l[37]||=[a(`Node 1`,-1)]]),default:e(()=>[l[38]||=s(`p`,null,`Content`,-1)]),_:1}),r(E,{time:`2025-04-20`,type:`success`,card:void 0},{title:e(()=>[...l[39]||=[a(`Node 2`,-1)]]),default:e(()=>[l[40]||=s(`p`,null,`Content`,-1)]),_:1}),r(E,{time:`2025-01-22`,type:`danger`,placement:`right`,card:void 0},{title:e(()=>[...l[41]||=[a(`Node 3`,-1)]]),default:e(()=>[l[42]||=s(`p`,null,`Content`,-1)]),_:1}),r(E,{time:`2025-01-22`,type:`important`,card:void 0},{title:e(()=>[...l[43]||=[a(`Node 4`,-1)]]),default:e(()=>[l[44]||=s(`p`,null,`Content`,-1)]),_:1})]),_:1}),l[97]||=o(`<h3 id="node-types" tabindex="-1"><a class="header-anchor" href="#node-types"><span>Node Types</span></a></h3><p>Add <code>type=node-type</code> in list item configuration to set the node type for the current item.</p><p><strong>Input:</strong></p><div class="language-md line-numbers-mode" data-highlighter="shiki" data-ext="md" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-md"><span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">::: timeline</span></span>
<span class="line"><span style="--shiki-light:#A65E2B;--shiki-dark:#D4976C;">-</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> Node 1</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> time=2025-03-20 </span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;" class="highlighted-word">type=success</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> Content</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#A65E2B;--shiki-dark:#D4976C;">-</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> Node 2</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> time=2025-04-20 </span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;" class="highlighted-word">type=warning</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> Content</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#A65E2B;--shiki-dark:#D4976C;">-</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> Node 3</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> time=2025-01-22 </span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;" class="highlighted-word">type=danger</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> Content</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#A65E2B;--shiki-dark:#D4976C;">-</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> Node 4</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> time=2025-01-22 </span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;" class="highlighted-word">type=important</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> Content</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">:::</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>Output:</strong></p>`,5),r(D,{card:void 0},{default:e(()=>[r(E,{time:`2025-03-20`,type:`success`,card:void 0},{title:e(()=>[...l[45]||=[a(`Node 1`,-1)]]),default:e(()=>[l[46]||=s(`p`,null,`Content`,-1)]),_:1}),r(E,{time:`2025-04-20`,type:`warning`,card:void 0},{title:e(()=>[...l[47]||=[a(`Node 2`,-1)]]),default:e(()=>[l[48]||=s(`p`,null,`Content`,-1)]),_:1}),r(E,{time:`2025-01-22`,type:`danger`,card:void 0},{title:e(()=>[...l[49]||=[a(`Node 3`,-1)]]),default:e(()=>[l[50]||=s(`p`,null,`Content`,-1)]),_:1}),r(E,{time:`2025-01-22`,type:`important`,card:void 0},{title:e(()=>[...l[51]||=[a(`Node 4`,-1)]]),default:e(()=>[l[52]||=s(`p`,null,`Content`,-1)]),_:1})]),_:1}),l[98]||=o(`<h3 id="line-styles" tabindex="-1"><a class="header-anchor" href="#line-styles"><span>Line Styles</span></a></h3><ul><li>Add <code>line=line-style</code> in container configuration to set the default line style for all nodes.</li><li>Add <code>line=line-style</code> in list item configuration to set the line style for a specific node.</li></ul><p><strong>Input:</strong></p><div class="language-md line-numbers-mode" data-highlighter="shiki" data-ext="md" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-md"><span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">::: timeline </span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;" class="highlighted-word">line=&quot;dotted&quot;</span></span>
<span class="line"><span style="--shiki-light:#A65E2B;--shiki-dark:#D4976C;">-</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> Node 1</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> time=2025-03-20</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> Content</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#A65E2B;--shiki-dark:#D4976C;">-</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> Node 2</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> time=2025-04-20 type=success</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> Content</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#A65E2B;--shiki-dark:#D4976C;">-</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> Node 3</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> time=2025-01-22 type=danger </span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;" class="highlighted-word">line=dashed</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> Content</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#A65E2B;--shiki-dark:#D4976C;">-</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> Node 4</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> time=2025-01-22 type=important </span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;" class="highlighted-word">line=solid</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> Content</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">:::</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>Output:</strong></p>`,5),r(D,{line:`dotted`,card:void 0},{default:e(()=>[r(E,{time:`2025-03-20`,card:void 0},{title:e(()=>[...l[53]||=[a(`Node 1`,-1)]]),default:e(()=>[l[54]||=s(`p`,null,`Content`,-1)]),_:1}),r(E,{time:`2025-04-20`,type:`success`,card:void 0},{title:e(()=>[...l[55]||=[a(`Node 2`,-1)]]),default:e(()=>[l[56]||=s(`p`,null,`Content`,-1)]),_:1}),r(E,{time:`2025-01-22`,type:`danger`,line:`dashed`,card:void 0},{title:e(()=>[...l[57]||=[a(`Node 3`,-1)]]),default:e(()=>[l[58]||=s(`p`,null,`Content`,-1)]),_:1}),r(E,{time:`2025-01-22`,type:`important`,line:`solid`,card:void 0},{title:e(()=>[...l[59]||=[a(`Node 4`,-1)]]),default:e(()=>[l[60]||=s(`p`,null,`Content`,-1)]),_:1})]),_:1}),l[99]||=o(`<h3 id="nodes-with-icons" tabindex="-1"><a class="header-anchor" href="#nodes-with-icons"><span>Nodes with Icons</span></a></h3><p>Add <code>icon=icon-name</code> in list item configuration to add an icon to the node.</p><p>Icon names support all <a href="https://icon-sets.iconify.design/" target="_blank" rel="noopener noreferrer">iconify</a> icon names.</p><p><strong>Input:</strong></p><div class="language-md line-numbers-mode" data-highlighter="shiki" data-ext="md" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-md"><span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">::: timeline placement=&quot;between&quot;</span></span>
<span class="line"><span style="--shiki-light:#A65E2B;--shiki-dark:#D4976C;">-</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> Node 1</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> time=2025-03-20 placement=right </span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;" class="highlighted-word">icon=mdi:balloon</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> Content</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#A65E2B;--shiki-dark:#D4976C;">-</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> Node 2</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> time=2025-04-20 type=success </span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;" class="highlighted-word">icon=mdi:bookmark</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> Content</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#A65E2B;--shiki-dark:#D4976C;">-</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> Node 3</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> time=2025-01-22 type=danger placement=right icon=mdi:bullhorn-variant-outline</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> Content</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#A65E2B;--shiki-dark:#D4976C;">-</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> Node 4</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> time=2025-01-22 type=important card=true icon=&quot;mdi:cake-variant-outline&quot;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> Content</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">:::</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>Output:</strong></p>`,6),r(D,{placement:`between`,card:void 0},{default:e(()=>[r(E,{time:`2025-03-20`,placement:`right`,icon:`mdi:balloon`,card:void 0},{icon:e(()=>[r(T,{provider:`iconify`,name:`mdi:balloon`})]),title:e(()=>[...l[61]||=[a(`Node 1`,-1)]]),default:e(()=>[l[62]||=s(`p`,null,`Content`,-1)]),_:1}),r(E,{time:`2025-04-20`,type:`success`,icon:`mdi:bookmark`,card:void 0},{icon:e(()=>[r(T,{provider:`iconify`,name:`mdi:bookmark`})]),title:e(()=>[...l[63]||=[a(`Node 2`,-1)]]),default:e(()=>[l[64]||=s(`p`,null,`Content`,-1)]),_:1}),r(E,{time:`2025-01-22`,type:`danger`,placement:`right`,icon:`mdi:bullhorn-variant-outline`,card:void 0},{icon:e(()=>[r(T,{provider:`iconify`,name:`mdi:bullhorn-variant-outline`})]),title:e(()=>[...l[65]||=[a(`Node 3`,-1)]]),default:e(()=>[l[66]||=s(`p`,null,`Content`,-1)]),_:1}),r(E,{time:`2025-01-22`,type:`important`,card:``,icon:`mdi:cake-variant-outline`},{icon:e(()=>[r(T,{provider:`iconify`,name:`mdi:cake-variant-outline`})]),title:e(()=>[...l[67]||=[a(`Node 4`,-1)]]),default:e(()=>[l[68]||=s(`p`,null,`Content`,-1)]),_:1})]),_:1}),l[100]||=o(`<h3 id="card-nodes" tabindex="-1"><a class="header-anchor" href="#card-nodes"><span>Card Nodes</span></a></h3><p>Card nodes can be flexibly controlled:</p><ul><li>Add <code>card</code> in container configuration to make every list item a card node.</li><li>Add <code>card=true</code> in list item configuration to set the node as a card node.</li><li>Add <code>card=false</code> in list item configuration to set the node as a non-card node.</li></ul><p>Card node styles are affected by the <code>type</code> configuration.</p><div class="hint-container tip"><p class="hint-container-title">Adding <code>card=true</code> / <code>card=false</code> in list item configuration can override the container&#39;s <code>card</code> configuration</p></div><p><strong>Input:</strong></p><div class="language-md line-numbers-mode" data-highlighter="shiki" data-ext="md" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-md"><span class="line highlighted"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">::: timeline card</span></span>
<span class="line"><span style="--shiki-light:#A65E2B;--shiki-dark:#D4976C;">-</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> Node 1</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> time=2025-03-20</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> Content</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#A65E2B;--shiki-dark:#D4976C;">-</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> Node 2</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> time=2025-04-20 type=success </span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;" class="highlighted-word">card=false</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> Content</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#A65E2B;--shiki-dark:#D4976C;">-</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> Node 3</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> time=2025-01-22 type=danger</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> Content</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#A65E2B;--shiki-dark:#D4976C;">-</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> Node 4</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> time=2025-01-22 type=important</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> Content</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">:::</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>Output:</strong></p>`,8),r(D,{card:``},{default:e(()=>[r(E,{time:`2025-03-20`,card:void 0},{title:e(()=>[...l[69]||=[a(`Node 1`,-1)]]),default:e(()=>[l[70]||=s(`p`,null,`Content`,-1)]),_:1}),r(E,{time:`2025-04-20`,type:`success`},{title:e(()=>[...l[71]||=[a(`Node 2`,-1)]]),default:e(()=>[l[72]||=s(`p`,null,`Content`,-1)]),_:1}),r(E,{time:`2025-01-22`,type:`danger`,card:void 0},{title:e(()=>[...l[73]||=[a(`Node 3`,-1)]]),default:e(()=>[l[74]||=s(`p`,null,`Content`,-1)]),_:1}),r(E,{time:`2025-01-22`,type:`important`,card:void 0},{title:e(()=>[...l[75]||=[a(`Node 4`,-1)]]),default:e(()=>[l[76]||=s(`p`,null,`Content`,-1)]),_:1})]),_:1}),l[101]||=o(`<h2 id="custom-node-types" tabindex="-1"><a class="header-anchor" href="#custom-node-types"><span>Custom Node Types</span></a></h2><p>Timeline node types are controlled through CSS Variables. The theme provides the following CSS variables:</p><div class="language-css" data-highlighter="shiki" data-ext="css" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-css"><span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">root</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> {</span></span>
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> --vp-timeline-c-line</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> var</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">--vp-c-border</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">);</span><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;"> /* Line color */</span></span>
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> --vp-timeline-c-point</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> var</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">--vp-c-border</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">);</span><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;"> /* Point color */</span></span>
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> --vp-timeline-c-title</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> var</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">--vp-c-text-1</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">);</span><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;"> /* Title text color */</span></span>
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> --vp-timeline-c-text</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> var</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">--vp-c-text-1</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">);</span><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;"> /* Content text color */</span></span>
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> --vp-timeline-c-time</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> var</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">--vp-c-text-3</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">);</span><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;"> /* Time text color */</span></span>
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> --vp-timeline-c-icon</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> var</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">--vp-c-bg</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">);</span><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;"> /* Icon color */</span></span>
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> --vp-timeline-bg-card</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> var</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">--vp-c-bg-soft</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">);</span><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;"> /* Background color for card nodes */</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">}</span></span></code></pre></div><p>For example, the built-in node type <code>tip</code>:</p><div class="language-css" data-highlighter="shiki" data-ext="css" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-css"><span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">.</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">vp-timeline-item</span><span class="highlighted-word"><span style="--shiki-light:#999999;--shiki-dark:#666666;">.</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">tip</span></span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> {</span></span>
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> --vp-timeline-c-line</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> var</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">--vp-c-tip-1</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">);</span></span>
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> --vp-timeline-c-point</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> var</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">--vp-c-tip-1</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">);</span></span>
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> --vp-timeline-bg-card</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> var</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">--vp-c-tip-soft</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">);</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">}</span></span></code></pre></div>`,5),s(`p`,null,[l[78]||=a(`You can override built-in types or add new types in `,-1),r(k,{href:`../custom/style.md`},{default:e(()=>[...l[77]||=[a(`Custom Styles`,-1)]]),_:1}),l[79]||=a(`.`,-1)]),l[102]||=s(`p`,null,[s(`strong`,null,`Example:`)],-1),s(`div`,y,[s(`div`,b,[s(`span`,x,[r(T,{provider:`iconify`,name:`vscode-icons:file-type-css`}),l[80]||=a(`.vuepress/styles/index.css`,-1)])]),l[81]||=o(`<div class="language-css" data-highlighter="shiki" data-ext="css" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-css"><span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">.</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">vp-timeline-item</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">.</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">your-type</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> {</span></span>
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> --vp-timeline-c-line</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> #</span><span style="--shiki-light:#A65E2B;--shiki-dark:#C99076;">3cf</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">;</span></span>
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> --vp-timeline-c-point</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> #</span><span style="--shiki-light:#A65E2B;--shiki-dark:#C99076;">3cf</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">;</span></span>
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> --vp-timeline-bg-card</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> rgba</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#2F798A;--shiki-dark:#4C9A91;">60</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">,</span><span style="--shiki-light:#2F798A;--shiki-dark:#4C9A91;"> 252</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">,</span><span style="--shiki-light:#2F798A;--shiki-dark:#4C9A91;"> 255</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">,</span><span style="--shiki-light:#2F798A;--shiki-dark:#4C9A91;"> 0.314</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">);</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">}</span></span></code></pre></div>`,1)]),l[103]||=o(`<div class="language-md line-numbers-mode" data-highlighter="shiki" data-ext="md" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-md"><span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">::: timeline</span></span>
<span class="line"><span style="--shiki-light:#A65E2B;--shiki-dark:#D4976C;">-</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> Node 1</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> time=2025-03-20</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> Content</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#A65E2B;--shiki-dark:#D4976C;">-</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> Node 2</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> time=2025-04-20 </span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;" class="highlighted-word">type=your-type</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> card=true</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> Content</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#A65E2B;--shiki-dark:#D4976C;">-</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> Node 3</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> time=2025-01-22 type=danger</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> Content</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">:::</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>`,1),r(D,{card:void 0},{default:e(()=>[r(E,{time:`2025-03-20`,card:void 0},{title:e(()=>[...l[82]||=[a(`Node 1`,-1)]]),default:e(()=>[l[83]||=s(`p`,null,`Content`,-1)]),_:1}),r(E,{time:`2025-04-20`,type:`your-type`,card:``},{title:e(()=>[...l[84]||=[a(`Node 2`,-1)]]),default:e(()=>[l[85]||=s(`p`,null,`Content`,-1)]),_:1}),r(E,{time:`2025-01-22`,type:`danger`,card:void 0},{title:e(()=>[...l[86]||=[a(`Node 3`,-1)]]),default:e(()=>[l[87]||=s(`p`,null,`Content`,-1)]),_:1})]),_:1})])}var C=c(u,[[`render`,S]]);export{l as _pageData,C as default};
Reference in New Issue View Git Blame Copy Permalink