テキスト

テキストウィジェットのカテゴリーには、次のウィジェットがあります。

• カード
• クリック可能
• HTML
• 画像
• リンク
• リスト
• テキスト

---

画像ウィジェット

画像ウィジェットは、テキストウィジェットを単純に拡張したものです。このウィジェットは HTML の画像タグを使用して画像を作成します。まず画像を Foundry にアップロードするか、Slate からアクセスできるほかの場所でホストしてから、画像タグの src プロパティを画像の URL に設定する必要があります。Foundry でホストされている画像の場合、画像の URL は https://<FOUNDRY_URL>/blobster/api/salt/<RID> です。Foundry で画像を開き、画像を右クリックして画像のアドレスをコピーすると、この URL を取得できます。画像ウィジェットの設定では、次の例に従ってください。

<img src="https://<FOUNDRY_URL>/blobster/api/salt/<RID>">

カードウィジェット

カードウィジェットは、テキストウィジェットを拡張したものです。このウィジェットは HTML の div を使用してカードを作成し、each 文を使用して内容を設定します。アプリケーションにカードウィジェットを追加すると、ひな形のコードがあらかじめ入力されており、このコードを置き換えてカードをカスタマイズできます。

• #each : ここで指定するのは、カードを作成するために反復処理するオブジェクトのリストです。また、テキストの末尾にある /each のコメントを解除する必要があります。
• 項目キー： カードを選択できるように、二重の波括弧内に this を設定します。
• ヘッダー： 各カードのヘッダーとして表示されるテキストです。クエリから項目を選択するには、Handlebars 内で lookup query.value @index という構文を使用できます。
• コンテンツ： 各カードのヘッダーに続くテキストです。ヘッダーと同様に、クエリから取得できます。

完成したカードウィジェットは、次のようになります。

よく使う CSS

カードウィジェットに適用できる、よく使う CSS の上書きを次に示します。

カードの色：

Copied!
1
sl-text .cards .card {background: #f5f9fa;}

選択時の色：

Copied!
1
sl-text .cards .card.selected {background: #fff;}

ホバー時の色：

Copied!
1
2
3
4
5
6
7
sl-text .cards .card:hover {
   background: #fff;
}

sl-text .cards .card.selected:hover {
   background: #f5f9fa;
}

リストウィジェット

リストウィジェットはカードとよく似ていますが、div class=cards の代わりに divmclass=lists を使用します。 次の例では、選択が複数に設定されているため、リスト内の複数の項目を同時に選択できます。

よく使う CSS

リストウィジェットに適用できる、よく使う CSS の上書きを次に示します。

リストの色：

Copied!
1
sl-text .lists .lists {background: #f5f9fa;}

選択時の色：

Copied!
1
sl-text .lists .lists.selected {background: #fff;}

ホバー時の色：

Copied!
1
2
3
4
5
6
7
sl-text .lists .lists:hover {
   background: #fff;
}

sl-text .lists .lists.selected:hover {
   background: #f5f9fa;
}

テキストウィジェット

テキストウィジェットは、Slate ウィジェットの中でも特に汎用性の高いウィジェットです。また、HTML、画像、カード、リストなど、ほかの多くのウィジェットの基盤にもなっています。これらのウィジェットは、適切なオプションを利用できるように、デフォルトのコードがあらかじめ設定されたテキストウィジェットにすぎません。

テキストウィジェットには、Markdown モードと HTML モードの2つのモードがあります。Markdown は HTML として表示される軽量マークアップ言語であるため、HTML モードでできることはすべて Markdown モードでもできます。Markdown モードでは、よりシンプルで読みやすい Markdown 構文を活用できます。たとえば、テキストを見出し (H1) に設定するには、その前に # 記号を追加するだけです。

ほかの Markdown 構文については、Markdown のドキュメント ↗を参照してください。

例

テキストウィジェット内の Handlebars

テキストウィジェット内で Handlebars を使用すると、動的なテキスト（たとえば、別のウィジェットやクエリで選択された内容）を表示できます。

ツールチップ

テキストウィジェットは、ユーザー定義のツールチップをサポートしています。ウィジェットのコンテンツ内にある sl-tooltip HTML 要素にユーザーがカーソルを合わせると、ツールチップが表示されます。

• 固定のツールチップ：

• sl-tooltip 要素内のテキスト内容を使用するツールチップ：

• カスタム値を使用する複数のツールチップ：

プロパティ

ITextHover