-
-
Notifications
You must be signed in to change notification settings - Fork 32.3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[material-ui][Chip] Convert to support CSS extraction (#41592)
- Loading branch information
1 parent
9dd63c4
commit 4e9d011
Showing
3 changed files
with
454 additions
and
221 deletions.
There are no files selected for viewing
93 changes: 93 additions & 0 deletions
93
apps/pigment-css-next-app/src/app/material-ui/react-chip/page.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,93 @@ | ||
| 'use client'; | ||
| import * as React from 'react'; | ||
| import AvatarChips from '../../../../../../docs/data/material/components/chips/AvatarChips'; | ||
| import BasicChips from '../../../../../../docs/data/material/components/chips/BasicChips'; | ||
| import ChipsArray from '../../../../../../docs/data/material/components/chips/ChipsArray'; | ||
| import ClickableAndDeletableChips from '../../../../../../docs/data/material/components/chips/ClickableAndDeletableChips'; | ||
| import ClickableChips from '../../../../../../docs/data/material/components/chips/ClickableChips'; | ||
| import ClickableLinkChips from '../../../../../../docs/data/material/components/chips/ClickableLinkChips'; | ||
| import ColorChips from '../../../../../../docs/data/material/components/chips/ColorChips'; | ||
| import CustomDeleteIconChips from '../../../../../../docs/data/material/components/chips/CustomDeleteIconChips'; | ||
| import DeletableChips from '../../../../../../docs/data/material/components/chips/DeletableChips'; | ||
| import IconChips from '../../../../../../docs/data/material/components/chips/IconChips'; | ||
| import MultilineChips from '../../../../../../docs/data/material/components/chips/MultilineChips'; | ||
| import SizesChips from '../../../../../../docs/data/material/components/chips/SizesChips'; | ||
|
|
||
| export default function Chips() { | ||
| return ( | ||
| <React.Fragment> | ||
| <section> | ||
| <h2> Avatar Chips</h2> | ||
| <div className="demo-container"> | ||
| <AvatarChips /> | ||
| </div> | ||
| </section> | ||
| <section> | ||
| <h2> Basic Chips</h2> | ||
| <div className="demo-container"> | ||
| <BasicChips /> | ||
| </div> | ||
| </section> | ||
| <section> | ||
| <h2> Chips Array</h2> | ||
| <div className="demo-container"> | ||
| <ChipsArray /> | ||
| </div> | ||
| </section> | ||
| <section> | ||
| <h2> Clickable And Deletable Chips</h2> | ||
| <div className="demo-container"> | ||
| <ClickableAndDeletableChips /> | ||
| </div> | ||
| </section> | ||
| <section> | ||
| <h2> Clickable Chips</h2> | ||
| <div className="demo-container"> | ||
| <ClickableChips /> | ||
| </div> | ||
| </section> | ||
| <section> | ||
| <h2> Clickable Link Chips</h2> | ||
| <div className="demo-container"> | ||
| <ClickableLinkChips /> | ||
| </div> | ||
| </section> | ||
| <section> | ||
| <h2> Color Chips</h2> | ||
| <div className="demo-container"> | ||
| <ColorChips /> | ||
| </div> | ||
| </section> | ||
| <section> | ||
| <h2> Custom Delete Icon Chips</h2> | ||
| <div className="demo-container"> | ||
| <CustomDeleteIconChips /> | ||
| </div> | ||
| </section> | ||
| <section> | ||
| <h2> Deletable Chips</h2> | ||
| <div className="demo-container"> | ||
| <DeletableChips /> | ||
| </div> | ||
| </section> | ||
| <section> | ||
| <h2> Icon Chips</h2> | ||
| <div className="demo-container"> | ||
| <IconChips /> | ||
| </div> | ||
| </section> | ||
| <section> | ||
| <h2> Multiline Chips</h2> | ||
| <div className="demo-container"> | ||
| <MultilineChips /> | ||
| </div> | ||
| </section> | ||
| <section> | ||
| <h2> Sizes Chips</h2> | ||
| <div className="demo-container"> | ||
| <SizesChips /> | ||
| </div> | ||
| </section> | ||
| </React.Fragment> | ||
| ); | ||
| } |
94 changes: 94 additions & 0 deletions
94
apps/pigment-css-vite-app/src/pages/material-ui/react-chip.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,94 @@ | ||
| import * as React from 'react'; | ||
| import MaterialUILayout from '../../Layout'; | ||
| import AvatarChips from '../../../../../docs/data/material/components/chips/AvatarChips.tsx'; | ||
| import BasicChips from '../../../../../docs/data/material/components/chips/BasicChips.tsx'; | ||
| import ChipsArray from '../../../../../docs/data/material/components/chips/ChipsArray.tsx'; | ||
| import ClickableAndDeletableChips from '../../../../../docs/data/material/components/chips/ClickableAndDeletableChips.tsx'; | ||
| import ClickableChips from '../../../../../docs/data/material/components/chips/ClickableChips.tsx'; | ||
| import ClickableLinkChips from '../../../../../docs/data/material/components/chips/ClickableLinkChips.tsx'; | ||
| import ColorChips from '../../../../../docs/data/material/components/chips/ColorChips.tsx'; | ||
| import CustomDeleteIconChips from '../../../../../docs/data/material/components/chips/CustomDeleteIconChips.tsx'; | ||
| import DeletableChips from '../../../../../docs/data/material/components/chips/DeletableChips.tsx'; | ||
| import IconChips from '../../../../../docs/data/material/components/chips/IconChips.tsx'; | ||
| import MultilineChips from '../../../../../docs/data/material/components/chips/MultilineChips.tsx'; | ||
| import SizesChips from '../../../../../docs/data/material/components/chips/SizesChips.tsx'; | ||
|
|
||
| export default function Chips() { | ||
| return ( | ||
| <MaterialUILayout> | ||
| <h1>Chips</h1> | ||
| <section> | ||
| <h2> Avatar Chips</h2> | ||
| <div className="demo-container"> | ||
| <AvatarChips /> | ||
| </div> | ||
| </section> | ||
| <section> | ||
| <h2> Basic Chips</h2> | ||
| <div className="demo-container"> | ||
| <BasicChips /> | ||
| </div> | ||
| </section> | ||
| <section> | ||
| <h2> Chips Array</h2> | ||
| <div className="demo-container"> | ||
| <ChipsArray /> | ||
| </div> | ||
| </section> | ||
| <section> | ||
| <h2> Clickable And Deletable Chips</h2> | ||
| <div className="demo-container"> | ||
| <ClickableAndDeletableChips /> | ||
| </div> | ||
| </section> | ||
| <section> | ||
| <h2> Clickable Chips</h2> | ||
| <div className="demo-container"> | ||
| <ClickableChips /> | ||
| </div> | ||
| </section> | ||
| <section> | ||
| <h2> Clickable Link Chips</h2> | ||
| <div className="demo-container"> | ||
| <ClickableLinkChips /> | ||
| </div> | ||
| </section> | ||
| <section> | ||
| <h2> Color Chips</h2> | ||
| <div className="demo-container"> | ||
| <ColorChips /> | ||
| </div> | ||
| </section> | ||
| <section> | ||
| <h2> Custom Delete Icon Chips</h2> | ||
| <div className="demo-container"> | ||
| <CustomDeleteIconChips /> | ||
| </div> | ||
| </section> | ||
| <section> | ||
| <h2> Deletable Chips</h2> | ||
| <div className="demo-container"> | ||
| <DeletableChips /> | ||
| </div> | ||
| </section> | ||
| <section> | ||
| <h2> Icon Chips</h2> | ||
| <div className="demo-container"> | ||
| <IconChips /> | ||
| </div> | ||
| </section> | ||
| <section> | ||
| <h2> Multiline Chips</h2> | ||
| <div className="demo-container"> | ||
| <MultilineChips /> | ||
| </div> | ||
| </section> | ||
| <section> | ||
| <h2> Sizes Chips</h2> | ||
| <div className="demo-container"> | ||
| <SizesChips /> | ||
| </div> | ||
| </section> | ||
| </MaterialUILayout> | ||
| ); | ||
| } |
Oops, something went wrong.