Modify CSS and attributes

You can modify attributes and elements, thanks to web api manipulation function.

I will not cover all the possibilities but give you some simple examples.

Example with Bulma.io

Bulma is an amazing CSS framework focused only on CSS.

I will show you how you can use easly with hogosuru

First Step: import the css

There are a lots of way to do this. Usually, you import it in the same time you load the wasm.

I will use another method and show you how you can load it dynamically 👍

func main() {
	hogosuru.Init()

	// we get the current document
	if doc, err := document.New(); hogosuru.AssertErr(err) {

		//we got the head
		if head, err := doc.Head(); hogosuru.AssertErr(err) {

			if link, err := htmllinkelement.New(doc); hogosuru.AssertErr(err) {

				link.SetRel("stylesheet")
				link.SetHref("https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css")
				head.AppendChild(link.Node)

			}

		}

		if body, err := doc.Body(); hogosuru.AssertErr(err) {
			//lets create some button design with bulma

			if div, err := htmldivelement.New(doc); hogosuru.AssertErr(err) {

				if list, err := div.ClassList(); hogosuru.AssertErr(err) {
					list.Add("buttons")

				}

				if buttonprimary, err := htmlbuttonelement.New(doc); hogosuru.AssertErr(err) {

					buttonprimary.SetTextContent("Primary")
					//we get the class list attribute
					if list, err := buttonprimary.ClassList(); hogosuru.AssertErr(err) {
						list.Add("button")
						list.Add("is-primary")
					}

					buttonprimary.OnClick(func(e event.Event) {

						if list, err := buttonprimary.ClassList(); hogosuru.AssertErr(err) {

							list.Remove("is-primary")
							list.Add("is-warning")
						}
					})

					div.Append(buttonprimary.Element)
				}

				if buttondanger, err := htmlbuttonelement.New(doc); hogosuru.AssertErr(err) {

					buttondanger.SetTextContent("Danger")
					//we get the class list attribute
					if list, err := buttondanger.ClassList(); hogosuru.AssertErr(err) {
						list.Add("button")
						list.Add("is-danger")
					}

					buttondanger.OnClick(func(e event.Event) {

						if list, err := buttondanger.ClassList(); hogosuru.AssertErr(err) {

							list.Remove("is-danger")
							list.Add("is-info")
						}
					})
					div.Append(buttondanger.Element)
				}

				body.Append(div.Element)

			}

		}

	}

	ch := make(chan struct{})
	<-ch

}

Let's take a closer look at the code

First we get the head of the document, we create an htmllink with the ref to the bulma css and attach to the head

		if head, err := doc.Head(); hogosuru.AssertErr(err) {

			if link, err := htmllinkelement.New(doc); hogosuru.AssertErr(err) {

				link.SetRel("stylesheet")
				link.SetHref("https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css")
				head.AppendChild(link.Node)

			}

		}

Follow to the bulma documentation , we create an html code like this:

<div class="buttons">
  <button class="button is-primary">Primary</button>
  <button class="button is-danger">Danger</button>
</div>

We dynamically create the components, assign the class like the html above. When click on the Primary button, we change their class for warning. When click on the Danger button, we change their class for info.

if body, err := doc.Body(); hogosuru.AssertErr(err) {
	//lets create some button design with bulma

	if div, err := htmldivelement.New(doc); hogosuru.AssertErr(err) {

		if list, err := div.ClassList(); hogosuru.AssertErr(err) {
			list.Add("buttons")

		}

		if buttonprimary, err := htmlbuttonelement.New(doc); hogosuru.AssertErr(err) {

			buttonprimary.SetTextContent("Primary")
			//we get the class list attribute
			if list, err := buttonprimary.ClassList(); hogosuru.AssertErr(err) {
				list.Add("button")
				list.Add("is-primary")
			}

			buttonprimary.OnClick(func(e event.Event) {

				if list, err := buttonprimary.ClassList(); hogosuru.AssertErr(err) {

					list.Remove("is-primary")
					list.Add("is-warning")
				}
			})

			div.Append(buttonprimary.Element)
		}

		if buttondanger, err := htmlbuttonelement.New(doc); hogosuru.AssertErr(err) {

			buttondanger.SetTextContent("Danger")
			//we get the class list attribute
			if list, err := buttondanger.ClassList(); hogosuru.AssertErr(err) {
				list.Add("button")
				list.Add("is-danger")
			}

			buttondanger.OnClick(func(e event.Event) {

				if list, err := buttondanger.ClassList(); hogosuru.AssertErr(err) {

					list.Remove("is-danger")
					list.Add("is-info")
				}
			})
			div.Append(buttondanger.Element)
		}

		body.Append(div.Element)

	}

}

Click on 2 buttons

How to hide a component?

We can hide components with the style directive "Display:None".

Style can be changed with the SetProperties and RemoveProperties of the CSSStyleDeclaration

To hide a button:

if css,err:=buttondanger.Style();hogosuru.AssertErr(err) {
css.SetProperty("display", "none")
}

Access to attributes

You can Modify/Set the attributes of elements with the corresponding method available on Element

If you want create an input checkbox element, you need write

if input, err := htmlinputelement.New(d);hogosuru.AssertErr(err) {
input.SetAttribute("type", "checkbox")
}