-
Notifications
You must be signed in to change notification settings - Fork 70
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
13 changed files
with
334 additions
and
14 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
28 changes: 28 additions & 0 deletions
28
packages/html/src/toolbar/templates/toolbar-scrollable.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,28 @@ | ||
| import { Toolbar } from "../toolbar.spec"; | ||
| import { Button } from '../../button'; | ||
| import { ButtonGroup } from '../../button-group'; | ||
| import { MenuButton } from '../../menu-button'; | ||
| import { SplitButton } from '../../split-button'; | ||
|
|
||
| export const ToolbarScrollable = (props) => ( | ||
| <Toolbar scrollable {...props} children={[ | ||
| <Button key="toolbar-button">Button</Button>, | ||
| <MenuButton key="toolbar-menu-button" text="Menu button"></MenuButton>, | ||
| <SplitButton key="toolbar-split-button">Split button</SplitButton>, | ||
| <ButtonGroup key="toolbar-button-group"> | ||
| <Button className="k-group-start" icon="align-left">Left</Button> | ||
| <Button icon="align-center">Center</Button> | ||
| <Button className="k-group-end" icon="align-right">Right</Button> | ||
| </ButtonGroup>, | ||
| <Button key="toolbar-button">Button</Button>, | ||
| <MenuButton key="toolbar-menu-button" text="Menu button"></MenuButton>, | ||
| <SplitButton key="toolbar-split-button">Split button</SplitButton>, | ||
| <ButtonGroup key="toolbar-button-group"> | ||
| <Button className="k-group-start" icon="align-left">Left</Button> | ||
| <Button icon="align-center">Center</Button> | ||
| <Button className="k-group-end" icon="align-right">Right</Button> | ||
| </ButtonGroup> | ||
| ]} | ||
| {...props}> | ||
| </Toolbar> | ||
| ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,35 @@ | ||
| import { Toolbar } from "../toolbar.spec"; | ||
| import { Button } from '../../button'; | ||
| import { ButtonGroup } from '../../button-group'; | ||
| import { MenuButton } from '../../menu-button'; | ||
| import { SplitButton } from '../../split-button'; | ||
| import { ToolbarSeparator } from "../toolbar-separator"; | ||
| import ToolbarPopup from "../toolbar-popup.spec"; | ||
|
|
||
| export const ToolbarSection = ({ fillMode, size, ...other }: any) => ( | ||
| <> | ||
| <Toolbar section fillMode={fillMode} size={size} children={[ | ||
| <Button key="toolbar-button" fillMode={fillMode} size={size}>Button</Button>, | ||
| <MenuButton key="toolbar-menu-button" fillMode={fillMode} size={size} text="Menu button"></MenuButton>, | ||
| <ButtonGroup key="toolbar-button-group" fillMode={fillMode}> | ||
| <Button className="k-group-start" icon="align-left" fillMode={fillMode} size={size}>Left</Button> | ||
| <Button icon="align-center" fillMode={fillMode} size={size}>Center</Button> | ||
| <Button className="k-group-end" icon="align-right" fillMode={fillMode} size={size}>Right</Button> | ||
| </ButtonGroup>, | ||
| <ToolbarSeparator className="k-toolbar-overflow-separator" />, | ||
| <Button icon="more-horizontal" className="k-toolbar-overflow-button" fillMode="flat" rounded={null}></Button> | ||
| ]} | ||
| {...other}> | ||
| </Toolbar> | ||
| <ToolbarPopup size={size} section {...other} > | ||
| <SplitButton key="toolbar-split-button" fillMode={fillMode} size={size}>Split button</SplitButton> | ||
| <Button key="toolbar-button" fillMode={fillMode} size={size}>Button</Button> | ||
| <MenuButton key="toolbar-menu-button" text="Menu button" fillMode={fillMode} size={size}></MenuButton> | ||
| <ButtonGroup key="toolbar-button-group" fillMode={fillMode}> | ||
| <Button className="k-group-start" icon="align-left" fillMode={fillMode} size={size}>Left</Button> | ||
| <Button icon="align-center" fillMode={fillMode} size={size}>Center</Button> | ||
| <Button className="k-group-end" icon="align-right" fillMode={fillMode} size={size}>Right</Button> | ||
| </ButtonGroup> | ||
| </ToolbarPopup> | ||
| </> | ||
| ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,40 @@ | ||
| import { ToolbarScrollable } from '..'; | ||
|
|
||
|
|
||
| export default () =>( | ||
| <> | ||
| <div id="test-area" className="k-d-grid k-grid-cols-2"> | ||
|
|
||
| <span className="k-colspan-all k-col-span-full">Toolbar Buttons Around</span> | ||
| <section className="k-colspan-all k-col-span-full"> | ||
| <ToolbarScrollable scrollButtons="around" /> | ||
| </section> | ||
|
|
||
| <span className="k-colspan-all k-col-span-full">Toolbar Buttons Start</span> | ||
| <section className="k-colspan-all k-col-span-full"> | ||
| <ToolbarScrollable scrollButtons="start" /> | ||
| </section> | ||
|
|
||
| <span className="k-colspan-all k-col-span-full">Toolbar Buttons End</span> | ||
| <section className="k-colspan-all k-col-span-full"> | ||
| <ToolbarScrollable scrollButtons="end" /> | ||
| </section> | ||
|
|
||
| <span className="k-colspan-all k-col-span-full">Toolbar No Buttons Scroll Start</span> | ||
| <section className="k-colspan-all k-col-span-full"> | ||
| <ToolbarScrollable scrollButtons="hidden" scrollingPosition="start"/> | ||
| </section> | ||
|
|
||
| <span className="k-colspan-all k-col-span-full">Toolbar No Buttons Scroll End</span> | ||
| <section className="k-colspan-all k-col-span-full"> | ||
| <ToolbarScrollable scrollButtons="hidden" scrollingPosition="end" /> | ||
| </section> | ||
|
|
||
| <span className="k-colspan-all k-col-span-full">RTL</span> | ||
| <section className="k-colspan-all k-col-span-full" dir="rtl"> | ||
| <ToolbarScrollable /> | ||
| </section> | ||
|
|
||
| </div> | ||
| </> | ||
| ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,37 @@ | ||
| import { ToolbarSection } from '../templates/toolbar-section'; | ||
|
|
||
|
|
||
| const styles = ` | ||
| .k-animation-container { | ||
| width: 100%; | ||
| } | ||
| .toolbar-popup-section { | ||
| position: relative; | ||
| height: 200px; | ||
| } | ||
| `; | ||
|
|
||
| export default () =>( | ||
| <> | ||
| <style>{styles}</style> | ||
| <div id="test-area" className="k-d-grid k-grid-cols-2"> | ||
|
|
||
| <span className="k-colspan-full k-col-span-full">Toolbar Popup Section</span> | ||
| <section className="k-colspan-1 k-col-span-1 toolbar-popup-section"> | ||
| <ToolbarSection /> | ||
| </section> | ||
|
|
||
| <span className="k-colspan-full k-col-span-full">Toolbar Popup Section Flat</span> | ||
| <section className="k-colspan-1 k-col-span-1 toolbar-popup-section"> | ||
| <ToolbarSection fillMode="flat" /> | ||
| </section> | ||
|
|
||
| <span className="k-colspan-full k-col-span-full">Toolbar Popup Section</span> | ||
| <section className="k-colspan-1 k-col-span-1 toolbar-popup-section"> | ||
| <ToolbarSection fillMode="outline" /> | ||
| </section> | ||
|
|
||
| </div> | ||
| </> | ||
| ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.