mirror of
https://github.com/django-components/django-components.git
synced 2025-08-04 06:18:17 +00:00
docs: Syntax highlighting for mkdocs (#984)
* feat:forward context processors variables in context in ISOLATED mode provide context_processors_data property to Component to access those variables in Component * refactor: internalize RequestContext and pass HttpRequest internally * docs: document HttpRequest and context processors * docs: use djc_py code blocks for component definitions --------- Co-authored-by: Lilian Durey <dureylilian@gmail.com>
This commit is contained in:
parent
1f7e28db22
commit
314ec77d3d
26 changed files with 142 additions and 76 deletions
|
@ -105,7 +105,7 @@ For live examples, see the [Community examples](../../overview/community.md#comm
|
|||
|
||||
It's also a good idea to have a common prefix for your components, so they can be easily distinguished from users' components. In the example below, we use the prefix `my_` / `My`.
|
||||
|
||||
```py
|
||||
```djc_py
|
||||
from typing import Dict, NotRequired, Optional, Tuple, TypedDict
|
||||
|
||||
from django_components import Component, SlotFunc, register, types
|
||||
|
|
|
@ -106,7 +106,7 @@ Then navigate to these URLs:
|
|||
|
||||
### 1. Define document HTML
|
||||
|
||||
```py title="[root]/components/demo.py"
|
||||
```djc_py title="[root]/components/demo.py"
|
||||
from django_components import Component, types
|
||||
|
||||
# HTML into which a fragment will be loaded using HTMX
|
||||
|
@ -141,7 +141,7 @@ class MyPage(Component):
|
|||
|
||||
### 2. Define fragment HTML
|
||||
|
||||
```py title="[root]/components/demo.py"
|
||||
```djc_py title="[root]/components/demo.py"
|
||||
class Frag(Component):
|
||||
def get(self, request):
|
||||
return self.render_to_response(
|
||||
|
@ -184,7 +184,7 @@ urlpatterns = [
|
|||
|
||||
### 1. Define document HTML
|
||||
|
||||
```py title="[root]/components/demo.py"
|
||||
```djc_py title="[root]/components/demo.py"
|
||||
from django_components import Component, types
|
||||
|
||||
# HTML into which a fragment will be loaded using AlpineJS
|
||||
|
@ -225,7 +225,7 @@ class MyPage(Component):
|
|||
|
||||
### 2. Define fragment HTML
|
||||
|
||||
```py title="[root]/components/demo.py"
|
||||
```djc_py title="[root]/components/demo.py"
|
||||
class Frag(Component):
|
||||
def get(self, request):
|
||||
# IMPORTANT: Don't forget `type="fragment"`
|
||||
|
@ -281,7 +281,7 @@ urlpatterns = [
|
|||
|
||||
### 1. Define document HTML
|
||||
|
||||
```py title="[root]/components/demo.py"
|
||||
```djc_py title="[root]/components/demo.py"
|
||||
from django_components import Component, types
|
||||
|
||||
# HTML into which a fragment will be loaded using JS
|
||||
|
@ -321,7 +321,7 @@ class MyPage(Component):
|
|||
|
||||
### 2. Define fragment HTML
|
||||
|
||||
```py title="[root]/components/demo.py"
|
||||
```djc_py title="[root]/components/demo.py"
|
||||
class Frag(Component):
|
||||
def get(self, request):
|
||||
return self.render_to_response(
|
||||
|
|
|
@ -107,7 +107,7 @@ have all the keys that were passed to the `provide` tag.
|
|||
|
||||
## Full example
|
||||
|
||||
```py
|
||||
```djc_py
|
||||
@register("child")
|
||||
class ChildComponent(Component):
|
||||
template = """
|
||||
|
|
|
@ -27,7 +27,7 @@ the locations by inserting following Django template tags:
|
|||
|
||||
So if you have a component with JS and CSS:
|
||||
|
||||
```python
|
||||
```djc_py
|
||||
from django_components import Component, types
|
||||
|
||||
class MyButton(Component):
|
||||
|
|
|
@ -85,9 +85,9 @@ This has two modes:
|
|||
|
||||
Consider this example:
|
||||
|
||||
```python
|
||||
```djc_py
|
||||
class Outer(Component):
|
||||
template = \"\"\"
|
||||
template = """
|
||||
<div>
|
||||
{% component "inner" %}
|
||||
{% fill "content" %}
|
||||
|
@ -95,7 +95,7 @@ This has two modes:
|
|||
{% endfill %}
|
||||
{% endcomponent %}
|
||||
</div>
|
||||
\"\"\"
|
||||
"""
|
||||
```
|
||||
|
||||
- `"django"` - `my_var` has access to data from `get_context_data()` of both `Inner` and `Outer`.
|
||||
|
@ -108,7 +108,7 @@ This has two modes:
|
|||
|
||||
Given this template:
|
||||
|
||||
```python
|
||||
```djc_py
|
||||
@register("root_comp")
|
||||
class RootComp(Component):
|
||||
template = """
|
||||
|
@ -148,7 +148,7 @@ all the data defined in the outer layers, like the `{% with %}` tag.
|
|||
|
||||
Given this template:
|
||||
|
||||
```python
|
||||
```djc_py
|
||||
class RootComp(Component):
|
||||
template = """
|
||||
{% with cheese="feta" %}
|
||||
|
|
|
@ -19,7 +19,7 @@ Components can now be used as views:
|
|||
|
||||
Here's an example of a calendar component defined as a view:
|
||||
|
||||
```python
|
||||
```djc_py
|
||||
# In a file called [project root]/components/calendar.py
|
||||
from django_components import Component, ComponentView, register
|
||||
|
||||
|
|
|
@ -9,7 +9,7 @@ Components can be rendered outside of Django templates, calling them as regular
|
|||
|
||||
The component class defines `render` and `render_to_response` class methods. These methods accept positional args, kwargs, and slots, offering the same flexibility as the `{% component %}` tag:
|
||||
|
||||
```py
|
||||
```djc_py
|
||||
class SimpleComponent(Component):
|
||||
template = """
|
||||
{% load component_tags %}
|
||||
|
|
|
@ -28,7 +28,7 @@ HTML / JS / CSS with a component:
|
|||
|
||||
However, you can freely mix these for different languages:
|
||||
|
||||
```py
|
||||
```djc_py
|
||||
class MyTable(Component):
|
||||
template: types.django_html = """
|
||||
<div class="welcome">
|
||||
|
|
|
@ -256,7 +256,7 @@ Then:
|
|||
|
||||
## Full example for `html_attrs`
|
||||
|
||||
```py
|
||||
```djc_py
|
||||
@register("my_comp")
|
||||
class MyComp(Component):
|
||||
template: t.django_html = """
|
||||
|
|
|
@ -78,7 +78,7 @@ rendered = template.render(RequestContext(request, {}))
|
|||
|
||||
The data from context processors is automatically available within the component's template.
|
||||
|
||||
```python
|
||||
```djc_py
|
||||
class MyComponent(Component):
|
||||
template = """
|
||||
<div>
|
||||
|
|
|
@ -9,7 +9,7 @@ For example, here's the calendar component from
|
|||
the [Getting started](../../getting_started/your_first_component.md) tutorial,
|
||||
defined in a single file:
|
||||
|
||||
```python title="[project root]/components/calendar.py"
|
||||
```djc_py title="[project root]/components/calendar.py"
|
||||
from django_components import Component, register, types
|
||||
|
||||
@register("calendar")
|
||||
|
|
|
@ -469,7 +469,7 @@ _Added in version 0.76_:
|
|||
|
||||
Consider a component with slot(s). This component may do some processing on the inputs, and then use the processed variable in the slot's default template:
|
||||
|
||||
```py
|
||||
```djc_py
|
||||
@register("my_comp")
|
||||
class MyComp(Component):
|
||||
template = """
|
||||
|
@ -498,7 +498,7 @@ Using scoped slots consists of two steps:
|
|||
|
||||
To pass the data to the `slot` tag, simply pass them as keyword attributes (`key=value`):
|
||||
|
||||
```py
|
||||
```djc_py
|
||||
@register("my_comp")
|
||||
class MyComp(Component):
|
||||
template = """
|
||||
|
@ -649,14 +649,14 @@ So it's possible to define a `name` key on a dictionary, and then spread that on
|
|||
You can dynamically pass all slots to a child component. This is similar to
|
||||
[passing all slots in Vue](https://vue-land.github.io/faq/forwarding-slots#passing-all-slots):
|
||||
|
||||
```py
|
||||
```djc_py
|
||||
class MyTable(Component):
|
||||
def get_context_data(self, *args, **kwargs):
|
||||
return {
|
||||
"slots": self.input.slots,
|
||||
}
|
||||
|
||||
template: """
|
||||
template = """
|
||||
<div>
|
||||
{% component "child" %}
|
||||
{% for slot_name in slots %}
|
||||
|
|
|
@ -25,7 +25,7 @@ inheritance follows these rules:
|
|||
|
||||
For example:
|
||||
|
||||
```python
|
||||
```djc_py
|
||||
class BaseCard(Component):
|
||||
template = """
|
||||
<div class="card">
|
||||
|
@ -37,7 +37,7 @@ class BaseCard(Component):
|
|||
border: 1px solid gray;
|
||||
}
|
||||
"""
|
||||
js = "console.log('Base card loaded');"
|
||||
js = """console.log('Base card loaded');"""
|
||||
|
||||
# This class overrides parent's template, but inherits CSS and JS
|
||||
class SpecialCard(BaseCard):
|
||||
|
@ -94,7 +94,7 @@ All other attributes and methods (including the [`Component.View`](../../referen
|
|||
|
||||
For example:
|
||||
|
||||
```python
|
||||
```djc_py
|
||||
class BaseForm(Component):
|
||||
template = """
|
||||
<form>
|
||||
|
|
|
@ -202,7 +202,7 @@ of HTML attributes (usually called `attrs`) to pass to the underlying template.
|
|||
In such cases, we may want to define some HTML attributes statically, and other dynamically.
|
||||
But for that, we need to define this dictionary on Python side:
|
||||
|
||||
```py
|
||||
```djc_py
|
||||
@register("my_comp")
|
||||
class MyComp(Component):
|
||||
template = """
|
||||
|
@ -229,7 +229,7 @@ as component kwargs, so we can keep all the relevant information in the template
|
|||
we prefix the key with the name of the dict and `:`. So key `class` of input `attrs` becomes
|
||||
`attrs:class`. And our example becomes:
|
||||
|
||||
```py
|
||||
```djc_py
|
||||
@register("my_comp")
|
||||
class MyComp(Component):
|
||||
template = """
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue