forked from RDCNWebs/rd.rdlevel.cn
126 lines
4.8 KiB
Markdown
126 lines
4.8 KiB
Markdown
---
|
|
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>
|