Customize the look and feel of the widget to match the design of your dApp and suit your needs
theme
configuration option allows you to customize various aspects of the widget’s appearance, including colors, typography, shapes, and component styles.
container
option customizes the main container of the widget. In the example below, we adjust the border and border-radius properties of the container.
palette
option defines the color palette for the widget. You can customize the background colors, greyscale colors, primary and secondary colors, and text colors.
The shape
option defines border-radius overrides for all elements in the widget.
The typography
option customizes the font settings like font families.
Let’s proceed with the theme and adjust the primary and secondary colors of the inner elements, along with the font family and border-radius.
components
option allows you to customize the styles of specific components within the widget.
The current list of available components with more to come:
outlined
, elevation
, and filled
. They can be set using defaultProps
option (see example below).
palette.background.paper
property).
split
subvariant).
components
option, each component can be customized using the MUI’s styleOverrides
property, allowing for granular control over its styling.
Let’s take a look at the example, which shows how we can use card component variants together with overriding tabs component styles.
@lifi/widget
package.
appearance
option is set to auto
, matching the user’s system settings for dark and light modes.
Now, let’s set the default appearance to dark.
686px
. This requires no change to the config but fundamentally works in the same way as the restricted max height.
686
which is the default value of the widget’s height.
Page height can change across pages
686
which is the default value of the widget’s height.
Page height stays consistent across pages
For use on smaller screens
display: 'flex'
and height: '100%'
to instruct the widget to occupy the full space of the containing HTML element and to also allow the use of flex layout in some parts of the widget to try to better use available screen space.
position: 'fixed'
and a top value (above we use top: 0
)
top: 60
theme.header
the widget’s header will be scroll with the rest of the widget pages content.
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
100dvh
with the min-height css which means that if widgets pages are bigger than this that the page can still scroll to allow access to that widget content. Also this means that when widget’s pages are smaller than the viewport they can scale and position elements using flex to better use the available space to occupy the full screen height.
overscroll-behavior: none;
to the root/body of your page to prevent undesired scrolling behavior.
maxHeight
property.
maxHeight
is not specified, the default value of 686px
is applied.
disabledUI
property allows you to specify which UI elements should be disabled in the widget. Disabling UI elements can be useful to prevent user interaction with certain parts of the widget that might not be necessary or desirable for your specific implementation.
The DisabledUI
enum specifies UI elements that can be disabled to prevent user interaction.
hiddenUI
property allows you to specify which UI elements should be hidden in the widget. This is useful for tailoring the user interface to fit your specific needs by removing elements that might not be relevant for your use case.
The HiddenUI
enum specifies UI elements that can be hidden from the UI.
requiredUI
property allows you to specify which UI elements should be required in the widget. This means that the user must interact with these elements for the widget to proceed with swapping/bridging. This is useful for ensuring that certain critical inputs are provided by the user.
The RequiredUI
enum specifies UI elements that are required to be filled out or interacted with by the user.