Skip to content
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
add popper demo
  • Loading branch information
siriwatknp committed Jun 20, 2024
commit 17dd4742ca7417c90435de818b90e5e4730c919a
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
'use client';
import * as React from 'react';
import PopperPopupState from '../../../../../../docs/data/material/components/popper/PopperPopupState';
import PositionedPopper from '../../../../../../docs/data/material/components/popper/PositionedPopper';
import SimplePopper from '../../../../../../docs/data/material/components/popper/SimplePopper';
import SpringPopper from '../../../../../../docs/data/material/components/popper/SpringPopper';
import TransitionsPopper from '../../../../../../docs/data/material/components/popper/TransitionsPopper';
import VirtualElementPopper from '../../../../../../docs/data/material/components/popper/VirtualElementPopper';

export default function Popper() {
return (
<React.Fragment>
<section>
<h2> Popper Popup State</h2>
<div className="demo-container">
<PopperPopupState />
</div>
</section>
<section>
<h2> Positioned Popper</h2>
<div className="demo-container">
<PositionedPopper />
</div>
</section>
<section>
<h2> Simple Popper</h2>
<div className="demo-container">
<SimplePopper />
</div>
</section>
<section>
<h2> Spring Popper</h2>
<div className="demo-container">
<SpringPopper />
</div>
</section>
<section>
<h2> Transitions Popper</h2>
<div className="demo-container">
<TransitionsPopper />
</div>
</section>
<section>
<h2> Virtual Element Popper</h2>
<div className="demo-container">
<VirtualElementPopper />
</div>
</section>
</React.Fragment>
);
}
52 changes: 52 additions & 0 deletions apps/pigment-css-vite-app/src/pages/material-ui/react-popper.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
import * as React from 'react';
import MaterialUILayout from '../../Layout';
import PopperPopupState from '../../../../../docs/data/material/components/popper/PopperPopupState.tsx';
import PositionedPopper from '../../../../../docs/data/material/components/popper/PositionedPopper.tsx';
import SimplePopper from '../../../../../docs/data/material/components/popper/SimplePopper.tsx';
import SpringPopper from '../../../../../docs/data/material/components/popper/SpringPopper.tsx';
import TransitionsPopper from '../../../../../docs/data/material/components/popper/TransitionsPopper.tsx';
import VirtualElementPopper from '../../../../../docs/data/material/components/popper/VirtualElementPopper.tsx';

export default function Popper() {
return (
<MaterialUILayout>
<h1>Popper</h1>
<section>
<h2> Popper Popup State</h2>
<div className="demo-container">
<PopperPopupState />
</div>
</section>
<section>
<h2> Positioned Popper</h2>
<div className="demo-container">
<PositionedPopper />
</div>
</section>
<section>
<h2> Simple Popper</h2>
<div className="demo-container">
<SimplePopper />
</div>
</section>
<section>
<h2> Spring Popper</h2>
<div className="demo-container">
<SpringPopper />
</div>
</section>
<section>
<h2> Transitions Popper</h2>
<div className="demo-container">
<TransitionsPopper />
</div>
</section>
<section>
<h2> Virtual Element Popper</h2>
<div className="demo-container">
<VirtualElementPopper />
</div>
</section>
</MaterialUILayout>
);
}