PDA

View Full Version : How to create a custom ui mixin?



JeromeA
30 Mar 2012, 10:03 AM
Hi,

I know that you can easily create a ui for button, panel, window, toolbar because they have the "-ui" mixin. But what if I want to create a custom ui mixin for a menu for example?

I see that the menu element (xtype=menu) contains a UI config, so in theory, I should be able to assign a ui value. Does anyone have ever done that?...

I tried to copy the button logic. When I look at the widgets\_button.scss the mixin is declare this way:
@mixin extjs-button-ui(
$ui
//etc...
) {...}

the UI is referenced this way inside the mixin


.#{$prefix}btn-#{$ui} {...}
how would I know how the menu element ui need to be called?... i tried this without success


@mixin sms-menu-ui (
$ui,
$background-color: #ff0000
) {

.#{$prefix}menu-#{$ui}-body {
background: $background-color;
}
}

@include sms-menu-ui(
'test',
$background-color: blue
);

I need a little starter because what I tried didn't work and i can't find anybody that did that so far. Is there suppose to be more ui mixin for the future? is it possible top create ui for menu element? is there a guide on how to build them?

thanks

mitchellsimoens
30 Mar 2012, 10:26 AM
Are you doing the @include within a class?


.something {
@include blah($arg1, $arg2)
}

JeromeA
30 Mar 2012, 11:16 AM
no i was not, so i tried this


@mixin sms-menu-ui (
$background-color: red
) {

.#{$prefix}menu-body {
background: $background-color;
}
}

.sms-test {
@include sms-menu-ui(
$background-color: blue
);
}

and then assign the ui like that in the config of the element


ui: 'sms-test'

but it didn't work either... do you think you can provide a simple example of a ui mixin on a menu or any element that dont have a default 'ui' mixin... I'm sure it would benefit the community.

thanks a lot!

gilmaredo@gmail.com
10 Sep 2013, 5:36 AM
Good morning, i need create a mixin to, but i don't know how do it.
Somebody can speak something about this?
Thanks.

JeromeA
10 Sep 2013, 7:18 AM
Hi
here's an simple example of a mixin I created:



@mixin sms-label-ui(
$ui-label,
$ui-color,
$ui-font-family,
$ui-font-size,
$ui-font-weight
){


.x-component-#{$ui-label} {
color: $ui-color;
font-family: $ui-font-family;
font-size: $ui-font-size;
font-weight: $ui-font-weight;
}
};


And here's how you use it:


@include sms-label-ui(
'sms-label-h1',
$ui-font-size: 40px,
$ui-font-family: 'Tahoma',
$ui-font-weight: bold,
$ui-color: #ff0000
);

Then in Architect, all you need to do is set the UI config of your label to 'sms-label-h1'.