add_style_documentation.py 1012 B

12345678910111213141516171819202122232425262728293031323334353637383940414243
  1. from nicegui import ui
  2. from . import doc
  3. @doc.demo(ui.add_style)
  4. def main_demo() -> None:
  5. ui.add_style('''
  6. .red {
  7. color: red;
  8. }
  9. ''')
  10. ui.label('This is red with CSS.').classes('red')
  11. @doc.demo('Add SCSS', '''
  12. You can also use SCSS to define styles.
  13. ''')
  14. def scss_demo() -> None:
  15. ui.add_style('''
  16. .green {
  17. background-color: lightgreen;
  18. .blue {
  19. color: blue;
  20. }
  21. }
  22. ''')
  23. with ui.element().classes('green'):
  24. ui.label('This is blue on green with SCSS.').classes('blue')
  25. @doc.demo('Add SASS', '''
  26. You can also use the indented SASS syntax by setting the `indented` parameter to `True`.
  27. ''')
  28. def sass_demo() -> None:
  29. ui.add_style('''
  30. .yellow
  31. background-color: yellow
  32. .purple
  33. color: purple
  34. ''', indented=True)
  35. with ui.element().classes('yellow'):
  36. ui.label('This is purple on yellow with SASS.').classes('purple')