Struct yew_styles::text::Text

pub struct Text { /* fields omitted */ }

Text

Features required

text

Example

use lipsum::lipsum;
use wasm_bindgen::JsCast;
use web_sys::Element;
use yew::prelude::*;
use yew::utils;
use yew_styles::layouts::{
    container::{Container, Direction, Wrap},
    item::{Item, ItemLayout},
};
use yew_styles::styles::{Palette, Size, Style};
use yew_styles::text::{Text, TextType};

pub enum Msg {
  Dragged(DragEvent),
  DraggedOver(DragEvent),
  Dropped(DragEvent),
}

pub struct TextExample {
 link: ComponentLink<Self>,
}

impl Component for TextPage {
    type Message = Msg;
    type Properties = ();

    fn create(_: Self::Properties, link: ComponentLink<Self>) -> Self {
        TextPage { link }
    }

    fn update(&mut self, msg: Self::Message) -> ShouldRender {
        match msg {
            Msg::Dragged(drag_event) => {
                let target_id = drag_event
                    .target()
                    .unwrap()
                    .dyn_into::<Element>()
                    .unwrap()
                    .id();

                drag_event
                    .data_transfer()
                    .unwrap()
                    .set_data("application/text-component", &target_id)
                    .unwrap();

                drag_event.data_transfer().unwrap().set_drop_effect("move");
            }
            Msg::DraggedOver(drag_event) => {
                drag_event.prevent_default();

                drag_event.data_transfer().unwrap().set_drop_effect("move");
            }

            Msg::Dropped(drag_event) => {
                drag_event.prevent_default();

                let data = drag_event
                    .data_transfer()
                    .unwrap()
                    .get_data("application/text-component")
                    .unwrap();

                let target_element = drag_event.target().unwrap().dyn_into::<Element>().unwrap();

                target_element
                    .append_child(&utils::document().get_element_by_id(&data).unwrap())
                    .unwrap();
            }
        };
        true
    }

    fn change(&mut self, _props: Self::Properties) -> ShouldRender {
        false
    }

    fn view(&self) -> Html {
        html! {
            <Container wrap = Wrap::Wrap direction = Direction::Row>
                <Item layouts=vec!(ItemLayout::ItL(4), ItemLayout::ItM(6), ItemLayout::ItXs(12))>
                    <div
                        ondrop=self.link.callback(|e| Msg::Dropped(e))
                        ondragover=self.link.callback(|e| Msg::DraggedOver(e))
                        class="tag-box"
                    >
                        {get_draggable_tags(self.link.clone())}
                    </div>
                </Item>
                <Item layouts=vec!(ItemLayout::ItL(4), ItemLayout::ItM(6), ItemLayout::ItXs(12))>
                    <div ondrop=self.link.callback(Msg::Dropped)
                        ondragover=self.link.callback(Msg::DraggedOver)
                        class="tag-box">
                    </div>
                </Item>
            </Container>
        }
    }
}

fn get_draggable_tags(link: ComponentLink<TextPage>) -> Html {
    let styles = vec![Style::Regular, Style::Outline, Style::Light];
    let palette = vec![Palette::Success, Palette::Warning, Palette::Danger];
    let mut index = 0;
     
    styles
        .into_iter()
        .map(|style| {
            palette
                .clone()
                .into_iter()
                .map(|item_palette| {
                    let text_view = html! {
                        <Text
                            class_name="draggable-tag"
                            id=format!("tag-{}", index)
                            draggable=true
                            ondragstart_signal=link.callback(Msg::Dragged)
                            text_type=TextType::Tag
                            text_size=Size::Medium
                            text=lipsum(1).replace(".", "")
                            text_style=style.clone()
                            text_palette=item_palette
                            interaction_effect= true
                        />
                    };
     
                    index += 1;
     
                    text_view
                })
                .collect::<Html>()
    })
    .collect::<Html>()
}

Trait Implementations

impl Component for Text

type Message = Msg

Messages are used to make Components dynamic and interactive. Simple Component's can declare their Message type to be (). Complex Component's commonly use an enum to declare multiple Message types.

type Properties = Props

Properties are the inputs to a Component and should not mutated within a Component. They are passed to a Component using a JSX-style syntax. # use yew::{Html, Component, Properties, ComponentLink, html}; # struct Model; # #[derive(Clone, Properties)] # struct Props { # prop: String, # } # impl Component for Model { # type Message = ();type Properties = Props; # fn create(props: Self::Properties,link: ComponentLink<Self>) -> Self {unimplemented!()} # fn update(&mut self,msg: Self::Message) -> bool {unimplemented!()} # fn change(&mut self, _: Self::Properties) -> bool {unimplemented!()} # fn view(&self) -> Html { html! { <Model prop="value" /> } # }}

fn create(props: Self::Properties, link: ComponentLink<Self>) -> Self

Components are created with their properties as well as a ComponentLink which can be used to send messages and create callbacks for triggering updates.

fn update(&mut self, msg: Self::Message) -> ShouldRender

Components handle messages in their update method and commonly use this method to update their state and (optionally) re-render themselves.

fn change(&mut self, props: Self::Properties) -> ShouldRender

When the parent of a Component is re-rendered, it will either be re-created or receive new properties in the change lifecycle method. Component's can choose to re-render if the new properties are different than the previously received properties. Most Component's will use props with a PartialEq impl and will be implemented like this: # use yew::{Html, Component, ComponentLink, html, ShouldRender}; # struct Model{props: ()}; # impl Component for Model { # type Message = ();type Properties = (); # fn create(props: Self::Properties,link: ComponentLink<Self>) -> Self {unimplemented!()} # fn update(&mut self,msg: Self::Message) -> bool {unimplemented!()} # fn view(&self) -> Html {unimplemented!()} fn change(&mut self, props: Self::Properties) -> ShouldRender { if self.props != props { self.props = props; true } else { false } } # } Components which don't have properties should always return false.

fn view(&self) -> Html

Components define their visual layout using a JSX-style syntax through the use of the html! procedural macro. The full guide to using the macro can be found in Yew's documentation.

fn rendered(&mut self, _first_render: bool)

The rendered method is called after each time a Component is rendered but before the browser updates the page. ## Examples ```rust # use yew::{Html, Component, ComponentLink, html, ShouldRender}; # struct Model{props: ()}; # impl Model { fn setup_element(&self) { } } # impl Component for Model { # type Message = ();type Properties = (); # fn create(props: Self::Properties,link: ComponentLink) -> Self {unimplemented!()} # fn update(&mut self,msg: Self::Message) -> bool {unimplemented!()} # fn view(&self) -> Html {unimplemented!()} # fn change(&mut self, _props: Self::Properties) -> ShouldRender { unimplemented!() } fn rendered(&mut self, first_render: bool) { if first_render { self.setup_element(); // Similar to 'mounted' in other frameworks } } # }

fn destroy(&mut self)

The destroy method is called right before a Component is unmounted.