diff --git a/README.md b/README.md index 8c65051..f6b74e6 100644 --- a/README.md +++ b/README.md @@ -25,6 +25,7 @@ PLEASE SEE `markdown/generate-readme.ts` and the files in the `frameworks` direc - [Framework Features](#Framework-Features) - [Components](#Components) - [Alert](#Alert) + - [AppBar](#AppBar) - [Avatar](#Avatar) - [AvatarGroup](#AvatarGroup) - [Button](#Button) @@ -85,30 +86,30 @@ PLEASE SEE `markdown/generate-readme.ts` and the files in the `frameworks` direc --> | Name | Homepage | Repository | Stars | Forks | Issues | License | | --- | --- | --- | --- | --- | --- | --- | -| Ant Design | [ant.design](https://ant.design) | [ant-design/ant-design](https://github.com/ant-design/ant-design) | 73,706 | 29,592 | 699 | MIT | +| Ant Design | [ant.design](https://ant.design) | [ant-design/ant-design](https://github.com/ant-design/ant-design) | 75,205 | 30,848 | 717 | MIT | | Atlaskit | [atlassian.design](https://atlassian.design) | [bitbucket.org/atlassian/atlaskit-mk-2](https://bitbucket.org/atlassian/atlaskit-mk-2) | -- | -- | -- | -- | -| Blueprint | [blueprintjs.com](https://blueprintjs.com) | [palantir/blueprint](https://github.com/palantir/blueprint) | 18,042 | 1,899 | 622 | Apache 2.0 | -| Carbon Design | [react.carbondesignsystem.com](http://react.carbondesignsystem.com) | [carbon-design-system/carbon](https://github.com/carbon-design-system/carbon) | 4,530 | 1,076 | 458 | Apache 2.0 | -| Chakra UI | [chakra-ui.com](https://chakra-ui.com) | [chakra-ui/chakra-ui](https://github.com/chakra-ui/chakra-ui) | 19,845 | 1,632 | 128 | MIT | -| Elastic UI | [elastic.github.io/eui](https://elastic.github.io/eui) | [elastic/eui](https://github.com/elastic/eui) | 2,970 | 538 | 388 | Other | -| Element | [element.eleme.io](https://element.eleme.io) | [ElemeFE/element](https://github.com/ElemeFE/element) | 50,628 | 13,016 | 1,875 | MIT | -| Elemental UI | [elemental-ui.com](http://elemental-ui.com) | [elementalui/elemental](https://github.com/elementalui/elemental) | 4,325 | 243 | 49 | MIT | -| Evergreen | [evergreen.segment.com](https://evergreen.segment.com) | [segmentio/evergreen](https://github.com/segmentio/evergreen) | 10,972 | 689 | 30 | MIT | -| Fluent UI | [developer.microsoft.com/en-us/fluentui](https://developer.microsoft.com/en-us/fluentui) | [microsoft/fluentui](https://github.com/microsoft/fluentui) | 11,882 | 1,959 | 973 | Other | -| Gestalt | [gestalt.netlify.app](https://gestalt.netlify.app) | [pinterest/gestalt](https://github.com/pinterest/gestalt) | 3,860 | 298 | 12 | Apache 2.0 | -| Grommet | [v2.grommet.io](https://v2.grommet.io) | [grommet/grommet](https://github.com/grommet/grommet) | 7,416 | 907 | 227 | Apache 2.0 | -| Material UI | [material-ui.com](https://material-ui.com) | [mui-org/material-ui](https://github.com/mui-org/material-ui) | 70,233 | 23,375 | 558 | MIT | -| Onsen UI | [onsen.io](https://onsen.io) | [OnsenUI/OnsenUI](https://github.com/OnsenUI/OnsenUI) | 8,429 | 979 | 165 | Apache 2.0 | -| Orbit | [orbit.kiwi](https://orbit.kiwi) | [kiwicom/orbit](https://github.com/kiwicom/orbit) | 1,043 | 99 | 43 | MIT | -| Prime React | [primefaces.org/primereact](https://primefaces.org/primereact) | [primefaces/primereact](https://github.com/primefaces/primereact) | 2,161 | 474 | 214 | MIT | -| Quasar | [quasar.dev](https://quasar.dev) | [quasarframework/quasar](https://github.com/quasarframework/quasar) | 19,179 | 2,353 | 423 | MIT | -| React Bootstrap | [react-bootstrap.github.io](https://react-bootstrap.github.io) | [react-bootstrap/react-bootstrap](https://github.com/react-bootstrap/react-bootstrap) | 19,763 | 3,137 | 137 | MIT | -| React Toolbox | [react-toolbox.io](http://react-toolbox.io) | [react-toolbox/react-toolbox](https://github.com/react-toolbox/react-toolbox) | 8,704 | 1,042 | 264 | MIT | -| react-md | [react-md.dev](https://react-md.dev) | [mlaursen/react-md](https://github.com/mlaursen/react-md) | 2,254 | 309 | 47 | MIT | -| Ring UI | [jetbrains.github.io/ring-ui](https://jetbrains.github.io/ring-ui) | [JetBrains/ring-ui](https://github.com/JetBrains/ring-ui) | 2,694 | 148 | 4 | Apache 2.0 | -| Semantic UI | [semantic-ui.com](https://semantic-ui.com) | [Semantic-Org/Semantic-UI](https://github.com/Semantic-Org/Semantic-UI) | 49,478 | 5,136 | 1,049 | MIT | -| Smooth UI | [smooth-code.com/open-source/smooth-ui](https://smooth-code.com/open-source/smooth-ui) | [smooth-code/smooth-ui](https://github.com/smooth-code/smooth-ui) | 1,576 | 116 | 12 | MIT | -| Zendesk Garden | [garden.zendesk.com](https://garden.zendesk.com) | [zendeskgarden/react-components](https://github.com/zendeskgarden/react-components) | 910 | 72 | 5 | Apache 2.0 | +| Blueprint | [blueprintjs.com](https://blueprintjs.com) | [palantir/blueprint](https://github.com/palantir/blueprint) | 18,257 | 1,916 | 637 | Apache 2.0 | +| Carbon Design | [react.carbondesignsystem.com](http://react.carbondesignsystem.com) | [carbon-design-system/carbon](https://github.com/carbon-design-system/carbon) | 4,873 | 1,148 | 512 | Apache 2.0 | +| Chakra UI | [chakra-ui.com/docs](https://chakra-ui.com/docs) | [chakra-ui/chakra-ui](https://github.com/chakra-ui/chakra-ui) | 21,520 | 1,823 | 133 | MIT | +| Elastic UI | [elastic.github.io/eui](https://elastic.github.io/eui) | [elastic/eui](https://github.com/elastic/eui) | 3,195 | 579 | 397 | Other | +| Element | [element.eleme.io](https://element.eleme.io) | [ElemeFE/element](https://github.com/ElemeFE/element) | 51,131 | 13,309 | 1,989 | MIT | +| Elemental UI | [elemental-ui.com](http://elemental-ui.com) | [elementalui/elemental](https://github.com/elementalui/elemental) | 4,332 | 244 | 49 | MIT | +| Evergreen | [evergreen.segment.com](https://evergreen.segment.com) | [segmentio/evergreen](https://github.com/segmentio/evergreen) | 11,217 | 723 | 47 | MIT | +| Fluent UI | [developer.microsoft.com/en-us/fluentui](https://developer.microsoft.com/en-us/fluentui) | [microsoft/fluentui](https://github.com/microsoft/fluentui) | 12,341 | 2,041 | 1,012 | Other | +| Gestalt | [gestalt.netlify.app](https://gestalt.netlify.app) | [pinterest/gestalt](https://github.com/pinterest/gestalt) | 3,888 | 302 | 9 | Apache 2.0 | +| Grommet | [v2.grommet.io](https://v2.grommet.io) | [grommet/grommet](https://github.com/grommet/grommet) | 7,613 | 933 | 219 | Apache 2.0 | +| Material UI | [material-ui.com](https://material-ui.com) | [mui-org/material-ui](https://github.com/mui-org/material-ui) | 72,552 | 24,622 | 728 | MIT | +| Onsen UI | [onsen.io](https://onsen.io) | [OnsenUI/OnsenUI](https://github.com/OnsenUI/OnsenUI) | 8,484 | 987 | 172 | Apache 2.0 | +| Orbit | [orbit.kiwi](https://orbit.kiwi) | [kiwicom/orbit](https://github.com/kiwicom/orbit) | 1,113 | 106 | 41 | MIT | +| Prime React | [primefaces.org/primereact](https://primefaces.org/primereact) | [primefaces/primereact](https://github.com/primefaces/primereact) | 2,298 | 506 | 279 | MIT | +| Quasar | [quasar.dev](https://quasar.dev) | [quasarframework/quasar](https://github.com/quasarframework/quasar) | 19,700 | 2,479 | 413 | MIT | +| React Bootstrap | [react-bootstrap.github.io](https://react-bootstrap.github.io) | [react-bootstrap/react-bootstrap](https://github.com/react-bootstrap/react-bootstrap) | 20,099 | 3,209 | 155 | MIT | +| React Toolbox | [react-toolbox.io](http://react-toolbox.io) | [react-toolbox/react-toolbox](https://github.com/react-toolbox/react-toolbox) | 8,707 | 1,048 | 265 | MIT | +| react-md | [react-md.dev](https://react-md.dev) | [mlaursen/react-md](https://github.com/mlaursen/react-md) | 2,275 | 313 | 46 | MIT | +| Ring UI | [jetbrains.github.io/ring-ui](https://jetbrains.github.io/ring-ui) | [JetBrains/ring-ui](https://github.com/JetBrains/ring-ui) | 2,821 | 161 | 9 | Apache 2.0 | +| Semantic UI | [semantic-ui.com](https://semantic-ui.com) | [Semantic-Org/Semantic-UI](https://github.com/Semantic-Org/Semantic-UI) | 49,652 | 5,143 | 1,054 | MIT | +| Smooth UI | [smooth-code.com/open-source/smooth-ui](https://smooth-code.com/open-source/smooth-ui) | [smooth-code/smooth-ui](https://github.com/smooth-code/smooth-ui) | 1,578 | 116 | 11 | MIT | +| Zendesk Garden | [garden.zendesk.com](https://garden.zendesk.com) | [zendeskgarden/react-components](https://github.com/zendeskgarden/react-components) | 963 | 78 | 6 | Apache 2.0 | -> all of the above statistics were last updated Wed, 11 Aug 2021 17:50:17 GMT. For real-time data, [see the website](http://react-ui-roundup.dimitrimitropoulos.com). +> all of the above statistics were last updated Thu, 28 Oct 2021 21:35:27 GMT. For real-time data, [see the website](http://react-ui-roundup.dimitrimitropoulos.com). +## AppBar + + +The AppBar displays information and actions relating to the current screen. + + +#### Criteria + +- `API`: The API style used for the components contained within the AppBar. +- `Dense`: There is a built-in way to make the bar take up less vertical space. +- `Sticky`: A prop exists which can set the bar into a mode where it remains at the top of the screen, independent of scroll depth. +- `Theme Mode`: The bar can be individually themed to use a theme mode that doesn't match the rest of the app. E.g. dark mode AppBar in a light mode app. + + +| Framework | Name | API | Dense | Sticky | Theme Mode | +| --- | --- | --- | --- | --- | --- | +| Elastic UI | [Header](https://elastic.github.io/eui/#/layout/header) | `customComponents` | :x: | :heavy_check_mark: | :heavy_check_mark: | +| Material UI | [AppBar](https://material-ui.com/components/app-bar) | `children` | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | +| React Toolbox | [AppBar](http://react-toolbox.io/#/components/app_bar) | `props` | :x: | :heavy_check_mark: | :x: | +| react-md | [AppBar](https://react-md.dev/packages/app-bar/demos) | `customComponents` | :heavy_check_mark: | :x: | :heavy_check_mark: | +| Ring UI | [Header](https://jetbrains.github.io/ring-ui/master/index.html?path=/docs/components-header--header) | `children` | :heavy_check_mark: | :x: | :heavy_check_mark: | +| Zendesk Garden | [Header](https://garden.zendesk.com/components/chrome#header) | `customComponents` | :heavy_check_mark: | :x: | :heavy_check_mark: | + + +> [Ant Design](https://github.com/ant-design/ant-design), [Atlaskit](https://bitbucket.org/atlassian/atlaskit-mk-2), [Blueprint](https://github.com/palantir/blueprint), [Carbon Design](https://github.com/carbon-design-system/carbon), [Chakra UI](https://github.com/chakra-ui/chakra-ui), [Element](https://github.com/ElemeFE/element), [Elemental UI](https://github.com/elementalui/elemental), [Evergreen](https://github.com/segmentio/evergreen), [Fluent UI](https://github.com/microsoft/fluentui), [Gestalt](https://github.com/pinterest/gestalt), [Grommet](https://github.com/grommet/grommet), [Onsen UI](https://github.com/OnsenUI/OnsenUI), [Orbit](https://github.com/kiwicom/orbit), [Prime React](https://github.com/primefaces/primereact), [Quasar](https://github.com/quasarframework/quasar), [React Bootstrap](https://github.com/react-bootstrap/react-bootstrap), [Semantic UI](https://github.com/Semantic-Org/Semantic-UI), and [Smooth UI](https://github.com/smooth-code/smooth-ui) appear to be missing an AppBar component. [Please file an issue](https://github.com/dimitropoulos/react-ui-roundup/issues/new) if one now exists. + +