yew_and_bulma/utils/constants.rs
1/// Used to create classes using the `has-text-*` prefix.
2///
3/// Used to create classes using the `has-text-*` prefix, such as those from
4/// the [typography Bulma helpers][bd].
5///
6/// # Examples
7///
8/// ```rust
9/// use yew::prelude::*;
10/// use yew_and_bulma::{
11/// helpers::color::TextColor,
12/// utils::constants::HAS_TEXT_PREFIX,
13/// };
14///
15/// // Create a `<div>` HTML element that has the text color set to primary.
16/// #[function_component(ColoredTextDiv)]
17/// fn colored_text_div() -> Html {
18/// let text_color = TextColor::Primary;
19/// let class = classes![format!("{HAS_TEXT_PREFIX}-{text_color}")];
20/// html!{
21/// <div class={class}>{ "Lorem ispum..." }</div>
22/// }
23/// }
24/// ```
25///
26/// [bd]: https://bulma.io/documentation/helpers/typography-helpers/
27pub const HAS_TEXT_PREFIX: &str = "has-text";
28/// Used to create classes using the `has-text-weight-*` prefix.
29///
30/// Used to create classes using the `has-text-weight-*` prefix, such as those
31/// from the [typography Bulma helpers][bd].
32///
33/// # Examples
34///
35/// ```rust
36/// use yew::prelude::*;
37/// use yew_and_bulma::{
38/// helpers::typography::TextWeight,
39/// utils::constants::HAS_TEXT_WEIGHT_PREFIX,
40/// };
41///
42/// // Create a `<div>` HTML element that has the light font weight.
43/// #[function_component(LightTextDiv)]
44/// fn light_text_div() -> Html {
45/// let text_weight = TextWeight::Light;
46/// let class = classes![format!("{HAS_TEXT_WEIGHT_PREFIX}-{text_weight}")];
47/// html!{
48/// <div class={class}>{ "Lorem ispum..." }</div>
49/// }
50/// }
51/// ```
52///
53/// [bd]: https://bulma.io/documentation/helpers/typography-helpers/#text-weight
54pub const HAS_TEXT_WEIGHT_PREFIX: &str = "has-text-weight";
55/// Used to create classes using the `has-background-*` prefix.
56///
57/// Used to create classes using the `has-background-*` prefix, such as those
58/// from the [color Bulma helpers][bd].
59///
60/// # Examples
61///
62/// ```rust
63/// use yew::prelude::*;
64/// use yew_and_bulma::{
65/// helpers::color::BackgroundColor,
66/// utils::constants::HAS_BACKGROUND_PREFIX,
67/// };
68///
69/// // Create a `<div>` HTML element that has the background color set to primary.
70/// #[function_component(ColoredBackgroundDiv)]
71/// fn colored_background_div() -> Html {
72/// let background_color = BackgroundColor::Primary;
73/// let class = classes![format!("{HAS_BACKGROUND_PREFIX}-{background_color}")];
74/// html!{
75/// <div class={class}>{ "Lorem ispum..." }</div>
76/// }
77/// }
78/// ```
79///
80/// [bd]: https://bulma.io/documentation/helpers/color-helpers/#background-color
81pub const HAS_BACKGROUND_PREFIX: &str = "has-background";
82/// Used to create classes using the `m-*` or `m*-*` prefix.
83///
84/// Used to create classes using the `m-*` or `m*-*` prefix, such as those from
85/// the [spacing Bulma helpers][bd].
86///
87/// # Examples
88///
89/// ```rust
90/// use yew::prelude::*;
91/// use yew_and_bulma::{
92/// helpers::spacing::Direction,
93/// helpers::spacing::Spacing,
94/// utils::constants::MARGIN_PREFIX,
95/// };
96///
97/// // Create a `<div>` HTML element that has the marign set to 2.
98/// #[function_component(SpacedDiv)]
99/// fn spaced_div() -> Html {
100/// let class = classes![
101/// format!("{MARGIN_PREFIX}{}-{}", Direction::All, Spacing::Two),
102/// ];
103/// html!{
104/// <div class={class}>{ "Lorem ispum..." }</div>
105/// }
106/// }
107/// ```
108///
109/// [bd]: https://bulma.io/documentation/helpers/spacing-helpers/
110pub const MARGIN_PREFIX: &str = "m";
111/// Used to create classes using the `p-*` or `p*-*` prefix.
112///
113/// Used to create classes using the `p-*` or `p*-*` prefix, such as those from
114/// the [spacing Bulma helpers][bd].
115///
116/// # Examples
117///
118/// ```rust
119/// use yew::prelude::*;
120/// use yew_and_bulma::{
121/// helpers::spacing::Direction,
122/// helpers::spacing::Spacing,
123/// utils::constants::PADDING_PREFIX,
124/// };
125///
126/// // Create a `<div>` HTML element that has the padding set to 2.
127/// #[function_component(SpacedDiv)]
128/// fn spaced_div() -> Html {
129/// let class = classes![
130/// format!("{PADDING_PREFIX}{}-{}", Direction::All, Spacing::Two),
131/// ];
132/// html!{
133/// <div class={class}>{ "Lorem ispum..." }</div>
134/// }
135/// }
136/// ```
137///
138/// [bd]: https://bulma.io/documentation/helpers/spacing-helpers/
139pub const PADDING_PREFIX: &str = "p";
140/// Used to create classes using the `is-size-*` prefix.
141///
142/// Used to create classes using the `is-size-*` prefix, such as those from the
143/// [typography Bulma helpers][bd].
144///
145/// # Examples
146///
147/// ```rust
148/// use yew::prelude::*;
149/// use yew_and_bulma::{
150/// helpers::typography::TextSize,
151/// utils::constants::IS_SIZE_PREFIX,
152/// };
153///
154/// // Create a `<div>` HTML element that has the font size set to 3.
155/// #[function_component(TextSize3Div)]
156/// fn text_size_3_div() -> Html {
157/// let text_size = TextSize::Three;
158/// let class = classes![format!("{IS_SIZE_PREFIX}-{text_size}")];
159/// html!{
160/// <div class={class}>{ "Lorem ispum..." }</div>
161/// }
162/// }
163/// ```
164///
165/// [bd]: https://bulma.io/documentation/helpers/typography-helpers/#size
166pub const IS_SIZE_PREFIX: &str = "is-size";
167/// Used to create classes using the `is-*` prefix.
168///
169/// Used to create classes using the `is-*` prefix, such as those from the
170/// [visibility Bulma helpers][bd].
171///
172/// # Examples
173///
174/// ```rust
175/// use yew::prelude::*;
176/// use yew_and_bulma::{
177/// helpers::visibility::Display,
178/// utils::constants::IS_PREFIX,
179/// };
180///
181/// // Create a `<div>` HTML element that has the display set to flex.
182/// #[function_component(FlexDiv)]
183/// fn flex_div() -> Html {
184/// let display = Display::Flex;
185/// let class = classes![format!("{IS_PREFIX}-{display}")];
186/// html!{
187/// <div class={class}>{ "Lorem ispum..." }</div>
188/// }
189/// }
190/// ```
191///
192/// [bd]: https://bulma.io/documentation/helpers/visibility-helpers/#show
193pub const IS_PREFIX: &str = "is";
194/// Used to create classes using the `is-family-*` prefix.
195///
196/// Used to create classes using the `is-family-*` prefix, such as those from
197/// the [typography Bulma helpers][bd].
198///
199/// # Examples
200///
201/// ```rust
202/// use yew::prelude::*;
203/// use yew_and_bulma::{
204/// helpers::typography::FontFamily,
205/// utils::constants::IS_FONT_FAMILY_PREFIX,
206/// };
207///
208/// // Create a `<div>` HTML element that has the code font family.
209/// #[function_component(CodeFontDiv)]
210/// fn code_font_div() -> Html {
211/// let font_family = FontFamily::Code;
212/// let class = classes![format!("{IS_FONT_FAMILY_PREFIX}-{font_family}")];
213/// html!{
214/// <div class={class}>{ "Lorem ispum..." }</div>
215/// }
216/// }
217/// ```
218///
219/// [bd]: https://bulma.io/documentation/helpers/typography-helpers/#font-family
220pub const IS_FONT_FAMILY_PREFIX: &str = "is-family";
221/// Used to create classes using the `is-flex-direction-*` prefix.
222///
223/// Used to create classes using the `is-flex-direction-*` prefix, such as
224/// those from the [Flexbox Bulma helpers][bd].
225///
226/// # Examples
227///
228/// ```rust
229/// use yew::prelude::*;
230/// use yew_and_bulma::{
231/// helpers::flexbox::FlexDirection,
232/// helpers::visibility::Display,
233/// utils::constants::IS_PREFIX,
234/// utils::constants::IS_FLEX_DIRECTION_PREFIX,
235/// };
236///
237/// // Create a `<div>` HTML element that has the column flex direction.
238/// // The `<p>` children are there to highlight the direction.
239/// #[function_component(FlexDirColDiv)]
240/// fn flex_dir_col_div() -> Html {
241/// let display = Display::Flex;
242/// let flex_direction = FlexDirection::Column;
243/// let class = classes![
244/// format!("{IS_PREFIX}-{display}"),
245/// format!("{IS_FLEX_DIRECTION_PREFIX}-{flex_direction}"),
246/// ];
247/// html!{
248/// <div class={class}>
249/// <p>{ "Lorem ispum..." }</p>
250/// <p>{ "Lorem ispum..." }</p>
251/// <p>{ "Lorem ispum..." }</p>
252/// </div>
253/// }
254/// }
255/// ```
256///
257/// [bd]: https://bulma.io/documentation/helpers/flexbox-helpers/#flex-direction
258pub const IS_FLEX_DIRECTION_PREFIX: &str = "is-flex-direction";
259/// Used to create classes using the `is-flex-wrap-*` prefix.
260///
261/// Used to create classes using the `is-flex-wrap-*` prefix, such as those
262/// from the [Flexbox Bulma helpers][bd].
263///
264/// # Examples
265///
266/// ```rust
267/// use yew::prelude::*;
268/// use yew_and_bulma::{
269/// helpers::flexbox::FlexWrap,
270/// helpers::visibility::Display,
271/// utils::constants::IS_PREFIX,
272/// utils::constants::IS_FLEX_WRAP_PREFIX,
273/// };
274///
275/// // Create a `<div>` HTML element that has the wrap flex wrap.
276/// // The `<p>` children are there to highlight the wrap (might need resize
277/// // of the screen size to become evident).
278/// #[function_component(FlexWrapWrapDiv)]
279/// fn flex_wrap_wrap_div() -> Html {
280/// let display = Display::Flex;
281/// let flex_wrap = FlexWrap::Wrap;
282/// let class = classes![
283/// format!("{IS_PREFIX}-{display}"),
284/// format!("{IS_FLEX_WRAP_PREFIX}-{flex_wrap}"),
285/// ];
286/// html!{
287/// <div class={class}>
288/// <p>{ "Lorem ispum..." }</p>
289/// <p>{ "Lorem ispum..." }</p>
290/// <p>{ "Lorem ispum..." }</p>
291/// </div>
292/// }
293/// }
294/// ```
295///
296/// [bd]: https://bulma.io/documentation/helpers/flexbox-helpers/#flex-wrap
297pub const IS_FLEX_WRAP_PREFIX: &str = "is-flex-wrap";
298/// Used to create classes using the `is-justify-content-*` prefix.
299///
300/// Used to create classes using the `is-justify-content-*` prefix, such as
301/// those from the [Flexbox Bulma helpers][bd].
302///
303/// # Examples
304///
305/// ```rust
306/// use yew::prelude::*;
307/// use yew_and_bulma::{
308/// helpers::flexbox::JustifyContent,
309/// helpers::visibility::Display,
310/// utils::constants::IS_PREFIX,
311/// utils::constants::IS_JUSTIFY_CONTENT_PREFIX,
312/// };
313///
314/// // Create a `<div>` HTML element that has the center justify content value.
315/// // The `<p>` children are there to highlight the justify (might need resize
316/// // of the screen size to become evident).
317/// #[function_component(JustifyContentCenterDiv)]
318/// fn justify_content_center_div() -> Html {
319/// let display = Display::Flex;
320/// let justify_content = JustifyContent::Center;
321/// let class = classes![
322/// format!("{IS_PREFIX}-{display}"),
323/// format!("{IS_JUSTIFY_CONTENT_PREFIX}-{justify_content}"),
324/// ];
325/// html!{
326/// <div class={class}>
327/// <p>{ "Lorem ispum..." }</p>
328/// <p>{ "Lorem ispum..." }</p>
329/// <p>{ "Lorem ispum..." }</p>
330/// </div>
331/// }
332/// }
333/// ```
334///
335/// [bd]: https://bulma.io/documentation/helpers/flexbox-helpers/#justify-content
336pub const IS_JUSTIFY_CONTENT_PREFIX: &str = "is-justify-content";
337/// Used to create classes using the `is-align-content-*` prefix.
338///
339/// Used to create classes using the `is-align-content-*` prefix, such as those
340/// from the [Flexbox Bulma helpers][bd].
341///
342/// # Examples
343///
344/// ```rust
345/// use yew::prelude::*;
346/// use yew_and_bulma::{
347/// helpers::flexbox::AlignContent,
348/// helpers::visibility::Display,
349/// utils::constants::IS_PREFIX,
350/// utils::constants::IS_ALIGN_CONTENT_PREFIX,
351/// };
352///
353/// // Create a `<div>` HTML element that has the center align content value.
354/// // The `<p>` children are there to highlight the align (might need resize
355/// // of the screen size to become evident).
356/// #[function_component(AlignContentCenterDiv)]
357/// fn align_content_center_div() -> Html {
358/// let display = Display::Flex;
359/// let align_content = AlignContent::Center;
360/// let class = classes![
361/// format!("{IS_PREFIX}-{display}"),
362/// format!("{IS_ALIGN_CONTENT_PREFIX}-{align_content}"),
363/// ];
364/// html!{
365/// <div class={class}>
366/// <p>{ "Lorem ispum..." }</p>
367/// <p>{ "Lorem ispum..." }</p>
368/// <p>{ "Lorem ispum..." }</p>
369/// </div>
370/// }
371/// }
372/// ```
373///
374/// [bd]: https://bulma.io/documentation/helpers/flexbox-helpers/#align-content
375pub const IS_ALIGN_CONTENT_PREFIX: &str = "is-align-content";
376/// Used to create classes using the `is-align-items-*` prefix.
377///
378/// Used to create classes using the `is-align-items-*` prefix, such as those
379/// from the [Flexbox Bulma helpers][bd].
380///
381/// # Examples
382///
383/// ```rust
384/// use yew::prelude::*;
385/// use yew_and_bulma::{
386/// helpers::flexbox::AlignItems,
387/// helpers::visibility::Display,
388/// utils::constants::IS_PREFIX,
389/// utils::constants::IS_ALIGN_ITEMS_PREFIX,
390/// };
391///
392/// // Create a `<div>` HTML element that has the center align items value.
393/// // The `<p>` children are there to highlight the align (might need resize
394/// // of the screen size to become evident).
395/// #[function_component(AlignItemsCenterDiv)]
396/// fn align_items_center_div() -> Html {
397/// let display = Display::Flex;
398/// let align_items = AlignItems::Center;
399/// let class = classes![
400/// format!("{IS_PREFIX}-{display}"),
401/// format!("{IS_ALIGN_ITEMS_PREFIX}-{align_items}"),
402/// ];
403/// html!{
404/// <div class={class}>
405/// <p>{ "Lorem ispum..." }</p>
406/// <p>{ "Lorem ispum..." }</p>
407/// <p>{ "Lorem ispum..." }</p>
408/// </div>
409/// }
410/// }
411/// ```
412///
413/// [bd]: https://bulma.io/documentation/helpers/flexbox-helpers/#align-items
414pub const IS_ALIGN_ITEMS_PREFIX: &str = "is-align-items";
415/// Used to create classes using the `is-align-self-*` prefix.
416///
417/// Used to create classes using the `is-align-self-*` prefix, such as those
418/// from the [Flexbox Bulma helpers][bd].
419///
420/// # Examples
421///
422/// ```rust
423/// use yew::prelude::*;
424/// use yew_and_bulma::{
425/// helpers::flexbox::AlignSelf,
426/// helpers::visibility::Display,
427/// utils::constants::IS_PREFIX,
428/// utils::constants::IS_ALIGN_SELF_PREFIX,
429/// };
430///
431/// // Create a `<div>` HTML element that has the center align self value.
432/// // The `<p>` children are there to highlight the align (might need resize
433/// // of the screen size to become evident).
434/// #[function_component(AlignSelfCenterDiv)]
435/// fn align_self_center_div() -> Html {
436/// let display = Display::Flex;
437/// let align_self = AlignSelf::Center;
438/// let class = classes![
439/// format!("{IS_PREFIX}-{display}"),
440/// format!("{IS_ALIGN_SELF_PREFIX}-{align_self}"),
441/// ];
442/// html!{
443/// <div class={class}>
444/// <p>{ "Lorem ispum..." }</p>
445/// <p>{ "Lorem ispum..." }</p>
446/// <p>{ "Lorem ispum..." }</p>
447/// </div>
448/// }
449/// }
450/// ```
451///
452/// [bd]: https://bulma.io/documentation/helpers/flexbox-helpers/#align-self
453pub const IS_ALIGN_SELF_PREFIX: &str = "is-align-self";
454/// Used to create classes using the `is-flow-grow-*` prefix.
455///
456/// Used to create classes using the `is-flow-grow-*` prefix, such as those
457/// from the [Flexbox Bulma helpers][bd].
458///
459/// # Examples
460///
461/// ```rust
462/// use yew::prelude::*;
463/// use yew_and_bulma::{
464/// helpers::flexbox::FlexShrinkGrowFactor,
465/// helpers::visibility::Display,
466/// utils::constants::IS_PREFIX,
467/// utils::constants::IS_FLEX_GROW_PREFIX,
468/// };
469///
470/// // Create a `<div>` HTML element that has the flex display.
471/// // The `<p>` children are there to highlight the flex grow (might need
472/// // resize of the screen size to become evident). The first element is the
473/// // one having the flex grow set.
474/// #[function_component(FlexGrow2Div)]
475/// fn flex_grow_2_div() -> Html {
476/// let display = Display::Flex;
477/// let grow_factor = FlexShrinkGrowFactor::Two;
478/// let display_class = classes![format!("{IS_PREFIX}-{display}")];
479/// let grow_class = classes![format!("{IS_FLEX_GROW_PREFIX}-{grow_factor}")];
480/// html!{
481/// <div class={display_class}>
482/// <p class={grow_class}>{ "Lorem ispum..." }</p>
483/// <p>{ "Lorem ispum..." }</p>
484/// <p>{ "Lorem ispum..." }</p>
485/// </div>
486/// }
487/// }
488/// ```
489///
490/// [bd]: https://bulma.io/documentation/helpers/flexbox-helpers/#flex-grow-and-flex-shrink
491pub const IS_FLEX_GROW_PREFIX: &str = "is-flex-grow";
492/// Used to create classes using the `is-flow-shrink-*` prefix.
493///
494/// Used to create classes using the `is-flow-shrink-*` prefix, such as those
495/// from the [Flexbox Bulma helpers][bd].
496///
497/// # Examples
498///
499/// ```rust
500/// use yew::prelude::*;
501/// use yew_and_bulma::{
502/// helpers::flexbox::FlexShrinkGrowFactor,
503/// helpers::visibility::Display,
504/// utils::constants::IS_PREFIX,
505/// utils::constants::IS_FLEX_SHRINK_PREFIX,
506/// };
507///
508/// // Create a `<div>` HTML element that has the flex display.
509/// // The `<p>` children are there to highlight the flex shrink (might need
510/// // resize of the screen size to become evident). The first element is the
511/// // one having the flex shrink set.
512/// #[function_component(FlexShrink2Div)]
513/// fn flex_shrink_2_div() -> Html {
514/// let display = Display::Flex;
515/// let shrink_factor = FlexShrinkGrowFactor::Two;
516/// let display_class = classes![format!("{IS_PREFIX}-{display}")];
517/// let shrink_class = classes![format!("{IS_FLEX_SHRINK_PREFIX}-{shrink_factor}")];
518/// html!{
519/// <div class={display_class}>
520/// <p class={shrink_class}>{ "Lorem ispum..." }</p>
521/// <p>{ "Lorem ispum..." }</p>
522/// <p>{ "Lorem ispum..." }</p>
523/// </div>
524/// }
525/// }
526/// ```
527///
528/// [bd]: https://bulma.io/documentation/helpers/flexbox-helpers/#flex-grow-and-flex-shrink
529pub const IS_FLEX_SHRINK_PREFIX: &str = "is-flex-shrink";
530/// Defines the `is-clearfix` [Bulma helper class][bd].
531///
532/// Defines the `is-clearfix` class described in the [other Bulma helpers][bd].
533///
534/// # Examples
535///
536/// ```rust
537/// use yew::prelude::*;
538/// use yew_and_bulma::utils::constants::IS_CLEARFIX;
539///
540/// // Create a `<div>` HTML element that fixes its floating children.
541/// #[function_component(FlexDiv)]
542/// fn flex_div() -> Html {
543/// html!{
544/// <div class={IS_CLEARFIX}>{ "Lorem ispum..." }</div>
545/// }
546/// }
547/// ```
548///
549/// [bd]: https://bulma.io/documentation/helpers/other-helpers/
550pub const IS_CLEARFIX: &str = "is-clearfix";
551/// Defines the `is-pulled-left` [Bulma helper class][bd].
552///
553/// Defines the `is-pulled-left` class described in the
554/// [other Bulma helpers][bd].
555///
556/// # Examples
557///
558/// ```rust
559/// use yew::prelude::*;
560/// use yew_and_bulma::utils::constants::IS_PULLED_LEFT;
561///
562/// // Create a `<div>` HTML element that is moved to the left.
563/// #[function_component(FlexDiv)]
564/// fn flex_div() -> Html {
565/// html!{
566/// <div class={IS_PULLED_LEFT}>{ "Lorem ispum..." }</div>
567/// }
568/// }
569/// ```
570///
571/// [bd]: https://bulma.io/documentation/helpers/other-helpers/
572pub const IS_PULLED_LEFT: &str = "is-pulled-left";
573/// Defines the `is-pulled-right` [Bulma helper class][bd].
574///
575/// Defines the `is-pulled-right` class described in the
576/// [other Bulma helpers][bd].
577///
578/// # Examples
579///
580/// ```rust
581/// use yew::prelude::*;
582/// use yew_and_bulma::utils::constants::IS_PULLED_RIGHT;
583///
584/// // Create a `<div>` HTML element that is moved to the right.
585/// #[function_component(FlexDiv)]
586/// fn flex_div() -> Html {
587/// html!{
588/// <div class={IS_PULLED_RIGHT}>{ "Lorem ispum..." }</div>
589/// }
590/// }
591/// ```
592///
593/// [bd]: https://bulma.io/documentation/helpers/other-helpers/
594pub const IS_PULLED_RIGHT: &str = "is-pulled-right";
595/// Defines the `is-overlay` [Bulma helper class][bd].
596///
597/// Defines the `is-overlay` class described in the [other Bulma helpers][bd].
598///
599/// # Examples
600///
601/// ```rust
602/// use yew::prelude::*;
603/// use yew_and_bulma::utils::constants::IS_OVERLAY;
604///
605/// // Create a `<div>` HTML element that covers its first positioned parent.
606/// #[function_component(FlexDiv)]
607/// fn flex_div() -> Html {
608/// html!{
609/// <div class={IS_OVERLAY}>{ "Lorem ispum..." }</div>
610/// }
611/// }
612/// ```
613///
614/// [bd]: https://bulma.io/documentation/helpers/other-helpers/
615pub const IS_OVERLAY: &str = "is-overlay";
616/// Defines the `is-clipped` [Bulma helper class][bd].
617///
618/// Defines the `is-clipped` class described in the [other Bulma helpers][bd].
619///
620/// # Examples
621///
622/// ```rust
623/// use yew::prelude::*;
624/// use yew_and_bulma::utils::constants::IS_CLIPPED;
625///
626/// // Create a `<div>` HTML element that has its overflow hidden.
627/// #[function_component(FlexDiv)]
628/// fn flex_div() -> Html {
629/// html!{
630/// <div class={IS_CLIPPED}>{ "Lorem ispum..." }</div>
631/// }
632/// }
633/// ```
634///
635/// [bd]: https://bulma.io/documentation/helpers/other-helpers/
636pub const IS_CLIPPED: &str = "is-clipped";
637/// Defines the `is-shadowless` [Bulma helper class][bd].
638///
639/// Defines the `is-shadowless` class described in the
640/// [other Bulma helpers][bd].
641///
642/// # Examples
643///
644/// ```rust
645/// use yew::prelude::*;
646/// use yew_and_bulma::utils::constants::IS_RADIUSLESS;
647///
648/// // Create a `<div>` HTML element that is radiusless.
649/// #[function_component(FlexDiv)]
650/// fn flex_div() -> Html {
651/// html!{
652/// <div class={IS_RADIUSLESS}>{ "Lorem ispum..." }</div>
653/// }
654/// }
655/// ```
656///
657/// [bd]: https://bulma.io/documentation/helpers/other-helpers/
658pub const IS_RADIUSLESS: &str = "is-radiusless";
659/// Defines the `is-radiusless` [Bulma helper class][bd].
660///
661/// Defines the `is-radiusless` class described in the
662/// [other Bulma helpers][bd].
663///
664/// # Examples
665///
666/// ```rust
667/// use yew::prelude::*;
668/// use yew_and_bulma::utils::constants::IS_SHADOWLESS;
669///
670/// // Create a `<div>` HTML element that is shadowless.
671/// #[function_component(FlexDiv)]
672/// fn flex_div() -> Html {
673/// html!{
674/// <div class={IS_SHADOWLESS}>{ "Lorem ispum..." }</div>
675/// }
676/// }
677/// ```
678///
679/// [bd]: https://bulma.io/documentation/helpers/other-helpers/
680pub const IS_SHADOWLESS: &str = "is-shadowless";
681/// Defines the `is-unselectable` [Bulma helper class][bd].
682///
683/// Defines the `is-unselectable` class described in the
684/// [other Bulma helpers][bd].
685///
686/// # Examples
687///
688/// ```rust
689/// use yew::prelude::*;
690/// use yew_and_bulma::utils::constants::IS_UNSELECTABLE;
691///
692/// // Create a `<div>` HTML element that is unselectable.
693/// #[function_component(FlexDiv)]
694/// fn flex_div() -> Html {
695/// html!{
696/// <div class={IS_UNSELECTABLE}>{ "Lorem ispum..." }</div>
697/// }
698/// }
699/// ```
700///
701/// [bd]: https://bulma.io/documentation/helpers/other-helpers/
702pub const IS_UNSELECTABLE: &str = "is-unselectable";
703/// Defines the `is-clickable` [Bulma helper class][bd].
704///
705/// Defines the `is-clickable` class described in the
706/// [other Bulma helpers][bd].
707///
708/// # Examples
709///
710/// ```rust
711/// use yew::prelude::*;
712/// use yew_and_bulma::utils::constants::IS_CLICKABLE;
713///
714/// // Create a `<div>` HTML element that displays as clickable.
715/// #[function_component(FlexDiv)]
716/// fn flex_div() -> Html {
717/// html!{
718/// <div class={IS_CLICKABLE}>{ "Lorem ispum..." }</div>
719/// }
720/// }
721/// ```
722///
723/// [bd]: https://bulma.io/documentation/helpers/other-helpers/
724pub const IS_CLICKABLE: &str = "is-clickable";
725/// Defines the `is-relative` [Bulma class][bd].
726///
727/// Defines the `is-relative` class described in the [other Bulma helpers][bd].
728///
729/// # Examples
730///
731/// ```rust
732/// use yew::prelude::*;
733/// use yew_and_bulma::utils::constants::IS_RELATIVE;
734///
735/// // Create a `<div>` HTML element that has the position set to relative.
736/// #[function_component(FlexDiv)]
737/// fn flex_div() -> Html {
738/// html!{
739/// <div class={IS_RELATIVE}>{ "Lorem ispum..." }</div>
740/// }
741/// }
742/// ```
743///
744/// [bd]: https://bulma.io/documentation/helpers/other-helpers/
745pub const IS_RELATIVE: &str = "is-relative";
746/// Defines the `is-light` [Bulma class][bd].
747///
748/// Defines the `is-light` class, used for shading the color of various
749/// elements and components, such as the [`crate::elements::button::Button`] or
750/// [`crate::elements::tag::Tag`].
751///
752/// # Examples
753///
754/// ```rust
755/// use yew::prelude::*;
756/// use yew_and_bulma::utils::constants::IS_LIGHT;
757///
758/// // Create a `<div>` HTML element that has the color set to light.
759/// #[function_component(LightDiv)]
760/// fn light_div() -> Html {
761/// html!{
762/// <div class={IS_LIGHT}>{ "Lorem ispum..." }</div>
763/// }
764/// }
765/// ```
766///
767/// [bd]: https://bulma.io/documentation/customize/variables/
768pub const IS_LIGHT: &str = "is-light";
769/// Used to create classes using the `are-*` prefix.
770///
771/// Used to create classes using the `are-*` prefix, such as size modifiers for
772/// the [`crate::elements::button::Buttons`].
773///
774/// # Examples
775///
776/// ```rust
777/// use yew::prelude::*;
778/// use yew_and_bulma::utils::constants::ARE_PREFIX;
779///
780/// // Create a `<div>` HTML element that has the buttons small.
781/// #[function_component(SmallButtonsDiv)]
782/// fn small_buttons_div() -> Html {
783/// let class = format!("buttons {ARE_PREFIX}-small");
784///
785/// html!{
786/// <div {class}>{ "Lorem ispum..." }</div>
787/// }
788/// }
789/// ```
790///
791/// [bd]: https://bulma.io/documentation/customize/variables/
792pub const ARE_PREFIX: &str = "are";
793/// Used to create classes using the `is-offset-*` offset.
794///
795/// Used to create classes using the `is-offset-*` offset, such as those from
796/// the [Bulma column sizes][bd].
797///
798/// # Examples
799///
800/// ```rust
801/// use yew::prelude::*;
802/// use yew_and_bulma::{
803/// helpers::visibility::Display,
804/// utils::constants::IS_OFFSET_PREFIX,
805/// };
806///
807/// // Create a `<div>` HTML element that has the offset set to half.
808/// #[function_component(OffsetDiv)]
809/// fn offset_div() -> Html {
810/// let class = classes![format!("{IS_OFFSET_PREFIX}-half")];
811/// html!{
812/// <div class={class}>{ "Lorem ispum..." }</div>
813/// }
814/// }
815/// ```
816///
817/// [bd]: https://bulma.io/documentation/columns/sizes/#offset
818pub const IS_OFFSET_PREFIX: &str = "is-offset";
819/// Defines the `is-narrow` [Bulma class][bd].
820///
821/// Defines the `is-narrow` class, used for elements such as the
822/// [`crate::elements::table::Table`] or [`crate::columns::Column`].
823///
824/// # Examples
825///
826/// ```rust
827/// use yew::prelude::*;
828/// use yew_and_bulma::utils::constants::IS_NARROW;
829///
830/// // Create a `<div>` HTML element that has the narrow class set.
831/// #[function_component(NarrowDiv)]
832/// fn narrow_div() -> Html {
833/// html!{
834/// <div class={IS_NARROW}>{ "Lorem ispum..." }</div>
835/// }
836/// }
837/// ```
838///
839/// [bd]: https://bulma.io/documentation/customize/variables/
840pub const IS_NARROW: &str = "is-narrow";