freya_elements/
elements.rs

1use crate::def_element;
2
3def_element!(
4    /// `rect` is a generic element that acts as a container for other elements.
5    ///
6    /// You can specify things like [`width`](#width-and-height), [`padding`](#padding) or even in what [`direction`](#direction) the inner elements are stacked.
7    ///
8    /// ### Example
9    ///
10    /// ```rust,no_run
11    /// # use freya::prelude::*;
12    /// fn app() -> Element {
13    ///     rsx!(
14    ///         rect {
15    ///             direction: "vertical",
16    ///             label { "Hi!" }
17    ///             label { "Hi again!"}
18    ///         }
19    ///     )
20    /// }
21    /// ```
22    rect {
23        // Layout
24        height,
25        width,
26        min_height,
27        min_width,
28        max_height,
29        max_width,
30        visible_width,
31        visible_height,
32        margin,
33        padding,
34        position,
35        position_top,
36        position_right,
37        position_bottom,
38        position_left,
39        layer,
40
41        // Children layout
42        direction,
43        content,
44        main_align,
45        cross_align,
46        spacing,
47        overflow,
48        offset_x,
49        offset_y,
50
51        // Style
52        background,
53        background_opacity,
54        border,
55        shadow,
56        corner_radius,
57        corner_smoothing,
58
59        // Font style
60        color,
61        font_size,
62        font_family,
63        font_style,
64        font_weight,
65        font_width,
66        text_align,
67        line_height,
68        text_shadow,
69        max_lines,
70        decoration,
71        decoration_style,
72        decoration_color,
73        text_overflow,
74        letter_spacing,
75        word_spacing,
76        text_height,
77
78        // Transform
79        rotate,
80        opacity,
81        scale,
82
83        // Reference
84        canvas_reference,
85        reference,
86
87        // Accessibility
88        a11y_id,
89        a11y_focusable,
90        a11y_auto_focus,
91        a11y_name,
92        a11y_description,
93        a11y_value,
94        a11y_access_key,
95        a11y_author_id,
96        a11y_member_of,
97        a11y_keyboard_shortcut,
98        a11y_language,
99        a11y_placeholder,
100        a11y_role_description,
101        a11y_state_description,
102        a11y_tooltip,
103        a11y_url,
104        a11y_row_index_text,
105        a11y_column_index_text,
106        a11y_scroll_x,
107        a11y_scroll_x_min,
108        a11y_scroll_x_max,
109        a11y_scroll_y,
110        a11y_scroll_y_min,
111        a11y_scroll_y_max,
112        a11y_numeric_value,
113        a11y_min_numeric_value,
114        a11y_max_numeric_value,
115        a11y_numeric_value_step,
116        a11y_numeric_value_jump,
117        a11y_row_count,
118        a11y_column_count,
119        a11y_row_index,
120        a11y_column_index,
121        a11y_row_span,
122        a11y_column_span,
123        a11y_level,
124        a11y_size_of_set,
125        a11y_position_in_set,
126        a11y_color_value,
127        a11y_expanded,
128        a11y_selected,
129        a11y_hovered,
130        a11y_hidden,
131        a11y_linked,
132        a11y_multiselectable,
133        a11y_required,
134        a11y_visited,
135        a11y_busy,
136        a11y_live_atomic,
137        a11y_modal,
138        a11y_touch_transparent,
139        a11y_read_only,
140        a11y_disabled,
141        a11y_is_spelling_error,
142        a11y_is_grammar_error,
143        a11y_is_search_match,
144        a11y_is_suggestion,
145        a11y_role,
146        a11y_invalid,
147        a11y_toggled,
148        a11y_live,
149        a11y_default_action_verb,
150        a11y_orientation,
151        a11y_sort_direction,
152        a11y_current,
153        a11y_auto_complete,
154        a11y_has_popup,
155        a11y_list_style,
156        a11y_vertical_offset,
157    };
158    /// `label` simply let's you display some text.
159    ///
160    /// ### Example
161    ///
162    /// ```rust,no_run
163    /// # use freya::prelude::*;
164    /// fn app() -> Element {
165    ///     rsx!(
166    ///         label {
167    ///             "Hello World"
168    ///         }
169    ///     )
170    /// }
171    /// ```
172    label {
173        // Layout
174        height,
175        width,
176        min_height,
177        min_width,
178        max_height,
179        max_width,
180        margin,
181        position,
182        position_top,
183        position_right,
184        position_bottom,
185        position_left,
186        layer,
187
188        // Children layout
189        main_align,
190
191        // Font style
192        color,
193        font_size,
194        font_family,
195        font_style,
196        font_weight,
197        font_width,
198        text_align,
199        line_height,
200        text_shadow,
201        max_lines,
202        decoration,
203        decoration_style,
204        decoration_color,
205        text_overflow,
206        letter_spacing,
207        word_spacing,
208        text_height,
209
210        // Transform
211        rotate,
212        opacity,
213
214        // Reference
215        reference,
216
217        // Accessibility
218        a11y_id,
219        a11y_auto_focus,
220        a11y_focusable,
221        a11y_name,
222        a11y_description,
223        a11y_value,
224        a11y_access_key,
225        a11y_author_id,
226        a11y_keyboard_shortcut,
227        a11y_language,
228        a11y_placeholder,
229        a11y_role_description,
230        a11y_state_description,
231        a11y_tooltip,
232        a11y_url,
233        a11y_row_index_text,
234        a11y_column_index_text,
235        a11y_scroll_x,
236        a11y_scroll_x_min,
237        a11y_scroll_x_max,
238        a11y_scroll_y,
239        a11y_scroll_y_min,
240        a11y_scroll_y_max,
241        a11y_numeric_value,
242        a11y_min_numeric_value,
243        a11y_max_numeric_value,
244        a11y_numeric_value_step,
245        a11y_numeric_value_jump,
246        a11y_row_count,
247        a11y_column_count,
248        a11y_row_index,
249        a11y_column_index,
250        a11y_row_span,
251        a11y_column_span,
252        a11y_level,
253        a11y_size_of_set,
254        a11y_position_in_set,
255        a11y_color_value,
256        a11y_expanded,
257        a11y_selected,
258        a11y_hovered,
259        a11y_hidden,
260        a11y_linked,
261        a11y_multiselectable,
262        a11y_required,
263        a11y_visited,
264        a11y_busy,
265        a11y_live_atomic,
266        a11y_modal,
267        a11y_touch_transparent,
268        a11y_read_only,
269        a11y_disabled,
270        a11y_is_spelling_error,
271        a11y_is_grammar_error,
272        a11y_is_search_match,
273        a11y_is_suggestion,
274        a11y_role,
275        a11y_invalid,
276        a11y_toggled,
277        a11y_live,
278        a11y_default_action_verb,
279        a11y_orientation,
280        a11y_sort_direction,
281        a11y_current,
282        a11y_auto_complete,
283        a11y_has_popup,
284        a11y_list_style,
285        a11y_vertical_offset,
286    };
287    /// `paragraph` element let's you build texts with different styles.
288    ///
289    /// This used used with the `text` element.
290    ///
291    /// ```rust,no_run
292    /// # use freya::prelude::*;
293    /// fn app() -> Element {
294    ///     rsx!(
295    ///         paragraph {
296    ///             text {
297    ///                 font_size: "15",
298    ///                 "Hello, "
299    ///             }
300    ///             text {
301    ///                 font_size: "30",
302    ///                 "World!"
303    ///             }
304    ///         }
305    ///     )
306    /// }
307    /// ```
308    paragraph {
309        // Layout
310        height,
311        width,
312        min_height,
313        min_width,
314        max_height,
315        max_width,
316        margin,
317        position,
318        position_top,
319        position_right,
320        position_bottom,
321        position_left,
322        layer,
323
324        // Children layout
325        main_align,
326
327        // Font style
328        color,
329        font_size,
330        font_family,
331        font_style,
332        font_weight,
333        font_width,
334        text_align,
335        line_height,
336        text_shadow,
337        max_lines,
338        decoration,
339        decoration_style,
340        decoration_color,
341        text_overflow,
342        letter_spacing,
343        word_spacing,
344        text_height,
345
346        // Transform
347        rotate,
348        opacity,
349
350        // Text Editing
351        cursor_index,
352        cursor_color,
353        cursor_mode,
354        cursor_id,
355        highlights,
356        highlight_color,
357        highlight_mode,
358        cursor_reference,
359
360        // Accessibility
361        a11y_id,
362        a11y_focusable,
363        a11y_auto_focus,
364        a11y_name,
365        a11y_description,
366        a11y_value,
367        a11y_access_key,
368        a11y_author_id,
369        a11y_keyboard_shortcut,
370        a11y_language,
371        a11y_placeholder,
372        a11y_role_description,
373        a11y_state_description,
374        a11y_tooltip,
375        a11y_url,
376        a11y_row_index_text,
377        a11y_column_index_text,
378        a11y_scroll_x,
379        a11y_scroll_x_min,
380        a11y_scroll_x_max,
381        a11y_scroll_y,
382        a11y_scroll_y_min,
383        a11y_scroll_y_max,
384        a11y_numeric_value,
385        a11y_min_numeric_value,
386        a11y_max_numeric_value,
387        a11y_numeric_value_step,
388        a11y_numeric_value_jump,
389        a11y_row_count,
390        a11y_column_count,
391        a11y_row_index,
392        a11y_column_index,
393        a11y_row_span,
394        a11y_column_span,
395        a11y_level,
396        a11y_size_of_set,
397        a11y_position_in_set,
398        a11y_color_value,
399        a11y_expanded,
400        a11y_selected,
401        a11y_hovered,
402        a11y_hidden,
403        a11y_linked,
404        a11y_multiselectable,
405        a11y_required,
406        a11y_visited,
407        a11y_busy,
408        a11y_live_atomic,
409        a11y_modal,
410        a11y_touch_transparent,
411        a11y_read_only,
412        a11y_disabled,
413        a11y_is_spelling_error,
414        a11y_is_grammar_error,
415        a11y_is_search_match,
416        a11y_is_suggestion,
417        a11y_role,
418        a11y_invalid,
419        a11y_toggled,
420        a11y_live,
421        a11y_default_action_verb,
422        a11y_orientation,
423        a11y_sort_direction,
424        a11y_current,
425        a11y_auto_complete,
426        a11y_has_popup,
427        a11y_list_style,
428        a11y_vertical_offset,
429    };
430    /// `text` element is simply a text span used for the `paragraph` element.
431    text {
432        // Font style
433        color,
434        font_size,
435        font_family,
436        font_style,
437        font_weight,
438        font_width,
439        text_align,
440        line_height,
441        text_shadow,
442        decoration,
443        decoration_style,
444        decoration_color,
445        letter_spacing,
446        word_spacing,
447    };
448    /// `image` element let's you show an image.
449    ///
450    /// For dynamic Images you may use `dynamic_bytes`.
451    ///
452    /// ### Example
453    ///
454    /// ```rust, ignore, no_run
455    /// # use freya::prelude::*;
456    /// static RUST_LOGO: &[u8] = include_bytes!("./rust_logo.png");
457    ///
458    /// fn app() -> Element {
459    ///     let image_data = static_bytes(RUST_LOGO);
460    ///     rsx!(
461    ///         image {
462    ///             image_data,
463    ///             width: "100%", // You must specify size otherwhise it will default to 0
464    ///             height: "100%",
465    ///         }
466    ///     )
467    /// }
468    /// ```
469    image {
470        // Layout
471        height,
472        width,
473        min_height,
474        min_width,
475        max_height,
476        max_width,
477        margin,
478        position,
479        position_top,
480        position_right,
481        position_bottom,
482        position_left,
483        layer,
484
485        // Transform
486        rotate,
487        opacity,
488
489        // Image
490        image_data,
491        aspect_ratio,
492        cover,
493        cache_key,
494        sampling,
495
496        // Reference
497        reference,
498        image_reference,
499
500        // Accessibility
501        a11y_id,
502        a11y_focusable,
503        a11y_auto_focus,
504        a11y_name,
505        a11y_description,
506        a11y_value,
507        a11y_access_key,
508        a11y_author_id,
509        a11y_keyboard_shortcut,
510        a11y_language,
511        a11y_placeholder,
512        a11y_role_description,
513        a11y_state_description,
514        a11y_tooltip,
515        a11y_url,
516        a11y_row_index_text,
517        a11y_column_index_text,
518        a11y_scroll_x,
519        a11y_scroll_x_min,
520        a11y_scroll_x_max,
521        a11y_scroll_y,
522        a11y_scroll_y_min,
523        a11y_scroll_y_max,
524        a11y_numeric_value,
525        a11y_min_numeric_value,
526        a11y_max_numeric_value,
527        a11y_numeric_value_step,
528        a11y_numeric_value_jump,
529        a11y_row_count,
530        a11y_column_count,
531        a11y_row_index,
532        a11y_column_index,
533        a11y_row_span,
534        a11y_column_span,
535        a11y_level,
536        a11y_size_of_set,
537        a11y_position_in_set,
538        a11y_color_value,
539        a11y_expanded,
540        a11y_selected,
541        a11y_hovered,
542        a11y_hidden,
543        a11y_linked,
544        a11y_multiselectable,
545        a11y_required,
546        a11y_visited,
547        a11y_busy,
548        a11y_live_atomic,
549        a11y_modal,
550        a11y_touch_transparent,
551        a11y_read_only,
552        a11y_disabled,
553        a11y_is_spelling_error,
554        a11y_is_grammar_error,
555        a11y_is_search_match,
556        a11y_is_suggestion,
557        a11y_role,
558        a11y_invalid,
559        a11y_toggled,
560        a11y_live,
561        a11y_default_action_verb,
562        a11y_orientation,
563        a11y_sort_direction,
564        a11y_current,
565        a11y_auto_complete,
566        a11y_has_popup,
567        a11y_list_style,
568        a11y_vertical_offset,
569    };
570    /// `svg` element let's you display SVG code.
571    ///
572    /// For dynamic SVGs you may use `dynamic_bytes`.
573    ///
574    /// ### Example
575    ///
576    /// ```rust, no_run
577    /// # use freya::prelude::*;
578    /// static FERRIS: &[u8] = include_bytes!("_docs/ferris.svg");
579    ///
580    /// fn app() -> Element {
581    ///     let ferris = static_bytes(FERRIS);
582    ///     rsx!(
583    ///         svg {
584    ///             svg_data: ferris,
585    ///             width: "100%", // You must specify size otherwhise it will default to 0
586    ///             height: "100%",
587    ///         }
588    ///     )
589    /// }
590    /// ```
591    svg {
592        // Layout
593        height,
594        width,
595        min_height,
596        min_width,
597        max_height,
598        max_width,
599        margin,
600        position,
601        position_top,
602        position_right,
603        position_bottom,
604        position_left,
605        layer,
606
607        // Transform
608        rotate,
609        opacity,
610
611        // Svg
612        color,
613        svg_data,
614        svg_content,
615        fill,
616        stroke,
617
618        // Accessibility
619        a11y_id,
620        a11y_focusable,
621        a11y_auto_focus,
622        a11y_name,
623        a11y_description,
624        a11y_value,
625        a11y_access_key,
626        a11y_author_id,
627        a11y_keyboard_shortcut,
628        a11y_language,
629        a11y_placeholder,
630        a11y_role_description,
631        a11y_state_description,
632        a11y_tooltip,
633        a11y_url,
634        a11y_row_index_text,
635        a11y_column_index_text,
636        a11y_scroll_x,
637        a11y_scroll_x_min,
638        a11y_scroll_x_max,
639        a11y_scroll_y,
640        a11y_scroll_y_min,
641        a11y_scroll_y_max,
642        a11y_numeric_value,
643        a11y_min_numeric_value,
644        a11y_max_numeric_value,
645        a11y_numeric_value_step,
646        a11y_numeric_value_jump,
647        a11y_row_count,
648        a11y_column_count,
649        a11y_row_index,
650        a11y_column_index,
651        a11y_row_span,
652        a11y_column_span,
653        a11y_level,
654        a11y_size_of_set,
655        a11y_position_in_set,
656        a11y_color_value,
657        a11y_expanded,
658        a11y_selected,
659        a11y_hovered,
660        a11y_hidden,
661        a11y_linked,
662        a11y_multiselectable,
663        a11y_required,
664        a11y_visited,
665        a11y_busy,
666        a11y_live_atomic,
667        a11y_modal,
668        a11y_touch_transparent,
669        a11y_read_only,
670        a11y_disabled,
671        a11y_is_spelling_error,
672        a11y_is_grammar_error,
673        a11y_is_search_match,
674        a11y_is_suggestion,
675        a11y_role,
676        a11y_invalid,
677        a11y_toggled,
678        a11y_live,
679        a11y_default_action_verb,
680        a11y_orientation,
681        a11y_sort_direction,
682        a11y_current,
683        a11y_auto_complete,
684        a11y_has_popup,
685        a11y_list_style,
686        a11y_vertical_offset,
687    };
688);
freya_elements/elements.rs

freya_elements/
elements.rs
