Measurements
To integrate the PhotoEditor SDK UI seamlessly into your application we provide the option to change the height and width of the different components
Following are the available customizations:
The values will accept the pixel amount as a number
advancedUIToolbar
: Customizations for Advanced UI toolbar.width
: Changes the width of Advanced UI toolbar.
basicUIToolbar
: Customizations for Basic UI toolbar.openHeight
: Changes the height of Basic UI toolbar, in when a tool is selected.closeHeight
: Changes the height of Basic UI toolbar, in when no tool is selected.
mainCanvasActionBar
: Customizations for Main canvas action bar in both UIs.height
: Changes the height of main canvas action bar.
canvas
: Customization for the CanvasmarginTop
: This value can be used in combination with an opaquemainCanvasActionBar.background
color to prevent canvas elements to be hidden behind the Main canvas action bar
colorItem
: Customization for the ColorItemsize
: Changes the height and width of the ColorItem
fontSystem
: Customization for the Font System of the UIheadline1
: ToolControlBar titlesize
: Font size in pixelletterSpacing
: Letter spacing in pixelcase
: Text transform property
headline2
: Modal title, ToolControlBar subtitlesbody
: Overlay type carousel, input field text, dropdown text, modal bodylabel
: Card labels, input labels, tooltipbasicUICardLabel
: Basic ui card labelbutton1
: Contained Buttons and Button base classbutton2
: Text button, dropdown items, canvas action buttonsbasicUITabLabel
: Tab text
Use an opaque color for the main canvas action bar
const editor = await PhotoEditorSDKUI.init({
custom: {
themes: {
dark: {
mainCanvasActionBar: {
background: "#365afc",
},
},
},
measurements: {
mainCanvasActionBar: {
height: 48,
},
canvas: {
marginTop: 48,
},
},
},
});
Remove the uppercase text transform from the titles
const editor = await PhotoEditorSDKUI.init({
custom: {
measurements: {
fontSystem: {
headline1: { size: 16, letterSpacing: 1.5, case: "capitalize" },
headline2: { size: 14, letterSpacing: 0.8, case: "capitalize" },
},
},
},
});