xt/color-q
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

增加Harmonies基本配置。

Browse Source
This commit is contained in:
徐涛 2024-12-30 17:18:03 +08:00
parent 5662b1d4d3
commit 4b50cbbeaa
2 changed files with 19 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/pages/Harmonies.module.css
View File

@ -13,12 +13,16 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: var(--spacing-m); gap: var(--spacing-m);
font-size: var(--font-size-s);
.mode_navigation { .mode_navigation {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: stretch; align-items: stretch;
gap: var(--spacing-xs); gap: var(--spacing-xs);
} }
h5 {
font-size: var(--font-size-m);
}
} }
.preview_side { .preview_side {
flex: 1; flex: 1;

24
src/pages/Harmonies.tsx
View File

@ -1,5 +1,6 @@
import cx from 'clsx'; import cx from 'clsx';
import { NavLink, Outlet } from 'react-router-dom'; import { Outlet } from 'react-router-dom';
import { VSegmentedControl } from '../components/VSegmentedControl';
import styles from './Harmonies.module.css'; import styles from './Harmonies.module.css';
export function Harmonies() { export function Harmonies() {
@ -15,14 +16,19 @@ export function Harmonies() {
<h5>Basic color</h5> <h5>Basic color</h5>
</div> </div>
<div className={styles.mode_navigation}> <div className={styles.mode_navigation}>
<NavLink>Complementary</NavLink> <h5>Color selection method</h5>
<NavLink>Analogous</NavLink> <VSegmentedControl
<NavLink>Analogous with Complementary</NavLink> options={[
<NavLink>Triadic</NavLink> { label: 'Complementary', value: 'complementary' },
<NavLink>Split Complementary</NavLink> { label: 'Analogous', value: 'analogous' },
<NavLink>Tetradic</NavLink> { label: 'Analogous with Complementary', value: 'analogous_with_complementary' },
<NavLink>Flip Tetradic</NavLink> { label: 'Triadic', value: 'triadic' },
<NavLink>Square</NavLink> { label: 'Split Complementary', value: 'split_complementary' },
{ label: 'Tetradic', value: 'tetradic' },
{ label: 'Flip Tetradic', value: 'flip_tetradic' },
{ label: 'Square', value: 'square' },
]}
/>
</div> </div>
</aside> </aside>
<div className={styles.preview_side}> <div className={styles.preview_side}>