MotionHighlight

ಡೇಟಾದಿಂದ ಟ್ಯಾಬ್‌ಗಳು, segmented control ಗಳು ಅಥವಾ ನ್ಯಾವಿಗೇಶನ್, ಆಯ್ಕೆಗೆ ಸಾಗುವ ಒಂದೇ ಹೈಲೈಟ್‌ನೊಂದಿಗೆ.

ವೆಬ್React Nativeಆಯ್ಕೆ ಮತ್ತು ಪುಟ ತಿರುವು

ಪ್ರಯತ್ನಿಸಿ

ಉದಾಹರಣೆ ಸಿದ್ಧವಾಗುತ್ತಿದೆ…

JavaScript ಆಫ್ ಆಗಿದೆ. ಕೆಳಗಿನ ಕೋಡ್ ಪೂರ್ಣ ಉದಾಹರಣೆ.

App.jsx

import { useState } from 'react';
import { MotionHighlight, motionTokens } from '@kkwaenggwari/animated-chorus';
import './styles.css';

const sections = [
  { id: 'overview', label: 'Overview', body: 'Totals for the last 30 days.' },
  { id: 'activity', label: 'Activity', body: 'Every change, newest first.' },
  { id: 'members', label: 'Members', body: 'Twelve people can edit this workspace.' },
  { id: 'billing', label: 'Billing', body: 'Next invoice on the 1st.' },
  { id: 'settings', label: 'Settings', body: 'Name, region and danger zone.' },
];

export default function App({ shape = 'pill', hover = true, spring = 'default' }) {
  const [tab, setTab] = useState('activity');
  const current = sections.find((section) => section.id === tab);

  return (
    <div className="stage">
      <MotionHighlight
        items={sections}
        value={tab}
        onValueChange={setTab}
        hover={hover}
        transition={motionTokens.spring[spring]}
        className={`tabs ${shape}`}
        itemClassName="tab"
        highlightClassName="highlight"
        renderItem={(section, { selected }) => (
          <span className={selected ? 'label on' : 'label'}>{section.label}</span>
        )}
      />
      <p className="body">
        <strong>{current.label}</strong> {current.body}
      </p>
    </div>
  );
}

styles.css

.stage {
  display: grid;
  justify-items: center;
  gap: 22px;
  padding: 44px 20px;
}

/* One row like a real tab bar: on a narrow screen it scrolls sideways instead of wrapping. */
.tabs {
  display: flex;
  gap: 4px;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}

.tabs::-webkit-scrollbar {
  display: none;
}

.tab {
  flex: none;
  min-height: 44px;
  padding: 0 18px;
  border: 0;
  background: none;
  font:
    650 15px system-ui,
    sans-serif;
  cursor: pointer;
}

.label {
  color: #5b616b;
  transition: color 0.2s;
}

.label.on {
  color: #0e2e24;
}

.pill {
  padding: 4px;
  border-radius: 999px;
  background: #eaf6f0;
}

.pill .highlight {
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 0 0 1px #cfe8dc;
}

.underline {
  border-bottom: 1px solid #cfe8dc;
}

.underline .highlight {
  border-bottom: 3px solid #176b52;
}

.block {
  gap: 6px;
}

.block .highlight {
  border-radius: 10px;
  background: #176b52;
}

.block .label.on {
  color: #fff;
}

.body {
  margin: 0;
  color: #5b616b;
}

.body strong {
  color: #0e2e24;
}

ಅತಿ ಚಿಕ್ಕ ಬಳಕೆ

Tabs.jsx

<MotionHighlight
  items={['Overview', 'Activity', 'Settings']}
  value={tab}
  onValueChange={setTab}
  hover
/>;

ಇದು ನಿಮಗಾಗಿ ನಿರ್ವಹಿಸುವುದು

ಒಂದೇ ಹೈಲೈಟ್ ವಸ್ತುಗಳ ನಡುವೆ ಚಲಿಸಿ ಗಾತ್ರ ಬದಲಿಸುತ್ತದೆ; highlightClassName ನಿಂದ ಶೈಲಿ ಕೊಡಿ.
ವಸ್ತುಗಳು items ನಿಂದ, key ಗಳು getKey ನಿಂದ ಮತ್ತು ಲೇಬಲ್‌ಗಳು renderItem ನಿಂದ ಬರುತ್ತವೆ.
hover ಅದನ್ನು ಪಾಯಿಂಟರ್ ಹಿಂಬಾಲಿಸಿ ಆಯ್ಕೆಗೆ ಹಿಂತಿರುಗುವಂತೆ ಮಾಡುತ್ತದೆ.
ವಸ್ತುಗಳು ಅನೇಕ ಸಾಲುಗಳಿಗೆ ಸುತ್ತಿಕೊಳ್ಳಬಹುದು ಮತ್ತು ಹೈಲೈಟ್ ಅವನ್ನು ಹಿಂಬಾಲಿಸುತ್ತದೆ.
ಫಾಂಟ್ ಲೋಡಿಂಗ್ ಮತ್ತು ಲೇಔಟ್ ಬದಲಾವಣೆಗಳನ್ನು ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಮತ್ತೆ ಅಳೆಯಲಾಗುತ್ತದೆ.

ಇದಕ್ಕೆ ಬಳಸಿ

ಪುಟ ಟ್ಯಾಬ್‌ಗಳು.
ಫಿಲ್ಟರ್ ಪಟ್ಟಿ.
ಸೆಟ್ಟಿಂಗ್‌ಗಳ ಫಾರ್ಮ್‌ನಲ್ಲಿ segmented control.

Props

Prop	ಟೈಪ್	ಡೀಫಾಲ್ಟ್	ವಿವರಣೆ
`items`	`readonly T[]`	`—`ಕಡ್ಡಾಯ	ನಿಮ್ಮ ಡೇಟಾ ಅರೇ.
`value`	`key \| null`	`—`ಕಡ್ಡಾಯ	ಹೈಲೈಟ್ ಆದ ವಸ್ತುವಿನ key; `null` ಹೈಲೈಟ್ ಮರೆಮಾಡುತ್ತದೆ.
`onValueChange`	`(key, item) => void`		ವಸ್ತು ಒತ್ತಿದಾಗ key ಮತ್ತು ವಸ್ತುವಿನೊಂದಿಗೆ ನಡೆಯುತ್ತದೆ.
`getKey`	`(item) => string \| number`	`item.id`	ವಸ್ತುವಿಗೆ ವಿಶಿಷ್ಟ, ಸ್ಥಿರ key ಹಿಂತಿರುಗಿಸುತ್ತದೆ. ಡೀಫಾಲ್ಟ್ ಆಗಿ `item.id`, ಅಥವಾ ಸ್ಟ್ರಿಂಗ್ ಮತ್ತು ಸಂಖ್ಯೆಗಳಿಗೆ ವಸ್ತುವೇ.
`renderItem`	`(item, { selected, index }) => ReactNode`	`item.label`	ವಸ್ತು ಚಿತ್ರಿಸುತ್ತದೆ; ಅದು ಆಯ್ಕೆಯಾಗಿದೆಯೇ ಎಂದು ಪಡೆಯುತ್ತದೆ.
`hover`	`boolean`	`false`	ವಸ್ತುಗಳ ಮೇಲೆ ಪಾಯಿಂಟರ್ ಹಿಂಬಾಲಿಸಿ ಹೊರಹೋದಾಗ `value` ಗೆ ಹಿಂತಿರುಗಿ (ವೆಬ್).
`itemAs`	`element`	`'button'`	ಪ್ರತಿ ವಸ್ತುವಿನ ಎಲಿಮೆಂಟ್.
`itemClassName`	`string`		ಪ್ರತಿ ವಸ್ತು ಎಲಿಮೆಂಟ್‌ಗೆ class; `itemStyle` ಅದರ inline style ಹೊಂದಿಸುತ್ತದೆ.
`highlightClassName`	`string`		ಹೈಲೈಟ್‌ಗೆ class; `highlightStyle` ಅದರ inline style ಹೊಂದಿಸುತ್ತದೆ.
`transition`	`Transition`	`spring`	ಟೈಮಿಂಗ್ ವಕ್ರ `{ duration, easing }` ಅಥವಾ spring `{ tempo: 'spring', spring }`. spring ಗಳು ಅಡ್ಡಿಯಾದಾಗ ತಮ್ಮ ಆವೇಗ ಉಳಿಸಿಕೊಳ್ಳುತ್ತವೆ.

ಇತರ props ರೆಂಡರ್ ಆಗುವ ಎಲಿಮೆಂಟ್‌ಗೆ ಹೋಗುತ್ತವೆ, ಹೀಗಾಗಿ className, style ಮತ್ತು ಈವೆಂಟ್ ಹ್ಯಾಂಡ್ಲರ್‌ಗಳು ಎಂದಿನಂತೆ ಕೆಲಸ ಮಾಡುತ್ತವೆ.

ವೆಬ್ ಮತ್ತು React Native

ಪ್ರತಿ ವಸ್ತು ಡೀಫಾಲ್ಟ್ ಆಗಿ button ಆಗಿ ರೆಂಡರ್ ಆಗುತ್ತದೆ (itemAs ಅದನ್ನು ಬದಲಿಸುತ್ತದೆ); ಒತ್ತಿದರೆ onValueChange(key, item) ಕಾಲ್ ಆಗುತ್ತದೆ.

React Native ನಲ್ಲಿ ವಸ್ತುಗಳು Pressable ಗಳು; ಸ್ಥಾನ ನೇಟಿವ್ driver ಮೇಲೆ ಮತ್ತು ಗಾತ್ರ JavaScript ನಡೆಸುವ ಒಳಗಿನ view ಮೇಲೆ ನಡೆಯುತ್ತದೆ.