Skip to content

03-design-vers-egui.md

Latest commit

 

History

History
82 lines (63 loc) · 1.41 KB

03-design-vers-egui.md

File metadata and controls

82 lines (63 loc) · 1.41 KB

13.3 Design vers egui

Conversion des propriétés CSS

Couleurs

// SVG: fill="#3b82f6"
// Rust:
let color = egui::Color32::from_rgb(59, 130, 246);

// SVG: fill="rgba(59, 130, 246, 0.5)"
// Rust:
let color = egui::Color32::from_rgba_unmultiplied(59, 130, 246, 128);

Espacement

// SVG: x="280" y="80" width="300" height="40"
// Rust:
let rect = egui::Rect::from_min_size(
    egui::pos2(280.0, 80.0),
    egui::vec2(300.0, 40.0)
);

Bordures arrondies

// SVG: rx="8"
// Rust:
let rounding = egui::Rounding::same(8.0);

Layouts équivalents

Flexbox → egui Layout

// CSS: display: flex; flex-direction: column;
// Rust:
ui.vertical(|ui| {
    // ...
});

// CSS: display: flex; flex-direction: row;
// Rust:
ui.horizontal(|ui| {
    // ...
});

Grid → egui Grid

// CSS: display: grid; grid-template-columns: repeat(3, 1fr);
// Rust:
egui::Grid::new("my_grid")
    .num_columns(3)
    .show(ui, |ui| {
        // ...
    });

Styles et couleurs

Utiliser les tokens de design

// Au lieu de valeurs hardcodées
let color = tokens.colors.primary;
let spacing = tokens.spacing.md;
let radius = tokens.radius.sm;

Résumé

  • Couleurs : Conversion hex → Color32
  • Layouts : Flexbox → egui Layout
  • Espacement : Positions SVG → egui Rect
  • Tokens : Utiliser le design system plutôt que valeurs hardcodées