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`, `padding` or even in what `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        // Children layout
486        direction,
487        content,
488        main_align,
489        cross_align,
490        spacing,
491        overflow,
492        offset_x,
493        offset_y,
494
495        // Transform
496        rotate,
497        opacity,
498
499        // Image
500        image_data,
501        aspect_ratio,
502        cover,
503        cache_key,
504        sampling,
505
506        // Reference
507        reference,
508        image_reference,
509
510        // Accessibility
511        a11y_id,
512        a11y_focusable,
513        a11y_auto_focus,
514        a11y_name,
515        a11y_description,
516        a11y_value,
517        a11y_access_key,
518        a11y_author_id,
519        a11y_keyboard_shortcut,
520        a11y_language,
521        a11y_placeholder,
522        a11y_role_description,
523        a11y_state_description,
524        a11y_tooltip,
525        a11y_url,
526        a11y_row_index_text,
527        a11y_column_index_text,
528        a11y_scroll_x,
529        a11y_scroll_x_min,
530        a11y_scroll_x_max,
531        a11y_scroll_y,
532        a11y_scroll_y_min,
533        a11y_scroll_y_max,
534        a11y_numeric_value,
535        a11y_min_numeric_value,
536        a11y_max_numeric_value,
537        a11y_numeric_value_step,
538        a11y_numeric_value_jump,
539        a11y_row_count,
540        a11y_column_count,
541        a11y_row_index,
542        a11y_column_index,
543        a11y_row_span,
544        a11y_column_span,
545        a11y_level,
546        a11y_size_of_set,
547        a11y_position_in_set,
548        a11y_color_value,
549        a11y_expanded,
550        a11y_selected,
551        a11y_hovered,
552        a11y_hidden,
553        a11y_linked,
554        a11y_multiselectable,
555        a11y_required,
556        a11y_visited,
557        a11y_busy,
558        a11y_live_atomic,
559        a11y_modal,
560        a11y_touch_transparent,
561        a11y_read_only,
562        a11y_disabled,
563        a11y_is_spelling_error,
564        a11y_is_grammar_error,
565        a11y_is_search_match,
566        a11y_is_suggestion,
567        a11y_role,
568        a11y_invalid,
569        a11y_toggled,
570        a11y_live,
571        a11y_default_action_verb,
572        a11y_orientation,
573        a11y_sort_direction,
574        a11y_current,
575        a11y_auto_complete,
576        a11y_has_popup,
577        a11y_list_style,
578        a11y_vertical_offset,
579    };
580    /// `svg` element let's you display SVG code.
581    ///
582    /// For dynamic SVGs you may use `dynamic_bytes`.
583    ///
584    /// ### Example
585    ///
586    /// ```rust, no_run
587    /// # use freya::prelude::*;
588    /// static FERRIS: &[u8] = include_bytes!("_docs/ferris.svg");
589    ///
590    /// fn app() -> Element {
591    ///     let ferris = static_bytes(FERRIS);
592    ///     rsx!(
593    ///         svg {
594    ///             svg_data: ferris,
595    ///             width: "100%", // You must specify size otherwhise it will default to 0
596    ///             height: "100%",
597    ///         }
598    ///     )
599    /// }
600    /// ```
601    svg {
602        // Layout
603        height,
604        width,
605        min_height,
606        min_width,
607        max_height,
608        max_width,
609        margin,
610        position,
611        position_top,
612        position_right,
613        position_bottom,
614        position_left,
615        layer,
616
617        // Transform
618        rotate,
619        opacity,
620
621        // Svg
622        color,
623        svg_data,
624        svg_content,
625        fill,
626        stroke,
627
628        // Accessibility
629        a11y_id,
630        a11y_focusable,
631        a11y_auto_focus,
632        a11y_name,
633        a11y_description,
634        a11y_value,
635        a11y_access_key,
636        a11y_author_id,
637        a11y_keyboard_shortcut,
638        a11y_language,
639        a11y_placeholder,
640        a11y_role_description,
641        a11y_state_description,
642        a11y_tooltip,
643        a11y_url,
644        a11y_row_index_text,
645        a11y_column_index_text,
646        a11y_scroll_x,
647        a11y_scroll_x_min,
648        a11y_scroll_x_max,
649        a11y_scroll_y,
650        a11y_scroll_y_min,
651        a11y_scroll_y_max,
652        a11y_numeric_value,
653        a11y_min_numeric_value,
654        a11y_max_numeric_value,
655        a11y_numeric_value_step,
656        a11y_numeric_value_jump,
657        a11y_row_count,
658        a11y_column_count,
659        a11y_row_index,
660        a11y_column_index,
661        a11y_row_span,
662        a11y_column_span,
663        a11y_level,
664        a11y_size_of_set,
665        a11y_position_in_set,
666        a11y_color_value,
667        a11y_expanded,
668        a11y_selected,
669        a11y_hovered,
670        a11y_hidden,
671        a11y_linked,
672        a11y_multiselectable,
673        a11y_required,
674        a11y_visited,
675        a11y_busy,
676        a11y_live_atomic,
677        a11y_modal,
678        a11y_touch_transparent,
679        a11y_read_only,
680        a11y_disabled,
681        a11y_is_spelling_error,
682        a11y_is_grammar_error,
683        a11y_is_search_match,
684        a11y_is_suggestion,
685        a11y_role,
686        a11y_invalid,
687        a11y_toggled,
688        a11y_live,
689        a11y_default_action_verb,
690        a11y_orientation,
691        a11y_sort_direction,
692        a11y_current,
693        a11y_auto_complete,
694        a11y_has_popup,
695        a11y_list_style,
696        a11y_vertical_offset,
697    };
698);
freya_elements/elements.rs

freya_elements/
elements.rs
