質問編集履歴

3 質問の追加

Hiroooo

Hiroooo score 56

2016/09/20 01:03  投稿

Riot.jsのタブの中でアイコンを使用する方法を教えてください。
```HTML
<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>
```
```Javascript
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という変数がなくなってしまったために、どうやってタブを切り替えるのかもわからなくなってしまいました。。
どのようにすれば良いかわかる方、教えていただければと思います。
```HTML
<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>
```
```Javascript
this.activeTab = 'tab1'
isActiveTab(tab) {
   return this.activeTab === tab
}
toggleTab(e) {
   this.activeTab = e.item.tab.ref
   return true
}
```
```
**2つの組み合わせ**
```HTML
<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>
```
```Javascript
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
}
```
  • JavaScript

    38574 questions

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

  • Riot.js

    62 questions

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

2 質問内容の変更

Hiroooo

Hiroooo score 56

2016/09/20 00:13  投稿

Riot.jsのタブの中でアイコンを使用する方法を教えてください。
次のようなコードでタブを作成しているのですが、タブの中でfont awesomeのアイコンを使いたく、JacaScript2行目のようにHTML表記のものを入れてしまうと、rollupでのコンパイル時にエラーが表示されてしまいます。  
 
解決しようといろいろ探しているのですが、探し方も難しく方法を見つけることができていません。  
どなたかわかる方がいましたら教えてください。  
よろしくお願いします。  
 
```HTML
<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>
```
```Javascript
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という変数がなくなってしまったために、どうやってタブを切り替えるのかもわからなくなってしまいました。。  
どのようにすれば良いかわかる方、教えていただければと思います。  
 
```HTML
<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>
```
```Javascript
this.activeTab = 'tab1'
isActiveTab(tab) {
   return this.activeTab === tab
}
toggleTab(e) {
   this.activeTab = e.item.tab.ref
   return true
}
```
  • JavaScript

    38574 questions

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

  • Riot.js

    62 questions

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

1 質問追加

Hiroooo

Hiroooo score 56

2016/09/20 00:03  投稿

Riot.jsのタブの中でアイコンを使用する方法を教えてください。
次のようなコードでタブを作成しているのですが、タブの中でfont awesomeのアイコンを使いたく、JacaScript2行目のようにHTML表記のものを入れてしまうと、rollupでのコンパイル時にエラーが表示されてしまいます。
解決しようといろいろ探しているのですが、探し方も難しく方法を見つけることができていません。
どなたかわかる方がいましたら教えてください。
よろしくお願いします。
```HTML
<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>
```
```Javascript
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側に記述**  
 
```HTML  
<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>  
```  
 
```Javascript  
this.activeTab = 'tab1'  
isActiveTab(tab) {  
   return this.activeTab === tab  
}  
 
toggleTab(e) {  
   this.activeTab = e.item.tab.ref  
   return true  
}  
```
  • JavaScript

    38574 questions

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

  • Riot.js

    62 questions

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

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る