---
title: "rdview-example"
use_rdview: true
---

行内 <rd-timeline inline><button is="rd-event" style="--event-x: 1; --x: 1"></button><button is="rd-beat" style="--y: 1"><rd-pulse></rd-pulse><rd-pulse type="hit" style="--x: 1"></rd-pulse></button></rd-timeline> 事件。

<rd-timeline style="border: 2px solid #7a7a7a; margin: 2em 0">
  <button is="rd-event" id="play-song-event" popovertarget="play-song-event-tooltip" style="--event-x: 8; --width: 2">
  </button>
  <rd-tooltip id="play-song-event-tooltip" popover anchor="play-song-event" style='
    display: grid;
    grid-template:
      ". a a a a a a a a ." 1fr
      ". . b b b c c c . ." 1fr / 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    align-items: center;
    gap: 4px;
  '>
    <input class="dark align-center" value="sndOrientalTechno" disabled style="grid-area: a">
    <span class="rd-text-stroke" style="grid-area: b">BPM:</span>
    <input class="align-right" value="100" disabled style="grid-area: c">
  </rd-tooltip>

  <button is="rd-event" id="set-crotchets-event" popovertarget="set-crotchets-event-tooltip" style="--event-x: 9; --event-y: 1; --y: 1">
  </button>
  <rd-tooltip id="set-crotchets-event-tooltip" popover anchor="set-crotchets-event" style='
    display: grid;
    grid-template:
      ". a a a a a b b b ." 1fr
      ". c c c c c d d d ." 1fr / 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    align-items: center;
    gap: 4px;
  '>
    <span class="rd-text-stroke" style="grid-area: a">四分音符数</span>
    <input class="align-center" value="4" disabled style="grid-area: b">
    <span class="rd-text-stroke" style="grid-area: c">节拍视效倍率</span>
    <input class="align-center" value="1" disabled style="grid-area: d">
  </rd-tooltip>

  <button is="rd-event" style="--event-x: 8; --event-y: 2; --x: 5">
  </button>

  <button is="rd-event" style="--event-x: 9; --event-y: 2; --x: 6">
  </button>

  <button is="rd-event" style="--event-x: 10; --event-y: 2; --x: 7">
  </button>

  <button is="rd-event" style="--event-x: 11; --event-y: 2; --x: 8">
  </button>

  <button is="rd-event" style="--event-x: 12; --event-y: 2; --x: 9">
  </button>

  <button is="rd-beat" style="--x: 8; --y: 1; --width: 6">
    <rd-pulse></rd-pulse>
    <rd-pulse style="--x: 1"></rd-pulse>
    <rd-pulse style="--x: 2"></rd-pulse>
    <rd-pulse style="--x: 3"></rd-pulse>
    <rd-pulse style="--x: 4"></rd-pulse>
    <rd-pulse style="--x: 5"></rd-pulse>
    <rd-pulse type="hit" style="--x: 6"></rd-pulse>
  </button>

  <button is="rd-beat" style="--x: 15.5; --y: 1; --width: 3">
    <rd-effect type="hold" style="--x: 3; --width: 0.5"></rd-effect>
    <rd-pulse></rd-pulse>
    <rd-pulse style="--x: 0.5"></rd-pulse>
    <rd-pulse style="--x: 1.0"></rd-pulse>
    <rd-pulse style="--x: 1.5"></rd-pulse>
    <rd-pulse style="--x: 2.0"></rd-pulse>
    <rd-pulse style="--x: 2.5"></rd-pulse>
    <rd-pulse type="hit" style="--x: 3"></rd-pulse>
  </button>

  <button is="rd-beat" style="--x: 9; --y: 2; --width: 3">
    <rd-pulse></rd-pulse>
    <rd-pulse style="--x: 2"></rd-pulse>
    <rd-pulse type="hit" style="--x: 1"></rd-pulse>
    <rd-pulse type="hit" style="--x: 3"></rd-pulse>
  </button>

  <button is="rd-beat" style="--x: 13; --y: 2; --width: 1.5">
    <rd-pulse></rd-pulse>
    <rd-pulse type="freeze" style="--x: 1"></rd-pulse>
    <rd-pulse type="hit" style="--x: 1.5"></rd-pulse>
    <rd-pulse type="cue" style="--x: -1"></rd-pulse>
    <rd-pulse type="cue" style="--x: -0.5"></rd-pulse>
  </button>

  <button is="rd-beat" style="--x: 15; --y: 2">
    <rd-pulse></rd-pulse>
    <rd-pulse type="hit" style="--x: 1"></rd-pulse>
  </button>

  <button is="rd-beat" style="--x: 17; --y: 2; --width: 0.5">
    <rd-pulse></rd-pulse>
    <rd-pulse type="burn" style="--x: 0.5"></rd-pulse>
    <rd-pulse type="hit" style="--x: 0.5"></rd-pulse>
    <rd-pulse type="cue" style="--x: -1"></rd-pulse>
    <rd-pulse type="cue" style="--x: -0.5"></rd-pulse>
  </button>

  <button is="rd-beat" style="--x: 20; --y: 2; --width: 0">
    <rd-pulse></rd-pulse>
    <rd-pulse type="hit"></rd-pulse>
  </button>

  <button is="rd-beat" style="--x: 21; --y: 2">
    <rd-effect type="subdiv" style="--x: 1; --width: 0.667"></rd-effect>
    <rd-effect type="skip" style="--x: 1.667; --width: 1.333"></rd-effect>
    <rd-pulse></rd-pulse>
    <rd-pulse type="subpulse" style="--x: 0.333"></rd-pulse>
    <rd-pulse type="subpulse" style="--x: 0.667"></rd-pulse>
    <rd-pulse type="subhit" style="--x: 1.333"></rd-pulse>
    <rd-pulse type="subhit" style="--x: 1.667"></rd-pulse>
    <rd-pulse type="hit" style="--x: 1"></rd-pulse>
    <rd-pulse type="skip" style="--x: 3"></rd-pulse>
  </button>

  <button is="rd-event" style="--event-x: 17; --x: 40; --y: 1">
    <rd-indicator type="conditional-mixed"></rd-indicator>
    <rd-indicator type="tagged"></rd-indicator>
  </button>
</rd-timeline>