Kagari
日本語English
キーワードを入力してドキュメントを検索します。

モジュール

std::ui::style

Markdown を表示ChatGPT で開くClaude で開くGrok で開くPerplexity で開く

安定性: 安定 — UI コントロールの見た目。

std::ui::style は背景とコントロールの見た目を記述します。Paint はボックスを塗り、Look は背景とテキストスタイルの組、ButtonStyle はボタン・トグル・セレクトのインタラクション状態ごとの見た目、SliderStyle はスライダーの塗りです。

スタイルは const fn で作る普通のデータです。スタジオはスタイルを const アイテムとして宣言し、コントロールフォームの style 属性や Element::background に渡します。

kis
use std::ui::style::{ButtonStyle, Look, Paint, SliderStyle, button_style};

概要

アイテム種別概要
Paint列挙型ボックスを埋めるもの
Look構造体背景とテキストスタイル
ButtonStyle構造体ボタン型コントロールのインタラクション状態ごとの見た目
button_style(idle)const fn通常時の見た目だけを持つスタイル
ButtonStyle のビルダーメソッドconst fn見た目、トゥイーン、サウンドを追加する
SliderStyle構造体スライダーの塗り

列挙型: Paint

kis
pub enum Paint {
    None,
    Color(Color),
    Image(ImageAsset),
    /// An image whose corners stay unscaled; `insets` are the corner sizes.
    NineSlice { image: ImageAsset, insets: Insets },
}
バリアント意味
None何もなし。ボックスは透明です
Color(c)単色。例: rgba(0, 0, 0, 200)
Image(i)ボックス全体に引き伸ばした画像
NineSlice { image, insets }9 スライス画像。insets で指定した大きさの四隅は拡大縮小されず、辺と中央が伸びます。サイズが変わるウィンドウ枠やボタンに使います

構造体: Look

kis
pub struct Look {
    pub background: Paint,
    pub text: TextStyle,
}

背景とテキストスタイルです。text のスタイルはコントロール内のラベルに適用されます（インタラクションの見た目 を参照）。

構造体: ButtonStyle

kis
pub struct ButtonStyle {
    pub idle: Look,
    pub hover: Option<Look>,
    pub focus: Option<Look>,
    pub pressed: Option<Look>,
    /// Replaces every other look while the control is disabled.
    pub disabled: Option<Look>,
    /// How look changes animate.
    pub change: Tween,
    pub hover_sound: Option<Sound>,
    pub click_sound: Option<Sound>,
}

ボタン型のコントロール（button!、toggle!、select!）の、インタラクション状態ごとの見た目、その間の変化のアニメーション、再生するサウンドです。UI のサウンドはサウンドバスで再生されます。

インタラクションの見た目

  • コントロールが無効な間は、disabled の見た目が他のすべての見た目を置き換えます。disabled の見た目がなければ、無効なコントロールは idle を半分の不透明度で表示します。
  • そうでなければ、pressed（コントロールの上でポインタを押している間）、focus（コントロールにフォーカスがあり、フォーカスが表示されている間）、hover のうち当てはまる最初の Some が使われ、idle が既定です。
  • 値が true のトグルが idle を表示するはずのときは、代わりに オンの見た目 を表示します。pressed の見た目があればそれ、なければ hover の見た目、それもなければ idle に、通常時のテキスト色で 2 px の枠線を付けたものです。
  • 見た目の変化は change でアニメーションします。
  • ボタンやトグルの中のラベルは、現在の見た目の text を使います。それ以外では、text! に style を指定しない限り、label と text! は System::text を使います。これ以外の継承はありません。

関数: button_style(idle)

kis
pub const fn button_style(idle: Look) -> ButtonStyle {
    ButtonStyle {
        idle,
        hover: None,
        focus: None,
        pressed: None,
        disabled: None,
        change: instant(),
        hover_sound: None,
        click_sound: None,
    }
}
  • idle Look — 通常時の見た目。
  • 戻り値: ButtonStyle — 通常時の見た目だけを持ち、変化は即時で、サウンドのないスタイル。
  • 種別: const fn · ビルトイン: いいえ

その他の部分は以下のビルダーメソッドで追加します。どれもスタイルを値で受け取り、変更して返すので、連鎖できます。

ButtonStyle::hover(look)

kis
pub const fn hover(mut self, look: Look) -> ButtonStyle
  • 戻り値: ホバー時の見た目を加えたこのスタイル。

ButtonStyle::focus(look)

kis
pub const fn focus(mut self, look: Look) -> ButtonStyle
  • 戻り値: フォーカス時の見た目を加えたこのスタイル。コントロールがキーボードやパッドのフォーカスを持つ間に表示されます。

ButtonStyle::pressed(look)

kis
pub const fn pressed(mut self, look: Look) -> ButtonStyle
  • 戻り値: 押下時の見た目を加えたこのスタイル。

ButtonStyle::disabled(look)

kis
pub const fn disabled(mut self, look: Look) -> ButtonStyle
  • 戻り値: 無効時の見た目を加えたこのスタイル。

ButtonStyle::change(tween)

kis
pub const fn change(mut self, tween: Tween) -> ButtonStyle
  • tween Tween — 見た目の変化の長さ、イージング、遅延（std::screen::anim を参照）。
  • 戻り値: 見た目の変化を tween でアニメーションするこのスタイル。

ButtonStyle::hover_sound(sound)

kis
pub const fn hover_sound(mut self, sound: Sound) -> ButtonStyle
  • sound Sound — ワンショットのサウンド（std::screen::audio を参照）。
  • 戻り値: ホバー時に sound を再生するこのスタイル。

ButtonStyle::click_sound(sound)

kis
pub const fn click_sound(mut self, sound: Sound) -> ButtonStyle
  • sound Sound — ワンショットのサウンド。
  • 戻り値: クリック時に sound を再生するこのスタイル。

ビルダーメソッドはすべて const fn · ビルトイン: いいえ です。

kis
use std::narrative::text::text_style;
use std::screen::rgba;
use std::ui::style::{ButtonStyle, Look, Paint, button_style};


const CLICK: AudioAsset = asset("sound/click.ogg");


const MENU_BUTTON: ButtonStyle = button_style(Look { background: Paint::None, text: text_style(28, WHITE) })
    .hover(Look { background: Paint::Color(rgba(255, 255, 255, 40)), text: text_style(28, WHITE) })
    .change(tween(ms(150)))
    .click_sound(sound(CLICK));

画像ボタンは、ホバー時とフォーカス時に背景画像を差し替えます。

kis
const fn image_style(idle: ImageAsset, hover: ImageAsset) -> ButtonStyle {
    let text = text_style(1, WHITE);
    button_style(Look { background: Paint::Image(idle), text })
        .hover(Look { background: Paint::Image(hover), text })
        .focus(Look { background: Paint::Image(hover), text })
}

構造体: SliderStyle

kis
pub struct SliderStyle {
    pub track: Paint,
    pub fill: Paint,
    pub thumb: Paint,
    pub thumb_size: Size,
}

slider! の塗りです。

  • track — トラック。最小値でのつまみの中心から、最大値でのつまみの中心まで。
  • fill — トラックの始点からつまみの中心までの部分。track の上に描かれます。
  • thumb — つまみ。大きさは thumb_size で、値の位置を中心に置かれます。
  • thumb_size — つまみのピクセル単位のサイズ。

最終更新日 2026年10月29日