Configuration
Prefix
You can change the prefix of the modifiers by setting the `prefix` option. This is useful if you want to introduce PhlexyUI into a project without clashing with existing CSS classes.
1
# config/initializers/phlexy_ui.rb
2
PhlexyUI.configure do |config|
3
config.prefix = "foo-"
4
end
This will add the `foo-` prefix to all the modifiers. For example:
1
Card :compact do
2
end
Will render as:
1
<section class="foo-card foo-card-compact"></section>
Custom Modifiers
Component specific modifiers
PhlexyUI allows you to add custom modifiers to your components. These modifiers are used to add custom styles to your components. For example:
1
# config/initializers/phlexy_ui.rb
2
PhlexyUI.configure do |config|
3
config.modifiers.add(
4
:my_modifier,
5
component: PhlexyUI::Card,
6
classes: "w-96 shadow-xl"
7
)
8
end
This will add a `my-modifier` modifier to the `Card` component. You can then use this modifier in your components like this:
1
Card :my_modifier do
2
end
Which will render as:
1
<section class="card w-96 shadow-xl"></section>
Global modifiers
You can also add a modifier to all components by adding a global modifier. For example:
1
# config/initializers/phlexy_ui.rb
2
PhlexyUI.configure do |config|
3
config.modifiers.add(
4
:my_global_modifier,
5
classes: "w-96 shadow-xl"
6
)
7
end
This will add a `my_global_modifier ` modifier to all components. For example:
1
Card :my_global_modifier do
2
end
3
4
Button :my_global_modifier do
5
end
Which will render as:
1
<section class="card w-96 shadow-xl"></section>
2
<button class="button w-96 shadow-xl"></button>