@flourish/ui-styles
v6.0.0
Published
Flourish module for styling UI elements
Downloads
667
Maintainers
Keywords
Readme
Flourish UI Styles
Style UI elements (like @flourish/controls) in Flourish templates.
How to install
npm install -s @flourish/ui-styles
Add one or more control style objects to your template state:
export var state = {
controls_style: {},
button_style: {},
dropdown_style: {},
slider_style: {},
}
Import settings for controls styling in your template.yml
settings.
- property: controls_style
import: "@flourish/ui-styles/controls-style"
- property: dropdown_style
import: "@flourish/ui-styles/dropdown-style"
- property: button_style
import: "@flourish/ui-styles/button-style"
- property: slider_style
import: "@flourish/ui-styles/slider-style"
Basics
Initialise the styling outside any function or in a special init function:
import { createGeneralControlsStyle, createButtonStyle, createDropdownStyle, createSliderStyle } from "@flourish/ui-styles";
var controlsStyle = createGeneralControlsStyle(state.controls_style, ".fl-control"),
buttonStyle = createButtonStyle(state.button_style, ".fl-control-buttons"),
dropdownStyle = createDropdownStyle(state.dropdown_style, ".fl-control-dropdown");
sliderStyle = createSliderStyle(state.slider_style, ".fl-control-slider");
The init function takes the state object as a first argument. The second argument is the target container for styling. If you are using @flourish/controls you can just use the selectors in the code above.
If you're using this on custom HTML, make sure to target the direct parent container of your controls, and make sure to give your controls a classname of fl-control
. If you're using specifically the button styles with custom HTML make sure your buttons also have a button
class and your selected elements a selected
class.
Then in the update function, make sure to update the styles with update()
. To ensure right-to-left read direction support works correctly call the style update functions after the read direction of the template has been updated (i.e. layout.update()
has been called).
controlsStyle.update();
buttonStyle.update();
dropdownStyle.update();
sliderStyle.update();
Using defaults from @flourish/layout
There is an optional feature that allows you to inherit text and background color from the layout module. Just pass in the layout state object as a third argument when initializing the styles.
import { createButtonStyle } from "@flourish/ui-styles";
var buttonStyle = createButtonStyle(state.button_style, ".fl-control-buttons", state.layout);