namespace ftxui {
    ...
 
// Define the document
Element document = vbox({
  text("The window") | bold | color(Color::Blue),
  gauge(0.5)
  text("The footer")
});
 
// Add a border, by calling the `ftxui::border` decorator function.
document = border(document);
 
// Add another border, using the pipe operator.
document = document | border.
 
// Add another border, using the |= operator.
document |= border
 
...
}

Liste des éléments

La liste de tous les éléments est incluse et peut être accédée en incluant le fichier d'en-tête correspondant :

#include <ftxui/dom/elements.hpp>

elements.hpp

// Copyright 2020 Arthur Sonzogni. All rights reserved.
// Use of this source code is governed by the MIT license that can be found in
// the LICENSE file.
#ifndef FTXUI_DOM_ELEMENTS_HPP
#define FTXUI_DOM_ELEMENTS_HPP
 
#include <cstdint>
#include <functional>
#include <memory>
 
#include <string_view>
#include "ftxui/dom/canvas.hpp"
#include "ftxui/dom/direction.hpp"
#include "ftxui/dom/flexbox_config.hpp"
#include "ftxui/dom/linear_gradient.hpp"
#include "ftxui/dom/node.hpp"
#include "ftxui/screen/box.hpp"
#include "ftxui/screen/color.hpp"
#include "ftxui/screen/terminal.hpp"
#include "ftxui/util/export.hpp"
#include "ftxui/util/ref.hpp"
 
namespace ftxui {
class Node;
using Element = std::shared_ptr<Node>;
using Elements = std::vector<Element>;
using Decorator = std::function<Element(Element)>;
using GraphFunction = std::function<std::vector<int>(int, int)>;
 
/// @brief BorderStyle est une énumération qui représente les différents styles
/// de bordures pouvant être appliqués aux éléments de l'interface utilisateur du terminal.
///
/// BorderStyle est une énumération qui représente les différents styles de
/// bordures pouvant être appliqués aux éléments de l'interface utilisateur du terminal.
/// Il est utilisé pour définir l'apparence visuelle des bordures autour des éléments,
/// tels que les fenêtres, les cadres ou les séparateurs.
/// @ingroup dom
enum BorderStyle : uint8_t {
  LIGHT,
  DASHED,
  HEAVY,
  DOUBLE,
  ROUNDED,
  EMPTY,
};
 
// Enchaîner les éléments dans des décorateurs.
// Par exemple les lignes suivantes sont équivalentes :
// -> text("ftxui") | bold | underlined
// -> underlined(bold(text("FTXUI")))
FTXUI_EXPORT(DOM) Element operator|(Element, Decorator);
FTXUI_EXPORT(DOM) Element& operator|=(Element&, Decorator);
FTXUI_EXPORT(DOM) Elements operator|(Elements, Decorator);
FTXUI_EXPORT(DOM) Decorator operator|(Decorator, Decorator);
 
// --- Composant ---
FTXUI_EXPORT(DOM) Element text(std::string_view text);
FTXUI_EXPORT(DOM) Element vtext(std::string_view text);
FTXUI_EXPORT(DOM) Element separator();
FTXUI_EXPORT(DOM) Element separatorLight();
FTXUI_EXPORT(DOM) Element separatorDashed();
FTXUI_EXPORT(DOM) Element separatorHeavy();
FTXUI_EXPORT(DOM) Element separatorDouble();
FTXUI_EXPORT(DOM) Element separatorEmpty();
FTXUI_EXPORT(DOM) Element separatorStyled(BorderStyle);
FTXUI_EXPORT(DOM) Element separator(Cell);
FTXUI_EXPORT(DOM) Element separatorCharacter(std::string_view);
FTXUI_EXPORT(DOM)
Element separatorHSelector(float left,
                           float right,
                           Color unselected_color,
                           Color selected_color);
FTXUI_EXPORT(DOM)
Element separatorVSelector(float up,
                           float down,
                           Color unselected_color,
                           Color selected_color);
FTXUI_EXPORT(DOM) Element gauge(float progress);
FTXUI_EXPORT(DOM) Element gaugeLeft(float progress);
FTXUI_EXPORT(DOM) Element gaugeRight(float progress);
FTXUI_EXPORT(DOM) Element gaugeUp(float progress);
FTXUI_EXPORT(DOM) Element gaugeDown(float progress);
FTXUI_EXPORT(DOM) Element gaugeDirection(float progress, Direction direction);
 
// charset[0] est le glyphe "vide", charset.back() est "plein" ; les entrées entre
// les deux ombrent la cellule limite.
FTXUI_EXPORT(DOM)
Element gaugeCharset(float progress,
                      std::vector<std::string> charset,
                      Direction direction = Direction::Right);
FTXUI_EXPORT(DOM) Element border(Element);
FTXUI_EXPORT(DOM) Element borderLight(Element);
FTXUI_EXPORT(DOM) Element borderDashed(Element);
FTXUI_EXPORT(DOM) Element borderHeavy(Element);
FTXUI_EXPORT(DOM) Element borderDouble(Element);
FTXUI_EXPORT(DOM) Element borderRounded(Element);
FTXUI_EXPORT(DOM) Element borderEmpty(Element);
FTXUI_EXPORT(DOM) Decorator borderStyled(BorderStyle);
FTXUI_EXPORT(DOM) Decorator borderStyled(BorderStyle, Color);
FTXUI_EXPORT(DOM) Decorator borderStyled(Color);
FTXUI_EXPORT(DOM) Decorator borderWith(const Cell&);
FTXUI_EXPORT(DOM)
Element window(Element title, Element content, BorderStyle border = ROUNDED);
FTXUI_EXPORT(DOM) Element spinner(int charset_index, size_t image_index);
FTXUI_EXPORT(DOM) Element paragraph(std::string_view text);
FTXUI_EXPORT(DOM) Element paragraphAlignLeft(std::string_view text);
FTXUI_EXPORT(DOM) Element paragraphAlignRight(std::string_view text);
FTXUI_EXPORT(DOM) Element paragraphAlignCenter(std::string_view text);
FTXUI_EXPORT(DOM) Element paragraphAlignJustify(std::string_view text);
FTXUI_EXPORT(DOM) Element graph(GraphFunction);
FTXUI_EXPORT(DOM) Element emptyElement();
FTXUI_EXPORT(DOM) Element canvas(ConstRef<Canvas>);
FTXUI_EXPORT(DOM)
Element canvas(int width, int height, std::function<void(Canvas&)>);
FTXUI_EXPORT(DOM) Element canvas(std::function<void(Canvas&)>);
 
// -- Décorateur ---
FTXUI_EXPORT(DOM) Element bold(Element);
FTXUI_EXPORT(DOM) Element dim(Element);
FTXUI_EXPORT(DOM) Element italic(Element);
FTXUI_EXPORT(DOM) Element inverted(Element);
FTXUI_EXPORT(DOM) Element underlined(Element);
FTXUI_EXPORT(DOM) Element underlinedDouble(Element);
FTXUI_EXPORT(DOM) Element blink(Element);
FTXUI_EXPORT(DOM) Element strikethrough(Element);
FTXUI_EXPORT(DOM) Decorator color(Color);
FTXUI_EXPORT(DOM) Decorator bgcolor(Color);
FTXUI_EXPORT(DOM) Decorator color(const LinearGradient&);
FTXUI_EXPORT(DOM) Decorator bgcolor(const LinearGradient&);
FTXUI_EXPORT(DOM) Element color(Color, Element);
FTXUI_EXPORT(DOM) Element bgcolor(Color, Element);
FTXUI_EXPORT(DOM) Element color(const LinearGradient&, Element);
FTXUI_EXPORT(DOM) Element bgcolor(const LinearGradient&, Element);
FTXUI_EXPORT(DOM) Decorator focusPosition(int x, int y);
FTXUI_EXPORT(DOM) Decorator focusPositionRelative(float x, float y);
FTXUI_EXPORT(DOM) Element automerge(Element child);
FTXUI_EXPORT(DOM) Decorator hyperlink(std::string_view link);
FTXUI_EXPORT(DOM) Element hyperlink(std::string_view link, Element child);
FTXUI_EXPORT(DOM) Element selectionStyleReset(Element);
FTXUI_EXPORT(DOM) Decorator selectionColor(Color foreground);
FTXUI_EXPORT(DOM) Decorator selectionBackgroundColor(Color foreground);
FTXUI_EXPORT(DOM) Decorator selectionForegroundColor(Color foreground);
FTXUI_EXPORT(DOM) Decorator selectionStyle(std::function<void(Cell&)> style);
 
// --- Disposition ---
// Horizontal, Vertical ou empilé d'éléments.
FTXUI_EXPORT(DOM) Element hbox(Elements);
FTXUI_EXPORT(DOM) Element vbox(Elements);
FTXUI_EXPORT(DOM) Element dbox(Elements);
FTXUI_EXPORT(DOM)
Element flexbox(Elements, FlexboxConfig config = FlexboxConfig());
FTXUI_EXPORT(DOM) Element gridbox(std::vector<Elements> lines);
 
FTXUI_EXPORT(DOM)
Element hflow(Elements);  // Aide : flexbox par défaut avec direction de ligne.
FTXUI_EXPORT(DOM)
Element vflow(Elements);  // Aide : flexbox par défaut avec direction de colonne.
 
// -- Flexibilité ---
// Définit comment partager l'espace restant lorsque tout n'est pas utilisé à l'intérieur d'un
// conteneur.
FTXUI_EXPORT(DOM) Element flex(Element);  // Développer/Réduire si possible/nécessaire.
FTXUI_EXPORT(DOM) Element flex_grow(Element);    // Développer l'élément si possible.
FTXUI_EXPORT(DOM) Element flex_shrink(Element);  // Réduire l'élément si nécessaire.
FTXUI_EXPORT(DOM) Decorator flex_factor(int grow, int shrink);
FTXUI_EXPORT(DOM) Decorator flex_grow_factor(int grow);
FTXUI_EXPORT(DOM) Decorator flex_shrink_factor(int shrink);
 
FTXUI_EXPORT(DOM)
Element xflex(Element);  // Développer/Réduire si possible/nécessaire sur l'axe X.
FTXUI_EXPORT(DOM)
Element xflex_grow(Element);  // Développer l'élément si possible sur l'axe X.
FTXUI_EXPORT(DOM)
Element xflex_shrink(Element);  // Réduire l'élément si nécessaire sur l'axe X.
FTXUI_EXPORT(DOM) Decorator xflex_factor(int grow, int shrink);
FTXUI_EXPORT(DOM) Decorator xflex_grow_factor(int grow);
FTXUI_EXPORT(DOM) Decorator xflex_shrink_factor(int shrink);
 
FTXUI_EXPORT(DOM)
Element yflex(Element);  // Développer/Réduire si possible/nécessaire sur l'axe Y.
FTXUI_EXPORT(DOM)
Element yflex_grow(Element);  // Développer l'élément si possible sur l'axe Y.
FTXUI_EXPORT(DOM)
Element yflex_shrink(Element);  // Réduire l'élément si nécessaire sur l'axe Y.
FTXUI_EXPORT(DOM) Decorator yflex_factor(int grow, int shrink);
FTXUI_EXPORT(DOM) Decorator yflex_grow_factor(int grow);
FTXUI_EXPORT(DOM) Decorator yflex_shrink_factor(int shrink);
 
FTXUI_EXPORT(DOM) Element notflex(Element);  // Réinitialiser l'attribut flex.
FTXUI_EXPORT(DOM) Element filler();          // Un élément vide extensible.
 
// -- Surcharger la taille ---
enum WidthOrHeight : uint8_t { WIDTH, HEIGHT };
enum Constraint : uint8_t { LESS_THAN, EQUAL, GREATER_THAN };
FTXUI_EXPORT(DOM) Decorator size(WidthOrHeight, Constraint, int value);
 
// --- Cadre ---
// Un cadre est une zone défilante. La zone interne est potentiellement plus grande que
// la zone externe. La zone interne est défilée afin de rendre visible l'élément focalisé.
FTXUI_EXPORT(DOM) Element frame(Element);
FTXUI_EXPORT(DOM) Element xframe(Element);
FTXUI_EXPORT(DOM) Element yframe(Element);
FTXUI_EXPORT(DOM) Element focus(Element);
FTXUI_EXPORT(DOM) Element select(Element e);  // Obsolète - Alias pour focus.
 
// --- Curseur ---
// Ceux-ci sont similaires à `focus`, mais changent également la forme du curseur.
FTXUI_EXPORT(DOM) Element focusCursorBlock(Element);
FTXUI_EXPORT(DOM) Element focusCursorBlockBlinking(Element);
FTXUI_EXPORT(DOM) Element focusCursorBar(Element);
FTXUI_EXPORT(DOM) Element focusCursorBarBlinking(Element);
FTXUI_EXPORT(DOM) Element focusCursorUnderline(Element);
FTXUI_EXPORT(DOM) Element focusCursorUnderlineBlinking(Element);
 
// --- Divers ---
FTXUI_EXPORT(DOM) Element vscroll_indicator(Element);
FTXUI_EXPORT(DOM) Element hscroll_indicator(Element);
FTXUI_EXPORT(DOM) Decorator reflect(Box& box);
// Avant de dessiner l'|element|, effacer le pixel en dessous. Ceci est utile en
// combinaison avec dbox.
FTXUI_EXPORT(DOM) Element clear_under(Element element);
 
// --- Utilitaire --------------------------------------------------------------------
FTXUI_EXPORT(DOM) Element hcenter(Element);
FTXUI_EXPORT(DOM) Element vcenter(Element);
FTXUI_EXPORT(DOM) Element center(Element);
FTXUI_EXPORT(DOM) Element align_right(Element);
FTXUI_EXPORT(DOM) Element nothing(Element element);
 
namespace Dimension {
FTXUI_EXPORT(DOM) Dimensions Fit(Element&, bool extend_beyond_screen = false);
}  // namespace Dimension
 
}  // namespace ftxui
 
// Rendre le conteneur capable de prendre n'importe quel nombre d'enfants en entrée.
#include "ftxui/dom/take_any_args.hpp"
 
// Inclure les anciennes définitions utilisant wstring.
#include "ftxui/dom/deprecated.hpp"
#endif  // FTXUI_DOM_ELEMENTS_HPP

text

Le widget le plus simple. Il affiche un texte.

text("I am a piece of text");

I am a piece of text.

vtext

Identique à ftxui::text, mais affiché verticalement.

Code :

vtext("HELLO");

Sortie terminale :

H
E
L
L
O

paragraph

Similaire à ftxui::text, mais les mots individuels sont enveloppés sur plusieurs lignes, en fonction de la largeur de son conteneur.

Exemple de code :

paragraph("A very long text")

ezgif com-gif-maker (4)

Pour un exemple plus détaillé, reportez-vous à exemple détaillé. Paragraph inclut également un certain nombre d'autres variantes comme indiqué ci-dessous :

namespace ftxui {
    Element paragraph(std::string text);
    Element paragraphAlignLeft(std::string text);
    Element paragraphAlignRight(std::string text);
    Element paragraphAlignCenter(std::string text);
    Element paragraphAlignJustify(std::string text);
}

border

Ajoute une bordure autour d'un élément.

Code :

border(text("The element"))

Sortie terminale :

┌───────────┐
│The element│
└───────────┘

Note: Vous pouvez obtenir le même comportement en utilisant l'opérateur pipe.

Code :
text("L'élément") | border

Border est également disponible dans une variété de styles, comme indiqué ci-dessous :

namespace ftxui {
    Element border(Element);
    Element borderLight(Element);
    Element borderHeavy(Element);
    Element borderDouble(Element);
    Element borderRounded(Element);
    Element borderEmpty(Element);
    Decorator borderStyled(BorderStyle);
    Decorator borderWith(Cell);
}

window

Une ftxui::window est une ftxui::border, mais avec un en-tête supplémentaire. Pour ajouter une fenêtre autour d'un élément, enveloppez-le et spécifiez une chaîne de caractères comme en-tête. Code :

window("The window", text("The element"))

Sortie terminale :

┌The window─┐
│The element│
└───────────┘

separator

Affiche une ligne verticale/horizontale pour diviser visuellement le contenu d'un conteneur en deux.

Code :

border(
  hbox({
    text("Left"), 
    separator(),
    text("Right")
  })
)

Sortie terminale :

┌────┬─────┐
│left│right│
└────┴─────┘

Les séparateurs sont disponibles dans une variété de styles, comme indiqué ci-dessous :

namespace ftxui {
    Element separator(void);
    Element separatorLight();
    Element separatorHeavy();
    Element separatorDouble();
    Element separatorEmpty();
    Element separatorStyled(BorderStyle);
    Element separator(Cell);
    Element separatorCharacter(std::string);
    Element separatorHSelector(float left,
                               float right,
                               Color background,
                               Color foreground);
    Element separatorVSelector(float up,
                               float down,
                               Color background,
                               Color foreground);
}

gauge

Ceci est un élément visuel qui représente un ratio de progression.

Code :

border(gauge(0.5))

Sortie terminale :

┌────────────────────────────────────────────────────────────────────────────┐
│██████████████████████████████████████                                      │
└────────────────────────────────────────────────────────────────────────────┘

Les jauges peuvent être affichées dans de nombreuses orientations, comme indiqué ci-dessous :

namespace {
    Element gauge(float ratio);
    Element gaugeLeft(float ratio);
    Element gaugeRight(float ratio);
    Element gaugeUp(float ratio);
    Element gaugeDown(float ratio);
    Element gaugeDirection(float ratio, GaugeDirection);
}

graph

Voir :

Element graph(GraphFunction);

Couleurs

La plupart des consoles de terminal peuvent afficher du texte coloré et des arrière-plans colorés. FTXUI prend en charge toutes les palettes de couleurs :

Decorator color(Color);

Decorator bgcolor(Color);

Galerie de couleurs :

Palette16

Sur la plupart des terminaux, les couleurs suivantes sont prises en charge :

Par défaut
Noir
GrisFoncé
GrisClair
Blanc
Bleu
BleuClair
Cyan
CyanClair
Vert
VertClair
Magenta
MagentaClair
Rouge
RougeClair
Jaune
JauneClair

Exemple d'utilisation des couleurs ci-dessus avec l'opérateur pipe :

text("Blue foreground") | color(Color::Blue);
text("Blue background") | bgcolor(Color::Blue);
text("Black on white") | color(Color::Black) | bgcolor(Color::White);

Palette256

Sur les terminaux prenant en charge 256 couleurs.

text("HotPink") | color(Color::HotPink);

TrueColor

Sur les terminaux prenant en charge TrueColor, vous pouvez utiliser directement l'espace colorimétrique RVB 24 bits :

Utilisez les constructeurs ci-dessous pour spécifier les valeurs RVB ou TSV de votre couleur :

Il existe deux constructeurs :

ftxui::Color::RGB(uint8_t red, uint8_t green, uint8_t blue);

ftxui::Color::HSV(uint8_t hue, uint8_t saturation, uint8_t value);

LinearGradient

FTXUI prend en charge le dégradé linéaire. Soit au premier plan, soit à l'arrière-plan.

Decorator color(const LinearGradient&);

Decorator bgcolor(const LinearGradient&);

Un ftxui::LinearGradient est défini par un angle en degrés et une liste de points de couleur.

auto gradient = LinearGradient()
  .Angle(45)
  .AddStop(0.0, Color::Red)
  .AddStop(0.5, Color::Green)
  .AddStop(1.0, Color::Blue);

Vous pouvez également utiliser des constructeurs simplifiés :

LinearGradient(Color::Red, Color::Blue);

LinearGradient(45, Color::Red, Color::Blue);

Voir la démo.

Style

En plus du texte coloré et des arrière-plans colorés. De nombreux terminaux prennent en charge les effets de texte tels que : bold, italic, dim, underlined, inverted, blink.

Element bold(Element);
Element italic(Element);
Element dim(Element);
Element inverted(Element);
Element underlined(Element);
Element underlinedDouble(Element);
Element strikethrough(Element);
Element blink(Element);
Decorator color(Color);
Decorator bgcolor(Color);
Decorator colorgrad(LinearGradient);
Decorator bgcolorgrad(LinearGradient);

Exemple

Pour utiliser ces effets, enveloppez simplement vos éléments avec l'effet désiré :

underlined(bold(text("This text is bold and underlined")))

Alternativement, utilisez l'opérateur pipe pour le chaîner sur votre élément :

text("This text is bold") | bold | underlined

Layout

Permet d'organiser les éléments des manières suivantes :

Horizontalement avec ftxui::hbox
Verticalement avec ftxui::vbox
À l'intérieur d'une grille avec ftxui::gridbox
Enveloppé dans une direction en utilisant le ftxui::flexbox.

Exemple utilisant ftxui::hbox, ftxui::vbox et ftxui::filler.

Exemple utilisant ftxui::gridbox :

Exemple utilisant flexbox :

Consultez cet exemple et la démo associée.

L'élément peut également devenir flexible en utilisant le décorateur ftxui::flex.

Code :

hbox({
  text("left") | border ,
  text("middle") | border | flex,
  text("right") | border,
});

Sortie terminale :

┌────┐┌─────────────────────────────────────────────────────┐┌─────┐
│left││middle                                               ││right│
└────┘└─────────────────────────────────────────────────────┘└─────┘

Code :

hbox({
  text("left") | border ,
  text("middle") | border | flex,
  text("right") | border | flex,
});

Sortie terminale :

┌────┐┌───────────────────────────────┐┌───────────────────────────────┐
│left││middle                         ││right                          │
└────┘└───────────────────────────────┘└───────────────────────────────┘

Table

Permet un formatage facile des données sous une forme visuelle de tableau ordonné.

Exemple simple :

auto table = Table({
  {"Planet", "Radius", "Mass"},
  {"Mercury", "2440", "0.330"},
  {"Venus", "6052", "4.87"},
  {"Earth", "6371", "5.97"},
  {"Mars", "3390", "0.642"},
});
 
table.SelectAll().Border(LIGHT);
table.SelectRow(0).Decorate(bold);
table.SelectRow(0).SeparatorVertical(LIGHT);
table.SelectRow(0).Border(DOUBLE);
 
auto document = table.Render();

Exemple de code:

Sélection et style

Vous pouvez sélectionner des parties du tableau et leur appliquer des décorateurs ou des bordures. Les méthodes de sélection incluent :

ftxui::TableSelection::SelectAll();
ftxui::TableSelection::SelectCell(column, row);
ftxui::TableSelection::SelectRow(row_index);
ftxui::TableSelection::SelectRows(row_min, row_max);
ftxui::TableSelection::SelectColumn(column_index);
ftxui::TableSelection::SelectColumns(column_min, column_max);
ftxui::TableSelection::SelectRectangle(column_min, column_max, row_min, row_max);

Une fois une sélection effectuée, vous pouvez appliquer :

ftxui::TableSelection::Decorate(Decorator); // Apply a decorator to the whole selection (cells and borders).
ftxui::TableSelection::DecorateCells(Decorator); // Apply a decorator only to the cells.
ftxui::TableSelection::Border(BorderStyle); // Add a border around the selection.
ftxui::TableSelection::Separator(BorderStyle); // 

Bordures colorées

Vous pouvez également appliquer des décorateurs spécifiquement aux bordures et séparateurs :

// Apply a red border to the whole table.
table.SelectAll().Border(LIGHT, color(Color::Red));
 
// Apply a blue separator to the first row.
table.SelectRow(0).SeparatorVertical(LIGHT, color(Color::Blue));

Les méthodes suivantes sont disponibles pour un contrôle fin de la décoration des bordures :

ftxui::TableSelection::DecorateBorder(Decorator); // Apply a decorator to all borders of the selection.
ftxui::TableSelection::DecorateBorderLeft(Decorator); // Apply a decorator to the left border of the selection.
ftxui::TableSelection::DecorateBorderRight(Decorator); // Apply a decorator to the right border of the selection.
ftxui::TableSelection::DecorateBorderTop(Decorator); // Apply a decorator to the top border of the selection.
ftxui::TableSelection::DecorateBorderBottom(Decorator); // Apply a decorator to the bottom border of the selection.
ftxui::TableSelection::DecorateSeparator(Decorator); // Apply a decorator to all separators of the selection.
ftxui::TableSelection::DecorateSeparatorVertical(Decorator); // Apply a decorator to all vertical separators of the selection.
ftxui::TableSelection::DecorateSeparatorHorizontal(Decorator); // Apply a decorator to all horizontal separators of the selection.

Canvas

Voir l'API <ftxui/dom/canvas.hpp>

auto c = Canvas(100, 100);
c.DrawPointLine(10, 10, 80, 10, Color::Red);
auto element = canvas(c);

Le dessin peut être effectué sur un ftxui::Canvas, en utilisant des caractères braille, des blocs ou de simples caractères :

Exemple simple :

Exemple complexe :

ezgif com-gif-maker (3)

Table of Contents

text

vtext

paragraph

border

window

separator

gauge

graph

Couleurs

Palette16

Palette256

TrueColor

LinearGradient

Style

Layout

Table

Sélection et style

Bordures colorées

Canvas