mirror of
https://github.com/jgthms/bulma.git
synced 2024-10-17 09:04:18 +00:00
Add all Elements
This commit is contained in:
Jeremy Thomas
parent
5b9f3a0d2a
commit
7670f4eed9
@ -8,7 +8,17 @@
|
|||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="root"></div>
|
<div id="root"></div>
|
||||||
<div class="box">Box</div>
|
<div class="is-hidden">
|
||||||
|
<div class="box"></div>
|
||||||
|
<div class="content"></div>
|
||||||
|
<div class="delete"></div>
|
||||||
|
<div class="icon"></div>
|
||||||
|
<div class="notification"></div>
|
||||||
|
<div class="progress"></div>
|
||||||
|
<div class="table"></div>
|
||||||
|
<div class="tag"></div>
|
||||||
|
<div class="title"></div>
|
||||||
|
</div>
|
||||||
<script type="module" src="/src/main.jsx"></script>
|
<script type="module" src="/src/main.jsx"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -11,7 +11,16 @@ import Typography from "./pages/Typography";
|
|||||||
import Other from "./pages/Other";
|
import Other from "./pages/Other";
|
||||||
import Generic from "./pages/Generic";
|
import Generic from "./pages/Generic";
|
||||||
import Skeleton from "./pages/Skeleton";
|
import Skeleton from "./pages/Skeleton";
|
||||||
import Box from "./pages/Box";
|
|
||||||
|
import Box from "./pages/elements/Box";
|
||||||
|
import Content from "./pages/elements/Content";
|
||||||
|
import Delete from "./pages/elements/Delete";
|
||||||
|
import Icon from "./pages/elements/Icon";
|
||||||
|
import Notification from "./pages/elements/Notification";
|
||||||
|
import Progress from "./pages/elements/Progress";
|
||||||
|
import Table from "./pages/elements/Table";
|
||||||
|
import Tag from "./pages/elements/Tag";
|
||||||
|
import Title from "./pages/elements/Title";
|
||||||
|
|
||||||
const SUFFIX_TO_KIND = {
|
const SUFFIX_TO_KIND = {
|
||||||
"-h": "hue",
|
"-h": "hue",
|
||||||
@ -29,6 +38,14 @@ const PAGE_TO_COMPONENT = {
|
|||||||
generic: <Generic />,
|
generic: <Generic />,
|
||||||
skeleton: <Skeleton />,
|
skeleton: <Skeleton />,
|
||||||
box: <Box />,
|
box: <Box />,
|
||||||
|
content: <Content />,
|
||||||
|
delete: <Delete />,
|
||||||
|
icon: <Icon />,
|
||||||
|
notification: <Notification />,
|
||||||
|
progress: <Progress />,
|
||||||
|
table: <Table />,
|
||||||
|
tag: <Tag />,
|
||||||
|
title: <Title />,
|
||||||
};
|
};
|
||||||
const PAGE_IDS = [
|
const PAGE_IDS = [
|
||||||
"colors",
|
"colors",
|
||||||
@ -38,6 +55,14 @@ const PAGE_IDS = [
|
|||||||
"generic",
|
"generic",
|
||||||
"skeleton",
|
"skeleton",
|
||||||
"box",
|
"box",
|
||||||
|
"content",
|
||||||
|
"delete",
|
||||||
|
"icon",
|
||||||
|
"notification",
|
||||||
|
"progress",
|
||||||
|
"table",
|
||||||
|
"tag",
|
||||||
|
"title",
|
||||||
];
|
];
|
||||||
|
|
||||||
export const CustomizerContext = createContext({
|
export const CustomizerContext = createContext({
|
||||||
@ -51,7 +76,7 @@ export const CustomizerContext = createContext({
|
|||||||
function App() {
|
function App() {
|
||||||
const initialContext = {
|
const initialContext = {
|
||||||
cssvars: {},
|
cssvars: {},
|
||||||
currentPage: "box",
|
currentPage: "delete",
|
||||||
getVar: (id) => {
|
getVar: (id) => {
|
||||||
return context.cssvars[id];
|
return context.cssvars[id];
|
||||||
},
|
},
|
||||||
@ -96,14 +121,19 @@ function App() {
|
|||||||
};
|
};
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
// const elements = document.querySelectorAll("html, .box");
|
|
||||||
// const allStyles = Array.from(elements).map((element) =>
|
|
||||||
// getComputedStyle(element),
|
|
||||||
// );
|
|
||||||
|
|
||||||
const styles = {
|
const styles = {
|
||||||
root: window.getComputedStyle(document.documentElement),
|
root: window.getComputedStyle(document.documentElement),
|
||||||
box: window.getComputedStyle(document.querySelector(".box")),
|
box: window.getComputedStyle(document.querySelector(".box")),
|
||||||
|
content: window.getComputedStyle(document.querySelector(".content")),
|
||||||
|
delete: window.getComputedStyle(document.querySelector(".delete")),
|
||||||
|
icon: window.getComputedStyle(document.querySelector(".icon")),
|
||||||
|
notification: window.getComputedStyle(
|
||||||
|
document.querySelector(".notification"),
|
||||||
|
),
|
||||||
|
progress: window.getComputedStyle(document.querySelector(".progress")),
|
||||||
|
table: window.getComputedStyle(document.querySelector(".table")),
|
||||||
|
tag: window.getComputedStyle(document.querySelector(".tag")),
|
||||||
|
title: window.getComputedStyle(document.querySelector(".title")),
|
||||||
};
|
};
|
||||||
|
|
||||||
const cssvars = {};
|
const cssvars = {};
|
||||||
@ -117,6 +147,30 @@ function App() {
|
|||||||
if (key.startsWith("box")) {
|
if (key.startsWith("box")) {
|
||||||
scope = ".box";
|
scope = ".box";
|
||||||
original = styles.box.getPropertyValue(`--bulma-${key}`);
|
original = styles.box.getPropertyValue(`--bulma-${key}`);
|
||||||
|
} else if (key.startsWith("content")) {
|
||||||
|
scope = ".content";
|
||||||
|
original = styles.content.getPropertyValue(`--bulma-${key}`);
|
||||||
|
} else if (key.startsWith("delete")) {
|
||||||
|
scope = ".delete";
|
||||||
|
original = styles.delete.getPropertyValue(`--bulma-${key}`);
|
||||||
|
} else if (key.startsWith("icon")) {
|
||||||
|
scope = ".icon";
|
||||||
|
original = styles.icon.getPropertyValue(`--bulma-${key}`);
|
||||||
|
} else if (key.startsWith("notification")) {
|
||||||
|
scope = ".notification";
|
||||||
|
original = styles.notification.getPropertyValue(`--bulma-${key}`);
|
||||||
|
} else if (key.startsWith("progress")) {
|
||||||
|
scope = ".progress";
|
||||||
|
original = styles.progress.getPropertyValue(`--bulma-${key}`);
|
||||||
|
} else if (key.startsWith("table")) {
|
||||||
|
scope = ".table";
|
||||||
|
original = styles.table.getPropertyValue(`--bulma-${key}`);
|
||||||
|
} else if (key.startsWith("tag")) {
|
||||||
|
scope = ".tag";
|
||||||
|
original = styles.tag.getPropertyValue(`--bulma-${key}`);
|
||||||
|
} else if (key.startsWith("title")) {
|
||||||
|
scope = ".title";
|
||||||
|
original = styles.title.getPropertyValue(`--bulma-${key}`);
|
||||||
} else {
|
} else {
|
||||||
original = styles.root.getPropertyValue(`--bulma-${key}`);
|
original = styles.root.getPropertyValue(`--bulma-${key}`);
|
||||||
}
|
}
|
||||||
|
|||||||
@ -26,7 +26,7 @@
|
|||||||
|
|
||||||
.name code {
|
.name code {
|
||||||
font-size: 1.25em;
|
font-size: 1.25em;
|
||||||
font-weight: 600;
|
font-weight: 400;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
background: none;
|
background: none;
|
||||||
}
|
}
|
||||||
@ -35,7 +35,7 @@
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 1.5rem;
|
gap: 1.5rem;
|
||||||
padding: 2px 0;
|
/* padding: 2px 0; */
|
||||||
width: 30rem;
|
width: 30rem;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -261,4 +261,265 @@ export const CSSVAR_KEYS = {
|
|||||||
description: "The box link shadow when active",
|
description: "The box link shadow when active",
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
|
content: [
|
||||||
|
{ id: "content-heading-color", description: "The content headings color" },
|
||||||
|
{
|
||||||
|
id: "content-heading-weight",
|
||||||
|
description: "The content headings font weight",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "content-heading-line-height",
|
||||||
|
description: "The content headings line height",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "content-block-margin-bottom",
|
||||||
|
description: "The content blocks margin bottom",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "content-blockquote-background-color",
|
||||||
|
description: "The content blockquotes background color",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "content-blockquote-border-left",
|
||||||
|
description: "The content blockquotes left border",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "content-blockquote-padding",
|
||||||
|
description: "The content blockquotes padding",
|
||||||
|
},
|
||||||
|
{ id: "content-pre-padding", description: "The content pres padding" },
|
||||||
|
{
|
||||||
|
id: "content-table-cell-border",
|
||||||
|
description: "The content table cells border",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "content-table-cell-border-width",
|
||||||
|
description: "The content table cells border width",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "content-table-cell-padding",
|
||||||
|
description: "The content table cells heading color",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "content-table-cell-heading-color",
|
||||||
|
description: "The content table cells heading color",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "content-table-head-cell-border-width",
|
||||||
|
description: "The content table head cells border width",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "content-table-head-cell-color",
|
||||||
|
description: "The content table head cells color",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "content-table-body-last-row-cell-border-bottom-width",
|
||||||
|
description: "The content table last rows bottom border width",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "content-table-foot-cell-border-width",
|
||||||
|
description: "The content table foot cells border width",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "content-table-foot-cell-color",
|
||||||
|
description: "The content table foot cells heading color",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
delete: [
|
||||||
|
{ id: "delete-dimensions", description: "The delete element dimensions" },
|
||||||
|
{
|
||||||
|
id: "delete-background-l",
|
||||||
|
description: "The delete element background lightness",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "delete-background-alpha",
|
||||||
|
description: "The delete element background transparency",
|
||||||
|
},
|
||||||
|
{ id: "delete-color", description: "The delete element color" },
|
||||||
|
],
|
||||||
|
icon: [
|
||||||
|
{ id: "icon-dimensions", description: "The icon element dimensions" },
|
||||||
|
{
|
||||||
|
id: "icon-dimensions-small",
|
||||||
|
description: "The Small icon element dimensions",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "icon-dimensions-medium",
|
||||||
|
description: "The Medium icon element dimensions",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "icon-dimensions-large",
|
||||||
|
description: "The Large icon element dimensions",
|
||||||
|
},
|
||||||
|
{ id: "icon-text-spacing", description: "The icon element text spacing" },
|
||||||
|
],
|
||||||
|
notification: [
|
||||||
|
{ id: "notification-h", description: "The notification main Hue" },
|
||||||
|
{ id: "notification-s", description: "The notification main Saturation" },
|
||||||
|
{
|
||||||
|
id: "notification-background-l",
|
||||||
|
description: "The notification background Lightness",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "notification-color-l",
|
||||||
|
description: "The notification main text color Lightness",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "notification-code-background-color",
|
||||||
|
description: "The notification code background color",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "notification-radius",
|
||||||
|
description: "The notification border radius",
|
||||||
|
},
|
||||||
|
{ id: "notification-padding", description: "The notification padding" },
|
||||||
|
],
|
||||||
|
progress: [
|
||||||
|
{
|
||||||
|
id: "progress-border-radius",
|
||||||
|
description: "The progress bar border radius",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "progress-bar-background-color",
|
||||||
|
description: "The progress bar background color",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "progress-value-background-color",
|
||||||
|
description: "The progress value background color",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "progress-indeterminate-duration",
|
||||||
|
description: "The progress bar loading animation speed",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
table: [
|
||||||
|
{ id: "table-color", description: "The table text color" },
|
||||||
|
{ id: "table-background-color", description: "The table background color" },
|
||||||
|
{
|
||||||
|
id: "table-cell-border-color",
|
||||||
|
description: "The table cells border color",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "table-cell-border-style",
|
||||||
|
description: "The table cells border style",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "table-cell-border-width",
|
||||||
|
description: "The table cells border width",
|
||||||
|
},
|
||||||
|
{ id: "table-cell-padding", description: "The table cells padding" },
|
||||||
|
{
|
||||||
|
id: "table-cell-heading-color",
|
||||||
|
description: "The table heading cells text color",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "table-cell-text-align",
|
||||||
|
description: "The table cells text alignment",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "table-head-cell-border-width",
|
||||||
|
description: "The table head cells border width",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "table-head-cell-color",
|
||||||
|
description: "The table head cells text color",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "table-foot-cell-border-width",
|
||||||
|
description: "The table foot cells border width",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "table-foot-cell-color",
|
||||||
|
description: "The table foot cells text color",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "table-head-background-color",
|
||||||
|
description: "The table head background color",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "table-body-background-color",
|
||||||
|
description: "The table body background color",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "table-foot-background-color",
|
||||||
|
description: "The table foot background color",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "table-row-hover-background-color",
|
||||||
|
description: "The table rows hover background color",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "table-row-active-background-color",
|
||||||
|
description: "The table rows active background color",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "table-row-active-color",
|
||||||
|
description: "The table rows active text color",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "table-striped-row-even-background-color",
|
||||||
|
description: "The striped tables alternate rows background color",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "table-striped-row-even-hover-background-color",
|
||||||
|
description:
|
||||||
|
"The striped tables alternate rows background color when hovered",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
tag: [
|
||||||
|
{ id: "tag-h", description: "The tag elements Hue" },
|
||||||
|
{ id: "tag-s", description: "The tag elements Saturation" },
|
||||||
|
{
|
||||||
|
id: "tag-background-l",
|
||||||
|
description: "The tag elements background Lightness",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "tag-background-l-delta",
|
||||||
|
description: "The tag elements background Lightness delta",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "tag-hover-background-l-delta",
|
||||||
|
description: "The tag elements background Lightness when hovered",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "tag-active-background-l-delta",
|
||||||
|
description: "The tag elements background Lightness when active",
|
||||||
|
},
|
||||||
|
{ id: "tag-color-l", description: "The tag elements text color Lightness" },
|
||||||
|
{ id: "tag-radius", description: "The tag elements border radius" },
|
||||||
|
{ id: "tag-delete-margin", description: "The tag delete elements margin" },
|
||||||
|
],
|
||||||
|
title: [
|
||||||
|
{ id: "title-color", description: "The title elements text color" },
|
||||||
|
{ id: "title-family", description: "The title elements font family" },
|
||||||
|
{ id: "title-size", description: "The title elements font size" },
|
||||||
|
{ id: "title-weight", description: "The title elements font weight" },
|
||||||
|
{ id: "title-line-height", description: "The title elements line height" },
|
||||||
|
{
|
||||||
|
id: "title-strong-color",
|
||||||
|
description: "The title strong elements text color",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "title-strong-weight",
|
||||||
|
description: "The title strong elements font weight",
|
||||||
|
},
|
||||||
|
{ id: "title-sub-size", description: "The title sub elements font size" },
|
||||||
|
{ id: "title-sup-size", description: "The title sup elements font size" },
|
||||||
|
{ id: "subtitle-color", description: "The subtitle elements text color" },
|
||||||
|
{ id: "subtitle-family", description: "The subtitle elements font family" },
|
||||||
|
{ id: "subtitle-size", description: "The subtitle elements font size" },
|
||||||
|
{ id: "subtitle-weight", description: "The subtitle elements font weight" },
|
||||||
|
{
|
||||||
|
id: "subtitle-line-height",
|
||||||
|
description: "The subtitle elements line height",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "subtitle-strong-color",
|
||||||
|
description: "The subtitle strong elements text color",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "subtitle-strong-weight",
|
||||||
|
description: "The subtitle strong elements font weight",
|
||||||
|
},
|
||||||
|
],
|
||||||
};
|
};
|
||||||
|
|||||||
@ -1,5 +1,5 @@
|
|||||||
import VarItem from "../components/VarItem";
|
import VarItem from "components/VarItem";
|
||||||
import { CSSVAR_KEYS } from "../constants";
|
import { CSSVAR_KEYS } from "root/constants";
|
||||||
|
|
||||||
function Box() {
|
function Box() {
|
||||||
const ids = CSSVAR_KEYS.box.map((i) => i.id);
|
const ids = CSSVAR_KEYS.box.map((i) => i.id);
|
||||||
16
docs/_react/bulma-customizer/src/pages/elements/Content.jsx
Normal file
16
docs/_react/bulma-customizer/src/pages/elements/Content.jsx
Normal file
@ -0,0 +1,16 @@
|
|||||||
|
import VarItem from "components/VarItem";
|
||||||
|
import { CSSVAR_KEYS } from "root/constants";
|
||||||
|
|
||||||
|
function Content() {
|
||||||
|
const ids = CSSVAR_KEYS.content.map((i) => i.id);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
{ids.map((id) => {
|
||||||
|
return <VarItem key={id} id={id} />;
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Content;
|
||||||
16
docs/_react/bulma-customizer/src/pages/elements/Delete.jsx
Normal file
16
docs/_react/bulma-customizer/src/pages/elements/Delete.jsx
Normal file
@ -0,0 +1,16 @@
|
|||||||
|
import VarItem from "components/VarItem";
|
||||||
|
import { CSSVAR_KEYS } from "root/constants";
|
||||||
|
|
||||||
|
function Delete() {
|
||||||
|
const ids = CSSVAR_KEYS.delete.map((i) => i.id);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
{ids.map((id) => {
|
||||||
|
return <VarItem key={id} id={id} />;
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Delete;
|
||||||
16
docs/_react/bulma-customizer/src/pages/elements/Icon.jsx
Normal file
16
docs/_react/bulma-customizer/src/pages/elements/Icon.jsx
Normal file
@ -0,0 +1,16 @@
|
|||||||
|
import VarItem from "components/VarItem";
|
||||||
|
import { CSSVAR_KEYS } from "root/constants";
|
||||||
|
|
||||||
|
function Icon() {
|
||||||
|
const ids = CSSVAR_KEYS.icon.map((i) => i.id);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
{ids.map((id) => {
|
||||||
|
return <VarItem key={id} id={id} />;
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Icon;
|
||||||
@ -0,0 +1,16 @@
|
|||||||
|
import VarItem from "components/VarItem";
|
||||||
|
import { CSSVAR_KEYS } from "root/constants";
|
||||||
|
|
||||||
|
function Notification() {
|
||||||
|
const ids = CSSVAR_KEYS.notification.map((i) => i.id);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
{ids.map((id) => {
|
||||||
|
return <VarItem key={id} id={id} />;
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Notification;
|
||||||
16
docs/_react/bulma-customizer/src/pages/elements/Progress.jsx
Normal file
16
docs/_react/bulma-customizer/src/pages/elements/Progress.jsx
Normal file
@ -0,0 +1,16 @@
|
|||||||
|
import VarItem from "components/VarItem";
|
||||||
|
import { CSSVAR_KEYS } from "root/constants";
|
||||||
|
|
||||||
|
function Progress() {
|
||||||
|
const ids = CSSVAR_KEYS.progress.map((i) => i.id);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
{ids.map((id) => {
|
||||||
|
return <VarItem key={id} id={id} />;
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Progress;
|
||||||
16
docs/_react/bulma-customizer/src/pages/elements/Table.jsx
Normal file
16
docs/_react/bulma-customizer/src/pages/elements/Table.jsx
Normal file
@ -0,0 +1,16 @@
|
|||||||
|
import VarItem from "components/VarItem";
|
||||||
|
import { CSSVAR_KEYS } from "root/constants";
|
||||||
|
|
||||||
|
function Table() {
|
||||||
|
const ids = CSSVAR_KEYS.table.map((i) => i.id);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
{ids.map((id) => {
|
||||||
|
return <VarItem key={id} id={id} />;
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Table;
|
||||||
16
docs/_react/bulma-customizer/src/pages/elements/Tag.jsx
Normal file
16
docs/_react/bulma-customizer/src/pages/elements/Tag.jsx
Normal file
@ -0,0 +1,16 @@
|
|||||||
|
import VarItem from "components/VarItem";
|
||||||
|
import { CSSVAR_KEYS } from "root/constants";
|
||||||
|
|
||||||
|
function Tag() {
|
||||||
|
const ids = CSSVAR_KEYS.tag.map((i) => i.id);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
{ids.map((id) => {
|
||||||
|
return <VarItem key={id} id={id} />;
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Tag;
|
||||||
16
docs/_react/bulma-customizer/src/pages/elements/Title.jsx
Normal file
16
docs/_react/bulma-customizer/src/pages/elements/Title.jsx
Normal file
@ -0,0 +1,16 @@
|
|||||||
|
import VarItem from "components/VarItem";
|
||||||
|
import { CSSVAR_KEYS } from "root/constants";
|
||||||
|
|
||||||
|
function Title() {
|
||||||
|
const ids = CSSVAR_KEYS.title.map((i) => i.id);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
{ids.map((id) => {
|
||||||
|
return <VarItem key={id} id={id} />;
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Title;
|
||||||
@ -14,4 +14,10 @@ export default defineConfig({
|
|||||||
},
|
},
|
||||||
},
|
},
|
||||||
plugins: [react()],
|
plugins: [react()],
|
||||||
|
resolve: {
|
||||||
|
alias: {
|
||||||
|
root: "/src",
|
||||||
|
components: "/src/components",
|
||||||
|
},
|
||||||
|
},
|
||||||
});
|
});
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user