ScrollBar

Examples

Basic

export function App() {    return (        <Window>            <DemoLayout width="240dpx" height="16dpx">                <ScrollBar                    value={50}                    onScrolling={(sender) => {                        console.log(sender.GetValue());                    }}                ></ScrollBar>            </DemoLayout>        </Window>    );}

In this example, we demonstrate the basic usage of scroll bar.

Drag it and get the current positon:

Log in console:

504949484847...363635353434

In the above example, by default shrink is false, which gives us a fixed size scroll bar. To be dynamically sized, set it to true:

export function App() {    return (        <Window>            <DemoLayout width="240dpx" height="16dpx">                <ScrollBar                    value={50}                    shrink                    onScrolling={(sender) => {                        console.log(sender.GetValue());                    }}                ></ScrollBar>            </DemoLayout>        </Window>    );}

API

export interface IScrollBarComponentProps extends IComponentProps {    value: number;    shrink?: boolean;    onScrolling?: Parameters<IScrollBar['OnScrolling']>[0];}