Creating Custom Icon for Smart Menu

Extending AbstractSmartMenuItem

To create custom icon, it can extend from AbstractSmartMenuItem for easier implementation. Implementation is a big word here, as all we need to do is to prepare appropriate properties values. This is especially useful when creating reusable icons.

For example, let's override run() method, and set some attribute and then add it to smart menu:

class MyExampleIcon extends AbstractSmartMenuItem
{

    public function run()
    {
        $this->attributes['onclick'] = "app.message('Hello World!')";
        $this->icon = 'fa-snowflake-o';
        return parent::run();
    }

}

Smart::fly()->add(new MyExampleIcon);

Icon is now visible in smart menu, check this by clicking icon on top of page. Click on it to see message.

Creating from scratch with SmartIconInterface

When any custom HTML need to be added to icon pane of smart menu, such and icon can be created by implementing SmartIconInterface interface. Even when implementing this interface, there is a helper base class MsWidgetto make creating any widgets easier. This also provides factory method widget() for configuration type of initialization.

Two methods are essential for icon:

• init() - Place any initialization code here, all properties will be set according to configuration passed to constructor or factory method widget().
• run() - This must return HTML which will be inserted into smart menu.

class MyExampleFromScratch extends MsWidget implements SmartIconInterface
{

    public $message = '';

    public function init()
    {
        $this->message = htmlspecialchars($this->message);
    }

    public function run()
    {
        $jsMessage = JavaScript::encode($this->message);
        $attributes = [
            'class' => 'fa fa-automobile',
            'onclick' => "app.message($jsMessage);"
        ];
        $htmlAttrs = MHtml::renderAttributes($attributes);
        return "<i $htmlAttrs></i>";
    }

}

Smart::fly()->add(MyExampleFromScratch::widget([
    'message' => '<Example>'
]));

Above example can be checked by clicking icon on top of page. It added a new car icon, which is distinct from other icons. When clicked it will display message.