質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.49%

  • JavaScript

    20855questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • Riot.js

    57questions

    Riot.jsは、React.jsに似たコンポーネント指向なJSフレームワークです。非常に軽量であり、コンポーネントで設計しやすいといったメリットがあります。また、MVCのように分割できることも特徴です。

Riot.jsのタブの中でアイコンを使用する方法を教えてください。

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 698

Hiroooo

score 48

<ul>
    <li each={ tab, i in tabs } class="tabItem { is-active: parent.isActiveTab(tab.ref) }" onclick={ parent.toggleTab }>{tab.title}</li>
</ul>
<div class="tabContent">
    <div each={ tab, i in tabs } class="tabContent__item { is-active: parent.isActiveTab(tab.ref) }">{tab.content}</div>
</div>
this.tabs = [
    { title: <i class='fa fa-picture-o' aria-hidden='true'></i>, ref: 'tab1', content: "aaa" },
    { title: 'Tab 2', ref: 'tab2', content: "bbb" },
    { title: 'Tab 3', ref: 'tab3', content: "ccc" }
]

this.activeTab = 'tab1'
isActiveTab(tab) {
    return this.activeTab === tab
}

toggleTab(e) {
    this.activeTab = e.item.tab.ref
    return true
}

HTML側に記述

上記のようなコードだと、JacaScript側の2行目にあるようにHTML表記のものを入れてしまうと、rollupでのコンパイル時にエラーが表示されてしまったため、下記のようにHTML側に記述する方法をいろいろ試してみたのですが、タブのコンテンツ側をうまく表示させることができなくて困っています。
現状、ロードした時点で、tab1のコンテンツも表示されない状況です。

また、toggleTab関数の方ではtab.refという変数がなくなってしまったために、どうやってタブを切り替えるのかもわからなくなってしまいました。。
どのようにすれば良いかわかる方、教えていただければと思います。

<ul>
    <li class="tabItem {is-active: parent.isActiveTab(tab1) }" onclick={ parent.toggleTab }> <span class='fa fa-picture-o' aria-hidden='true'></span> </li>
    <li class="tabItem {is-active: parent.isActiveTab(tab2) }" onclick={ parent.toggleTab }>Tab 2</li>
    <li class="tabItem {is-active: parent.isActiveTab(tab3) }" onclick={ parent.toggleTab }>Tab 3</li>
</ul>
<div class="tabContent">
    <div class="tabContent__item { is-active: parent.isActiveTab(tab1) }">(1) Lorem ispum dolor...</div>
    <div class="tabContent__item { is-active: parent.isActiveTab(tab2) }">(2) Lorem ispum dolor...</div>
    <div class="tabContent__item { is-active: parent.isActiveTab(tab3) }">(3) Lorem ispum dolor...</div>
</div>
this.activeTab = 'tab1'
isActiveTab(tab) {
    return this.activeTab === tab
}

toggleTab(e) {
    this.activeTab = e.item.tab.ref
    return true
}

2つの組み合わせ

<ul>
    <li each={ tab, i in tabs } class="tabItem { is-active: parent.isActiveTab(tab.ref) }" onclick={ parent.toggleTab }><i class="fa { tab.title }" aria-hidden="true"></i></li>
</ul>
<div class="tabContent">
    <div class="tabContent__item { is-active: parent.isActiveTab(tab1) }">(1) Lorem ispum dolor...</div>
    <div class="tabContent__item { is-active: parent.isActiveTab(tab2) }">(2) Lorem ispum dolor...</div>
    <div class="tabContent__item { is-active: parent.isActiveTab(tab3) }">(3) Lorem ispum dolor...</div>
</div>
this.tabs = [
    { title: 'fa-picture-o', ref: 'tab1' },
    { title: 'fa-picture-o', ref: 'tab2' },
    { title: 'fa-picture-o', ref: 'tab3' }
]

this.activeTab = 'tab1'
isActiveTab(tab) {
    return this.activeTab === tab
}

toggleTab(e) {
    this.activeTab = e.item.tab.ref
    return true
}
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+1

これか
title: '<i class="fa fa-picture-o" aria-hidden="true"></i>',
これ
title: '<i class=&quot;fa fa-picture-o&quot; aria-hidden=&quot;true&quot;></i>',
ではいかがでしょうか?

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/09/18 23:48

    またまたご回答ありがとうございます。

    そちらも試してみたのですが、そもそも''で囲ってあると、文字列認識されてしまい、文字列をしてそのまま表示されてしまいます。
    そして上下両方とも''を外すとコンパイル時にエラーが出てしまうという状況です。

    キャンセル

  • 2016/09/18 23:56

    ああ、なるほどタグがそのまま表示されてしまうということですね。
    エスケープを使ってみるのはどうでしょう?

    title: '<i class=\"fa fa-picture-o\" aria-hidden=\"true\"><\/i>',

    キャンセル

  • 2016/09/19 00:03

    そのまま
    <i class="fa fa-picture-o" aria-hidden="true"></i>
    と表示されてしまいました。。

    本当にいろいろと申し訳ありません。

    キャンセル

  • 2016/09/19 00:30

    こちらこそ大した知識なく思いつきで実験をさせてしまってすみません。
    いろいろ思いつくので環境があれば自分で試してみるのですが…
    「<」「>」もエスケープしてみたです…

    title: '\x3ci class=\"fa fa-picture-o\" aria-hidden=\"true\"\x3e\x3c\/i\x3e',

    これがダメなら共通部分はhtml側に書いて変数的な部分だけを文字列で扱って挿入するくらいですね…

    キャンセル

  • 2016/09/19 01:18

    エスケープしても結果は変わりませんでした。。
    HTML側に書くことにします。

    本当にいろいろとありがとうございました。

    キャンセル

  • 2016/09/20 00:08

    昨日もたくさんご質問させていただいて、時間が経ってしまってしまってからまたご質問させていただく形で申し訳ございません。

    HTML側に記述する方法で今晩いろいろ試してみたのですが、タブのコンテンツ側をうまく表示させることができなくて困っています。
    上記質問の「HTML側に記述」以下に自分のコードを貼り付けているのですが、何がいけないかわかりますでしょうか?
    現状、ロードした時点で、tab1のコンテンツも表示されない状況です。

    また、toggleTab関数の方ではtab.refという変数がなくなってしまったために、どうやってタブを切り替えるのかもわからなくなってしまいました。。
    もしわかることがありましたら、教えていただければと思います。

    キャンセル

  • 2016/09/20 00:31

    昨日と結構形変わってますね?
    昨日のではダメだったんですか?
    <ul>
    <li each={ tab, i in tabs } class="tabItem { is-active: parent.isActiveTab(tab.ref) }" onclick={ parent.toggleTab }><span class="fa fa-picture-o" aria-hidden="true"></span>{tab.title}</li>
    </ul>

    キャンセル

  • 2016/09/20 00:39

    はい。。
    そのようにしてしまうと、タブのコンテンツに「テキスト入力エリア」や「画像アップロードボタン」など、タブのタイトルによって表示を切り替えることができなくなってしまうためです。

    タブのタイトル毎にアイコンを変更するだけなら「fa-picture-o」の部分のために、tabsの中にclassプロパティを作ればいいと思ったのですが。

    キャンセル

  • 2016/09/20 00:51 編集

    そこまでコンテンツの中身がガッツリあるようであればコンテンツの中身は普通にHTMLで記述し、切り替えのみをJSで行えばいい気がします。
    2つの組み合わせですね。

    <ul>
    <li each={ tab, i in tabs } class="tabItem { is-active: parent.isActiveTab(tab.ref) }" onclick={ parent.toggleTab }><span class="fa fa-picture-o" aria-hidden="true"></span>{tab.title}</li>
    </ul>
    <div class="tabContent">
    <div class="tabContent__item { is-active: parent.isActiveTab(tab1) }">(1) Lorem ispum dolor...</div>
    <div class="tabContent__item { is-active: parent.isActiveTab(tab2) }">(2) Lorem ispum dolor...</div>
    <div class="tabContent__item { is-active: parent.isActiveTab(tab3) }">(3) Lorem ispum dolor...</div>
    </div>

    キャンセル

  • 2016/09/20 01:04

    二つを組み合わせると質問内容に追加した「2つの組み合わせ」のようになると思うのですが、これではタブの中のコンテンツが表示されなくて困っています。。
    どこか間違っていますでしょうか?

    キャンセル

  • 2016/09/20 01:22 編集

    コンテンツの方に「is-active」が付かなくて表示されないということですね。
    たしかに。
    アクティブになったタブの位置を取得して同じ位置のコンテンツに「is-active」を付与するって形でしょうね。
    RiotJSの書き方がちょっと分からないので、別立てで分かる方に聞いた方がいいかも知れないです…

    キャンセル

  • 2016/09/20 01:26

    そうですよね。
    わかりました。本当にいろいろとありがとうございました。

    キャンセル

  • 2016/09/20 01:39

    parent.isActiveTab(tab1)の部分をisActiveTab('tab1')に変更したら無事にできました。
    eachを回さないためparentでアクセスしなくていいことと、tab.refが変数だったのに対してtab1は文字列なので表記を変更することが必要でした。
    いろいろな組み合わせを試していたのですが、この組み合わせが漏れてしまっていたようです。。

    本当にいろいろとありがとうございました。

    キャンセル

  • 2016/09/20 01:40

    おー。よかったです。
    形が全然違いますが参考にと思って拾って来たものとりあえず貼り付けておきます。
    http://www.cyokodog.net/blog/riot/

    キャンセル

  • 2016/09/20 01:44

    こちらも参考にさせていただきます。
    最後までありがとうございました!

    キャンセル

同じタグがついた質問を見る

  • JavaScript

    20855questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • Riot.js

    57questions

    Riot.jsは、React.jsに似たコンポーネント指向なJSフレームワークです。非常に軽量であり、コンポーネントで設計しやすいといったメリットがあります。また、MVCのように分割できることも特徴です。