Skip to content

Just some animated dots for pagination.

License

Notifications You must be signed in to change notification settings

TeamWertarbyte/material-ui-dots

This branch is up to date with master.

Folders and files

NameName
Last commit message
Last commit date

Latest commit

8fab946 · Sep 13, 2024

History

36 Commits
Sep 13, 2024
Sep 13, 2024
Sep 13, 2024
Sep 13, 2024
Sep 13, 2024
Sep 13, 2024
Sep 13, 2024
Sep 13, 2024
Sep 13, 2024
Sep 13, 2024
Sep 13, 2024
Sep 13, 2024
Sep 13, 2024
Sep 13, 2024
Sep 13, 2024
Sep 13, 2024
Sep 13, 2024

Repository files navigation

Material-UI Dots

npm Package

This component gives you animated pagination dots as seen in the Material Design specs and in the quick settings menu of Android N. The dots were extracted from our auto-rotating carousel component.

Installation

yarn add material-ui-dots

Usage

There is only a single Dots component which is to be used in controlled mode. The following example component will display five dots and select a dot when clicking on it.

import * as React from 'react'
import { Dots } from 'material-ui-dots'
import { Box } from '@mui/material';

export const App: React.FC = () => {
  const [index, setIndex] = React.useState<number>(0);

  return (
    <Box
      sx={{
        display: 'flex',
        justifyContent: 'center',
        backgroundColor: 'rgba(0, 0, 0, 0.5)',
        borderRadius: 6,
        pb: 0.5,
        width: 200,
      }}
    >
      <Dots index={index} count={5} onDotClick={(value) => setIndex(value)} />
    </Box>
  );
};

License

The files included in this repository are licensed under the MIT license.