Sapphire Documentation

Sapphire provides a components system based like in frontend frameworks (vue, angular). Components are not reactive (they do not re-render at state change yet).

They are used to render page layouts.

Components consists of 2 main elements:

• Component controller (Name.component.php)
• Component view (Name.onyx)

Using component in onyx

#component("ComponentName", [
    "title" => "First parameter"
])

Component controller

Contains methods and properties of component and control component view.

You can add there component helpers (Translation, Styles, Assets)

<?php
    use Sapphire\Component\Component;
    use Sapphire\Component\Helpers\Styles;

    return (new class extends Component {
          use Styles;

          public int $number = 0;
  
          public function Mounted(): void {
               $this->number = random_int(0, 100);
          }
  
          ///////////////////////////////////////////////////////////
          // Rendering (.onyx, .php or .html)
          ///////////////////////////////////////////////////////////
          public function View(): string {
              return "ComponentView.onyx"; 
          }
      });

Component view

Contains onyx code that tells how to render component

<?php use Sapphire\Page\Page; ?>

<div class="view">
    -- Using other classess --
    <h1 class="header">{Page::Current()->GetName()}</h1>

    -- Using component properties (generated in component controller) --
    Random number: {$props->number}

    <hr>

    -- Using parameters passed for component --
    {$params->parameter_name}
</div>

-- Linking styles --
#{Styles(style: "Filename.css", scoped: true)}

Component styling

You can easily add styles into every component (using Styles helper). Sapphire automatically adds style file into component.

#{Styles(style: "Filename.css", scoped:  true)}

Sapphire also provides way to scope styles, if scoped parameter is enabled then you can use scopes inside style.

To scope element add prefix @ inside style.

@ .topbar {
    background: #0004;
}

Component helpers

• Sapphire\Component\Helpers\Translator
• Sapphire\Component\Helpers\Styles
• Sapphire\Component\Helpers\Assets