From 42ad3a2ffe6a9926824c157fe987504d425c31e5 Mon Sep 17 00:00:00 2001 From: Alexandru Mariuti Date: Tue, 19 Nov 2024 12:53:37 +0100 Subject: [PATCH] Docs/fix wrong code samples (#198) --- docs/src/content/docs/Components/card.mdx | 265 +++++++++--------- docs/src/content/docs/Components/checkbox.mdx | 44 ++- .../content/docs/Components/context-menu.mdx | 22 +- docs/src/content/docs/Components/dialog.mdx | 154 +++++----- docs/src/content/docs/Components/input.mdx | 16 +- docs/src/content/docs/Components/popover.mdx | 9 +- docs/src/content/docs/Components/select.mdx | 142 ++++++---- docs/src/content/docs/Components/switch.mdx | 34 ++- docs/src/content/docs/Components/table.mdx | 114 ++++---- docs/src/content/docs/Components/tabs.mdx | 118 ++++---- docs/src/content/docs/Components/toast.mdx | 20 +- 11 files changed, 524 insertions(+), 414 deletions(-) diff --git a/docs/src/content/docs/Components/card.mdx b/docs/src/content/docs/Components/card.mdx index 600f50c5..02487af5 100644 --- a/docs/src/content/docs/Components/card.mdx +++ b/docs/src/content/docs/Components/card.mdx @@ -3,12 +3,14 @@ title: Card sidebar: order: 4 --- -import Preview from '../../../components/Preview.astro'; + +import Preview from "../../../components/Preview.astro"; Displays a card with header, content, and footer. - ```dart + +```dart const frameworks = { 'next': 'Next.js', 'react': 'React', @@ -23,56 +25,60 @@ class CardProject extends StatelessWidget { Widget build(BuildContext context) { final theme = ShadTheme.of(context); return ShadCard( - width: 350, - title: Text('Create project', style: theme.textTheme.h4), - description: const Text('Deploy your new project in one-click.'), - child: Padding( - padding: const EdgeInsets.symmetric(vertical: 16), - child: Column( - mainAxisSize: MainAxisSize.min, - crossAxisAlignment: CrossAxisAlignment.stretch, - children: [ - const Text('Name'), - const ShadInput(placeholder: 'Name of your project'), - const SizedBox(height: 6), - const Text('Framework'), - ShadSelect( - placeholder: const Text('Select'), - options: frameworks.entries - .map( - (e) => ShadOption(value: e.key, child: Text(e.value))) - .toList(), - selectedOptionBuilder: (context, value) { - return Text(frameworks[value]!); - }, - onChanged: (value) {}, - ), - ], + width: 350, + title: Text('Create project', style: theme.textTheme.h4), + description: const Text('Deploy your new project in one-click.'), + footer: Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + ShadButton.outline( + child: const Text('Cancel'), + onPressed: () {}, ), - ), - footer: Row( - mainAxisAlignment: MainAxisAlignment.spaceBetween, + ShadButton( + child: const Text('Deploy'), + onPressed: () {}, + ), + ], + ), + child: Padding( + padding: const EdgeInsets.symmetric(vertical: 16), + child: Column( + mainAxisSize: MainAxisSize.min, + crossAxisAlignment: CrossAxisAlignment.stretch, children: [ - ShadButton.outline( - child: const Text('Cancel'), - onPressed: () {}, - ), - ShadButton( - child: const Text('Deploy'), - onPressed: () {}, + const Text('Name'), + const ShadInput(placeholder: Text('Name of your project')), + const SizedBox(height: 6), + const Text('Framework'), + ShadSelect( + placeholder: const Text('Select'), + options: frameworks.entries + .map((e) => ShadOption(value: e.key, child: Text(e.value))) + .toList(), + selectedOptionBuilder: (context, value) { + return Text(frameworks[value]!); + }, + onChanged: (value) {}, ), ], ), - ); + ), + ); } } ``` + ## Notifications Example + ```dart +import 'package:awesome_flutter_extensions/awesome_flutter_extensions.dart'; +import 'package:shadcn_ui/shadcn_ui.dart'; + const notifications = [ ( title: "Your call has been confirmed.", @@ -108,103 +114,104 @@ class _CardNotificationsState extends State { Widget build(BuildContext context) { final theme = ShadTheme.of(context); return ShadCard( - width: 380, - title: const Text('Notifications'), - description: const Text('You have 3 unread messages.'), - child: Column( - children: [ - const SizedBox(height: 16), - Container( - padding: const EdgeInsets.all(16), - decoration: BoxDecoration( - borderRadius: theme.radius, - border: Border.all(color: theme.colorScheme.border), - ), - child: Row( - children: [ - ShadImage.square( - LucideIcons.bellRing, - size: 24, - color: theme.colorScheme.foreground, - ), - Expanded( - child: Padding( - padding: const EdgeInsets.only(left: 16), - child: Column( - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text( - 'Push Notifications', - style: theme.textTheme.small, - ), - const SizedBox(height: 4), - Text( - 'Send notifications to device.', - style: theme.textTheme.muted, - ) - ], - ), + width: 380, + title: const Text('Notifications'), + description: const Text('You have 3 unread messages.'), + footer: ShadButton( + width: double.infinity, + icon: const Padding( + padding: EdgeInsets.only(right: 8), + child: ShadImage.square(LucideIcons.check, size: 16), + ), + onPressed: () {}, + child: const Text('Mark all as read'), + ), + child: Column( + children: [ + const SizedBox(height: 16), + Container( + padding: const EdgeInsets.all(16), + decoration: BoxDecoration( + borderRadius: theme.radius, + border: Border.all(color: theme.colorScheme.border), + ), + child: Row( + children: [ + ShadImage.square( + LucideIcons.bellRing, + size: 24, + color: theme.colorScheme.foreground, + ), + Expanded( + child: Padding( + padding: const EdgeInsets.only(left: 16), + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Text( + 'Push Notifications', + style: theme.textTheme.small, + ), + const SizedBox(height: 4), + Text( + 'Send notifications to device.', + style: theme.textTheme.muted, + ) + ], ), ), - ValueListenableBuilder( - valueListenable: pushNotifications, - builder: (context, value, child) { - return ShadSwitch( - value: value, - onChanged: (v) => pushNotifications.value = v, - ); - }, - ), - ], - ), + ), + ValueListenableBuilder( + valueListenable: pushNotifications, + builder: (context, value, child) { + return ShadSwitch( + value: value, + onChanged: (v) => pushNotifications.value = v, + ); + }, + ), + ], ), - const SizedBox(height: 16), - ...notifications - .map( - (n) => Row( - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Container( - width: 8, - height: 8, - margin: const EdgeInsets.only(top: 4), - decoration: const BoxDecoration( - color: Color(0xFF0CA5E9), - shape: BoxShape.circle, - ), + ), + const SizedBox(height: 16), + ...notifications + .map( + (n) => Row( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Container( + width: 8, + height: 8, + margin: const EdgeInsets.only(top: 4), + decoration: const BoxDecoration( + color: Color(0xFF0CA5E9), + shape: BoxShape.circle, ), - Expanded( - child: Padding( - padding: const EdgeInsets.only(left: 16), - child: Column( - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text('Your call has been confirmed.', - style: theme.textTheme.small), - const SizedBox(height: 4), - Text(n.description, style: theme.textTheme.muted), - ], - ), + ), + Expanded( + child: Padding( + padding: const EdgeInsets.only(left: 16), + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Text('Your call has been confirmed.', + style: theme.textTheme.small), + const SizedBox(height: 4), + Text(n.description, style: theme.textTheme.muted), + ], ), - ) - ], - ), - ) - .separatedBy(const SizedBox(height: 16)), - const SizedBox(height: 16), - ], - ), - footer: ShadButton( - width: double.infinity, - text: const Text('Mark all as read'), - icon: const Padding( - padding: EdgeInsets.only(right: 8), - child: ShadImage.square(LucideIcons.check, size: 16), - ), - onPressed: () {}, - ), - ); + ), + ) + ], + ), + ) + .separatedBy(const SizedBox(height: 16)), + const SizedBox(height: 16), + ], + ), + ); } } ``` + diff --git a/docs/src/content/docs/Components/checkbox.mdx b/docs/src/content/docs/Components/checkbox.mdx index f2053768..beb0764e 100644 --- a/docs/src/content/docs/Components/checkbox.mdx +++ b/docs/src/content/docs/Components/checkbox.mdx @@ -3,32 +3,45 @@ title: Checkbox sidebar: order: 4 --- -import Preview from '../../../components/Preview.astro'; + +import Preview from "../../../components/Preview.astro"; A control that allows the user to toggle between checked and not checked. - ```dart -bool value = false; - -@override -Widget build(BuildContext context) { - return ShadCheckbox( - value: value, - onChanged: (v) => setState(() => value = v), - label: const Text('Accept terms and conditions'), - sublabel: const Text( - 'You agree to our Terms of Service and Privacy Policy.', - ), - ); + +```dart +class CheckboxSample extends StatefulWidget { + const CheckboxSample({super.key}); + + @override + State createState() => _CheckboxSampleState(); +} + +class _CheckboxSampleState extends State { + bool value = false; + + @override + Widget build(BuildContext context) { + return ShadCheckbox( + value: value, + onChanged: (v) => setState(() => value = v), + label: const Text('Accept terms and conditions'), + sublabel: const Text( + 'You agree to our Terms of Service and Privacy Policy.', + ), + ); + } } ``` + ## Form - ```dart + +```dart ShadCheckboxFormField( id: 'terms', initialValue: false, @@ -45,4 +58,5 @@ ShadCheckboxFormField( }, ) ``` + diff --git a/docs/src/content/docs/Components/context-menu.mdx b/docs/src/content/docs/Components/context-menu.mdx index cd50986e..b7d03ab6 100644 --- a/docs/src/content/docs/Components/context-menu.mdx +++ b/docs/src/content/docs/Components/context-menu.mdx @@ -25,16 +25,6 @@ class ContextMenuPage extends StatelessWidget { padding: const EdgeInsets.all(16), child: ShadContextMenuRegion( constraints: const BoxConstraints(minWidth: 300), - child: Container( - width: 300, - height: 200, - alignment: Alignment.center, - decoration: BoxDecoration( - border: Border.all(color: theme.colorScheme.border), - borderRadius: BorderRadius.circular(8), - ), - child: const Text('Right click here'), - ), items: [ const ShadContextMenuItem.inset( child: Text('Back'), @@ -47,7 +37,6 @@ class ContextMenuPage extends StatelessWidget { child: Text('Reload'), ), const ShadContextMenuItem.inset( - child: Text('More Tools'), trailing: ShadImage.square( LucideIcons.chevronRight, size: 16, @@ -67,6 +56,7 @@ class ContextMenuPage extends StatelessWidget { child: Text('Developer Tools'), ), ], + child: Text('More Tools'), ), const Divider(height: 8), const ShadContextMenuItem( @@ -98,6 +88,16 @@ class ContextMenuPage extends StatelessWidget { ), const ShadContextMenuItem.inset(child: Text('Colm Tuite')), ], + child: Container( + width: 300, + height: 200, + alignment: Alignment.center, + decoration: BoxDecoration( + border: Border.all(color: theme.colorScheme.border), + borderRadius: BorderRadius.circular(8), + ), + child: const Text('Right click here'), + ), ), ), ); diff --git a/docs/src/content/docs/Components/dialog.mdx b/docs/src/content/docs/Components/dialog.mdx index 5c4d6de4..cad3061a 100644 --- a/docs/src/content/docs/Components/dialog.mdx +++ b/docs/src/content/docs/Components/dialog.mdx @@ -3,92 +3,112 @@ title: Dialog sidebar: order: 4 --- -import Preview from '../../../components/Preview.astro'; + +import Preview from "../../../components/Preview.astro"; A modal dialog that interrupts the user. - ```dart + +```dart final profile = [ (title: 'Name', value: 'Alexandru'), (title: 'Username', value: 'nank1ro'), ]; -ShadButton.outline( - child: const Text('Edit Profile'), - onPressed: () { - showShadDialog( - context: context, - builder: (context) => ShadDialog( - title: const Text('Edit Profile'), - description: const Text( - "Make changes to your profile here. Click save when you're done"), - child: Container( - width: 375, - padding: const EdgeInsets.symmetric(vertical: 20), - child: Column( - mainAxisSize: MainAxisSize.min, - crossAxisAlignment: CrossAxisAlignment.end, - children: profile - .map( - (p) => Row( - children: [ - Expanded( - child: Text( - p.title, - textAlign: TextAlign.end, - style: theme.textTheme.small, - ), - ), - const SizedBox(width: 16), - Expanded( - flex: 3, - child: ShadInput(initialValue: p.value), +class DialogExample extends StatelessWidget { + const DialogExample({super.key}); + + @override + Widget build(BuildContext context) { + final theme = ShadTheme.of(context); + return ShadButton.outline( + child: const Text('Edit Profile'), + onPressed: () { + showShadDialog( + context: context, + builder: (context) => ShadDialog( + title: const Text('Edit Profile'), + description: const Text( + "Make changes to your profile here. Click save when you're done"), + actions: const [ShadButton(child: Text('Save changes'))], + child: Container( + width: 375, + padding: const EdgeInsets.symmetric(vertical: 20), + child: Column( + mainAxisSize: MainAxisSize.min, + crossAxisAlignment: CrossAxisAlignment.end, + children: profile + .map( + (p) => Row( + children: [ + Expanded( + child: Text( + p.title, + textAlign: TextAlign.end, + style: theme.textTheme.small, + ), + ), + const SizedBox(width: 16), + Expanded( + flex: 3, + child: ShadInput(initialValue: p.value), + ), + ], ), - ], - ), - ) - .toList(), + ) + .toList(), + ), + ), ), - ), - actions: const [ShadButton(child: Text('Save changes'))], - ), + ); + }, ); - }, -), + } +} ``` + ## Alert - ```dart -ShadButton.outline( - child: const Text('Show Dialog'), - onPressed: () { - showShadDialog( - context: context, - builder: (context) => ShadDialog.alert( - title: const Text('Are you absolutely sure?'), - description: const Padding( - padding: EdgeInsets.only(bottom: 8), - child: Text( - 'This action cannot be undone. This will permanently delete your account and remove your data from our servers.', - ), - ), - actions: [ - ShadButton.outline( - child: const Text('Cancel'), - onPressed: () => Navigator.of(context).pop(false), - ), - ShadButton( - child: const Text('Continue'), - onPressed: () => Navigator.of(context).pop(true), + +```dart +class DialogExample extends StatelessWidget { + const DialogExample({super.key}); + + @override + Widget build(BuildContext context) { + return ShadButton.outline( + child: const Text('Show Dialog'), + onPressed: () { + showShadDialog( + context: context, + builder: (context) => ShadDialog.alert( + title: const Text('Are you absolutely sure?'), + description: const Padding( + padding: EdgeInsets.only(bottom: 8), + child: Text( + 'This action cannot be undone. This will permanently delete your account and remove your data from our servers.', + ), + ), + actions: [ + ShadButton.outline( + child: const Text('Cancel'), + onPressed: () => Navigator.of(context).pop(false), + ), + ShadButton( + child: const Text('Continue'), + onPressed: () => Navigator.of(context).pop(true), + ), + ], ), - ], - ), + ); + }, ); - }, -), + } +} ``` + diff --git a/docs/src/content/docs/Components/input.mdx b/docs/src/content/docs/Components/input.mdx index 0f601061..d244e26c 100644 --- a/docs/src/content/docs/Components/input.mdx +++ b/docs/src/content/docs/Components/input.mdx @@ -4,26 +4,29 @@ sidebar: order: 4 --- -import Preview from '../../../components/Preview.astro'; +import Preview from "../../../components/Preview.astro"; Displays a form input field or a component that looks like an input field. - ```dart + +```dart ConstrainedBox( constraints: const BoxConstraints(maxWidth: 320), child: const ShadInput( - placeholder: 'Email', + placeholder: Text('Email'), keyboardType: TextInputType.emailAddress, ), ), ``` + ## With prefix and suffix - ```dart + +```dart class PasswordInput extends StatefulWidget { const PasswordInput({super.key}); @@ -63,12 +66,14 @@ class _PasswordInputState extends State { } } ``` + ## Form - ```dart + +```dart ShadInputFormField( id: 'username', label: const Text('Username'), @@ -83,4 +88,5 @@ ShadInputFormField( }, ), ``` + diff --git a/docs/src/content/docs/Components/popover.mdx b/docs/src/content/docs/Components/popover.mdx index 93a04fb2..e9c2196f 100644 --- a/docs/src/content/docs/Components/popover.mdx +++ b/docs/src/content/docs/Components/popover.mdx @@ -4,12 +4,13 @@ sidebar: order: 4 --- -import Preview from '../../../components/Preview.astro'; +import Preview from "../../../components/Preview.astro"; Displays rich content in a portal, triggered by a button. - ```dart + +```dart import 'package:flutter/material.dart'; import 'package:shadcn_ui/shadcn_ui.dart'; @@ -80,14 +81,14 @@ class _PopoverPageState extends State { ), ), child: ShadButton.outline( - child: const Text('Open popover'), onPressed: popoverController.toggle, + child: const Text('Open popover'), ), ), ), ); } } - ``` + diff --git a/docs/src/content/docs/Components/select.mdx b/docs/src/content/docs/Components/select.mdx index d5a0de2c..61fd8af3 100644 --- a/docs/src/content/docs/Components/select.mdx +++ b/docs/src/content/docs/Components/select.mdx @@ -19,32 +19,36 @@ final fruits = { 'pineapple': 'Pineapple', }; -@override -Widget build(BuildContext context) { -return ConstrainedBox( - constraints: const BoxConstraints(minWidth: 180), - child: ShadSelect( - placeholder: const Text('Select a fruit'), - options: [ - Padding( - padding: const EdgeInsets.fromLTRB(32, 6, 6, 6), - child: Text( - 'Fruits', - style: theme.textTheme.muted.copyWith( - fontWeight: FontWeight.w600, - color: theme.colorScheme.popoverForeground, +class SelectExample extends StatelessWidget { + const SelectExample({super.key}); + + @override + Widget build(BuildContext context) { + final theme = ShadTheme.of(context); + return ConstrainedBox( + constraints: const BoxConstraints(minWidth: 180), + child: ShadSelect( + placeholder: const Text('Select a fruit'), + options: [ + Padding( + padding: const EdgeInsets.fromLTRB(32, 6, 6, 6), + child: Text( + 'Fruits', + style: theme.textTheme.muted.copyWith( + fontWeight: FontWeight.w600, + color: theme.colorScheme.popoverForeground, + ), + textAlign: TextAlign.start, + ), ), - textAlign: TextAlign.start, - ), + ...fruits.entries + .map((e) => ShadOption(value: e.key, child: Text(e.value))), + ], + selectedOptionBuilder: (context, value) => Text(fruits[value]!), + onChanged: print, ), - ...fruits.entries.map( - (e) => ShadOption(value: e.key, child: Text(e.value))), - ], - selectedOptionBuilder: (context, value) => - Text(fruits[value]!), - onChanged: print, - ), -); + ); + } } ``` @@ -117,22 +121,26 @@ List getTimezonesWidgets(ShadThemeData theme) { return widgets; } -@override -Widget build(BuildContext context) { - return ConstrainedBox( - constraints: const BoxConstraints(minWidth: 280), - child: ShadSelect( - placeholder: const Text('Select a timezone'), - options: getTimezonesWidgets(theme), - selectedOptionBuilder: (context, value) { - final timezone = timezones.entries - .firstWhere( - (element) => element.value.containsKey(value)) - .value[value]; - return Text(timezone!); - }, - ), - ); +class SelectExample extends StatelessWidget { + const SelectExample({super.key}); + + @override + Widget build(BuildContext context) { + final theme = ShadTheme.of(context); + return ConstrainedBox( + constraints: const BoxConstraints(minWidth: 280), + child: ShadSelect( + placeholder: const Text('Select a timezone'), + options: getTimezonesWidgets(theme), + selectedOptionBuilder: (context, value) { + final timezone = timezones.entries + .firstWhere((element) => element.value.containsKey(value)) + .value[value]; + return Text(timezone!); + }, + ), + ); + } } ``` @@ -149,25 +157,31 @@ final verifiedEmails = [ 'm@support.com', ]; -ShadSelectFormField( - id: 'email', - minWidth: 350, - initialValue: null, - options: verifiedEmails - .map((email) => - ShadOption(value: email, child: Text(email))) - .toList(), - selectedOptionBuilder: (context, value) => value == 'none' - ? const Text('Select a verified email to display') - : Text(value), - placeholder: const Text('Select a verified email to display'), - validator: (v) { - if (v == null) { - return 'Please select an email to display'; - } - return null; - }, -), +class SelectFormField extends StatelessWidget { + const SelectFormField({super.key}); + + @override + Widget build(BuildContext context) { + return ShadSelectFormField( + id: 'email', + minWidth: 350, + initialValue: null, + options: verifiedEmails + .map((email) => ShadOption(value: email, child: Text(email))) + .toList(), + selectedOptionBuilder: (context, value) => value == 'none' + ? const Text('Select a verified email to display') + : Text(value), + placeholder: const Text('Select a verified email to display'), + validator: (v) { + if (v == null) { + return 'Please select an email to display'; + } + return null; + }, + ); + } +} ``` @@ -204,8 +218,6 @@ class _SelectWithSearchState extends State { @override Widget build(BuildContext context) { return ShadSelect.withSearch( - enabled: enabled, - focusNode: focusNodes[2], minWidth: 180, maxWidth: 300, placeholder: const Text('Select framework...'), @@ -253,6 +265,14 @@ If you tap outside the popover, it will close. ```dart +final fruits = { + 'apple': 'Apple', + 'banana': 'Banana', + 'blueberry': 'Blueberry', + 'grapes': 'Grapes', + 'pineapple': 'Pineapple', +}; + class SelectMultiple extends StatelessWidget { const SelectMultiple({super.key}); diff --git a/docs/src/content/docs/Components/switch.mdx b/docs/src/content/docs/Components/switch.mdx index 273c69c6..76c1e166 100644 --- a/docs/src/content/docs/Components/switch.mdx +++ b/docs/src/content/docs/Components/switch.mdx @@ -3,23 +3,35 @@ title: Switch sidebar: order: 4 --- -import Preview from '../../../components/Preview.astro'; + +import Preview from "../../../components/Preview.astro"; A control that allows the user to toggle between checked and not checked. - ```dart -bool value = false; - -@override -Widget build(BuildContext context) { - return ShadSwitch( - value: value, - onChanged: (v) => setState(() => value = v), - label: const Text('Airplane Mode'), - ); + +```dart +class SwitchExample extends StatefulWidget { + const SwitchExample({super.key}); + + @override + State createState() => _SwitchExampleState(); +} + +class _SwitchExampleState extends State { + bool value = false; + + @override + Widget build(BuildContext context) { + return ShadSwitch( + value: value, + onChanged: (v) => setState(() => value = v), + label: const Text('Airplane Mode'), + ); + } } ``` + ## Form diff --git a/docs/src/content/docs/Components/table.mdx b/docs/src/content/docs/Components/table.mdx index c80bde76..edc7477f 100644 --- a/docs/src/content/docs/Components/table.mdx +++ b/docs/src/content/docs/Components/table.mdx @@ -3,7 +3,8 @@ title: Table sidebar: order: 4 --- -import Preview from '../../../components/Preview.astro'; + +import Preview from "../../../components/Preview.astro"; A responsive table component. @@ -13,6 +14,7 @@ Use the `ShadTable.list` widget to create a table from a two dimensional array o Use it just for **small** tables, because every child will be created. + ```dart import 'package:flutter/material.dart'; import 'package:shadcn_ui/shadcn_ui.dart'; @@ -135,6 +137,7 @@ class TablePage extends StatelessWidget { } } ``` + ## Builder @@ -142,6 +145,7 @@ class TablePage extends StatelessWidget { You can also use a builder to create the table. This method is preferred for **large** tables because widgets are created on demand. Here it is the same table as above, but using a builder. + ```dart const invoices = [ [ @@ -195,61 +199,65 @@ final headings = [ 'Amount', ]; -@override -Widget build(BuildContext context) { - return ShadTable( - columnCount: invoices[0].length, - rowCount: invoices.length, - header: (context, column) { - final isLast = column == headings.length - 1; - return ShadTableCell.header( - alignment: isLast ? Alignment.centerRight : null, - child: Text(headings[column]), - ); - }, - columnSpanExtent: (index) { - if (index == 2) return const FixedTableSpanExtent(150); - if (index == 3) { - return const MaxTableSpanExtent( - FixedTableSpanExtent(120), - RemainingTableSpanExtent(), - ); - } - return null; - }, - builder: (context, index) { - final invoice = invoices[index.row]; - return ShadTableCell( - alignment: index.column == invoice.length - 1 - ? Alignment.centerRight - : Alignment.centerLeft, - child: Text( - invoice[index.column], - style: index.column == 0 - ? const TextStyle(fontWeight: FontWeight.w500) - : null, - ), - ); - }, - footer: (context, column) { - if (column == 0) { - return const ShadTableCell.footer( - child: Text( - 'Total', - style: TextStyle(fontWeight: FontWeight.w500), - ), +class TableExample extends StatelessWidget { + const TableExample({super.key}); + + @override + Widget build(BuildContext context) { + return ShadTable( + columnCount: invoices[0].length, + rowCount: invoices.length, + header: (context, column) { + final isLast = column == headings.length - 1; + return ShadTableCell.header( + alignment: isLast ? Alignment.centerRight : null, + child: Text(headings[column]), ); - } - if (column == 3) { - return const ShadTableCell.footer( - alignment: Alignment.centerRight, + }, + columnSpanExtent: (index) { + if (index == 2) return const FixedTableSpanExtent(150); + if (index == 3) { + return const MaxTableSpanExtent( + FixedTableSpanExtent(120), + RemainingTableSpanExtent(), + ); + } + return null; + }, + builder: (context, index) { + final invoice = invoices[index.row]; + return ShadTableCell( + alignment: index.column == invoice.length - 1 + ? Alignment.centerRight + : Alignment.centerLeft, child: Text( - r'$2500.00', + invoice[index.column], + style: index.column == 0 + ? const TextStyle(fontWeight: FontWeight.w500) + : null, ), ); - } - return const ShadTableCell(child: SizedBox()); - }, - ); + }, + footer: (context, column) { + if (column == 0) { + return const ShadTableCell.footer( + child: Text( + 'Total', + style: TextStyle(fontWeight: FontWeight.w500), + ), + ); + } + if (column == 3) { + return const ShadTableCell.footer( + alignment: Alignment.centerRight, + child: Text( + r'$2500.00', + ), + ); + } + return const ShadTableCell(child: SizedBox()); + }, + ); + } } ``` diff --git a/docs/src/content/docs/Components/tabs.mdx b/docs/src/content/docs/Components/tabs.mdx index a7f1f5d4..31cd8612 100644 --- a/docs/src/content/docs/Components/tabs.mdx +++ b/docs/src/content/docs/Components/tabs.mdx @@ -3,69 +3,79 @@ title: Tabs sidebar: order: 4 --- -import Preview from '../../../components/Preview.astro'; + +import Preview from "../../../components/Preview.astro"; A set of layered sections of content—known as tab panels—that are displayed one at a time. + ```dart -ShadTabs( - value: 'account', - tabBarConstraints: const BoxConstraints(maxWidth: 400), - contentConstraints: const BoxConstraints(maxWidth: 400), - tabs: [ - ShadTab( +class TabsExample extends StatelessWidget { + const TabsExample({super.key}); + + @override + Widget build(BuildContext context) { + return ShadTabs( value: 'account', - child: const Text('Account'), - content: ShadCard( - title: const Text('Account'), - description: const Text( - "Make changes to your account here. Click save when you're done."), - content: Column( - mainAxisSize: MainAxisSize.min, - children: [ - const SizedBox(height: 16), - ShadInputFormField( - label: const Text('Name'), - initialValue: 'Ale', + tabBarConstraints: const BoxConstraints(maxWidth: 400), + contentConstraints: const BoxConstraints(maxWidth: 400), + tabs: [ + ShadTab( + value: 'account', + content: ShadCard( + title: const Text('Account'), + description: const Text( + "Make changes to your account here. Click save when you're done."), + footer: const ShadButton(child: Text('Save changes')), + child: Column( + mainAxisSize: MainAxisSize.min, + children: [ + const SizedBox(height: 16), + ShadInputFormField( + label: const Text('Name'), + initialValue: 'Ale', + ), + const SizedBox(height: 8), + ShadInputFormField( + label: const Text('Username'), + initialValue: 'nank1ro', + ), + const SizedBox(height: 16), + ], ), - const SizedBox(height: 8), - ShadInputFormField( - label: const Text('Username'), - initialValue: 'nank1ro', - ), - const SizedBox(height: 16), - ], + ), + child: const Text('Account'), ), - footer: const ShadButton(child: Text('Save changes')), - ), - ), - ShadTab( - value: 'password', - child: const Text('Password'), - content: ShadCard( - title: const Text('Password'), - description: const Text( - "Change your password here. After saving, you'll be logged out."), - content: Column( - children: [ - const SizedBox(height: 16), - ShadInputFormField( - label: const Text('Current password'), - obscureText: true, - ), - const SizedBox(height: 8), - ShadInputFormField( - label: const Text('New password'), - obscureText: true, + ShadTab( + value: 'password', + content: ShadCard( + title: const Text('Password'), + description: const Text( + "Change your password here. After saving, you'll be logged out."), + footer: const ShadButton(child: Text('Save password')), + child: Column( + children: [ + const SizedBox(height: 16), + ShadInputFormField( + label: const Text('Current password'), + obscureText: true, + ), + const SizedBox(height: 8), + ShadInputFormField( + label: const Text('New password'), + obscureText: true, + ), + const SizedBox(height: 16), + ], ), - const SizedBox(height: 16), - ], + ), + child: const Text('Password'), ), - footer: const ShadButton(child: Text('Save password')), - ), - ), - ], -), + ], + ); + } +} ``` + diff --git a/docs/src/content/docs/Components/toast.mdx b/docs/src/content/docs/Components/toast.mdx index bdfb9c91..7fc22a5d 100644 --- a/docs/src/content/docs/Components/toast.mdx +++ b/docs/src/content/docs/Components/toast.mdx @@ -9,7 +9,8 @@ import Preview from "../../../components/Preview.astro"; A succinct message that is displayed temporarily. - ```dart + +```dart ShadButton.outline( child: const Text('Add to calendar'), onPressed: () { @@ -27,12 +28,14 @@ ShadButton.outline( }, ), ``` + ## Simple - ```dart + +```dart ShadButton.outline( child: const Text('Show Toast'), onPressed: () { @@ -44,12 +47,14 @@ ShadButton.outline( }, ), ``` + ## With Title - ```dart + +```dart ShadButton.outline( child: const Text('Show Toast'), onPressed: () { @@ -63,12 +68,14 @@ ShadButton.outline( }, ), ``` + ## With Action - ```dart + +```dart ShadButton.outline( child: const Text('Show Toast'), onPressed: () { @@ -86,12 +93,16 @@ ShadButton.outline( }, ), ``` + ## Destructive + ```dart +final theme = ShadTheme.of(context); + ShadButton.outline( child: const Text('Show Toast'), onPressed: () { @@ -114,4 +125,5 @@ ShadButton.outline( }, ), ``` +