mirror of
https://github.com/django-components/django-components.git
synced 2025-09-18 19:59:46 +00:00
refactor: remove docs for 3rd party libs
This commit is contained in:
parent
40c50cb900
commit
71850f6fea
6 changed files with 2 additions and 108 deletions
|
@ -1,5 +1,3 @@
|
|||
# `.nav.yml` is provided by https://lukasgeiter.github.io/mkdocs-awesome-nav
|
||||
nav:
|
||||
- Examples: overview.md
|
||||
- icons
|
||||
- HTMX: htmx
|
||||
|
|
|
@ -1,3 +0,0 @@
|
|||
# `.nav.yml` is provided by https://lukasgeiter.github.io/mkdocs-awesome-nav
|
||||
nav:
|
||||
- django-htmx-components: django-htmx-components.md
|
|
@ -1,32 +0,0 @@
|
|||
[`django-htmx-components`](https://github.com/iwanalabs/django-htmx-components) is a set of components for use with [htmx](https://htmx.org/).
|
||||
|
||||
They are meant to be copy-pasted into your project and customized to your needs.
|
||||
|
||||
They're designed to be as simple as possible, so you can easily understand how they work and modify them to your needs. They have very little styling, for the same reason.
|
||||
|
||||
## Installation
|
||||
|
||||
1. Install [Django](https://www.djangoproject.com/) and [htmx](https://htmx.org/).
|
||||
2. Install and set up [django-components](https://github.com/EmilStenstrom/django-components)
|
||||
3. Create a `urls.py` file in `components/` and add the following code:
|
||||
```python
|
||||
from django.urls import path
|
||||
urlpatterns = []
|
||||
```
|
||||
Then import this file in your project's `urls.py` file:
|
||||
```python
|
||||
from django.urls import path, include
|
||||
urlpatterns = [
|
||||
path('components/', include('components.urls')),
|
||||
]
|
||||
```
|
||||
This step simplifies adding URL patterns for your components and keeps them separate from your project's URL patterns. Then, adding a single-file component to your `components/urls.py` file is as easy as:
|
||||
```python
|
||||
from django.urls import path
|
||||
from components.mycomponent import MyComponent
|
||||
urlpatterns = [
|
||||
path('mycomponent/', MyComponent.as_view()),
|
||||
]
|
||||
```
|
||||
It will handle requests to `/components/mycomponent/` and render the component.
|
||||
4. Copy-paste the components you want to use into your `components/` folder. Add them to your `components/urls.py` file as described above.
|
|
@ -1,3 +0,0 @@
|
|||
# `.nav.yml` is provided by https://lukasgeiter.github.io/mkdocs-awesome-nav
|
||||
nav:
|
||||
- djc-heroicons: djc-heroicons.md
|
|
@ -1,66 +0,0 @@
|
|||
```sh
|
||||
pip install djc-heroicons
|
||||
```
|
||||
|
||||
[djc-heroicons](https://pypi.org/project/djc-heroicons/) adds an `Icon` component that renders an `<svg>` element with the icons from [HeroIcons.com](https://heroicons.com). This icon is accessible in Django templates as `{% component "icon" %}`.
|
||||
|
||||
Use the `name` kwarg to specify the icon name:
|
||||
|
||||
```django
|
||||
<div>
|
||||
Items:
|
||||
<ul>
|
||||
<li>
|
||||
{% component "icon" name="academic-cap" / %}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
```
|
||||
|
||||
By default the component renders the `"outline"` variant. To render the `"solid"` variant of the icon, set kwarg `variant` to `"solid"`:
|
||||
|
||||
```django
|
||||
{% component "icon" name="academic-cap" variant="solid" / %}
|
||||
```
|
||||
|
||||
Common changes like color, size, or stroke width can all be set directly on the component:
|
||||
|
||||
```django
|
||||
{% component "icon"
|
||||
name="academic-cap"
|
||||
size=48
|
||||
color="red"
|
||||
stroke_width=1.2
|
||||
/ %}
|
||||
```
|
||||
|
||||
If you need to pass attributes to the `<svg>` element, you can use the `attrs` kwarg, which accepts a dictionary:
|
||||
|
||||
```django
|
||||
{% component "icon"
|
||||
name="academic-cap"
|
||||
attrs:id="my-svg"
|
||||
attrs:class="p-4 mb-3"
|
||||
attrs:data-id="test-123"
|
||||
/ %}
|
||||
```
|
||||
|
||||
## Usage in Python
|
||||
|
||||
All of the above is possible also from within Python, by importing `Icon`:
|
||||
|
||||
```py
|
||||
from djc_heroicons import Icon
|
||||
|
||||
content = Icon.render(
|
||||
kwargs={
|
||||
"name": "academic-cap",
|
||||
"variant": "solid",
|
||||
"size": 48,
|
||||
"attrs": {
|
||||
"id": "my-svg",
|
||||
"class": "p-4 mb-3",
|
||||
},
|
||||
},
|
||||
)
|
||||
```
|
|
@ -7,8 +7,8 @@ If you have components that would be useful to others, open a pull request to ad
|
|||
|
||||
### Icons
|
||||
|
||||
- [djc-heroicons](./icons/djc-heroicons.md)
|
||||
- [djc-heroicons](https://pypi.org/project/djc-heroicons/) - Icons from HeroIcons.com for django-components.
|
||||
|
||||
### HTMX
|
||||
|
||||
- [django-htmx-components](./htmx/django-htmx-components.md)
|
||||
- [`django-htmx-components`](https://github.com/iwanalabs/django-htmx-components) - A set of components for use with [htmx](https://htmx.org/).
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue