Styling Text

スタイル設定は、色、強調、その他の視覚的補助を追加することで、ユーザーエクスペリエンスを向上させます。ratatui では、このための主なツールは ratatui::style::Style 構造体です。

ratatui::style::Style は、テキストにスタイリング属性を適用するための一連のメソッドを提供します。これらのスタイルは、 Text、 Span、 Line (および他の非テキスト構造) などのさまざまなテキスト構造に適用できます。

一般的なスタイリング属性は次のとおりです。

前景色と背景色 (fg と bg)
修飾子 (bold、italic、underline など)

基本的なカラースタイリング

前景 (テキストの色) と背景の設定:

   let styled_text = Span::styled(
       "Hello, Ratatui!",
       Style::default().fg(Color::Red).bg(Color::Yellow)
   );

Modifiers を使用する

テキストを大胆または斜体にする:

   let bold_text = Span::styled(
       "This is bold",
       Style::default().add_modifier(Modifier::BOLD)
   );

   let italic_text = Span::styled(
       "This is italic",
       Style::default().add_modifier(Modifier::ITALIC)
   );

複数の修飾子を組み合わせることもできます。

   let bold_italic_text = Span::styled(
       "This is bold and italic",
       Style::default().add_modifier(Modifier::BOLD | Modifier::ITALIC)
   );

ライン内のスタイリング

単一の行でさまざまなスタイルのスパンを混ぜて一致させることができます。

   let mixed_line = Line::from(vec![
       Span::styled("This is mixed", Style::default().fg(Color::Green)),
       Span::styled("styling", Style::default().fg(Color::Red).add_modifier(Modifier::BOLD)),
       Span::from("!"),
   ]);

これは、各行のさまざまなスタイルで Paragraph をレンダリングした場合のものです。

fn ui(_: &App, f: &mut Frame) {
  let styled_text = Span::styled("Hello, Ratatui!", Style::default().fg(Color::Red).bg(Color::Yellow));
  let bold_text = Span::styled("This is bold", Style::default().add_modifier(Modifier::BOLD));
  let italic_text = Span::styled("This is italic", Style::default().add_modifier(Modifier::ITALIC));
  let bold_italic_text =
    Span::styled("This is bold and italic", Style::default().add_modifier(Modifier::BOLD | Modifier::ITALIC));
  let mixed_line = vec![
    Span::styled("This is mixed", Style::default().fg(Color::Green)),
    Span::styled("styling", Style::default().fg(Color::Red).add_modifier(Modifier::BOLD)),
    Span::from("!"),
  ];
  let text: Vec<Line<'_>> =
    vec![styled_text.into(), bold_text.into(), italic_text.into(), bold_italic_text.into(), mixed_line.into()];
  f.render_widget(Paragraph::new(text).block(Block::default().borders(Borders::ALL)), f.size());
}

上記のスタイリングのHTML表現は次のとおりです。

Hello, Ratatui!

This is bold

This is italic

This is bold and italic

This is mixed styling !

文字列から Color のインスタンスを作成することもできます。

use std::str::FromStr;

let color: Color = Color::from_str("blue").unwrap();
assert_eq!(color, Color::Blue);

let color: Color = Color::from_str("#FF0000").unwrap();
assert_eq!(color, Color::Rgb(255, 0, 0));

let color: Color = Color::from_str("10").unwrap();
assert_eq!(color, Color::Indexed(10));

Color 列挙型と Modifier の詳細については、オンラインのリファレンスドキュメントをご覧ください。