Upstream/waveterm
1
0
Fork 0
mirror of https://github.com/wavetermdev/waveterm.git synced 2025-01-01 18:28:59 +01:00
Code Issues Packages Projects Releases Wiki Activity

tabs

Browse Source
This commit is contained in:
Red Adaya 2024-12-18 23:41:34 +08:00
parent ebcb357ba8
commit e5e6e7f163
2 changed files with 78 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
frontend/app/element/tabs.scss
View File

@ -2,39 +2,38 @@
// SPDX-License-Identifier: Apache-2.0 // SPDX-License-Identifier: Apache-2.0
.tabs-container { .tabs-container {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
font-family: Arial, sans-serif; font-family: Arial, sans-serif;
font-size: 12px;
.tabs-list { .tabs-list {
display: flex; display: flex;
gap: 12px; gap: 16px;
border: 1px solid #444; border: 1px solid rgb(from var(--main-text-color) r g b / 15%);
border-radius: 6px; border-radius: 7px;
padding: 4px; padding: 4px;
background-color: #111; background: rgb(from var(--block-bg-color) r g b / 70%);
.tab-item { .tab-item {
padding: 6px 12px; display: flex;
cursor: pointer; height: 24px;
border-radius: 4px; padding: 0px 8px;
color: #aaa; justify-content: center;
transition: all 0.2s ease-in-out; align-items: center;
cursor: pointer;
border-radius: 4px;
color: var(--main-text-color);
border: 1px solid transparent;
&:hover { &:hover {
background-color: #222; background-color: rgb(from var(--main-bg-color) r g b / 60%);
} }
&.active { &.active {
border: 1px solid #28a745; border: 1px solid var(--success-color);
background-color: #0a0a0a; background: rgb(from var(--success-color) r g b / 15%);
color: #fff; }
font-weight: bold; }
} }
}
&:focus {
outline: 2px solid #28a745;
}
}
}
}

47
frontend/app/element/tabs.stories.tsx
View File

@ -0,0 +1,47 @@
// Copyright 2024, Command Line Inc.
// SPDX-License-Identifier: Apache-2.0
import type { Meta, StoryObj } from "@storybook/react";
import { Tabs } from "./tabs";
const meta: Meta<typeof Tabs> = {
title: "Elements/Tabs",
component: Tabs,
argTypes: {},
};
export default meta;
type Story = StoryObj<typeof Tabs>;
export const DefaultTabs: Story = {
render: () => {
const tabs = [
{ label: "Node 1", onClick: () => console.log("Node 1 Clicked") },
{ label: "Node 2", onClick: () => console.log("Node 2 Clicked") },
{ label: "Node 3", onClick: () => console.log("Node 3 Clicked") },
];
return (
<div style={{ padding: "20px", backgroundColor: "#000", color: "#fff" }}>
<Tabs tabs={tabs} />
</div>
);
},
};
export const TabsWithAlerts: Story = {
render: () => {
const tabs = [
{ label: "Node 1", onClick: () => alert("Node 1 Clicked") },
{ label: "Node 2", onClick: () => alert("Node 2 Clicked") },
{ label: "Node 3", onClick: () => alert("Node 3 Clicked") },
];
return (
<div style={{ padding: "20px", backgroundColor: "#000", color: "#fff" }}>
<Tabs tabs={tabs} />
</div>
);
},
};