Peace
/
BlazorRadzenPracs
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

typography

Browse Source
main
Peace 10 months ago
parent 3e2e592391
commit 9172b7980d
4 changed files with 85 additions and 2 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 2
      ComponentPractice/ComponentPractice.sln
  2. 3
      ComponentPractice/ComponentPractice/Components/App.razor
  3. 6
      ComponentPractice/ComponentPractice/Components/Layout/NavMenu.razor
  4. 76
      ComponentPractice/ComponentPractice/Components/Pages/Typo.razor

2
ComponentPractice/ComponentPractice.sln
Unescape View File

@ -3,7 +3,7 @@ Microsoft Visual Studio Solution File, Format Version 12.00
# Visual Studio Version 17
VisualStudioVersion = 17.10.34916.146
MinimumVisualStudioVersion = 10.0.40219.1
Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "ComponentPractice", "ComponentPractice\ComponentPractice.csproj", "{221B940B-EBFE-406E-BCB0-692A08E785FA}"
Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "ComponentPractice", "ComponentPractice\ComponentPractice.csproj", "{221B940B-EBFE-406E-BCB0-692A08E785FA}"
EndProject
Global
GlobalSection(SolutionConfigurationPlatforms) = preSolution

3
ComponentPractice/ComponentPractice/Components/App.razor
Unescape View File

@ -16,7 +16,8 @@
<body>
<Routes />
<script src="_framework/blazor.web.js"></script>
<script src="_content/Radzen.Blazor/Radzen.Blazor.js?v=@(typeof(Radzen.Colors).Assembly.GetName().Version)"></script>
<script src="_content/Radzen.Blazor/Radzen.Blazor.js"></script>
@* <script src="_content/Radzen.Blazor/Radzen.Blazor.js?v=@(typeof(Radzen.Colors).Assembly.GetName().Version)"></script> *@
</body>
</html>

6
ComponentPractice/ComponentPractice/Components/Layout/NavMenu.razor
Unescape View File

@ -25,6 +25,12 @@
<span class="bi bi-list-nested-nav-menu" aria-hidden="true"></span> Weather
</NavLink>
</div>
<div class="nav-item px-3">
<NavLink class="nav-link" href="typo">
<span class="bi" aria-hidden="true"></span> Typo
</NavLink>
</div>
</nav>
</div>

76
ComponentPractice/ComponentPractice/Components/Pages/Typo.razor
Unescape View File

@ -0,0 +1,76 @@
@page "/typo"
@rendermode RenderMode.InteractiveServer
<RadzenText TextStyle="TextStyle.H3">Text Style</RadzenText>
<div class="rz-p-12">
<RadzenText TextStyle="TextStyle.H1">Heading 1</RadzenText>
<RadzenText TextStyle="TextStyle.H2">Heading 2</RadzenText>
<RadzenText TextStyle="TextStyle.H3">Heading 3</RadzenText>
<RadzenText TextStyle="TextStyle.H4">Heading 4</RadzenText>
<RadzenText TextStyle="TextStyle.H5">Heading 5</RadzenText>
<RadzenText TextStyle="TextStyle.H6">Heading 6</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1">Subtitle 1</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle2">Subtitle 2</RadzenText>
<RadzenText TextStyle="TextStyle.Body1">
<strong>Body1</strong> This is body1
</RadzenText>
<RadzenText TextStyle="TextStyle.Body2">
<strong>Body2</strong> This is body2
</RadzenText>
<RadzenText TextStyle="TextStyle.Button">Button</RadzenText> <br />
<RadzenText TextStyle="TextStyle.Caption">Caption</RadzenText> <br />
<RadzenText TextStyle="TextStyle.Overline">Overline</RadzenText> <br />
</div>
<RadzenText TextStyle="TextStyle.H3">Text Align</RadzenText>
<RadzenStack Orientation="Orientation.Vertical" Gap="3rem" class="rz-p-12">
<RadzenText TextStyle="TextStyle.Body1" TextAlign="TextAlign.Center">
<strong>Center</strong> <br />
칼까지 매출액에 빨랫줄의 동쪽의, 수 나아가아, 노래가 단 깎는다 죽이다. 계속 풀고 때까지 무심하고 엉덩이에 날아가아요. 경적이 오지요, 또 매점의 지금 이곳에서 어제의 왕복의 한에 얼마에서 오르다. 죽으면 나타나아 마치 제한되어요 자금으로 여성이다 유물에 있는 실천할까 편하다. 말합니까 것 그렇어 낭만적 주제에게 방법의, 변화시킬 생물체를 좋다. 재료와 삼다 순경에 재채기다 즐기고, 대로 나다.
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" TextAlign="TextAlign.Left">
<strong>Left</strong> <br />
칼까지 매출액에 빨랫줄의 동쪽의, 수 나아가아, 노래가 단 깎는다 죽이다. 계속 풀고 때까지 무심하고 엉덩이에 날아가아요. 경적이 오지요, 또 매점의 지금 이곳에서 어제의 왕복의 한에 얼마에서 오르다. 죽으면 나타나아 마치 제한되어요 자금으로 여성이다 유물에 있는 실천할까 편하다. 말합니까 것 그렇어 낭만적 주제에게 방법의, 변화시킬 생물체를 좋다. 재료와 삼다 순경에 재채기다 즐기고, 대로 나다.
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" TextAlign="TextAlign.Right">
<strong>Right</strong> <br />
칼까지 매출액에 빨랫줄의 동쪽의, 수 나아가아, 노래가 단 깎는다 죽이다. 계속 풀고 때까지 무심하고 엉덩이에 날아가아요. 경적이 오지요, 또 매점의 지금 이곳에서 어제의 왕복의 한에 얼마에서 오르다. 죽으면 나타나아 마치 제한되어요 자금으로 여성이다 유물에 있는 실천할까 편하다. 말합니까 것 그렇어 낭만적 주제에게 방법의, 변화시킬 생물체를 좋다. 재료와 삼다 순경에 재채기다 즐기고, 대로 나다.
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" TextAlign="TextAlign.End">
<strong>End</strong> <br />
칼까지 매출액에 빨랫줄의 동쪽의, 수 나아가아, 노래가 단 깎는다 죽이다. 계속 풀고 때까지 무심하고 엉덩이에 날아가아요. 경적이 오지요, 또 매점의 지금 이곳에서 어제의 왕복의 한에 얼마에서 오르다. 죽으면 나타나아 마치 제한되어요 자금으로 여성이다 유물에 있는 실천할까 편하다. 말합니까 것 그렇어 낭만적 주제에게 방법의, 변화시킬 생물체를 좋다. 재료와 삼다 순경에 재채기다 즐기고, 대로 나다.
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" TextAlign="TextAlign.Justify">
<strong>Justify</strong> <br />
칼까지 매출액에 빨랫줄의 동쪽의, 수 나아가아, 노래가 단 깎는다 죽이다. 계속 풀고 때까지 무심하고 엉덩이에 날아가아요. 경적이 오지요, 또 매점의 지금 이곳에서 어제의 왕복의 한에 얼마에서 오르다. 죽으면 나타나아 마치 제한되어요 자금으로 여성이다 유물에 있는 실천할까 편하다. 말합니까 것 그렇어 낭만적 주제에게 방법의, 변화시킬 생물체를 좋다. 재료와 삼다 순경에 재채기다 즐기고, 대로 나다.
</RadzenText>
</RadzenStack>
<RadzenText TextStyle="TextStyle.H3">Text Colors</RadzenText>
<RadzenStack Orientation="Orientation.Horizontal" JustifyContent="JustifyContent.Center" AlignItems="AlignItems.Center" Gap="3rem" class="rz-p-12">
<span style="color: var(--rz-text-color)">--rz-text-color</span>
<span style="color: var(--rz-text-secondary-color)">--rz-text-secondary-color</span>
<span style="color: var(--rz-text-tertiary-color)">--rz-text-tertiary-color</span>
<span style="color: var(--rz-text-disabled-color)">--rz-text-disabled-color</span>
<div class="rz-background-color-black rz-p-4">
<span style="color: var(--rz-text-contrast-color)">--rz-text-contrast-color</span>
</div>
</RadzenStack>
<RadzenText TextStyle="TextStyle.H3">Text Wrap</RadzenText>
<RadzenStack Orientation="Orientation.Vertical" JustifyContent="JustifyContent.Center" AlignItems="AlignItems.Center" Gap="2rem" class="rz-p-12">
<div class="rz-text-wrap" style="width: 100px; background-color: rgba(0,0,0,.2)">
This text warps.
</div>
<div class="rz-text-nowrap" style="width: 100px; background-color: rgba(0,0,0,.2)">
This text does not wrap.
</div>
<div class="rz-text-truncate" style="width: 100px; background-color: rgba(0,0,0,.2)">
This text is truncated.
</div>
</RadzenStack>
@code {
}
Write Preview
Loading…
Cancel
Save