Mengawal CSS dengan Peasy-UI: Bahagian dari Siri Peasy-UI

Table of Contents

1. Introduction
2. Binding CSS Properties
   • Internal CSS
   • Inline CSS
3. The Three Helpers
   • pui-adding
   • pui-removing
   • Show/Hide Example
   • pui-moving
4. Conclusion
5. More information

Introduction

In my latest installment of the Peasy-UI library series we are going to dive another layer deeper. In this entry, we will cover how you can use both internal CSS and inline CSS bindings with Peasy-UI. We also are going cover the CSS helper classes that are made available using Peasy to assist with animations. We will dig into each of the three classes that are available, and we can cover how they can be used in your template and bind elements to these helper classes.

If you missed the introduction article for Peasy-UI, you can read it here, and it can provide the overview for the library, and even introduces upcoming topics in the series.

Binding CSS Properties

In this section, let's cover different strategies of using Peasy-UI's bindings with CSS.

Internal CSS

When I am binding style properties for a Peasy-UI component or small application, my primary approach is to use the standards block above my html that I am using. Let's take a look at a quick example.

In this example I have a toggle button, which when clicked is transitioning the elements position back and forth. The other button functions will be reviewed in their designated sections later.

In my DOM template:

...
<button \${click@=>toggle}>Toggle</button>
...
<test-element></test-element>
...

My CSS for this:

test-element {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 50px;
  aspect-ratio: 1/1;
  background-color: whitesmoke;
  border-radius: 50%;
  transform: translate(-\${leftPercent}px, 150px);
  transition: transform 0.9s ease-in-out, scale 0.9s ease-in-out;
  scale: 1;
}

In my data model, our logic:

const model = {
  toggleFlag: true,
  leftPercent: 0,
  toggle: (_element: HTMLElement, model: any) => {
    if (model.toggleFlag) model.leftPercent = 100;
    else model.leftPercent = 0;
    model.toggleFlag = !model.toggleFlag;
  },
};

When the toggle method is fired by clicking the button, we use the model.toggleFlag to track our toggle state, and also set the model.leftPercent property to different values. This is the first way I bind CSS properties in Peasy-UI. Another trick I use is I can change the color string of CSS property to transition colors as well. As a general reminder, the first parameter of a Peasy-UI callback is the parent element of the event, and if I'm not using it in the current method, I designate it with the _ prefix. For more details on how Peasy-UI binds event callbacks, a prior article addresses it in a deeper context: Event Binding.

test-element {
  ...
  background-color: \${colorString};
  ...
}

  const model = {
    ...
    colorString: "whitesmoke",
    ...
  };

I can just change the string to other css colorstrings to change the elements color, or you can use a hexstring.

Inline CSS

For more complicated CSS manipulation, sometimes I have added bindings to inline class attributes on elements. That way I can bind a string in the data model, and can control specifically what CSS classes I want active on an element. Let's take a look at a quick example.

In this demonstration you see the test element is toggled on its scale property. Let's take a quick look at how I am accomplishing this.

In my DOM template:

...
<button \${click@=>inlinetoggle}>Inline Toggle</button>
...
<test-element class="\${testClassName}"></test-element>
...

my css for this:

test-element {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 50px;
  aspect-ratio: 1/1;
  background-color: whitesmoke;
  border-radius: 50%;
  transform: translate(-\${leftPercent}px, 150px);
  transition: transform 0.9s ease-in-out, scale 0.9s ease-in-out;
  scale: 1;
}

.scaleTestElement {
  scale: 1.5;
}

and in my data model:

export const model = {
  ...
  inlinetoggleFlag: false,
  testClassName: "",
  ...
  inlinetoggle: (_element: HTMLElement, model: any) => {
    if (model.inlinetoggleFlag)  model.testClassName = "";
    else  model.testClassName = "scaleTestElement";
    model.inlinetoggleFlag = !model.inlinetoggleFlag;
  },
};

Let's breakdown what aspects are highlighted here. Let's start with the toggle button being used to trigger the change, that's a simple button element with a click event binding the inlinetoggle method in the data model to the button. When that method is called, the data model uses a toggle flag, model.inlinetoggleFlag to track a toggle state, and it also changes the model.testClassName string. In the template DOM, the test-element has a class attribute with a string binding in it. When you update the string in the data model, the new class gets added to the element, changing the scale property. The transition property of the element covers the scale property as well.

The Three Helpers

This section will describe the functionality and implementation details of three built-in CSS helper classes that are used in Peasy-UI. This features happen natively regardless if they are taken advantage of or not. These three helpers are: pui-adding, pui-removing, and pui-moving. These are CSS class names added to elements that are being manipulated by Peasy-UI, and are available to be leveraged for managing transitions.

pui adding

The pui-adding CSS class is added to an element when it transitions from not rendered to rendered. This can happen in a couple scenarios. If you are adding an element to a list that's rendered with the <=* binding, then that new element receives the pui-adding class. Another means of adding an element is by using the rendering binding === or !==. To review the available bindings for Peasy-UI, you can reference this article on the bindings here:Bindings and Templates: Part 2 of the Peasy-UI series

The duration of the CSS class being adding is until any transitions tied to pui-adding class is complete. Let's take a deeper look at this.

const model = {
  isDivShowing: false,
};

const template = `

<style>
    .child{
      opacity: 1;
      transition: opacity 1.0s;
    }

    .child.pui-adding{
      opacity: 0;
    }
</style>

<div class="parent">
  <div class="child" \#{===isDivShowing}>
      Hello World
  </div>
</div>
`;

UI.create(document.body, model, template);

In this example what you will see is that when you set model.isDivShowing to true, Peasy-UI will add the element to the DOM, starting with the pui-addding class. The pui-adding class will automatically be removed from the element upon the completion of the 1 second CSS transition that is set for the opacity property.

pui removing

You will see that the pui-removing class helper is the opposite of pui-adding.

The pui-removing CSS class is added to an element when it transitions from rendered to not rendered. This can happen in a couple scenarios. If you are removing an element from a list that's rendered with the <=* binding, then that element which is being removed receives the pui-removing CSS class. Another means of removing an element is by using the rendering binding === or !==.

The duration of the class removing is until any transitions tied to pui-removing class is complete. Let's take a deeper look at this.

const model = {
  isDivShowing: true,
};

const template = `

<style>
    .child{
      opacity: 1;
      transition: opacity 1.0s;
    }

    .child.pui-removing{
      opacity: 0;
    }
</style>

<div class="parent">
  <div class="child" \#{===isDivShowing}>
      Hello World
  </div>
</div>
`;

UI.create(document.body, model, template);

In this example, what you will see is that when you set model.isDivShowing to false, Peasy-UI will add the pui-removing class to the element prior to transitioning the element from the DOM. The pui-removing class will remain on the element upon the completion of the 1 second CSS transition that is set for the opacity property, of which the entire element is removed from the DOM completely.

Show Hide Example

In this example we are working with a DOM template that renders this:

<div>
    <div class="controls">
        <button \${click@=>hide}>Hide</button>
        <button \${click@=>show}>Show</button>
        <button \${click@=>move}>Move</button>
    </div>
    <element-container>
        <inner-element \${el<=*elements}>
            \${el.id}
        </inner-element>
    </element-container>
</div>

In this example, we have replaced standard

You can see the inner-element div has a list binding that takes the elements array and lists out an inner-element for each item in the list, and places the .id property of each object into the content for the element.

For the sake of this quick demo, we are using a fixed data model: (showing only the elements array)

export const model = {
  elements: [
    {
      id: 1,
    },
    {
      id: 2,
    },
    {
      id: 3,
    },
  ],
  //... click bindings below

What is important here is the CSS styling we added to the rendered template

inner-element {
  ...
  /*other properties that aren't relevant above*/
  transition: opacity 0.9s, background-color 1.2s;
  opacity: 1;
  background-color: whitesmoke;
}

inner-element.pui-adding {
  opacity: 0;
}

inner-element.pui-removing {
  opacity: 0;
}

In the click handlers for the Hide and Show buttons, we are removing and adding the elements from the array. Nothing fancy, but it exercises how Peasy-UI uses the helper classes to manage the CSS transitions. Either helper CSS classes are added, and then the opacity transition of 0.9 seconds starts, then the class is removed. This is how you can use Peasy-UI to manage element transitions.

pui moving

The pui-moving CSS class is added to an element when the element is a part of a list or array, and moves indexes within that list.

The duration of the class adding is until any transitions tied to pui-moving class is complete. Let's take a quick look at this.

In this example, we will call a function that changes the order in the list of elements. When we change the index positions, the pui-moving class will be added to the element. We are using the .pui-moving class to change the elements red that are moving, and this transition happens over time. After the transition period, the array is rendered with the updated order to the DOM.

Our DOM template:

<button \${click@=>move}>Move</button>
<element-container>
  <inner-element \${el<="*elements}"> \${el.id} </inner-element>
</element-container>

Our CSS:

inner-element {
  width: 100px;
  aspect-ratio: 1/1;
  background-color: whitesmoke;
  border-radius: 50%;
  color: black;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  transition: opacity 0.9s, background-color 1.2s, left 0.9s;
  opacity: 1;
  scale: 1;
  left: 0px;
}

inner-element.pui-moving {
  background-color: red;
}

and our DOM model logic:

const model ={
  elements: [...],
   move: (_element: HTMLElement, model: any) => {
    if (model.elements.length > 0) {
      if (model.elements[0].id === 1) {
        moveElement(model.elements, 0, 2);
      } else {
        moveElement(model.elements, 2, 0);
      }
    }
  },
};

function moveElement(array: any[], fromIndex: number, toIndex: number) {
  const element = array.splice(fromIndex, 1)[0]; 
  array.splice(toIndex, 0, element); position
}

We have a button element that triggers a toggle of sorts, but only based on the content of the elements array in the data model. If the element in the zero index position has an id of 1, then we move that element to the 3rd position, index 2. Otherwise, we move the element from index 2 into index 0. One observation that can be made, is that moving one element actually forces all the elements in this example to move, therefore, all three elements get the pui-moving class added.

Kesimpulan

Tumpuan kami dalam artikel ini dalam siri Peasy-UI ialah CSS. Kami telah melihat ke dalam pengikatan CSS dalaman dan sebaris, dengan sampel kod dan contoh. Seterusnya kami membincangkan tiga kelas pembantu CSS yang tersedia untuk digunakan, menambah pui, membuang pui dan memindahkan pui. Contoh kami dalam artikel ini adalah mudah, tetapi seseorang boleh melihat cara ia boleh digunakan untuk menyediakan tahap kawalan DOM yang canggih.

Dalam entri seterusnya, kami akan menggali konsep Peasy-UI yang paling rumit, dan memecahkannya kepada bahagian yang lebih kecil: menggunakan Peasy-UI untuk membuat komponen yang boleh digunakan semula.

Maklumat lanjut

Maklumat lanjut boleh didapati dalam repo GitHub untuk Peasy-Lib, anda juga akan menemui semua pakej pendamping lain di sana juga. Selain itu, Peasy mempunyai pelayan Discord tempat kami melepak dan membincangkan Peasy serta membantu satu sama lain.

Twitter pengarang: Di sini

Gatal pengarang: Di sini

Repo Github Peasy-UI: Di Sini

Peasy Discord Server: Di Sini

Atas ialah kandungan terperinci Mengawal CSS dengan Peasy-UI: Bahagian dari Siri Peasy-UI. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!