Hi,
I am able to increase width and add text to dock handle, however, what if I have more docks on one page and they all needs to have different content. Is there a way to tie CSS with DockID.
Is this Perspective? And you added this to the stylesheet.css?
You can add a new style to the Styles list - it can be empty - and then assign that style to the elements that you want to apply this to.
Add the new style name to the selectors in the css file.
For example, your new style could be called LabeledDock.
The selector becomes something like
.psc-labeleddock .docked-view.docked-view-bottom .toggle-wrapper .view-toggle
Yes I used Advanced Stylesheet.CSS.
I understand the concept of creating a style, but its limited to applying to views. However what I find difficult is, if there are 2 bottom docks it would apply same content since style is created for
.docked-view.docked-view-bottom .toggle-wrapper .view-toggle
I need to be able to change content on dock handle if I have multiple docks in the view bottom.
Is it possible to do that?
Are the multiple docks separate Perspective views? Do those separate views have their own component.props.style property?
mutilple bottom docks and yes they have separate perspective views. and they do have their component.props.style.
but how will it allow me to change text on the dock handle?
You probably can't.
If there are a small number of different dock labels you could define one for each in the stylesheet.css and then use the style selectors to attach them to the correct one.
If there are too many to manage this way (or the text is dynamic) then you need a different approach.
One possible approach might be to put a label in the dock that shows the text that you want. Then use styles and css to offset it to a position outside of the dock. You will need to set the clip behavior so that it is shown even though it is outside of its container.