gitea_admin/Styleguide
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add file upload pattern

Browse Source
This commit is contained in:
gitea_admin committed 2026-09-08 11:19:32 +02:00
1 parent 7b733e53d7
commit 4e5d1e32e8
7 files changed
+233
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

components/interactive-elements.html
+20
View File
@@ -847,7 +847,27 @@
</section>
<script src="../scripts/help-icon-overlays.js"></script>
<section id="component-file-input">
<p class="sg-preview-label">Component: File Input</p>
<div class="sg-form-preview-area">
<div class="sg-file-input" data-component="file-input">
<label class="sg-label" for="component-file-input-control">Dateien auswählen</label>
<p class="sg-file-input__description sg-body" id="component-file-input-description">Mehrere Dateien können ausgewählt werden.</p>
<input class="sg-file-input__control" id="component-file-input-control" type="file" multiple aria-describedby="component-file-input-description">
<button class="sg-interaction-element sg-button sg-button--active sg-file-input__trigger" type="button">Dateien auswählen</button>
</div>
</div>
</section>
<script>
document.querySelectorAll('[data-component="file-input"]').forEach((fileInput) => {
const input = fileInput.querySelector('.sg-file-input__control');
const trigger = fileInput.querySelector('.sg-file-input__trigger');
if (input && trigger) {
trigger.addEventListener('click', () => input.click());
}
});
document.querySelectorAll('.sg-mode-toggle:not(.sg-activation-mode-toggle)').forEach((toggle) => {
toggle.addEventListener('click', () => {
const nextState = toggle.dataset.active === 'relative' ? 'absolute' : 'relative';