テキスト

テキストウィジェット カテゴリーは、以下のウィジェットで構成されています：

• Card
• Clickable
• HTML
• Image
• Link
• List
• Text

---

イメージウィジェット

Image ウィジェットは、テキストウィジェットのシンプルな拡張です。このウィジェットは、HTMLのイメージタグを使用してイメージを作成します。イメージはまず Foundry にアップロードするか、Slate からアクセス可能な他の場所にホストする必要があります。その後、イメージタグの src プロパティをイメージのURLに設定します。Foundry でホストされているイメージの場合、イメージのURLは https://<FOUNDRY_URL>/blobster/api/salt/<RID> です。このURLには、Foundry でイメージを開き、イメージを右クリックしてから、イメージのアドレスをコピーすることでアクセスできます。イメージウィジェットの設定には、以下の例を参考にしてください：

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

Cardウィジェット

Card ウィジェットは、テキストウィジェットの拡張です。このウィジェットは、HTMLのdivを使用してカードを作成し、each ステートメントを使用してそれらを埋めます。Cardウィジェットをユーザーのアプリケーションに追加すると、カードをカスタマイズするために置き換えることができるスケルトンコードが事前に入力されています。

• #each : コレクションは、カードの数を作成するために反復処理するオブジェクトのリストです。また、テキストの最後にある /each のコメントを外す必要もあります。
• item key: ダブルカーリーブラケット内に this を設定することで、カードが選択されるようにします。
• Header: これは、各カードのヘッダーとして表示されるテキストです。クエリからアイテムを選択するには、ハンドルバー内で lookup クエリ.value @index の構文を使用できます。
• Content: これは、各カードのヘッダーに続くテキストです。ヘッダーと同様に、クエリから引き出すことができます。

完成したCardウィジェットは、次のようになるかもしれません：

共通CSS

以下は、Cardウィジェットに適用できる共通のCSSオーバーライドです。

カードの色：

Copied!
1
sl-text .cards .card {background: #f5f9fa;} /* sl-textクラス、cardsクラス、cardクラスを持つ要素の背景色を#f5f9faに設定します。 */

選択色：

Copied!
1
2
/* sl-textクラス、cardsクラス、selectedクラスが適用されたcardクラスの背景色を白に設定します。 */
sl-text .cards .card.selected {background: #fff;}

ホバーカラー:

Copied!
1
2
3
4
5
6
7
8
9
// sl-text クラス内の .cards クラス内の .card クラスがホバーされた場合のスタイルを定義します。
sl-text .cards .card:hover {
   background: #fff; // 背景色を白に設定します。
}

// sl-text クラス内の .cards クラス内の .card クラスが選択され、かつホバーされた場合のスタイルを定義します。
sl-text .cards .card.selected:hover {
   background: #f5f9fa; // 背景色を薄い青色に設定します。
}

リストウィジェット

リスト ウィジェットは、Cardと非常に似ていますが、div class=cards の代わりに divmclass=lists を使用します。 以下の例では、Selection を Multiple に設定すると、リスト内の複数のアイテムを一度に選択できることに注意してください。

共通 CSS

以下に、リストウィジェットに適用できる共通のCSSオーバーライドを示します。

リストの色：

Copied!
1
sl-text .lists .lists {background: #f5f9fa;} /* sl-textクラスとlistsクラスが両方適用された要素の背景色を#f5f9fa（薄い青色）に設定します。 */

選択色：

Copied!
1
2
/* sl-text内のlistsクラスとlistsクラス内の選択された要素の背景色を白に設定 */
sl-text .lists .lists.selected {background: #fff;}

ホバーカラー：

Copied!
1
2
3
4
5
6
7
8
9
/* sl-textのクラス内のlistsクラスと、listsクラスがマウスオーバー時のスタイル設定 */
sl-text .lists .lists:hover {
   background: #fff; /* 背景色を白に設定 */
}

/* sl-textのクラス内のlistsクラスで、selectedクラスが適用されている要素がマウスオーバー時のスタイル設定 */
sl-text .lists .lists.selected:hover {
   background: #f5f9fa; /* 背景色を薄い青に設定 */
}

テキストウィジェット

テキストウィジェットは、最も多機能なSlateウィジェットの一つです。また、HTML、イメージ、カード、リストなど、他の多くのウィジェットの基盤でもあります。これらのウィジェットは、正しいオプションを提供するためのデフォルトコードで始まるテキストウィジェットに過ぎません。

テキストウィジェットには二つのモードがあります： Markdownモード と HTMLモード です。Markdownは、HTMLにレンダリングする軽量マークアップ言語なので、HTMLモードでできることは何でもMarkdownモードで行うことができます。Markdownモードを使用すると、シンプルで非常に読みやすいMarkdown構文を活用できます。例えば、テキストを見出し(H1)に設定するには、その前に # 記号を追加するだけです：

他のMarkdown構文については、Markdown documentation を参照してください。

例

テキストウィジェット内のハンドルバー

テキストウィジェット内でハンドルバーを使用して、動的テキスト（例えば、他のウィジェットやクエリで選択した何か）を表示できます。

ツールチップ

テキストウィジェットは、ユーザー定義のツールチップをサポートしています。ユーザーがウィジェットのコンテンツ内のsl-tooltip HTMLエレメントにホバーすると、ツールチップが表示されます。

• 静的なツールチップ：

• sl-tooltipエレメントの内部テキストコンテンツを使用したツールチップ：

• カスタム値を持つ複数のツールチップ：

プロパティ

ITextHover