Components
Here, you can find all the available components. They make it easier and faster to create a website design as they contain ready-to-use styles, content, and logic. In addition, components can nest other components.
How to Add a Component
There are several ways to add the needed component to your page. You may want to grab it from the panel with the mouse and drop in the desired place. If you left-click a component, it is added to the bottom of the page. Also, you can click on the  “+” button on the block to add a component.
About props
To ensure flexibility, components come with props (properties) — through them, you can manage and configure settings. For example, the GoogleMap component contains the “query” property where you can enter the address of the marker that you’d like to appear on the map. A component may have various props, and it’s very convenient to use them.
Component copies synchronization
Another important feature is that all copies of the component are synchronized on the page, so if you change something in the original code of a component, all of its copies change too. It’s useful when a component is repeated on all pages, for example, a header or a footer.
System components
There are 2 types of components: system and custom.
The system ones consist of:
  • Primitives
  • Quarkly UI component library
Primitives are the simplest, basic components for a wide variety of tasks. Quarkly UI components are the complex, composite components designed for specific tasks.
Custom components (created by users)
About custom components
Custom components are needed for the cases when you would like to create your own component from elements on the page or configure it in the code. Components created from page elements come with an interesting option — if you change one copy of this component, you can also change other copies accordingly using the “Push to Master” command. Custom components, just like the other, have the props panel with style and functional properties. Inner properties of custom components can be transferred to the props panel, they will appear under the “Props” section. In custom components, it’s also possible to import other components and modules from npm.
Context menu for a component
You can call the context menu for a component. The menu contains a list of actions you can do to the component. To call it, mouse over the component and right-click on it.
Creating a Component on a Page
Choose any element (only one, but it can contain others) on a page, click “...” on the props panel and choose “Convert to Component”. In addition, a component can be created with a combination of keys: cmd(ctrl) + alt + k. After that, a window for entering a component name will appear, type in a unique name and click “Save”.
Detaching a component (transforming back into an element)
A custom component can be transformed back into the element or group of elements it had been created from. For this, you need to choose only one component, click “...” on the props panel and choose “Detach”. This action can also be performed by pressing the combination of keys: cmd(ctrl) + alt + b.
Important! If the custom component code had been edited before, the transformation can go wrong.
Overrides
You can change styles and content of a parent element as well as all children elements of a custom component. These changes are called overrides.
Reset Overrides and Reset All Overrides
If you changed a custom component and then decided to get back to its original version (Master), use the reset option. For that, choose only one component, click on the “...” button and select “Reset Overrides”. If you want to reset the changes for all elements, both parent and children ones, click “Reset All Overrides”.
Push to Master and Push All to Master
If you changed a custom component and would like to apply the change to all copies of this component, use the command for sending changes to Master. To do this, choose only one component, click on the “...” on the props panel and choose “Push to Master”. If you want to send changes of a parent element and all children elements to Master, click “Push All to Master”.
Important! While doing “Push to Master” and “Push All to Master”, all changed styles in the copies will be preserved (those that contain overrides). The styles will be changed only in those copies that you didn’t edit.
Save as New Component
You can create a new custom component using the existing custom component. To do this, you need to choose only one component, click “...” on the props panel and select “Save as New Component”.
Creating a Component in the Code Editor
To create a code component, click on the “+” button. It is supposed that you are familiar with JavaScript and React.js. Once you’ve chosen the component name, the code editor will open, and you’ll see a default component. Code components allow:
  • Setting up any kind of content.
  • Styling content however you like.
  • Configuring any logic.
  • Connecting npm dependencies.
  • Connecting primitives and Quarkly UI components.
  • Defining props (properties) for a component.
  • Connecting to any external databases and API.
To edit a component in the code editor, click on the “<>” button.
How to connect an npm module in components
To connect a module, just import it in the component, as though it had been already installed.
Example code:
import Particles from "react-particles-js";
Importing atomize
Atomize is a library for creating Quarkly components.
To make a user’s react component work, it’s necessary to wrap it and define the object with the following configuration:
const Dasdas = props => <div {...props}>Say hello Dasdas</div>

export default atomize(Dasdas)({
 name: "Dasdas",
 effects: {
   hover: ":hover"
 },
 normalize: true,
 mixins: true,
 description: {
   // paste here the description for your component
   en:
     "Dasdas — my awesome component",
 },

 propInfo: {
   // paste here the props description for your component
   yourCustomProps: {
     description: {en: 'test'},
     control: "input"
   }
 }
});
Component configuration fields:
  • Effects. Defines browser pseudo-classes (hover, focus, etc).
  • Description. Defines the component description that shows up when hovering the mouse cursor on its name.
  • PropInfo. Configures controls that will be displayed on the right panel (props tab).
How to display needed properties on the props panel
Here’s how to define properties that will be displayed on the right panel (props tab):
propInfo: {
   yourCustomProps: { // property name
       description: { en: "test" }, // locale-specific description
       control: "input" // control type
   }
}
Possible control types:
  • input
  • text-area
  • select
  • color
  • image
  • font
  • shadow
  • transition
  • transform
  • filter
  • background
  • checkbox-icon
  • radio-icon
  • radio-group
  • checkbox
How to import primitives into your custom component
import { PrimitiveComponentName } from "@quarkly/widgets";
How to import components from Quarkly UI into your custom component
import { QuarklyUIComponentName } from "@quarkly/components";
How to import your components into other custom components you have
import MyComponent from "./MyComponent";
Keyframe animation
In the current version, it is possible to animate only a custom code component using  animation and keyframes.
Here’s a step-by-step guide on how to apply rotating animation to an element:
  1. Create a code component. Click on the + button in the Project section of the Components tab.
  2. Import dependencies from styled-components into the component:
    import styled, { keyframes } from "styled-components";
  3. Create a rotate variable with keyframes and styles:
    const rotate = keyframes`
      0% {
        transform: rotate(0deg);
        background-color: #ff4400;
      }
      50% {
        transform: rotate(180deg);
        background-color: #000000;
      }
      100% {
        transform: rotate(360deg);
        background-color: #ff4400;
      }
    `;
  4. Create a component using styled-components:
    const Rotate = styled.div`
      display: inline-block;
      padding: 2rem 1rem;
      border-radius: 10px;
      font-size: 1.2rem;
      background: red;
    `;
  5. Add the animation property to the rotate variable:
    const Rotate = styled.div`
      animation: ${rotate} 2s linear infinite;
      display: inline-block;
      padding: 2rem 1rem;
      border-radius: 10px;
      font-size: 1.2rem;
      background: red;
    `;
Here’s the whole component code:
import atomize from "@quarkly/atomize";
// Import the keyframes
import styled, { keyframes } from "styled-components";
// Create the keyframes
const rotate = keyframes`
  0% {
    transform: rotate(0deg);
    background-color: #ff4400;
  }
  50% {
    transform: rotate(180deg);
    background-color: #000000;
  }
  100% {
    transform: rotate(360deg);
    background-color: #ff4400;
  }
`;
// Here we create a component that will rotate everything we pass in over two seconds
const Rotate = styled.div`
  display: inline-block;
  animation: ${rotate} 2s linear infinite;
  padding: 2rem 1rem;
  border-radius: 10px;
  font-size: 1.2rem;
  background: red;
`;

export default atomize(Rotate)({
  name: "Rotate Animation",
  effects: {
    hover: ":hover"
  },
  normalize: true,
  mixins: true,
  description: {
    // paste here the description for your component
    en:
      "Rotate Animation Component",
  },
  propInfo: {
    // paste here the props description for your component
    yourCustomProps: {
      control: "input"
    }
  }
});