FujjimaBlog

こんにちは。fujjimaです。 今回はSemantic UIについて、タイトル通りの備忘録です。 細かい部分については、以下の記事を参照してみてください。 ↓　Semantic UIは何者か？ <iframe class="embed-card embed-webcard" style="display: block; width: 100%; height: 155px; max-width: 500px; margin: 10px 0px;" title="まるごとSemantic UIでWebサービスを作った話 - Qiita" src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Fqiita.com%2FYuta_Fujiwara%2Fitems%2F8abeda1b92dcaf505149" frameborder="0" scrolling="no"></iframe><cite class="hatena-citation"><a href="https://qiita.com/Yuta_Fujiwara/items/8abeda1b92dcaf505149"> </a></cite> Semantic UIの中に、ドロップダウンを簡単に作るための「Dropdown」<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B3%A5%F3%A5%DD%A1%BC%A5%CD%A5%F3%A5%C8">コンポーネント</a>があります。 Dropdown<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B3%A5%F3%A5%DD%A1%BC%A5%CD%A5%F3%A5%C8">コンポーネント</a>には、入力に関するヒントを表示するための「placeholder」オプションが用意されていますが、こいつがどのタイミングで表示されるかがよく分からなかったため、調べました。 結論からいうと、placeholderが表示されるタイミングは下記の通りです。 <ul> <li>「<a class="keyword" href="http://d.hatena.ne.jp/keyword/value">value</a>」属性の値がnull or undifinedの時。</li> </ul> というわけで下記サイトで検証します。 <iframe class="embed-card embed-webcard" style="display: block; width: 100%; height: 155px; max-width: 500px; margin: 10px 0px;" title="Dropdown - Semantic UI React" src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Freact.semantic-ui.com%2Fmodules%2Fdropdown%2F%23types-selection" frameborder="0" scrolling="no"></iframe><cite class="hatena-citation"><a href="https://react.semantic-ui.com/modules/dropdown/#types-selection">react.semantic-ui.com</a></cite> 1. 下図のプルダウン中に「Select Friend」と表示されているが、コード内の「placeholder」で指定されていることが分かる。 <img class="hatena-fotolife" title="f:id:fujjima:20190714174556p:plain" src="https://cdn-ak.f.st-hatena.com/images/fotolife/f/fujjima/20190714/20190714174556.png" alt="f:id:fujjima:20190714174556p:plain" /> <pre class="code lang-javascript" style="font-family: Monaco, Consolas, 'Courier New', Courier, monospace, sans-serif; font-size: 14px; white-space: pre; overflow-wrap: break-word; overflow: auto hidden; border: 1px solid #dde5e8; margin: 0px 0px 1em; padding: 20px; color: #000000; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;" data-lang="javascript" data-unlink="data-unlink">const DropdownExampleSelection = () => ( <Dropdown placeholder='Select Friend' fluid selection options={friendOptions} /> )</pre> 2. options（プルダウンをクリックした際に表示されるの選択肢を指定できる属性）に設定されたオブジェクトの中で一つ、「<a class="keyword" href="http://d.hatena.ne.jp/keyword/value">value</a>」をnullにしておく。 ↓　ここでは、2個目のオブジェクトの<a class="keyword" href="http://d.hatena.ne.jp/keyword/value">value</a>をnullにしてみました。 <pre class="code lang-javascript" style="font-family: Monaco, Consolas, 'Courier New', Courier, monospace, sans-serif; font-size: 14px; white-space: pre; overflow-wrap: break-word; overflow: auto hidden; border: 1px solid #dde5e8; margin: 0px 0px 1em; padding: 20px; color: #000000; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;" data-lang="javascript" data-unlink="data-unlink">const friendOptions = [ { key: 'Matt', text: 'Matt', value: 'Matt', image: { avatar: true, src: '/images/avatar/small/matt.jpg' }, }, { key: 'Justen Kitsune', text: 'Justen Kitsune', value: null, image: { avatar: true, src: '/images/avatar/small/justen.jpg' }, }, ]</pre> 選択肢が2つになっていることが分かる。 <img class="hatena-fotolife" title="f:id:fujjima:20190714182431p:plain" src="https://cdn-ak.f.st-hatena.com/images/fotolife/f/fujjima/20190714/20190714182431.png" alt="f:id:fujjima:20190714182431p:plain" /> 3. <a class="keyword" href="http://d.hatena.ne.jp/keyword/value">value</a>をnullに設定した「Justen Kitsune」を選択してみると、 placeholderで設定した「Select Friend」が表示されていることが分かる。（ここめんどうなので画像略） 使い道としては、以下のようなものが考えられるかなと思います。 選択肢の中に{ <a class="keyword" href="http://d.hatena.ne.jp/keyword/value">value</a>: null, text: "xxxx" }の組み合わせを仕込んでおいて、<a class="keyword" href="http://d.hatena.ne.jp/keyword/value">value</a>がnullの場合に表示させたい文字列やらがある時に、placeholderにも同じように「"xxxx"」を指定しておけば、それを初期表示できる感じですかね。 すごいマニアックな内容ですが、地味に詰まったため備忘録として残しました。