Scroll
Scroll indicator, the shadow, provides an extra visual cue that content exists below or above the fold.
const loremIpsum ='Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod temporincididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.';render (<Stack><Scroll height="100px" className="m-r-3" scrollIndicator><BodyText>With scroll indicator. {loremIpsum}</BodyText></Scroll><Scroll height="100px" className="m-r-3"><BodyText>{loremIpsum}</BodyText></Scroll></Stack>)
Maximum width and height may be set explicitly via props, as in example above. Size also may be controlled by external container.
const loremIpsum ='Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod temporincididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.';render (<Card padding="none" light className="of-hidden"><Card.Section style={{ height: '100px' }}><Scroll scrollIndicator><div className="m-x-2 m-y-2"><BodyText>Height is controlled by container.</BodyText><BodyText className="m-t-1">{loremIpsum}</BodyText><BodyText className="m-t-1">{loremIpsum}</BodyText></div></Scroll></Card.Section></Card>);
If content goes further rigth side of the Scroll, it may reflect such behavior.
<State initial={{}}>{([state, setState]) => {const names =['Ben Ho', 'Matt Felton', 'James Coyle', 'Sergey Ya', 'Ara Mah', 'Doctor Rex', 'Alex Star', 'Trent Walton', 'Crazy Horse', 'Greg High', 'John Puy', 'Elen Lupton', 'Karl Wisley', 'Pol Obrian',];return (<Card light className="of-hidden"><Card.Section className="h3">Participants</Card.Section><Card.Section className="p-0"><Scroll horizontal="scroll" scrollIndicator><div className="m-x-2 m-y-2 d-f">{names.map((name, nameIndex) => (<div className="m-r-2" key={`name${nameIndex}`}><AvatarautoColorname={name}size="l"/></div>))}</div></Scroll></Card.Section></Card>);}}</State>
User is capable to scroll content even without visible scrollbar.
<State initial={{}}>{([state, setState]) => {const loremIpsum ='Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod temporincididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.';return (<div className="m-t-8"><Popoverdirection="tr"opentrigger={<Button>Popover</Button>}padding={null}><Scroll height="118px" scrollbar="hidden" scrollIndicator><div className="p-x-3 p-y-2"><BodyText>{loremIpsum}</BodyText></div></Scroll></Popover></div>);}}</State>
Scroll component intended to be used in:
<State initial={{}}>{([state, setState]) => {const loremIpsum ='Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod temporincididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.';return (<Modaltitle="Modal Title"closableopenonClose={() => {}}footer={<ButtonGroup><Button>Cancel</Button><Button primary>Save</Button></ButtonGroup>}portal={false}size={Modal.Sizes.S}><divstyle={{margin: `-${tokens.spacing3} -${tokens.spacing4}`,height: `calc(100% + ${tokens.spacing5})`,}}><Scroll scrollIndicator><div className="p-3"><BodyText>{loremIpsum}</BodyText><BodyText className="m-t-2">{loremIpsum}</BodyText></div></Scroll></div></Modal>);}}</State>
<State initial={{}}>{([state, setState]) => {const loremIpsum ='Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod temporincididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.';return (<Draweropenheader="Drawer"onClose={() => {}}portal={false}footer={<ButtonGroup><Button>Cancel</Button><Button primary>Save</Button></ButtonGroup>}><divstyle={{margin: `-${tokens.spacing3}`,height: `calc(100% + ${tokens.spacing5})`,}}><Scroll scrollIndicator><div className="p-3"><BodyText>{loremIpsum}</BodyText><BodyText className="m-t-2">{loremIpsum}</BodyText><BodyText className="m-t-2">{loremIpsum}</BodyText><BodyText className="m-t-2">{loremIpsum}</BodyText></div></Scroll></div></Drawer>);}}</State>
<State initial={{}}>{([state, setState]) => {const loremIpsum ='Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod temporincididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.';return (<TakeoverbackLabel="Previous Page"title="Takeover Title"footer={<ButtonGroup><Button>Cancel</Button><Button primary>Save</Button></ButtonGroup>}footerAlign="right"onClose={() => {}}portal={false}><Takeover.Sectionstyle={{ padding: '0px', height: '100%' }}><Scroll scrollIndicator><div className="p-3"><BodyText>{loremIpsum}</BodyText><BodyText className="m-t-2">{loremIpsum}</BodyText><BodyText className="m-t-2">{loremIpsum}</BodyText><BodyText className="m-t-2">{loremIpsum}</BodyText></div></Scroll></Takeover.Section></Takeover>);}}</State>
import { Scroll } from '@servicetitan/design-system';