nicegui/website/documentation/content/more/card_documentation.py

from nicegui import ui

from ...model import UiElementDocumentation


class CardDocumentation(UiElementDocumentation, element=ui.card):

    def main_demo(self) -> None:
        with ui.card().tight():
            ui.image('https://picsum.photos/id/684/640/360')
            with ui.card_section():
                ui.label('Lorem ipsum dolor sit amet, consectetur adipiscing elit, ...')

    def more(self) -> None:
        @self.demo('Card without shadow', '''
            You can remove the shadow from a card by adding the `no-shadow` class.
            The following demo shows a 1 pixel wide border instead.
        ''')
        def card_without_shadow() -> None:
            with ui.card().classes('no-shadow border-[1px]'):
                ui.label('See, no shadow!')

        @self.demo('The issue with nested borders', '''
            The following example shows a table nested in a card.
            Cards have a default padding in NiceGUI, so the table is not flush with the card's border.
            The table has the `flat` and `bordered` props set, so it should have a border.
            However, due to the way QCard is designed, the border is not visible (first card).
            There are two ways to fix this:

            - To get the original QCard behavior, use the `tight` method (second card).
                It removes the padding and the table border collapses with the card border.
            
            - To preserve the padding _and_ the table border, move the table into another container like a `ui.row` (third card).

            See https://github.com/zauberzeug/nicegui/issues/726 for more information.
        ''')
        def custom_context_menu() -> None:
            columns = [{'name': 'age', 'label': 'Age', 'field': 'age'}]
            rows = [{'age': '16'}, {'age': '18'}, {'age': '21'}]

            with ui.row():
                with ui.card():
                    ui.table(columns, rows).props('flat bordered')

                with ui.card().tight():
                    ui.table(columns, rows).props('flat bordered')

                with ui.card():
                    with ui.row():
                        ui.table(columns, rows).props('flat bordered')