How to create dropdown?

#1

Like React Menu component - Material UI

I want to open a dropdown menu when click on … icon

图片

Does tw core provide a tool for this?

#2

Dropdown in tiddlywiki are handled by the reveal widget with the type set to popup: https://tiddlywiki.com/#RevealWidget

The source for the reveal widget is located here: https://tiddlywiki.com/#%24%3A%2Fcore%2Fmodules%2Fwidgets%2Freveal.js

Hope this help

#3

Thanks, I will have a try. I’m currently using a css hack, which is not ideal.

I use select widget for dropdown, and set select element opacity to 0,and let it position absolute.

\procedure lingo-base() $:/plugins/linonetwo/ego-store-lite/language/
\procedure drop-down-menu-select-state() $:/state/ego-store-lite/actions-list/menu-selected
\procedure on-drop-down-menu-select()
<% if [<drop-down-menu-select-state>get[text]match[edit]] %>
  <$action-createtiddler
    $basetitle="$:/state/ego-store-lite/editAction"
    $overwrite="yes"
    $template=<<currentTiddler>>
    draft.title={{!!title}}
    draft.of=""
  >
    <$action-sendmessage
      $message="tm-modal"
      $param="$:/plugins/linonetwo/ego-store-lite/tiddlywiki-ui/create/modal/edit-action/edit-action"
    />
  </$action-createtiddler>
<% elseif [<drop-down-menu-select-state>get[text]match[visual]] %>
  <$action-sendmessage
    $message="tm-modal"
    $param="$:/plugins/linonetwo/ego-store-lite/tiddlywiki-ui/visualization/modal/action"
    targetTiddler=<<currentTiddler>>
  />
<% elseif [<drop-down-menu-select-state>get[text]match[open]] %>
  <$action-createtiddler $basetitle="$:/layout" text="" $overwrite="yes">
    <$action-navigate $to=<<currentTiddler>> />
    <$action-sendmessage
      $message="tm-notify"
      $param="$:/plugins/linonetwo/tw-gamification/tiddlywiki-ui/notification/on-reality-action-event"
      message=<<currentTiddler>>
    />
  </$action-createtiddler>
<% endif %>
<$action-deletetiddler $tiddler=<<drop-down-menu-select-state>>/>
\end

      <div class="ego-store-lite-game-buttons-list-item-edit">
        <$select tiddler=<<drop-down-menu-select-state>> actions=<<on-drop-down-menu-select>>>
          <option value="edit"><<lingo EditAction/Caption>></option>
          <option value="visual"><<lingo VisualizeAction/Caption>></option>
        </$select>
        …
      </div>

.ego-store-lite-game-buttons-list-item-edit {
  font-size: 2em;
  border-radius: 2em;
  opacity: 0.3;
  aspect-ratio: 1;
  width: 1em;
  position: absolute;
  top: 0.5em;
  right: 0.5em;
  overflow: hidden;
}
.ego-store-lite-game-buttons-list-item-edit:hover {
  opacity: 1;
}
.ego-store-lite-game-buttons-list-item-edit:active {
  opacity: 0.7;
}
.ego-store-lite-game-buttons-list-item-edit select {
  width: 300px;
  position: absolute;
  opacity: 0;
}

To my surprise, it even avoid conor of window, which reveal widget does not.

图片
图片585×563 33.4 KB

#4

Remember find a feature in tiddlwiki, perhaps on tiddlywiki.com and research it, you often find an example that helps.

For example;

  • View toolbar more
  • Editor toolbar link (ctrl-L) or stamp

These contain within them the know how and tricks you can use and often works with a simple clone of the tiddlers involved, make a copy then start editing to test your idea.