Search in files

Wyniki wyszukiwania w plikach, pogrupowane według pliku z licznikiem, każde trafienie z numerem linii i zaznaczonym dopasowaniem. Umieść je w TreeView; Expand all i Collapse all sterują expandedKeys.

SearchFileRow
SearchHitRow

PodglądLink do sekcji Podgląd

Na żywo we wszystkich trzech motywach. Wszystko tutaj jest interaktywne.

Dzień, podgląd: Search in files

4 matches in 3 files

QuickOpen.tsxsrc/search

14import { useFilter } from 'react-aria-components'

58const { contains } = useFilter({ sensitivity: "base" })

CommandPalette.tsxsrc/search

7import { Autocomplete, useFilter } from 'react-aria-components'

filters.tspackages/desktop/src/renderer/views/settings/a-very-long-folder-name

203… right so the lead is cut with an ellipsis: useFilter(options)

Noc, podgląd: Search in files

4 matches in 3 files

QuickOpen.tsxsrc/search

14import { useFilter } from 'react-aria-components'

58const { contains } = useFilter({ sensitivity: "base" })

CommandPalette.tsxsrc/search

7import { Autocomplete, useFilter } from 'react-aria-components'

filters.tspackages/desktop/src/renderer/views/settings/a-very-long-folder-name

203… right so the lead is cut with an ellipsis: useFilter(options)

Wysoki kontrast, podgląd: Search in files

4 matches in 3 files

QuickOpen.tsxsrc/search

14import { useFilter } from 'react-aria-components'

58const { contains } = useFilter({ sensitivity: "base" })

CommandPalette.tsxsrc/search

7import { Autocomplete, useFilter } from 'react-aria-components'

filters.tspackages/desktop/src/renderer/views/settings/a-very-long-folder-name

203… right so the lead is cut with an ellipsis: useFilter(options)

UżycieLink do sekcji Użycie

tsx

import { SearchFileRow, SearchHitRow } from '@skribly/ui/code'

tsx

<TreeView aria-label={t('search.results')} expandedKeys={expanded} onExpandedChange={setExpanded}>
  {files.map((file) => (
    <SearchFileRow key={file.path} id={file.path} path={file.path} count={file.hits.length}
      countLabel={t('search.matches', { count: file.hits.length })}>
      {file.hits.map((hit) => (
        <SearchHitRow key={hit.id} id={hit.id} line={hit.line} lineLabel={t('search.line')}
          text={hit.text} matchStart={hit.at} matchLength={hit.length} onAction={() => open(hit)} />
      ))}
    </SearchFileRow>
  ))}
</TreeView>

Każda etykieta jest propem, więc aplikacja przekazuje własne słowa we własnym języku. Zobacz zasadę brak wbudowanego tekstu.

DostępnośćLink do sekcji Dostępność

Drzewo: strzałka w górę i w dół przesuwa, strzałka w prawo otwiera plik, a w lewo go zamyka albo przechodzi do pliku, Enter otwiera trafienie, a wpisywanie przeskakuje do pliku.
Liczba jest odczytywana słowami.
Dopasowanie jest podbarwione, pogrubione i podkreślone, więc widać je bez koloru; długi początek jest ucinany od początku, aby trafienie zostało w widoku przy powiększeniu 400%.

Ten przykład przechodzi przez axe we wszystkich trzech motywach przy każdym uruchomieniu testów. Zobacz, co sprawdzają testy.