Skip to content

Commit

Permalink
Update docs examples
Browse files Browse the repository at this point in the history
  • Loading branch information
@sunarya-thito
sunarya-thito committed Jan 28, 2025
1 parent 69579d5 commit 19d361a
Show file tree
Hide file tree
Showing 9 changed files with 110 additions and 47 deletions.
6 changes: 6 additions & 0 deletions docs/lib/main.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ import 'package:docs/pages/docs/components/divider_example.dart';
import 'package:docs/pages/docs/components/dot_indicator_example.dart';
import 'package:docs/pages/docs/components/drawer_example.dart';
import 'package:docs/pages/docs/components/dropdown_menu_example.dart';
import 'package:docs/pages/docs/components/expandable_sidebar_example.dart';
import 'package:docs/pages/docs/components/hover_card_example.dart';
import 'package:docs/pages/docs/components/input_example.dart';
import 'package:docs/pages/docs/components/input_otp_example.dart';
Expand Down Expand Up @@ -669,6 +670,11 @@ class MyAppState extends State<MyApp> {
path: 'window',
builder: (context, state) => const WindowExample(),
name: 'window',
),
GoRoute(
path: 'expandable_sidebar',
builder: (context, state) => const ExpandableSidebarExample(),
name: 'expandable_sidebar',
)
]),
]);
Expand Down
87 changes: 68 additions & 19 deletions docs/lib/pages/docs/components/expandable_sidebar/expandable_sidebar_example_1.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,33 +9,82 @@ class ExpandableSidebarExample1 extends StatefulWidget {
}

class _ExpandableSidebarExample1State extends State<ExpandableSidebarExample1> {
NavigationButton buildButton(String text, IconData icon) {
return NavigationButton(
bool expanded = false;
int selected = 0;

NavigationItem buildButton(String text, IconData icon) {
return NavigationItem(
label: Text(text),
alignment: Alignment.centerLeft,
child: Icon(icon),
selectedStyle: ButtonStyle.primaryIcon(),
);
}

NavigationLabel buildLabel(String label) {
return NavigationLabel(
alignment: Alignment.centerLeft,
child: Text(label).semiBold().muted(),
// padding: EdgeInsets.zero,
);
}

@override
Widget build(BuildContext context) {
return NavigationRail(
children: [
buildButton('Home', Icons.home_filled),
buildButton('Trending', Icons.trending_up),
buildButton('Subscription', Icons.subscriptions),
NavigationLabel(child: Text('You')),
buildButton('History', Icons.history),
buildButton('Watch Later', Icons.access_time_rounded),
NavigationLabel(child: Text('Movie')),
buildButton('Action', Icons.movie_creation_outlined),
buildButton('Horror', Icons.movie_creation_outlined),
buildButton('Thriller', Icons.movie_creation_outlined),
NavigationLabel(child: Text('Short Films')),
buildButton('Action', Icons.movie_creation_outlined),
buildButton('Horror', Icons.movie_creation_outlined),
buildButton('Thriller', Icons.movie_creation_outlined),
],
final theme = Theme.of(context);
return OutlinedContainer(
height: 600,
width: 800,
child: Row(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
NavigationRail(
backgroundColor: theme.colorScheme.card,
labelType: NavigationLabelType.expanded,
labelPosition: NavigationLabelPosition.end,
alignment: NavigationRailAlignment.start,
expanded: expanded,
index: selected,
onSelected: (value) {
setState(() {
selected = value;
});
},
children: [
NavigationButton(
child: Icon(Icons.menu),
alignment: Alignment.centerLeft,
label: Text('Menu'),
onPressed: () {
setState(() {
expanded = !expanded;
});
},
),
NavigationDivider(),
buildLabel('You'),
buildButton('Home', Icons.home_filled),
buildButton('Trending', Icons.trending_up),
buildButton('Subscription', Icons.subscriptions),
NavigationDivider(),
buildLabel('History'),
buildButton('History', Icons.history),
buildButton('Watch Later', Icons.access_time_rounded),
NavigationDivider(),
buildLabel('Movie'),
buildButton('Action', Icons.movie_creation_outlined),
buildButton('Horror', Icons.movie_creation_outlined),
buildButton('Thriller', Icons.movie_creation_outlined),
NavigationDivider(),
buildLabel('Short Films'),
buildButton('Action', Icons.movie_creation_outlined),
buildButton('Horror', Icons.movie_creation_outlined),
],
),
const VerticalDivider(),
const Flexible(child: SizedBox()),
],
),
);
}
}
10 changes: 9 additions & 1 deletion docs/lib/pages/docs/components/expandable_sidebar_example.dart
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
import 'package:docs/pages/docs/component_page.dart';
import 'package:docs/pages/docs/components/expandable_sidebar/expandable_sidebar_example_1.dart';
import 'package:docs/pages/widget_usage_example.dart';
import 'package:shadcn_flutter/shadcn_flutter.dart';

class ExpandableSidebarExample extends StatelessWidget {
Expand All @@ -10,7 +12,13 @@ class ExpandableSidebarExample extends StatelessWidget {
name: 'expandable_sidebar',
description: 'A Navigation Rail that can be expanded or collapsed',
displayName: 'Expandable Sidebar',
children: [],
children: [
WidgetUsageExample(
title: 'Example',
child: ExpandableSidebarExample1(),
path: '',
),
],
);
}
}
4 changes: 2 additions & 2 deletions docs/lib/pages/docs/components/navigation_bar/navigation_bar_example_1.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,8 +16,8 @@ class _NavigationBarExample1State extends State<NavigationBarExample1> {
bool customButtonStyle = true;
bool expanded = true;

NavigationButton buildButton(String label, IconData icon) {
return NavigationButton(
NavigationItem buildButton(String label, IconData icon) {
return NavigationItem(
style: customButtonStyle
? const ButtonStyle.muted(density: ButtonDensity.icon)
: null,
Expand Down
38 changes: 19 additions & 19 deletions docs/lib/pages/docs/components/navigation_menu/navigation_menu_example_1.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,23 +8,23 @@ class NavigationMenuExample1 extends StatelessWidget {
final theme = Theme.of(context);
return NavigationMenu(
children: [
NavigationItem(
content: NavigationContentList(
NavigationMenuItem(
content: NavigationMenuContentList(
reverse: true,
children: [
NavigationContent(
NavigationMenuContent(
title: const Text('Introduction'),
content: const Text(
'Component library for Flutter based on Shadcn/UI design.'),
onPressed: () {},
),
NavigationContent(
NavigationMenuContent(
title: const Text('Installation'),
content: const Text(
'How to install this package in your Flutter project.'),
onPressed: () {},
),
NavigationContent(
NavigationMenuContent(
title: const Text('Typography'),
content: const Text(
'Styles and usage of typography in this package.'),
Expand Down Expand Up @@ -57,35 +57,35 @@ class NavigationMenuExample1 extends StatelessWidget {
),
child: const Text('Getting started'),
),
NavigationItem(
content: NavigationContentList(
NavigationMenuItem(
content: NavigationMenuContentList(
children: [
NavigationContent(
NavigationMenuContent(
title: const Text('Accordion'),
content: const Text('Accordion component for Flutter.'),
onPressed: () {},
),
NavigationContent(
NavigationMenuContent(
title: const Text('Alert'),
content: const Text('Alert component for Flutter.'),
onPressed: () {},
),
NavigationContent(
NavigationMenuContent(
title: const Text('Alert Dialog'),
content: const Text('Alert Dialog component for Flutter.'),
onPressed: () {},
),
NavigationContent(
NavigationMenuContent(
title: const Text('Animation'),
content: const Text('Animation component for Flutter.'),
onPressed: () {},
),
NavigationContent(
NavigationMenuContent(
title: const Text('Avatar'),
content: const Text('Avatar component for Flutter.'),
onPressed: () {},
),
NavigationContent(
NavigationMenuContent(
title: const Text('Badge'),
content: const Text('Badge component for Flutter.'),
onPressed: () {},
Expand All @@ -94,22 +94,22 @@ class NavigationMenuExample1 extends StatelessWidget {
),
child: const Text('Components'),
),
NavigationItem(
content: NavigationContentList(
NavigationMenuItem(
content: NavigationMenuContentList(
crossAxisCount: 2,
children: [
// latest news
NavigationContent(
NavigationMenuContent(
title: const Text('Latest news'),
content: const Text('Stay updated with the latest news.'),
onPressed: () {},
),
NavigationContent(
NavigationMenuContent(
title: const Text('Change log'),
content: const Text('View the change log of this package.'),
onPressed: () {},
),
NavigationContent(
NavigationMenuContent(
title: const Text('Contributors'),
content: const Text('List of contributors to this package.'),
onPressed: () {},
Expand All @@ -118,7 +118,7 @@ class NavigationMenuExample1 extends StatelessWidget {
),
child: const Text('Blog'),
),
NavigationItem(
NavigationMenuItem(
onPressed: () {},
child: const Text('Documentation'),
),
Expand Down
4 changes: 2 additions & 2 deletions docs/lib/pages/docs/components/navigation_rail/navigation_rail_example_1.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,8 +16,8 @@ class _NavigationRailExample1State extends State<NavigationRailExample1> {
bool customButtonStyle = false;
bool expanded = true;

NavigationButton buildButton(String label, IconData icon) {
return NavigationButton(
NavigationItem buildButton(String label, IconData icon) {
return NavigationItem(
style: customButtonStyle
? const ButtonStyle.muted(density: ButtonDensity.icon)
: null,
Expand Down
2 changes: 1 addition & 1 deletion docs/lib/pages/docs/components/navigation_sidebar/navigation_sidebar_example_1.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ class _NavigationSidebarExample1State extends State<NavigationSidebarExample1> {
int selected = 0;

NavigationBarItem buildButton(String label, IconData icon) {
return NavigationButton(
return NavigationItem(
label: Text(label),
child: Icon(icon),
);
Expand Down
4 changes: 2 additions & 2 deletions docs/lib/pages/docs/components_page.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1012,7 +1012,7 @@ class _ComponentsPageState extends State<ComponentsPage> {
),
child: const Text('Getting Started'),
),
const NavigationItem(
const NavigationMenuItem(
content: SizedBox(),
child: Text('Components'),
),
Expand All @@ -1023,7 +1023,7 @@ class _ComponentsPageState extends State<ComponentsPage> {
borderRadius: theme.borderRadiusMd,
child: Padding(
padding: const EdgeInsets.all(12.0),
child: NavigationContentList(
child: NavigationMenuContentList(
children: [
Button(
style: ButtonVariance.ghost.copyWith(
Expand Down
2 changes: 1 addition & 1 deletion docs/lib/pages/docs_page.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -290,7 +290,7 @@ class DocsPageState extends State<DocsPage> {
ShadcnDocsPage('Navigation Bar', 'navigation_bar'),
ShadcnDocsPage('Navigation Rail', 'navigation_rail'),
ShadcnDocsPage('Expandable Sidebar', 'expandable_sidebar',
ShadcnFeatureTag.workInProgress),
ShadcnFeatureTag.experimental),
// aka Drawer
ShadcnDocsPage('Navigation Sidebar', 'navigation_sidebar'),
ShadcnDocsPage('Dot Indicator', 'dot_indicator'),
Expand Down

0 comments on commit 19d361a

Please sign in to comment.